Merge branch 'main' into light-mode

# Conflicts:
#	ufund-ui/src/styles.css

12 files changed, 64 insertions, 35 deletions

diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index 233096a..20e1676 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -21,6 +21,12 @@
             <span>Most fulfilled needs</span>
             <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list>
         </div>
+        <div class="listCard">
+            <span>Total physical contributions</span>
+            <ul>
+                <li id="physicalContent" *ngFor="let need of physicalTotal">{{need}} </li>
+            </ul>
+        </div>
 
     } @else {
         <h1>Unauthorized</h1>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 2ab4db2..b73be44 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -16,10 +16,11 @@ import {userType} from '../../models/User';
 export class DashboardComponent implements OnInit{
 
     protected count = new BehaviorSubject<number | undefined>(undefined)
-    protected totalDonations = new BehaviorSubject<number | undefined>(undefined)
+    protected totalDonations = new BehaviorSubject<String | undefined>(undefined)
     protected totalNeeds = new BehaviorSubject<number | undefined>(undefined)
     protected fulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined)
     protected mostFulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined)
+    protected physicalTotal: string[] = []
 
     constructor(
         protected authService: AuthService,
@@ -30,15 +31,20 @@ export class DashboardComponent implements OnInit{
 
     ngOnInit() {
         this.userService.getCount().subscribe(count => this.count.next(count))
+        this.physicalTotal = []
         this.cupboardService.getNeeds().subscribe(needs => {
             let totalValue = 0
             for (let need of needs) {
                 if (need.type === GoalType.MONETARY) {
                     totalValue += need.current
-                    this.totalDonations.next(totalValue)
+                    this.totalDonations.next(totalValue.toLocaleString())
+                } else {
+                    this.physicalTotal.push(need.name + ": " + need.current)
                 }
 
             }
+
+            this.physicalTotal.sort((a, b) => a < b ? -1 : 1);
             this.fulfilledNeeds.next(needs.filter(a => ((a.current / a.maxGoal)) >= 1))
             needs.sort((a, b) => b.current/b.maxGoal - a.current/a.maxGoal)
 
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 4764b0f..cff2bbe 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
@@ -84,7 +84,12 @@
 #footer {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: start;
     gap: 20px;
     margin-bottom: 10px;
 }
+
+#totals {
+    display: flex;
+    flex-direction: column;
+}
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 7158194..fa17b10 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
@@ -3,16 +3,21 @@
         <h1>Funding Basket</h1>
         <ng-template [ngIf]="(usersService.getBasket() | async)?.length">
             <ng-template let-need #NLActions>
-                <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="resetColor($event)">
+                <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="onInput($event)">
                 <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)">
                     <span class="icon">delete</span>Remove from Basket
                 </button>
             </ng-template>
-            <app-need-list [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/>
+            <app-need-list [itemsPerPage]="Infinity" [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/>
             <br>
             <div id="footer">
                 <button class="button2" title="checkout" (click)="checkout()">Checkout</button>
-                <span id="running-total">Your current running total is: ${{runningTotal | async}}</span>
+                <div id="totals">
+                    <ul>
+                        <li id="running-total">Your current running total is: ${{runningTotal | async}}</li>
+                        <li id="physicalNeeds" *ngFor="let need of physicalTotal">{{need}}</li>
+                    </ul>
+                </div>
             </div>
         </ng-template>
         <div *ngIf="!usersService.getBasket().getValue().length">
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 78ce958..920a7ef 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
@@ -24,7 +24,8 @@ export class FundingBasketComponent implements OnInit {
         private toastService: ToastsService
     ) {}
 
-    public runningTotal = new BehaviorSubject(0)
+    protected runningTotal = new BehaviorSubject(0)
+    protected physicalTotal: string[] = []
     @ViewChild("contribution") contribution?: Input;
 
     ngOnInit(): void {
@@ -36,6 +37,9 @@ export class FundingBasketComponent implements OnInit {
         let order: { needID: number, quantity: number }[] = []
         let isNotValid = false
 
+        this.runningTotal.next(0);
+        this.physicalTotal = []
+
         for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) {
             if (contribution.value == '' || contribution.valueAsNumber <= 0) {
                 isNotValid = true
@@ -60,21 +64,28 @@ export class FundingBasketComponent implements OnInit {
         this.toastService.sendToast(ToastType.INFO, "Checkout successful");
     }
 
-    resetColor(ev: any) {
+    onInput(ev: any) {
         let total = 0
         this.runningTotal.next(total);
+        this.physicalTotal = []
         for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) {
             this.cupboardService.getNeed(+contribution.id).subscribe(need => {
                 if (contribution.value != '' && need.type != GoalType.PHYSICAL) {
                     total += contribution.valueAsNumber
+                } else if (contribution.value != '' && need.type == GoalType.PHYSICAL) {
+                    this.physicalTotal.push(need.name + ": " + contribution.value)
                 }
                 this.runningTotal.next(total);
+
             })
         }
 
+        this.physicalTotal.sort((a, b) => a < b ? -1 : 1);
+
         (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset")
     }
 
     protected readonly of = of;
     protected readonly userType = userType;
+    protected readonly Infinity = Infinity;
 }
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
index 67f2094..3bc8127 100644
--- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -18,7 +18,8 @@
     /*padding: 10px;*/
     gap: 10px;
     justify-content: start;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: clip;
 }
 
 .needEntry {
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
index 2d04510..211ee17 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.css
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -49,3 +49,8 @@ textarea {
 label {
     padding: 3px;
 }
+
+
+.red {
+    color: red;
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
index ed4bfb3..f7eec63 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.html
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -3,23 +3,23 @@
     <h2>{{this.mode}} Need</h2>
     <form #updateForm="ngForm" id="update-form" (ngSubmit)="submit(updateForm.value)">
         <div>
-            <span>Name:</span>
+            <span>Name <span class="red">*Required</span></span>
             <input type="text" name="name" [(ngModel)]="needCopy.name">
         </div>
         <div>
-            <span>Image:</span>
+            <span>Image</span>
             <input type="text" name="image" [(ngModel)]="needCopy.image">
         </div>
         <div>
-            <span>Location:</span>
+            <span>Location</span>
             <input type="text" name="location" [(ngModel)]="needCopy.location">
         </div>
         <div>
-            <span>Max Goal:</span>
+            <span>Max Goal <span class="red">*Required</span></span>
             <input type="number" name="maxGoal" [(ngModel)]="needCopy.maxGoal">
         </div>
         <div>
-            <span>Type:</span>
+            <span>Type <span class="red">*Required</span></span>
             <label>
                 <input type="radio" name="type" value="MONETARY" [(ngModel)]="needCopy.type">
                 Monetary
@@ -30,14 +30,14 @@
             </label>
         </div>
         <div>
-            <span>Urgency:</span>
+            <span>Urgency</span>
             <label>
                 <input type="checkbox" name="urgent" [(ngModel)]="needCopy.urgent">
                 Urgent
             </label>
         </div>
         <div>
-            <span>Description:</span>
+            <span>Description</span>
             <textarea name="description" [(ngModel)]="needCopy.description"></textarea>
         </div>
         <input type="submit" value="Submit">
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
index abfa543..3c42c34 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.ts
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -39,7 +39,7 @@ export class NeedEditComponent implements OnChanges {
             id: this.needCopy.id, //system will control this
             maxGoal: form.maxGoal,
             type: GoalType[form.type as keyof typeof GoalType],
-            urgent: form.urgent,
+            urgent: form.urgent ?? false,
             filterAttributes: [],
             current: 0,
             description: form.description
@@ -53,15 +53,10 @@ export class NeedEditComponent implements OnChanges {
     }
 
     updateNeed(need: Need) {
+        need.current = this.need?.current ?? 0
         this.cupboardService.updateNeed(need.id, need)
             .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
-                } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.ERROR, ex.error);
-                } else {
-                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
-                }
+                this.toastService.sendToast(ToastType.ERROR, ex.error);
                 return of()
             }))
             .subscribe(
@@ -82,13 +77,7 @@ export class NeedEditComponent implements OnChanges {
     createNeed(need: Need) {
         this.cupboardService.createNeed(need)
             .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
-                } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.ERROR, ex.error);
-                } else {
-                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
-                }
+                this.toastService.sendToast(ToastType.ERROR, ex.error);
                 return of()
             }))
             .subscribe(
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 0e5b762..99c9f97 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
@@ -21,7 +21,7 @@
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
 
-                <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+                <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}} / {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal.toLocaleString()}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
@@ -32,7 +32,7 @@
     </div>
 </div>
 
-<div id="page-selector">
+<div *ngIf="itemsPerPage !== Infinity" id="page-selector">
     <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button>
     <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button>
     <span>Page {{currentPage + 1}} of {{totalPages}}</span>
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 7ca0ae7..2fbf9d2 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
@@ -59,5 +59,6 @@ export class NeedListComponent implements OnChanges {
     }
 
     protected readonly GoalType = GoalType;
+    protected readonly Infinity = Infinity;
 }
 
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 2629346..8263c04 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
@@ -9,9 +9,9 @@
             <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span>
         </div>
 
-        <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span>
+        <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal.toLocaleString()}}</span>
 
-        <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span>
+        <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}}</span>
 
         <span><strong>Location:</strong> {{need.location}}</span>