implement sorting algorithms with selection buttons. -ak

2 files changed, 50 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..c5faf74 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,4 +1,11 @@
 <h1>Needs List</h1>
+<div style="display: flex;">
+    <h3>Sort by:</h3>
+    <table style="margin-left: 10px; display: flex; column-gap: 24px;">
+        <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
+        <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
+    </table>
+</div>
 <input id="search-button" type="button" value="Search" (click)="open()">
 <div id="search-form">
     <form #searchForm="ngForm">
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 25f05d6..be444fb 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,8 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, Input } 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';
+
+interface sortAlgo {
+  (a: Need,b: Need): number;
+}
+
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+  if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
+  if(a.maxGoal >= b.maxGoal) {
+    return -1;
+  }
+  return 1;
+}
+
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -12,6 +32,12 @@ import { userType } from '../../models/User';
 export class NeedListComponent {
   needs: Need[] = [];
   searchResults: Need[] = [];
+  currentSortAlgo: sortAlgo = sortByMaxGoal;
+
+  SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
+    {func:sortByMaxGoal,name:"sortByMaxGoal"},
+    {func:sortByName,name:"sortByName"},
+  ];
 
   constructor(
     private cupboardService: CupboardService,
@@ -19,7 +45,7 @@ export class NeedListComponent {
   ) {}
 
     refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+        this.cupboardService.getNeeds().subscribe(n => this.needs = n.sort(this.currentSortAlgo))
     }
 
   ngOnInit(): void {
@@ -60,6 +86,19 @@ export class NeedListComponent {
     this.hideElement(document.getElementById('search-status'));
   }
 
+  changeSortAlgo(algoName: string, form: any) {
+    console.log(algoName);
+    this.SortingAlgoArrays.forEach(algo => {
+      if(algo.name === algoName) {
+        this.currentSortAlgo = algo.func;
+        console.log("changed sorting algorithm to: ", algo.name)
+        return
+      }
+    });
+    this.refresh()
+    this.search(form);
+  }
+
   private searchDelay: any;
 
   async search(form: any) {
@@ -72,8 +111,9 @@ export class NeedListComponent {
 
     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;
+        this.searchResults = n.sort(this.currentSortAlgo);
         console.log(currentSearchValue, this.searchResults);
         this.showElement(document.getElementById('search-results'));
         this.showElement(document.getElementById('search-status'));