Merge pull request #14 from RIT-SWEN-261-02/funding_basketv2.1

funding-basket merge

9 files changed, 206 insertions, 190 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 9574de3..24b3e2d 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -4,13 +4,13 @@ import { UsersService } from '../../services/users.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
 import { BehaviorSubject, catchError, of } from 'rxjs';
-import {NeedListComponent} from '../need-list/need-list.component';
+import { NeedListComponent } from '../need-list/need-list.component';
 
 @Component({
-  selector: 'app-cupboard',
-  standalone: false,
-  templateUrl: './cupboard.component.html',
-  styleUrl: './cupboard.component.css'
+    selector: 'app-cupboard',
+    standalone: false,
+    templateUrl: './cupboard.component.html',
+    styleUrl: './cupboard.component.css'
 })
 
 export class CupboardComponent implements OnInit {
@@ -23,140 +23,152 @@ export class CupboardComponent implements OnInit {
     constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
 
     ngOnInit(): void {
-      this.cupboardService.getNeeds().subscribe(n => this.needs = n);
-      this.close();
-      this.openmenu();
-
-      if (this.isManager()) {
-        console.log("Admin view of Cupboard");
-      } else {
-        console.log("Limited helper view of Cupboard");
-      }
+        this.cupboardService.getNeeds().subscribe(n => this.needs = n);
+        this.close();
+        this.openmenu();
+
+        if (this.isManager()) {
+            console.log("Admin view of Cupboard");
+        } else {
+            console.log("Limited helper view of Cupboard");
+        }
     }
 
     selectedNeed: any = {
-      name: '',
-      id: null,
-      maxGoal: null,
-      type: ''
+        name: '',
+        id: null,
+        maxGoal: null,
+        type: ''
     };
     selectedNeedId: number | null = null;
 
     private hideElement(element: any) {
-      if (element){
-        element.style.visibility = 'hidden';
-        element.style.position = 'absolute';
-      }
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.position = 'absolute';
+        }
     }
 
     private showElement(element: any) {
-      if (element){
-        element.style.visibility = 'visible';
-        element.style.position = 'relative';
-      }
+        if (element) {
+            element.style.visibility = 'visible';
+            element.style.position = 'relative';
+        }
     }
 
     openmenu() {
-      const menuElement = document.getElementById('menu');
-      this.showElement(menuElement);
+        const menuElement = document.getElementById('menu');
+        this.showElement(menuElement);
     }
 
     opencreate() {
-      this.close();
-      this.showElement(document.getElementById('create-form'));
+        this.close();
+        this.showElement(document.getElementById('create-form'));
     }
 
     openupdate() {
-      this.close();
-      this.showElement(document.getElementById('update-form'));
+        this.close();
+        this.showElement(document.getElementById('update-form'));
     }
 
     back() {
-      this.close();
-      this.openmenu();
+        this.close();
+        this.openmenu();
     }
 
     close() {
-      this.hideElement(document.getElementById('create-form'));
-      this.hideElement(document.getElementById('destroy-form'));
-      this.hideElement(document.getElementById('menu'));
-      this.hideElement(document.getElementById('update-form'));
+        this.hideElement(document.getElementById('create-form'));
+        this.hideElement(document.getElementById('destroy-form'));
+        this.hideElement(document.getElementById('menu'));
+        this.hideElement(document.getElementById('update-form'));
     }
 
     populateForm(need: any): void {
-      this.selectedNeed = { ...need };
+        this.selectedNeed = { ...need };
     }
 
     isManager() {
-      const type = this.usersService.getCurrentUser()?.type;
-      return type === ("MANAGER" as unknown as userType);
+        const type = this.usersService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
     }
 
     update(form: any) {
-      console.log(form);
-      const need: Need = {
-        name: form.name,
-        id: form.id, //system will control this
-        maxGoal: form.maxGoal,
-        type: GoalType[form.type as keyof typeof GoalType],
-        filterAttributes: [],
-        current: 0
-      };
-      console.log("need:", need);
-      console.log(need.id, need, "need updated");
-      this.cupboardService.updateNeed(need.id, need)
-      .pipe(catchError((ex, r) => {
-              this.statusText.next("Max goal must be greater than 0 " + friendlyHttpStatus[ex.status])
-              return of()
-          }))
-      .subscribe(
-        (result) => {
-          if (result) {
-            console.log("need updated successfully");
-            this.needList?.refresh()
-          } else {
-            console.log("need update failed");
-          }
-        }
-
-      );
+        console.log(form);
+        const need: Need = {
+            name: form.name,
+            id: form.id, //system will control this
+            maxGoal: form.maxGoal,
+            type: GoalType[form.type as keyof typeof GoalType],
+            filterAttributes: [],
+            current: 0
+        };
+        console.log("need:", need);
+        console.log(need.id, need, "need updated");
+        this.cupboardService.updateNeed(need.id, need)
+            .pipe(catchError((ex, r) => {
+                if (ex.status == 500) {
+                    this.statusText.next("Fields cannot be blank");
+                } else if (ex.status == 400) {
+                    this.statusText.next("Goal must be greater than 0");
+                } else {
+                    this.statusText.next("Error on creating need");
+                }
+                return of()
+            }))
+            .subscribe(
+                (result) => {
+                    if (result) {
+                        console.log("need updated successfully");
+                        this.needList?.refresh()
+                    } else {
+                        console.log("need update failed");
+                    }
+                }
+
+            );
     }
 
     submit(form: any) {
-      const need: Need = {
-        name: form.name,
-        id: 0,
-        maxGoal: form.maxGoal,
-        type: form.type,
-        filterAttributes: [],
-        current: 0
-      };
-      console.log("need:", need);
-      console.log("form submitted. creating need: ", need);
-      this.cupboardService.createNeed(need)
-      .pipe(catchError((ex, r) => {
-              this.statusText.next("Max goal must be greater than 0 " + friendlyHttpStatus[ex.status])
-              return of()
-          }))
-      .subscribe(
-        (result) => {
-          if (result) {
-            console.log("need created successfully");
-              this.needList?.refresh()
-          } else {
-            console.log("need creation failed");
-          }
-        }
-
-      );
+        const need: Need = {
+            name: form.name,
+            id: 0,
+            maxGoal: form.maxGoal,
+            type: form.type,
+            filterAttributes: [],
+            current: 0
+        };
+        console.log("need:", need);
+        console.log("form submitted. creating need: ", need);
+        this.cupboardService.createNeed(need)
+            .pipe(catchError((ex, r) => {
+                if (ex.status == 500) {
+                    this.statusText.next("Fields cannot be blank");
+                } else if (ex.status == 400) {
+                    this.statusText.next("Goal must be greater than 0");
+                } else {
+                    this.statusText.next("Error on creating need");
+                }
+                return of()
+            }))
+            .subscribe(
+                (result) => {
+                    if (result) {
+                        console.log("need created successfully");
+                        this.needList?.refresh()
+                    } else {
+                        console.log("need creation failed");
+                    }
+                }
+
+            );
     }
 
     destroy() {
 
     }
-  }
+}
 
