Commit half working changes to move to my laptop

7 files changed, 161 insertions, 14 deletions

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 ecf452a..dcacca1 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
@@ -13,7 +13,6 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-    statusText: any;
 
     constructor(
         private router: Router,
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 84f83d6..e00ba47 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
@@ -54,10 +54,10 @@
                 <span class="icon">add</span>Add To Basket
             </button>
             <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>Delete Need
+                <span class="icon">edit</span>Edit Need
             </button>
             <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>Edit Need
+                <span class="icon">delete</span>Delete Need
             </button>
         </div>
     </div>
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 7a9d647..d641acf 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
@@ -160,6 +160,7 @@ export class NeedListComponent {
 
   delete(id : number) {
     this.cupboardService.deleteNeed(id).subscribe(() => {
+        this.toastService.sendToast(ToastType.INFO, "Need deleted.")
       this.needs = this.needs.filter(n => n.id !== id)
     })
     this.refresh();
@@ -199,10 +200,7 @@ export class NeedListComponent {
       } else {
         this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
-
-
     }
-
   }
 
   back() {
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index a3a4014..f950171 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -8,3 +8,60 @@
     flex-direction: column;
     width: 1000px;
 }
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
+
+#editor {
+    position: absolute;
+    background-color: #4a4a4a;
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+    align-self: center;
+    padding: 20px;
+    box-shadow: 0 0 100px black;
+}
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 a72167c..a8479fd 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
@@ -13,14 +13,47 @@
     </div>
 
     <hr>
+    <span>{{need?.description}}</span>
+    <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
     <p>Location: {{need?.location}}</p>
     <p>Urgent: {{need?.urgent}}</p>
     <span>{{need?.current}} / {{need?.maxGoal}}</span>
     <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
     <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
-    <div>
-        <button>Add to basket</button>
-        <button>Edit</button>
-        <button>Delete</button>
+    <div class="actionArea">
+        <button *ngIf="isHelper()" (click)="add(need!)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+        <button *ngIf="isManager()" (click)="edit(need!)">
+            <span class="icon">edit</span>Edit Need
+        </button>
+        <button *ngIf="isManager()" (click)="delete(need!.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
+    </div>
+
+    <div [routerLink]="'/need/' + need.id" class="clickable">
+        <div class="split">
+            <div class="left">
+                <span class="needName">{{need.name}}</span>
+                <span class="needType">{{need.type}}</span>
+            </div>
+
+            <div class="right">
+                <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+            </div>
+        </div>
+
+        <br>
+
+        <div class="prog">
+            <span id="hover-status-label-{{need.id}}"> </span>
+            <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+            <progress [value]="need.current" [max]="need.maxGoal"></progress>
+        </div>
+
     </div>
+
+<!--    <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
 </div>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index e38554c..ad4cacf 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -1,8 +1,12 @@
 import {Component, Input} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
-import {NgFor} from '@angular/common';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-need-page',
@@ -14,11 +18,15 @@ export class NeedPageComponent {
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
+        private authService: AuthService,
+        private usersService: UsersService,
+        private toastService: ToastsService,
+        private router: Router
     ) {}
 
     public GoalType = GoalType;
 
-    @Input() need?: Need;
+    @Input() need!: Need;
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -28,4 +36,52 @@ export class NeedPageComponent {
     back() {
         window.history.back();
     }
+
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err, _) =>  {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+            }
+        }
+    }
+
+    delete(id : number) {
+        this.cupboardService.deleteNeed(id)
+            .pipe(catchError((ex, r) => {
+                this.toastService.sendToast(ToastType.ERROR, ex.error)
+                return of()
+            }))
+            .subscribe(() => {
+                // this.needs = this.needs.filter(n => n.id !== id)
+                this.toastService.sendToast(ToastType.INFO, "Need deleted")
+                this.router.navigate(['/'])
+            })
+        // this.refresh();
+    }
+
+    edit(need: Need) {
+
+    }
 }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index f515154..75d6b36 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 :root {
-    color-scheme: light dark;
+    color-scheme: /*light*/ dark;
 }
 
 * {
@@ -65,3 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
 h1 {
     font-size: 40px;
 }
+
+progress {
+    min-width: 100%;
+}