moving functionality to new component

6 files changed, 85 insertions, 62 deletions

diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index c91256e..16455be 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {LoginComponent} from './components/login/login.component';
 import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 import { SignupComponent } from './components/signup/signup.component';
 import { ToastComponent } from './components/toast/toast.component';
+import { NeedEditComponent } from './components/need-edit/need-edit.component';
 
 @NgModule({
     declarations: [
@@ -31,6 +32,7 @@ import { ToastComponent } from './components/toast/toast.component';
         SignupComponent,
         MiniNeedListComponent,
         ToastComponent,
+        NeedEditComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 6f7799e..e9387a2 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -32,29 +32,6 @@
 
         </form>
     </div>
-    <div id="update-form" *ngIf="selectedForm === 'update'">
-        <h1> Update Need </h1>
-        <label>Needs:</label><br>
-        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-            <input type="text" name="image" [(ngModel)]="selectedNeed.image"><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>
-            <input type="submit" value="Submit">
-
-        </form>
-
-    </div>
     <hr>
 
 </div>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 662def4..e70d98f 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -82,45 +82,6 @@ export class CupboardComponent implements OnInit {
         return type === ("MANAGER" as unknown as userType);
     }
 
-    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.needList?.refresh()
-                    } else {
-                        console.log("need update failed");
-                    }
-                }
-
-            );
-    }
-
     submit(form: any) {
         const need: Need = {
             name: form.name,
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
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
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
new file mode 100644
index 0000000..bcb166b
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,22 @@
+<div id="update-form">
+    <h1> Update Need </h1>
+    <label>Needs:</label><br>
+    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><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>
+        <input type="submit" value="Submit">
+
+    </form>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000..02ffb71
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output } 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';
+
+@Component({
+  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() selectedNeedID: number | null = null;
+
+  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.needList?.refresh()
+                } else {
+                    console.log("need update failed");
+                }
+            }
+
+        );
+  }
+}
\ No newline at end of file