-let friendlyHttpStatus: {[key: number]: string} = {
+let friendlyHttpStatus: { [key: number]: string } = {
     200: 'OK',
     201: 'Created',
     202: 'Accepted',
@@ -191,6 +203,7 @@ let friendlyHttpStatus: {[key: number]: string} = {
     416: 'Requested Range Not Satisfiable',
     417: 'Expectation Failed',
     418: 'I\'m a teapot',
+    422: 'Unprocessable Entity',
     429: 'Too Many Requests',
     500: 'Internal Server Error',
     501: 'Not Implemented',
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index fc8baf0..a1151b7 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -1,5 +1,4 @@
 
 <h1>Dashboard</h1>
-<input type="button" value="Back to Login" (click)="back()">
 <app-cupboard></app-cupboard>
-<app-funding-basket></app-funding-basket>
\ No newline at end of file
+<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 48c5894..b9faefa 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { UsersService } from '../../services/users.service';
+import { userType } from '../../models/User';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,9 +9,13 @@ import { Component } from '@angular/core';
   styleUrl: './dashboard.component.css'
 })
 export class DashboardComponent {
-    constructor() {}
+    constructor(
+      protected usersService: UsersService,
+    ) {}
+
+    isManager() {
+        const type = this.usersService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+      }
 
-    back() {
-      window.history.back();
-    }
 }
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index e69de29..3dec496 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -0,0 +1,7 @@
+td, p {
+    border: 2px solid #000;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+
+}
\ No newline at end of file
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 0a880af..504e694 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
@@ -2,33 +2,30 @@
 
 <div id="needCount">
     <label for="needCount">Needs in Basket:</label>
-    <span>{{ needCount }}</span>
+    <span>{{ this.usersService.getBasket().getValue().length }}</span>
 </div>
 
-<div *ngIf="isBasketEmpty">
+<div *ngIf="this.usersService.getBasket().getValue().length == 0">
     <h2>There are no needs in the basket</h2>
 </div>
 
-<table class="needs" *ngIf="!isBasketEmpty">
+<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">
     <thead>
         <tr>
             <th class="need"></th>
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let need of basket">
+        <tr *ngFor="let need of usersService.getBasket().getValue()">
             <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>
+                <a routerLink="/need/{{need.id}}">{{need.name}}</a>
+                <p>Goal: {{need.maxGoal}}</p>
+                <p>Current: {{(need.current).toFixed(2)}}</p>
+                <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>
                 <br>
                 <div>
-                <button type="button" class="removeNeed" title="delete need"
-                (click)="removeNeed(need)">Remove Need</button>
+                    <button type="button" class="removeNeed" title="delete need"
+                    (click)="this.usersService.removeNeed(need.id)">Remove Need</button>
                 </div>
             </td>
         </tr>
@@ -36,6 +33,7 @@
 </table>
 <br>
 <div>
-    <button type="submit" class="checkout" title="checkout"
-    (click)="checkout()">Checkout</button>
+    <p *ngIf="!isValid">Invalid input in funding basket!</p>
+    <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button>
+    <span *ngIf="statusText">{{statusText | async}}</span>
 </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 dd68c0c..e654711 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,10 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} 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';
 import { CupboardService } from '../../services/cupboard.service';
