diff options
-rw-r--r-- | ufund-ui/src/app/components/need-list/need-list.component.html | 9 | ||||
-rw-r--r-- | ufund-ui/src/app/components/need-list/need-list.component.ts | 61 |
2 files changed, 64 insertions, 6 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 eaa8a6f..de4be58 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,5 +1,14 @@ <h1>Needs List</h1> <div id="search-container"> + <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('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr> + <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr> + <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr> + </table> + </div> <form id="search-form" #searchForm="ngForm"> <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel> <input type="reset" value="Clear" (click)="search(null)"> <br> 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 2eed87d..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,9 +1,40 @@ -import {Component, Output, EventEmitter} 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'; 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 sortByNameReverse: sortAlgo = (a: Need, b: Need): number => { + return sortByName(a,b)*-1; +} + +const sortByMaxGoal: 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; +} + +const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => { + return sortByMaxGoal(a,b)*-1; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -14,6 +45,14 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + currentSortAlgo: sortAlgo = sortByMaxGoal; + + SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ + {func:sortByMaxGoal,name:"sortByMaxGoal"}, + {func:sortByName,name:"sortByName"}, + {func:sortByNameReverse,name:"sortByNameReverse"}, + {func:sortByMinGoal,name:"sortByMinGoal"}, + ]; @Output() currentNeed = new EventEmitter<Need>(); @@ -24,7 +63,7 @@ export class NeedListComponent { refresh() { this.cupboardService.getNeeds().subscribe(n => { - this.needs = n; + this.needs = n.sort(this.currentSortAlgo); this.searchResults = this.needs; }); console.log(this.searchResults); @@ -34,6 +73,19 @@ export class NeedListComponent { this.refresh() } + 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) { @@ -49,7 +101,7 @@ export class NeedListComponent { if (form) { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n; + this.searchResults = n.sort(this.currentSortAlgo); console.log(currentSearchValue, this.searchResults); }); } @@ -60,9 +112,6 @@ export class NeedListComponent { clearTimeout(this.searchDelay); this.searchResults = this.needs; } - - - } delete(id : number) { |