cupboard edit form with default values

3 files changed, 70 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 18a4d1b..fe4971a 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -5,7 +5,7 @@
     padding: 10px 20px;
 }
 
-#menu, #create-form, #delete-form {
+#menu, #create-form, #delete-form, #update-form {
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index d9a247d..2749850 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,6 +1,7 @@
 <h1> Cupboard </h1>
 <div id="menu">
     <button (click)="opencreate()">Create new Need</button>
+    <button (click)="openupdate()">Update existing Need</button>
 </div>
 <div id="create-form">
     <h1> Create a new need </h1>
@@ -21,5 +22,28 @@
     <button (click)="back()">Close</button>
     
 </div>
+<div id="update-form">
+    <h1> Update a need </h1>
+    <label>Needs:</label><br>
+    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <div *ngFor="let need of needs">
+           
+            <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
+            <label name="template">{{need.name}}</label><br>
+        </div>
+        <label>Name:</label><br>
+        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><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="submit" value="Submit"> 
+    </form>
+    <button (click)="back()">Close</button>
+    
+</div>
 <hr>
 <app-need-list></app-need-list>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 2fccf18..e3f33ac 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
+import { Form } from '@angular/forms';
 
 @Component({
   selector: 'app-cupboard',
@@ -10,13 +11,23 @@ import { Need, GoalType } from '../../models/Need';
 })
 
 export class CupboardComponent implements OnInit {
+needs: any;
     constructor(private cupboardService: CupboardService) { }
     
     ngOnInit(): void {
+      this.cupboardService.getNeeds().subscribe(n => this.needs = n);
       this.close();
       this.openmenu();
     }
-
+    
+    selectedNeed: any = {
+      name: '',
+      id: null,
+      maxGoal: null,
+      type: ''
+    };
+    selectedNeedId: number | null = null;
+  
     private hideElement(element: any) {
       if (element){
         element.style.visibility = 'hidden';
@@ -41,6 +52,11 @@ export class CupboardComponent implements OnInit {
       this.showElement(document.getElementById('create-form'));
     }
 
+    openupdate() {
+      this.close();
+      this.showElement(document.getElementById('update-form'));
+    }
+
     back() {
       this.close();
       this.openmenu();
@@ -50,9 +66,36 @@ export class CupboardComponent implements OnInit {
       this.hideElement(document.getElementById('create-form'));
       this.hideElement(document.getElementById('destroy-form'));
       this.hideElement(document.getElementById('menu'));
+      this.hideElement(document.getElementById('update-form'));
     }
 
-    
+    populateForm(need: any): void {
+      this.selectedNeed = { ...need };
+    }
+
+    update(form: any) {
+      console.log(form);
+      const need: Need = {
+        name: form.name,
+        id: form.id,
+        maxGoal: form.maxGoal,
+        type: GoalType[form.type as keyof typeof GoalType],
+        filterAttributes: [],
+        current: 0
+      };
+      console.log(need.id, need, "need updated");
+      this.cupboardService.updateNeed(need.id, need).subscribe(
+        (result) => {
+          if (result) {
+            console.log("need updated successfully");
+            location.reload();
+          } else {
+            console.log("need update failed");
+          }
+        }
+
+      );
+    }
 
     submit(form: any) {
       const need: Need = {