Fix create-need dialog

8 files changed, 126 insertions, 219 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 5e88582..3873719 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,7 +1,10 @@
 <div id="box">
     <div id="header">
         <h1> Cupboard </h1>
-        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+        <ng-template #create>
+            <app-need-edit [mode]="'Create'" (refreshNeedList)="refresh()"></app-need-edit>
+        </ng-template>
+        <button *ngIf="isManager()" class="button2" (click)="modalService.showModal(create)"><span class="icon">add</span>Create Need</button>
     </div>
 
     <div id="header2">
@@ -34,7 +37,7 @@
             <span class="icon">{{inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket
         </button>
         <ng-template #edit>
-            <app-need-edit *ngIf="need" [selectedNeed]="need" (refreshNeedList)="refresh()"></app-need-edit>
+            <app-need-edit *ngIf="need" [mode]="'Edit'" [need]="need" (refreshNeedList)="refresh()"></app-need-edit>
         </ng-template>
         <button *ngIf="isManager()" (click)="modalService.showModal(edit)">
             <span class="icon">edit</span>Edit Need
@@ -45,32 +48,3 @@
     </ng-template>
     <app-need-list [actionArea]="NLActions" *ngIf="searchResults.length > 0" [needs]="searchResults" [itemsPerPage]="itemsPerPage" #needList/>
 </div>
-
-<!--<div>-->
-<!--    <div>-->
-<!--        <div id="create-form" *ngIf="selectedForm === 'create'">-->
-<!--            <h1> Create Need </h1>-->
-<!--            <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">-->
-<!--                <label>Name:</label><br>-->
-<!--                <input type="text" name="name" ngModel><br>-->
-<!--                <label>Image:</label><br>-->
-<!--                <input type="text" name="image" ngModel><br>-->
-<!--                <label>Location:</label><br>-->
-<!--                <input type="text" name="location" ngModel><br>-->
-<!--                <label>Max Goal:</label><br>-->
-<!--                <input type="number" name="maxGoal" ngModel><br>-->
-<!--                <label>Type</label><br>-->
-<!--                <input type="radio" name="type" value="MONETARY" ngModel>-->
-<!--                <label>Monetary</label><br>-->
-<!--                <input type="radio" name="type" value="PHYSICAL" ngModel>-->
-<!--                <label>Physical</label><br>-->
-<!--                <input type="checkbox" name="urgent" value="false" ngModel>-->
-<!--                <label>Urgent</label><br>-->
-<!--                <label>Description</label><br>-->
-<!--                <textarea name="description"></textarea><br>-->
-<!--                <input type="submit" value="Submit">-->
-
-<!--            </form>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--</div>-->
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index f5e4c00..56fdd70 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -152,114 +152,6 @@ export class CupboardComponent implements OnInit {
         return basket?.map(r => r.id).includes(need.id);
     }
 
-    // editNeed(need : Need) {
-    //     this.activeEdit = need
-    // }
-
-    // --------------- FORM STUFF NOT IMPLEMENTED YET --------------- //
-
-    // async updateSearchResults() {
-    //     if (this.needList) {
-    //         while (this.selectedForm == 'update') {
-    //             // this.searchResults = this.needList.searchResults
-    //             await new Promise(resolve => setTimeout(resolve, 100));
-    //         }
-    //     }
-    // }
-
-    selectForm(name: string) {
-        // //get search results from the need list
-        // if (this.needList) {
-        //     // this.searchResults = this.needList.searchResults;
-        // }
-        // console.log(this.searchResults)
-        // this.selectedForm = name;
-        // if (name == 'update') {
-        //     if (this.searchResults) {
-        //         this.searchResults.forEach((element: any) => {
-        //             console.log(element)
-        //         });
-        //     }
-        //
-        // }
-    }
-
-    // populateForm(need: any): void {
-    //     this.selectForm('update');
-    //     this.selectedNeed = { ...need };
-    // }
-    //
-    // select(need : Need) {
-        // //emit value
-        // // this.currentNeed.emit(need);
-        // if (this.selectedNeed) {
-        //     //revert already selected need to previous style
-        //     console.log(need.id);
-        //     let button = document.getElementById('need-button-' + this.selectedNeed.id);
-        //     if (button) {
-        //         console.log(button)
-        //         button.style.background = 'lightgray';
-        //         button.style.marginLeft = '0%';
-        //         button.style.width = '98%';
-        //     }
-        //     button = document.getElementById('need-edit-button-' + this.selectedNeed.id);
-        //     if (button) {
-        //         button.style.visibility = 'visible';
-        //     }
-        // }
-        // //change selected need to selected style
-        // this.selectedNeed = need;
-        // let button = document.getElementById('need-button-' + need.id);
-        // if (button) {
-        //     button.style.background = 'white';
-        //     button.style.marginLeft = '4%';
-        //     button.style.width = '100%';
-        // }
-        // button = document.getElementById('need-edit-button-' + need.id);
-        // if (button) {
-        //     button.style.visibility = 'hidden';
-        // }
-    // }
-
-    // submit(form: any) {
-    //     const need: Need = {
-    //         name: form.name,
-    //         image: form.image,
-    //         location: form.location,
-    //         id: 0,
-    //         maxGoal: form.maxGoal,
-    //         type: form.type,
-    //         urgent: !!form.urgent,
-    //         filterAttributes: [],
-    //         current: 0,
-    //         description: form.description
-    //     };
-    //     console.log("need:", need);
-    //     console.log("form submitted. creating 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");
-    //             }
-    //             return of()
-    //         }))
-    //         .subscribe(
-    //             (result) => {
-    //                 if (result) {
-    //                     console.log("need created successfully");
-    //                     // this.needList?.refresh()
-    //                 } else {
-    //                     console.log("need creation failed");
-    //                 }
-    //             }
-    //
-    //         );
-    // }
-
     protected readonly SortingAlgorithms = SortingAlgoArrays;
     protected readonly Object = Object;
 }
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");
+                    }
                 }
