From eeec3e68327ed5b989680a74893e2dcee3ff3e22 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 7 Apr 2025 20:39:10 -0400 Subject: Fix sorting and searching bugs, save sort mode and algo to localStorage --- .../components/cupboard/cupboard.component.html | 4 +- .../app/components/cupboard/cupboard.component.ts | 69 ++++++++++------------ .../components/need-list/need-list.component.ts | 2 +- 3 files changed, 34 insertions(+), 41 deletions(-) diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 8f6901a..2d3fa7c 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -9,8 +9,8 @@
-
- + +
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index f571566..42d920c 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {CupboardService} from '../../services/cupboard.service'; import {Need} from '../../models/Need'; import {catchError, of} from 'rxjs'; @@ -18,16 +18,16 @@ import {ModalService} from '../../services/modal.service'; }) export class CupboardComponent implements OnInit { - // selectedForm?: string = undefined; - // needs: any; + @ViewChild("needList") needList?: NeedListComponent + @ViewChild("searchForm") searchForm!: ElementRef private searchDelay: any; needs: Need[] = []; searchResults: Need[] = []; - sortMode: 'Ascending' | 'Descending' = 'Ascending' + sortMode = localStorage.getItem('sortMode') as 'Ascending' | 'Descending' ?? 'Ascending'; itemsPerPage = parseInt(localStorage.getItem('itemsPerPage') ?? '5') ?? 5; - currentSortAlgo = 'sortByPriority'; + currentSortAlgo = localStorage.getItem('sortAlgo') ?? 'sortByPriority'; constructor( private cupboardService: CupboardService, @@ -39,52 +39,30 @@ export class CupboardComponent implements OnInit { ) {} ngOnInit(): void { - this.cupboardService.getNeeds().subscribe(n => { - this.needs = n; - // this.refresh() - this.search(null) - }); - this.authService.getCurrentUserSubject().subscribe( - () => this.usersService.refreshBasket()) + this.refresh() } refresh() { this.cupboardService.getNeeds().subscribe(n => { - if (this.sortMode == 'Ascending') { - this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func); - } else { - this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); - } - this.searchResults = this.needs; - // this.updateVisibleNeeds(); + this.needs = n; + this.searchResults = this.sortNeeds(this.needs); }); - - const form = document.getElementById('search-form') as HTMLFormElement; - form.reset(); - this.search(null); + this.searchForm.nativeElement.form?.reset() } - async search(form: any) { - console.log(this.currentSortAlgo) + async search(search: 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); } - if (form) { + if (search) { this.searchDelay = setTimeout(() => { - - if (form) { - - const currentSearchValue = form.search; //latest value of the search - this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - if (this.sortMode == 'Ascending') { - this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func); - } else { - this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); - } - // this.updateVisibleNeeds(); + if (search) { + console.log("IF BLOCK") + this.cupboardService.searchNeeds(search).subscribe((n) => { + this.searchResults = this.sortNeeds(n); }); } }, 250); @@ -92,10 +70,25 @@ export class CupboardComponent implements OnInit { //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; + this.searchResults = this.sortNeeds(this.needs); + } + } + + sortNeeds(needs: Need[]) { + this.saveSortOptions() + needs = [...needs] // deep copy + if (this.sortMode == 'Ascending') { + return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func); + } else { + return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); } } + saveSortOptions() { + localStorage.setItem('sortMode', this.sortMode); + localStorage.setItem('sortAlgo', this.currentSortAlgo); + } + toggleSortMode(form : any) { if (this.sortMode == 'Ascending'){ this.sortMode = 'Descending' 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 2fbf9d2..b0a012f 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 @@ -19,8 +19,8 @@ export class NeedListComponent implements OnChanges { totalPages: number = 0; ngOnChanges() { - this.updateVisibleNeeds() this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0; + this.updateVisibleNeeds() } getPrefix(need: Need) { -- cgit v1.2.3