part of funding basket ts and html

2 files changed, 118 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 3fb2b5b..0a880af 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -1 +1,41 @@
-<p>funding-basket works!</p>
+<h1>Funding Basket</h1>
+
+<div id="needCount">
+    <label for="needCount">Needs in Basket:</label>
+    <span>{{ needCount }}</span>
+</div>
+
+<div *ngIf="isBasketEmpty">
+    <h2>There are no needs in the basket</h2>
+</div>
+
+<table class="needs" *ngIf="!isBasketEmpty">
+    <thead>
+        <tr>
+            <th class="need"></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let need of basket">
+            <td>
+                <a routerLink="/need/{{need.id}}">
+                    {{need.name}}
+                </a>
+                <div>
+                <button type="button" class="addNeed" title="add need"
+                (click)="addNeed(need)">Add Need</button>
+                </div>
+                <br>
+                <div>
+                <button type="button" class="removeNeed" title="delete need"
+                (click)="removeNeed(need)">Remove Need</button>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<br>
+<div>
+    <button type="submit" class="checkout" title="checkout"
+    (click)="checkout()">Checkout</button>
+</div>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 8b12306..1dcebc5 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -1,4 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {User} from '../../models/User';
+import { UsersService } from '../../services/users.service';
+import { Need } from '../../models/Need';
+import { NeedListComponent } from '../need-list/need-list.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-funding-basket',
@@ -6,6 +11,76 @@ import { Component } from '@angular/core';
   templateUrl: './funding-basket.component.html',
   styleUrl: './funding-basket.component.css'
 })
-export class FundingBasketComponent {
+export class FundingBasketComponent implements
+  OnInit {
+  user!: User;
+  basket: Need[] = [];
+  needCount = 0;
+  need_quantity: {[key: number]: number} = {};
 
+  constructor(
+    private router: Router,
+      private usersService: UsersService
+  ) {}
+    
+  ngOnInit(): void {
+    if (!this.usersService.getCurrentUser()) {
+      this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+      return;
+    }
+    this.usersService.getCurrentUser()?.subscribe(user => {
+      this.user = user;
+      this.getBasketNeeds();
+    });
+  }
+
+  getBasketNeeds(): void {
+    if (this.user && this.user.cupboard) {
+      this.user.cupboard.forEach(need => {
+        if (this.isInBasket(need)){
+          this.basket.push(need);
+        }
+      });
+    }
+  }
+
+  isInBasket(need: Need): boolean {
+    return this.basket.some(n => n.id == need.id);
+  }
+  
+  addNeed(need: Need, quantity: number=1): void {
+    if (this.user && !this.isInBasket(need)) {
+      this.basket.push(need);
+      this.need_quantity[need.id] = quantity;
+    } if (this.isInBasket(need)) {
+        this.need_quantity[need.id] += quantity;
+    }
+      this.needCount++;
+    }
+  
+  removeNeed(need: Need, quantity:number=1): void {
+    if (this.user && this.isInBasket(need)) {
+      this.need_quantity[need.id] -= quantity;
+      if (this.need_quantity[need.id] === 0) {
+        this.basket = this.basket.filter(n => need.id !== n.id);
+      }
+      this.needCount--;
+    }
+  }
+
+  removeAllNeeds(): void {
+    this.basket.forEach(need => {
+      this.need_quantity = [];
+    });
+    this.basket = [];
+    this.needCount = 0;
+  }
+
+  isBasketEmpty(): boolean {
+    return this.needCount === 0;
+  }
+
+  checkout(): void {
+    this.removeAllNeeds();
+  }
 }