Auto refresh needs on change

3 files changed, 23 insertions, 16 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 76fdf0a..172360d 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -16,18 +16,18 @@
         <label>Monetary</label><br>
         <input type="radio" name="type" value="PHYSICAL" ngModel>
         <label>Physical</label><br>
-        <input type="submit" value="Submit"> 
+        <input type="submit" value="Submit">
     </form>
     <button (click)="back()">Close</button>
     <span *ngIf="statusText">{{statusText | async}}</span>
-    
+
 </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>
@@ -40,11 +40,11 @@
         <label>Monetary</label><br>
         <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
         <label>Physical</label><br>
-        <input type="submit" value="Submit"> 
+        <input type="submit" value="Submit">
     </form>
     <button (click)="back()">Close</button>
     <span *ngIf="statusText">{{statusText | async}}</span>
-    
+
 </div>
 <hr>
-<app-need-list></app-need-list>
\ No newline at end of file
+<app-need-list #needList></app-need-list>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 1b6d658..9574de3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -4,6 +4,7 @@ import { UsersService } from '../../services/users.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
 import { BehaviorSubject, catchError, of } from 'rxjs';
+import {NeedListComponent} from '../need-list/need-list.component';
 
 @Component({
   selector: 'app-cupboard',
@@ -16,7 +17,9 @@ export class CupboardComponent implements OnInit {
 
     protected statusText = new BehaviorSubject("")
 
-needs: any;
+    needs: any;
+    @ViewChild("needList") needList?: NeedListComponent
+
     constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
 
     ngOnInit(): void {
@@ -110,7 +113,7 @@ needs: any;
         (result) => {
           if (result) {
             console.log("need updated successfully");
-            location.reload();
+            this.needList?.refresh()
           } else {
             console.log("need update failed");
           }
@@ -139,7 +142,7 @@ needs: any;
         (result) => {
           if (result) {
             console.log("need created successfully");
-            location.reload();
+              this.needList?.refresh()
           } else {
             console.log("need creation failed");
           }
@@ -195,4 +198,4 @@ let friendlyHttpStatus: {[key: number]: string} = {
     503: 'Service Unavailable',
     504: 'Gateway Timeout',
     505: 'HTTP Version Not Supported',
-};
\ No newline at end of file
+};
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 4409b63..b21979f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User'; 
+import { userType } from '../../models/User';
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -12,15 +12,19 @@ import { userType } from '../../models/User';
 export class NeedListComponent {
   needs: Need[] = [];
   searchResults: Need[] = [];
-  
+
   constructor(
     private cupboardService: CupboardService,
     private usersService: UsersService
   ) {}
 
+    refresh() {
+        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+    }
+
   ngOnInit(): void {
-    this.cupboardService.getNeeds().subscribe(n => this.needs = n)
-    this.close();
+    this.refresh()
+    // this.close();
   }
 
   private showElement(element: any) {
@@ -63,7 +67,7 @@ export class NeedListComponent {
     if (this.searchDelay) {
       clearTimeout(this.searchDelay);
     }
-    
+
     this.searchDelay = setTimeout(() => {
       const currentSearchValue = form.search; //latest value of the search
       this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
@@ -81,7 +85,7 @@ export class NeedListComponent {
     }, 250);
   }
 
-  delete(id : number) { 
+  delete(id : number) {
     this.cupboardService.deleteNeed(id).subscribe(() => {
       this.needs = this.needs.filter(n => n.id !== id)
     })