Fix create-need dialog

2 files changed, 111 insertions, 64 deletions

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 60637ed..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,44 +1,44 @@
 <div id="box">
     <button id="closeButton" (click)="modalService.hideModal()"><span class="icon">close</span></button>
-    <h2>Update Need</h2>
-    <form #updateForm="ngForm" id="update-form" (ngSubmit)="update(updateForm.value)">
+    <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)]="selectedNeed.name">
+            <input type="text" name="name" [(ngModel)]="needCopy.name">
         </div>
         <div>
             <span>Image:</span>
-            <input type="text" name="image" [(ngModel)]="selectedNeed.image">
+            <input type="text" name="image" [(ngModel)]="needCopy.image">
         </div>
         <div>
             <span>Location:</span>
-            <input type="text" name="location" [(ngModel)]="selectedNeed.location">
+            <input type="text" name="location" [(ngModel)]="needCopy.location">
         </div>
         <div>
             <span>Max Goal:</span>
-            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal">
+            <input type="number" name="maxGoal" [(ngModel)]="needCopy.maxGoal">
         </div>
         <div>
             <span>Type:</span>
             <label>
-                <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+                <input type="radio" name="type" value="MONETARY" [(ngModel)]="needCopy.type">
                 Monetary
             </label>
             <label>
-                <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+                <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="needCopy.type">
                 Physical
             </label>
         </div>
         <div>
             <span>Urgency:</span>
             <label>
-                <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+                <input type="checkbox" name="urgent" [(ngModel)]="needCopy.urgent">
                 Urgent
             </label>
         </div>
         <div>
             <span>Description:</span>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea>
+            <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 d312183..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,62 +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,
-    protected modalService: ModalService
-  ) {}
-
-  @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");
+                    }
                 }
-            }
 
-        );
-  }
+            );
+    }
 }