1 files changed, 65 insertions, 1 deletions

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 579565c..8451d5b 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
@@ -10,13 +10,73 @@ import {CupboardService} from '../../services/cupboard.service';
 })
 export class NeedListComponent {
   needs: Need[] = [];
-
+  searchResults: Need[] = [];
+  
   constructor(
     private cupboardService: CupboardService
   ) {}
 
   ngOnInit(): void {
     this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+    this.close();
+  }
+
+  private showElement(element: any) {
+    if (element){
+      element.style.visibility = 'visible';
+      element.style.position = 'relative';
+    }
+  }
+
+  private hideElement(element: any) {
+    if (element){
+      element.style.visibility = 'hidden';
+      element.style.position = 'absolute';
+    }
+  }
+
+  private updateSearchStatus(text: string) {
+    let element = document.getElementById('search-status');
+    if (element) {
+      element.innerHTML = text;
+    }
+  }
+
+  open() {
+    this.hideElement(document.getElementById('search-button'));
+    this.showElement(document.getElementById('search-form'));
+  }
+
+  close() {
+    this.hideElement(document.getElementById('search-form'));
+    this.showElement(document.getElementById('search-button'));
+  }
+
+  private searchDelay: any;
+
+  async search(form: any) {
+    //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
+
+    //remove previous search if it exists
+    if (this.searchDelay) {
+      clearTimeout(this.searchDelay);
+    }
+    
+    this.searchDelay = setTimeout(() => {
+      const currentSearchValue = form.search; //latest value of the search
+      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+        this.searchResults = n;
+        console.log(currentSearchValue, this.searchResults);
+        if (this.searchResults.length === this.needs.length) {
+          this.updateSearchStatus("Please refine your search");
+          this.searchResults = [];
+        } else if (this.searchResults.length === 0) {
+          this.updateSearchStatus("No results found");
+        } else {
+          this.updateSearchStatus("Search results:");
+        }
+      });
+    }, 250);
   }
 
   delete(id : number) { 
@@ -24,4 +84,8 @@ export class NeedListComponent {
       this.needs = this.needs.filter(n => n.id !== id)
     })
   }
+
+  back() {
+    this.searchResults = [];
+  }
 }