+import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs';
 
 @Component({
     selector: 'app-funding-basket',
@@ -12,80 +13,68 @@ import { CupboardService } from '../../services/cupboard.service';
     templateUrl: './funding-basket.component.html',
     styleUrl: './funding-basket.component.css'
 })
-export class FundingBasketComponent implements
-  OnInit {
-  user!: User;
-  needs: Need[] = [];
-  basket: Need[] = [];
-  needCount = 0;
-  need_quantity: {[key: number]: number} = {};
+export class FundingBasketComponent implements OnInit {
+  statusText: any;
 
   constructor(
     private router: Router,
-      private cupboardService: CupboardService, private usersService: UsersService
+    protected cupboardService: CupboardService, 
+    protected usersService: UsersService
   ) {}
 
+  @ViewChild("contribution") contribution?: Input;
+  @Input() isValid: boolean = true;
+
+  // this is for login rerouting
   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)
-    }
+    this.usersService.refreshBasket();
+    // this.usersService.removeNeed(); <- call this to remove
+  }
 
-    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++;
+  async checkout() {
+    this.isValid = true;
+    for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+      let contribution = c as HTMLInputElement;
+      contribution.setAttribute("style","");
+      if ( contribution.value == '' || contribution.valueAsNumber <= 0) {
+        this.isValid = false;
+        contribution.setAttribute("style","color: #ff0000");
+      }
     }
-
-    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--;
-        }
+    if (this.isValid) {
+      for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+        let contribution = c as HTMLInputElement;
+        let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
+        need.current +=+ contribution.value;
+        this.usersService.removeNeed(+need.id);
+        this.cupboardService.updateNeed(need.id, need)
+            .pipe(catchError((ex, r) => {
+                if (ex.status == 500) {
+                    this.statusText.next('Fields cannot be blank');
+                } else if (ex.status == 400) {
+                    this.statusText.next('Goal must be greater than 0');
+                } else {
+                    this.statusText.next('Error on creating need');
+                }
+                return new Observable<string>();
+            }))
+            .subscribe((result) => {
+                if (result) {
+                    console.log('need updated successfully');
+                    //this.needList?.refresh()
+                } else {
+                    console.log('need update failed');
+                }
+            });
+      }
     }
+  }
 
-    removeAllNeeds(): void {
-        this.basket.forEach(need => {
-            this.need_quantity = [];
-        });
-        this.basket = [];
-        this.needCount = 0;
-    }
 
-    isBasketEmpty(): boolean {
-        return this.needCount === 0;
-    }
 
-    checkout(): void {
-        this.removeAllNeeds();
-    }
 }
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 4a67dfa..36c12d0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -24,5 +24,5 @@
         {{need.name}}
     </a>
     <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
-    <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
+    <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
 </li>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index e1c0de1..25f05d6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -105,19 +105,22 @@ export class NeedListComponent {
     return type === ("HELPER" as unknown as userType);
   }
 
-  add(need: number) {
+  add(need: Need) {
     const currentUser = this.usersService.getCurrentUser();
+    //console.log("get current user in angular:", currentUser)
     if (currentUser) {
-      this.usersService.updateUser(currentUser.username, currentUser).subscribe(() => {
-        const currentUser = this.usersService.getCurrentUser();
-        if (currentUser && currentUser.basket) {
-          currentUser.basket.push(need);
-          console.log("added to basket");
-        }
-        error: (err: any) => {
-          console.error(err);
-        }
-      });
+      if (!currentUser.basket.includes(need.id)) {
+        currentUser.basket.push(need.id);
+        this.usersService.updateUser(currentUser).subscribe(() => {
+          this.usersService.refreshBasket();
+          error: (err: any) => {
+            console.error(err);
+          }
+        });
+      } else {
+        window.alert("This need is already in your basket!")
+      }
+      
 
     }
 
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 8234ac7..90fd459 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,3 +1,4 @@
+<button routerLink="/dashboard">Back to dashboard</button>
 <h1>Viewing Need: {{need?.name}}</h1>
 <a>internal id: {{need?.id}}</a>
 <div style="display: flex; column-gap: 6px;">
@@ -18,4 +19,4 @@
 
 <p>Goal: {{need?.maxGoal}}</p>
 <p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)}}%</strong> complete!</p>
\ No newline at end of file
+<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file