-            }
 
-        );
-  }
+            );
+    }
 }
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 d494ccf..aed3e95 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
@@ -36,7 +36,7 @@
             <span class="icon">add</span>Add To Basket
         </button>
         <ng-template #edit>
-            <app-need-edit *ngIf="need" [selectedNeed]="need"></app-need-edit>
+            <app-need-edit [mode]="'Edit'" *ngIf="need" [need]="need" (refreshNeedList)="ngOnInit()"></app-need-edit>
         </ng-template>
         <button *ngIf="isManager()" (click)="modalService.showModal(edit)">
             <span class="icon">edit</span>Edit Need
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 e9be093..1c6d8e4 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,5 +1,5 @@
-import {Component, Input} from '@angular/core';
-import {GoalType, Need} from '../../models/Need';
+import {Component, Input, OnInit} from '@angular/core';
+import {Need} from '../../models/Need';
 import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
 import {userType} from '../../models/User';
@@ -15,7 +15,7 @@ import {ModalService} from '../../services/modal.service';
     templateUrl: './need-page.component.html',
     styleUrl: './need-page.component.css'
 })
-export class NeedPageComponent {
+export class NeedPageComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
@@ -26,8 +26,6 @@ export class NeedPageComponent {
         protected modalService: ModalService
     ) {}
 
-    public GoalType = GoalType;
-
     @Input() need!: Need;
 
     ngOnInit(): void {
@@ -71,19 +69,15 @@ export class NeedPageComponent {
 
     delete(id : number) {
         this.cupboardService.deleteNeed(id)
-            .pipe(catchError((ex, r) => {
+            .pipe(catchError((ex, _) => {
                 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.router.navigate(['/cupboard'])
             })
         // this.refresh();
     }
-
-    edit(need: Need) {
-
-    }
 }
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 6cf7e76..588e745 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -12,6 +12,6 @@ export interface Need {
 }
 
 export enum GoalType {
-    MONETARY,
-    PHYSICAL
+    MONETARY = 'MONETARY',
+    PHYSICAL = 'PHYSICAL'
 }
diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts
index 9232c0c..694bb94 100644
--- a/ufund-ui/src/app/services/cupboard.service.ts
+++ b/ufund-ui/src/app/services/cupboard.service.ts
@@ -23,8 +23,8 @@ export class CupboardService {
         private authService: AuthService
     ) {}
 
-    createNeed(need: Need): Observable<boolean> {
-        return this.http.post<boolean>(this.url, need, this.httpOptions())
+    createNeed(need: Need): Observable<Need> {
+        return this.http.post<Need>(this.url, need, this.httpOptions())
     }
 
     getNeeds(): Observable<Need[]> {