Merge branch 'list-and-cupboard-component-refactor' into css

# Conflicts:
#	ufund-api/data/cupboard.json
#	ufund-ui/src/app/components/cupboard/cupboard.component.css
#	ufund-ui/src/app/components/need-list/need-list.component.css
#	ufund-ui/src/app/components/need-page/need-page.component.html

1 files changed, 217 insertions, 109 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 3a89a20..af8cab4 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,138 +1,246 @@
-import {Component} from '@angular/core';
+import {Component , 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';
-import {userType} from '../../models/User';
-import {catchError, of} from 'rxjs';
+import { UsersService } from '../../services/users.service';
+import { userType } from '../../models/User';
 import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
 
-@Component({
-    selector: 'app-need-list',
-    standalone: false,
-    templateUrl: './need-list.component.html',
-    styleUrl: './need-list.component.css'
-})
-export class NeedListComponent {
-    needs: Need[] = [];
-    searchResults: Need[] = [];
-
-    constructor(
-        private cupboardService: CupboardService,
-        private usersService: UsersService,
-        private authService: AuthService
-    ) {}
+interface sortAlgo {
+  (a: Need,b: Need): number;
+}
 
-    refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
-    }
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+  if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
 
-    ngOnInit(): void {
-        this.refresh()
+const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
+  if(a.maxGoal == b.maxGoal) {
+    return sortByName(a,b);
+  }
+  else if(a.maxGoal > b.maxGoal) {
+    return -1;
+  }
+  return 1;
+}
 
-        this.close();
-    }
+const sortByCompletion: sortAlgo = (a: Need, b: Need): number => {
+  if(a.current == b.current) {
+    return sortByGoal(a,b);
+  }
+  else if(a.current > b.current) {
+    return -1;
+  }
+  return 1;
+}
 
-    private showElement(element: any) {
-        if (element) {
-            element.style.visibility = 'visible';
-            element.style.position = 'relative';
-        }
-    }
+const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
+  if(a.urgent == b.urgent) {
+    return sortByGoal(a,b);
+  }
+  else if(a.urgent && !b.urgent) {
+    return -1;
+  }
+  return 1;
+}
 
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
-        }
-    }
+const sortByLocation: sortAlgo = (a: Need, b: Need): number => {
+  if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
 
-    private updateSearchStatus(text: string) {
-        let element = document.getElementById('search-status');
-        if (element) {
-            element.innerHTML = text;
-        }
-    }
+@Component({
+  selector: 'app-need-list',
+  standalone: false,
+  templateUrl: './need-list.component.html',
+  styleUrl: './need-list.component.css'
+})
+export class NeedListComponent {
+  selectedNeed: Need | null = null;
+  needs: Need[] = [];
+  searchResults: Need[] = [];
+  sortMode = 'Ascending'
+
+  currentSortAlgo: sortAlgo = sortByPriority;
+  sortSelection: string = 'sortByPriority';
+
+  SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+    {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+    {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
+    {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]},
+    {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+  ];
+
+  @Output() currentNeed = new EventEmitter<Need>();
+
+  constructor(
+    private cupboardService: CupboardService,
+    private usersService: UsersService,
+    private authService: AuthService
+  ) {}
 
-    open() {
-        this.hideElement(document.getElementById('search-button'));
-        this.showElement(document.getElementById('search-form'));
+    refresh() {
+        this.cupboardService.getNeeds().subscribe(n => {
+          if (this.sortMode == 'Ascending') {
+            this.needs = n.sort(this.currentSortAlgo);
+          } else {
+            this.needs = n.sort(this.currentSortAlgo).reverse();
+          }
+          this.searchResults = this.needs;
+        });
+
+        const form = document.getElementById('search-form') as HTMLFormElement;
+        form.reset(); 
+        this.search(null);
     }
 
-    close() {
-        this.hideElement(document.getElementById('search-form'));
-        this.showElement(document.getElementById('search-button'));
-        this.hideElement(document.getElementById('search-status'));
-    }
+  ngOnInit(): void {
+    this.refresh()
+  }
 
-    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);
-                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);
+  changeSortMode(form : any) {
+    if (this.sortMode == 'Ascending'){
+      this.sortMode = 'Descending'
+    } else {
+      this.sortMode = 'Ascending'
     }
+    this.search(form)
+  }
 
-    delete(id: number) {
-        this.cupboardService.deleteNeed(id).subscribe(() => {
-            this.needs = this.needs.filter(n => n.id !== id)
-        })
-    }
+  private searchDelay: any;
 
-    isManager() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
-    }
+  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
 
-    isHelper() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("HELPER" as unknown as userType);
+    //remove previous search if it exists
+    if (this.searchDelay) {
+      clearTimeout(this.searchDelay);
     }
+    if (form) {
+      this.searchDelay = setTimeout(() => {
+
+        if (form) {
+          //sorting based on algo selected
+          this.SortingAlgoArrays.forEach(algo => {
+            if(algo.name === this.sortSelection) {
+              this.currentSortAlgo = algo.func;
+              console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
+              return
+            }
+          });
 
-    add(need: Need) {
-        const currentUser = this.authService.getCurrentUser();
-        //console.log("get current user in angular:", currentUser)
-        if (currentUser) {
-            if (!currentUser.basket.includes(need.id)) {
-                currentUser.basket.push(need.id);
-                this.usersService.updateUser(currentUser)
-                    .pipe(catchError((err: any, _) => {
-                        console.error(err);
-                        return of();
-                    }))
-                    .subscribe(() => {
-                        this.usersService.refreshBasket();
-                    });
+          const currentSearchValue = form.search; //latest value of the search
+          this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+            if (this.sortMode == 'Ascending') {
+              this.searchResults = n.sort(this.currentSortAlgo);
             } else {
-                window.alert("This need is already in your basket!")
+              this.searchResults = n.sort(this.currentSortAlgo).reverse();
             }
 
+            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) {
+    this.cupboardService.deleteNeed(id).subscribe(() => {
+      this.needs = this.needs.filter(n => n.id !== id)
+    })
+    this.refresh();
+  }
+
+  isManager() {
+    const type = this.authService.getCurrentUser()?.type;
+    return type === ("MANAGER" as unknown as userType);
+  }
+
+  isHelper() {
+    const type = this.authService.getCurrentUser()?.type;
+    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.authService.getCurrentUser();
+    //console.log("get current user in angular:", currentUser)
+    if (currentUser) {
+      if (!currentUser.basket.includes(need.id)) {
+        currentUser.basket.push(need.id);
+        this.usersService.updateUser(currentUser)
+            .pipe(catchError((err, _) =>  {
+                console.error(err);
+                return of();
+            }))
+            .subscribe(() => {
+                this.usersService.refreshBasket();
+            });
+      } else {
+        window.alert("This need is already in your basket!")
+      }
 
-        }
 
     }
 
-    back() {
-        this.searchResults = [];
+  }
+
+  back() {
+    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';
+      }
+  }
 }
+function not(location: string) {
+  throw new Error('Function not implemented.');
+}
+