Merge branch 'css' of https://github.com/RIT-SWEN-261-02/team-project-2245-swen-261-02-2b into css

3 files changed, 156 insertions, 18 deletions

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..844410f 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
@@ -6,5 +6,68 @@
 #box {
     display: flex;
     flex-direction: column;
-    width: 1000px;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
 }
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
+}
+
+.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;
+    margin-bottom: 15px;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+    margin-top: 10px;
+}
+
+/*#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..958dfa6 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,10 +1,29 @@
 <div id="box">
     <h1>{{need?.name}}</h1>
-    <div>
-        <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+    <span class="needType">{{need?.type}} GOAL</span>
+
+    <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+    <p>{{need?.description}}</p>
+    <div class="prog">
+<!--        <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>
-    <div *ngIf="need?.filterAttributes">
-        <p>Tags:</p>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
+
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
+
+    <span><strong>Location:</strong> {{need.location}}</span>
+
+    <span><strong>Urgency: </strong>
+        <span *ngIf="!need.urgent">Not urgent</span>
+        <span *ngIf="need.urgent" class="urgent">URGENT</span>
+    </span>
+
+    <div *ngIf="need.filterAttributes.length > 0">
+        <strong>Tags:</strong>
         <ul style="display: flex; column-gap: 24px;">
             <li *ngFor="let tag of need?.filterAttributes">
                 <p>{{tag}}</p>
@@ -12,15 +31,15 @@
         </ul>
     </div>
 
-    <hr>
-    <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>
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) {
+
+    }
 }