2 files changed, 124 insertions, 16 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 c44aa27..dd68c0c 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,23 +1,91 @@
 import {Component, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {UsersService} from '../../services/users.service';
+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';
+import { CupboardService } from '../../services/cupboard.service';
 
 @Component({
-  selector: 'app-funding-basket',
-  standalone: false,
-  templateUrl: './funding-basket.component.html',
-  styleUrl: './funding-basket.component.css'
+    selector: 'app-funding-basket',
+    standalone: false,
+    templateUrl: './funding-basket.component.html',
+    styleUrl: './funding-basket.component.css'
 })
-export class FundingBasketComponent implements OnInit{
-    constructor(
-       private router: Router,
-       private userService: UsersService
-    ) {}
-
-    ngOnInit() {
-        if (!this.userService.getCurrentUser()) {
-            this.router.navigate(['/login'], {queryParams: {redir: this.router.url}})
+export class FundingBasketComponent implements
+  OnInit {
+  user!: User;
+  needs: Need[] = [];
+  basket: Need[] = [];
+  needCount = 0;
+  need_quantity: {[key: number]: number} = {};
+
+  constructor(
+    private router: Router,
+      private cupboardService: CupboardService, private usersService: UsersService
+  ) {}
+
+  ngOnInit(): void {
+    if (!this.usersService.getCurrentUser()) {
+      this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+      return;
+    }
+    this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+    const currentUser = this.usersService.getCurrentUser();
+    if (currentUser) {
+      this.user = currentUser;
+    }
+    this.getBasketNeeds();
+  }
+
+    getBasketNeeds(): void {
+        if (this.user && this.user.basket) {
+            this.user.basket.forEach(need => {
+                // if (this.isInBasket(need)) {
+                //     this.basket.push(need);
+                // }
+            });
         }
     }
 
+    isInBasket(need: Need): boolean {
+        return this.basket.includes(need)
+    }
+
+    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();
+    }
 }