1 files changed, 68 insertions, 57 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 06bb17e..208045f 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
@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import {Component, input, Output, EventEmitter} from '@angular/core';
+import { NgForm } from '@angular/forms';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
@@ -41,6 +42,7 @@ const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => {
   styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
+  selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
   currentSortAlgo: sortAlgo = sortByMaxGoal;
@@ -52,51 +54,23 @@ export class NeedListComponent {
     {func:sortByMinGoal,name:"sortByMinGoal"},
   ];
 
+  @Output() currentNeed = new EventEmitter<Need>();
+
   constructor(
     private cupboardService: CupboardService,
     private usersService: UsersService
   ) {}
 
     refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n.sort(this.currentSortAlgo))
+        this.cupboardService.getNeeds().subscribe(n => {
+          this.needs = n.sort(this.currentSortAlgo);
+          this.searchResults = this.needs;
+        });
+        console.log(this.searchResults);
     }
 
   ngOnInit(): void {
     this.refresh()
-   
-     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'));
-    this.hideElement(document.getElementById('search-status'));
   }
 
   changeSortAlgo(algoName: string, form: any) {
@@ -121,25 +95,23 @@ export class NeedListComponent {
     if (this.searchDelay) {
       clearTimeout(this.searchDelay);
     }
-
-    this.searchDelay = setTimeout(() => {
-      const currentSearchValue = form.search; //latest value of the search
-      console.log("current search value: ", currentSearchValue)
-      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-        this.searchResults = n.sort(this.currentSortAlgo);
-        console.log(currentSearchValue, this.searchResults);
-        this.showElement(document.getElementById('search-results'));
-        this.showElement(document.getElementById('search-status'));
-        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);
+    if (form) {
+      this.searchDelay = setTimeout(() => {
+
+        if (form) {
+          const currentSearchValue = form.search; //latest value of the search
+          this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+            this.searchResults = n.sort(this.currentSortAlgo);
+            console.log(currentSearchValue, this.searchResults);
+            });
+          }
+        }, 250);
+      } else {
+        //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
+        //clear timeout to stop pending search
+        clearTimeout(this.searchDelay);
+        this.searchResults = this.needs;
+      }
   }
 
   delete(id : number) {
@@ -158,6 +130,13 @@ export class NeedListComponent {
     return type === ("HELPER" as unknown as userType);
   }
 
+  changeText(id : number, text : string) {
+    const span = document.getElementById('hover-status-label-' + id);
+    if (span) {
+      span.innerHTML = ' ' + text;
+    }
+  }
+
   add(need: Need) {
     const currentUser = this.usersService.getCurrentUser();
     //console.log("get current user in angular:", currentUser)
@@ -173,13 +152,45 @@ export class NeedListComponent {
       } else {
         window.alert("This need is already in your basket!")
       }
-      
+
 
     }
 
   }
 
   back() {
-    this.searchResults = [];
+    this.searchResults = this.needs;
+  }
+
+  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';
+      }
   }
 }