Merge branch 'main' into need-image

# Conflicts:
#	ufund-ui/src/app/components/need-list/need-list.component.ts
#	ufund-ui/src/app/components/need-page/need-page.component.html

3 files changed, 181 insertions, 81 deletions

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 17605c2..b06e061 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
@@ -1,4 +1,4 @@
-:host {
+#box {
     /*position: absolute;*/
     /*background-color: rgba(0, 0, 0, 0.5);*/
     /*display: flex;*/
@@ -8,14 +8,44 @@
     /*right: 0;*/
     /*z-index: 5;*/
     /*justify-content: center;*/
+    padding: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #6c6c6c;
+    background-color: #2e2e2e;
+    border-radius: 5px;
+    position: relative;
+    width: 500px;
 }
 
 #create-form, #delete-form, #update-form {
-    margin-top: 50px;
-    background-color: #3a3a3a;
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;
+    /*margin-top: 50px;*/
+
+    /*padding: 10px 20px 20px 20px;*/
+    /*border: 2px solid #000;*/
+    /*border-radius: 5px;*/
     /*visibility: visible;*/
     /*position: absolute;*/
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+#closeButton {
+    position: absolute;
+    width: 35px;
+    right: 10px;
+}
+
+textarea {
+    height: 200px;
+}
+
+label {
+    padding: 3px;
 }
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 e776415..ed4bfb3 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
@@ -1,23 +1,45 @@
-<div id="update-form">
-    <h1> Update Need </h1>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Image:</label><br>
-        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
-        <label>Location:</label><br>
-        <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-        <label>Physical</label><br>
-        <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
-        <label>Urgent</label> <br>
-        <label>Description</label> <br>
-        <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+<div id="box">
+    <button id="closeButton" (click)="modalService.hideModal()"><span class="icon">close</span></button>
+    <h2>{{this.mode}} Need</h2>
+    <form #updateForm="ngForm" id="update-form" (ngSubmit)="submit(updateForm.value)">
+        <div>
+            <span>Name:</span>
+            <input type="text" name="name" [(ngModel)]="needCopy.name">
+        </div>
+        <div>
+            <span>Image:</span>
+            <input type="text" name="image" [(ngModel)]="needCopy.image">
+        </div>
+        <div>
+            <span>Location:</span>
+            <input type="text" name="location" [(ngModel)]="needCopy.location">
+        </div>
+        <div>
+            <span>Max Goal:</span>
+            <input type="number" name="maxGoal" [(ngModel)]="needCopy.maxGoal">
+        </div>
+        <div>
+            <span>Type:</span>
+            <label>
+                <input type="radio" name="type" value="MONETARY" [(ngModel)]="needCopy.type">
+                Monetary
+            </label>
+            <label>
+                <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="needCopy.type">
+                Physical
+            </label>
+        </div>
+        <div>
+            <span>Urgency:</span>
+            <label>
+                <input type="checkbox" name="urgent" [(ngModel)]="needCopy.urgent">
+                Urgent
+            </label>
+        </div>
+        <div>
+            <span>Description:</span>
+            <textarea name="description" [(ngModel)]="needCopy.description"></textarea>
+        </div>
         <input type="submit" value="Submit">
 
     </form>
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 2462534..abfa543 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
@@ -1,61 +1,109 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Need, GoalType } from '../../models/Need'; 
-import { CupboardService } from '../../services/cupboard.service';
-import { catchError, of } from 'rxjs';
-import { ToastsService, ToastType } from '../../services/toasts.service';
+import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
+import {GoalType, Need} from '../../models/Need';
+import {CupboardService} from '../../services/cupboard.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {ModalService} from '../../services/modal.service';
+import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-need-edit',
-  standalone: false,
-  templateUrl: './need-edit.component.html',
-  styleUrl: './need-edit.component.css'
+    selector: 'app-need-edit',
+    standalone: false,
+    templateUrl: './need-edit.component.html',
+    styleUrl: './need-edit.component.css'
 })
-export class NeedEditComponent {
-  constructor(
-    private cupboardService: CupboardService,
-    private toastService: ToastsService
-
-  ) {}
-
-  @Input() selectedNeed!: Need;
-  @Output() refreshNeedList = new EventEmitter<void>();
-
-  update(form: any) {
-    console.log(form);
-    const need: Need = {
-        name: form.name,
-        image: form.image,
-        location: form.location,
-        id: this.selectedNeed.id, //system will control this
-        maxGoal: form.maxGoal,
-        type: GoalType[form.type as keyof typeof GoalType],
-        urgent: form.urgent,
-        filterAttributes: [],
-        current: 0,
-        description: form.description
-    };
-
-    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");
-            }
-            return of()
-        }))
-        .subscribe(
-            (result) => {
-                if (result) {
-                    console.log("need updated successfully");
-                    this.refreshNeedList.emit();
+export class NeedEditComponent implements OnChanges {
+
+    @Input() mode!: "Create" | "Edit"
+    @Input() need?: Need;
+    @Output() refreshNeedList = new EventEmitter<void>();
+
+    needCopy: any = {}
+
+    constructor(
+        private cupboardService: CupboardService,
+        private toastService: ToastsService,
+        protected modalService: ModalService,
+        private router: Router
+    ) {}
+
+    ngOnChanges() {
+        this.needCopy = {...this.need}
+    }
+
+    submit(form: any) {
+        const need: Need = {
+            name: form.name,
+            image: form.image,
+            location: form.location,
+            id: this.needCopy.id, //system will control this
+            maxGoal: form.maxGoal,
+            type: GoalType[form.type as keyof typeof GoalType],
+            urgent: form.urgent,
+            filterAttributes: [],
+            current: 0,
+            description: form.description
+        };
+
+        if (this.mode == "Edit") {
+            this.updateNeed(need)
+        } else if (this.mode === 'Create') {
+            this.createNeed(need)
+        }
+    }
+
+    updateNeed(need: Need) {
+        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");
+                }
+                return of()
+            }))
+            .subscribe(
+                (result) => {
+                    if (result) {
+                        let action = {label: 'View Need', onAction: () => this.router.navigate([`/need/${need.id}`])}
+                        this.toastService.sendToast(ToastType.INFO, "Need updated successfully", action)
+                        this.modalService.hideModal()
+                        console.log("need updated successfully");
+                        this.refreshNeedList.emit();
+                    } else {
+                        console.log("need update failed");
+                    }
+                }
+            );
+    }
+
+    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 {
-                    console.log("need update failed");
+                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+                }
+                return of()
+            }))
+            .subscribe(
+                (result) => {
+                    if (result) {
+                        let action = {label: 'View Need', onAction: () => this.router.navigate([`/need/${result.id}`])}
+                        this.toastService.sendToast(ToastType.INFO, "Need created successfully", action)
+                        this.modalService.hideModal()
+                        console.log("need created successfully");
+                        this.refreshNeedList.emit();
+                    } else {
+                        console.log("need creation failed");
+                    }
                 }
-            }
 
-        );
-  }
-}
\ No newline at end of file
+            );
+    }
+}