From 8ec987f46b4ef3ff1ce23d9942662a74e162689d Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 20 Mar 2025 09:58:32 -0400 Subject: need-list search embedded in normal display with better feedback --- .../components/need-list/need-list.component.ts | 60 +++++++++++----------- 1 file changed, 31 insertions(+), 29 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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..f5d7855 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 } 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'; @@ -19,12 +20,16 @@ export class NeedListComponent { ) {} refresh() { - this.cupboardService.getNeeds().subscribe(n => this.needs = n) + this.cupboardService.getNeeds().subscribe(n => { + this.needs = n; + this.searchResults = this.needs; + }); + + console.log(this.searchResults); } ngOnInit(): void { this.refresh() - this.close(); } @@ -42,20 +47,13 @@ export class NeedListComponent { } } - 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')); + this.showElement(document.getElementById('search-container')); } close() { - this.hideElement(document.getElementById('search-form')); + this.hideElement(document.getElementById('search-container')); this.showElement(document.getElementById('search-button')); this.hideElement(document.getElementById('search-status')); } @@ -69,24 +67,28 @@ export class NeedListComponent { if (this.searchDelay) { clearTimeout(this.searchDelay); } + 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; + console.log(currentSearchValue, this.searchResults); + this.showElement(document.getElementById('search-results')); + this.showElement(document.getElementById('search-status')); + }); + } + }, 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; + } + - 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); + } delete(id : number) { @@ -127,6 +129,6 @@ export class NeedListComponent { } back() { - this.searchResults = []; + this.searchResults = this.needs; } } -- cgit v1.2.3 From d8b9c0da32383630f0831fdf6a7f13c96174ee4c Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 22 Mar 2025 12:17:50 -0400 Subject: removing unneccicary functions for element visiblity in need list --- .../components/need-list/need-list.component.ts | 29 ---------------------- 1 file changed, 29 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 f5d7855..3f77df4 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 @@ -24,38 +24,11 @@ export class NeedListComponent { this.needs = n; 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'; - } - } - - open() { - this.hideElement(document.getElementById('search-button')); - this.showElement(document.getElementById('search-container')); - } - - close() { - this.hideElement(document.getElementById('search-container')); - this.showElement(document.getElementById('search-button')); - this.hideElement(document.getElementById('search-status')); } private searchDelay: any; @@ -75,8 +48,6 @@ export class NeedListComponent { 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')); }); } }, 250); -- cgit v1.2.3 From a05f6f0ab8dead76f937a2d7196fa005af0367fe Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 24 Mar 2025 10:27:31 -0400 Subject: hover feedback for need list's button --- ufund-ui/src/app/components/need-list/need-list.component.ts | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 3f77df4..8ae7370 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 @@ -78,6 +78,13 @@ export class NeedListComponent { return type === ("HELPER" as unknown as userType); } + changeText(id : number, text : string) { + const label = document.getElementById('need-label-' + id); + if (label) { + label.innerHTML = text; + } + } + add(need: Need) { const currentUser = this.usersService.getCurrentUser(); //console.log("get current user in angular:", currentUser) -- cgit v1.2.3 From 1c1d3922e7eea35764ebab39b18172ed2c8c82d9 Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 24 Mar 2025 10:38:40 -0400 Subject: better feedback using a --- ufund-ui/src/app/components/need-list/need-list.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 8ae7370..0f86921 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 @@ -79,10 +79,10 @@ export class NeedListComponent { } changeText(id : number, text : string) { - const label = document.getElementById('need-label-' + id); - if (label) { - label.innerHTML = text; - } + const span = document.getElementById('hover-status-label-' + id); + if (span) { + span.innerHTML = ' ' + text; + } } add(need: Need) { -- cgit v1.2.3 From 20458b2ae22466d0b75a2ae60f318e514c0d905f Mon Sep 17 00:00:00 2001 From: benal01 Date: Tue, 25 Mar 2025 08:46:45 -0400 Subject: need list reformatting- button does not span whole list element --- ufund-ui/src/app/components/need-list/need-list.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 0f86921..e47929b 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 @@ -11,6 +11,7 @@ import { userType } from '../../models/User'; styleUrl: './need-list.component.css' }) export class NeedListComponent { + selectedNeed: Need | undefined; needs: Need[] = []; searchResults: Need[] = []; @@ -109,4 +110,8 @@ export class NeedListComponent { back() { this.searchResults = this.needs; } -} + + select(need : Need) { + this.selectedNeed = need; + } +} \ No newline at end of file -- cgit v1.2.3 From 304b867c6fa5c1192e8cdec7fd22affb50e244b3 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Tue, 25 Mar 2025 09:37:49 -0400 Subject: implement sorting algorithms with selection buttons. -ak --- .../components/need-list/need-list.component.ts | 46 ++++++++++++++++++++-- 1 file changed, 43 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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')); -- cgit v1.2.3 From 07d191cb1fc8890f66e9af7d19e8276089d18d8b Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Tue, 25 Mar 2025 09:45:38 -0400 Subject: added more sort options; fix HTML error --- .../src/app/components/need-list/need-list.component.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 be444fb..06bb17e 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 @@ -16,13 +16,24 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => { 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) { + 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, @@ -37,6 +48,8 @@ export class NeedListComponent { SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ {func:sortByMaxGoal,name:"sortByMaxGoal"}, {func:sortByName,name:"sortByName"}, + {func:sortByNameReverse,name:"sortByNameReverse"}, + {func:sortByMinGoal,name:"sortByMinGoal"}, ]; constructor( -- cgit v1.2.3 From d9eb78521f29ead3a9f70b09e18a6d9560cc849c Mon Sep 17 00:00:00 2001 From: benal01 Date: Tue, 25 Mar 2025 10:43:52 -0400 Subject: fancy selection animation for need list --- .../components/need-list/need-list.component.ts | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 e47929b..9ef191a 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 @@ -112,6 +112,32 @@ export class NeedListComponent { } select(need : Need) { - this.selectedNeed = 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'; + } } } \ No newline at end of file -- cgit v1.2.3 From 0829feb20e60bc6d323dcc0d9376f4feb45115eb Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 26 Mar 2025 18:23:17 -0400 Subject: Push starter code for Input() --- .../app/components/need-list/need-list.component.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 9ef191a..bf78d99 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,4 @@ -import { Component } from '@angular/core'; +import {Component, Input} from '@angular/core'; import { NgForm } from '@angular/forms'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; @@ -15,6 +15,8 @@ export class NeedListComponent { needs: Need[] = []; searchResults: Need[] = []; + @Input() editF?: Function + constructor( private cupboardService: CupboardService, private usersService: UsersService @@ -43,7 +45,7 @@ export class NeedListComponent { } if (form) { this.searchDelay = setTimeout(() => { - + if (form) { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { @@ -58,9 +60,9 @@ export class NeedListComponent { clearTimeout(this.searchDelay); this.searchResults = this.needs; } - - + + } delete(id : number) { @@ -80,10 +82,10 @@ export class NeedListComponent { } changeText(id : number, text : string) { - const span = document.getElementById('hover-status-label-' + id); + const span = document.getElementById('hover-status-label-' + id); if (span) { span.innerHTML = ' ' + text; - } + } } add(need: Need) { @@ -101,7 +103,7 @@ export class NeedListComponent { } else { window.alert("This need is already in your basket!") } - + } @@ -140,4 +142,4 @@ export class NeedListComponent { button.style.visibility = 'hidden'; } } -} \ No newline at end of file +} -- cgit v1.2.3 From 0549991d0b32de4de544d16478ce5b2782c1809d Mon Sep 17 00:00:00 2001 From: benal01 Date: Wed, 26 Mar 2025 18:59:55 -0400 Subject: use (output) for need edit selection --- ufund-ui/src/app/components/need-list/need-list.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 bf78d99..2eed87d 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,4 @@ -import {Component, Input} 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'; @@ -11,11 +11,11 @@ import { userType } from '../../models/User'; styleUrl: './need-list.component.css' }) export class NeedListComponent { - selectedNeed: Need | undefined; + selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; - @Input() editF?: Function + @Output() currentNeed = new EventEmitter(); constructor( private cupboardService: CupboardService, @@ -114,6 +114,8 @@ export class NeedListComponent { } select(need : Need) { + //emit value + this.currentNeed.emit(need); if (this.selectedNeed) { //revert already selected need to previous style console.log(need.id); -- cgit v1.2.3 From 057efa1b557d5d874300c6cda8c7d74519c946d6 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 08:50:12 -0400 Subject: use instead of table with *ngFor for sort algorithms --- ufund-ui/src/app/components/need-list/need-list.component.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 208045f..c1063ce 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 @@ -45,6 +45,7 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + sortSelection: string = ''; currentSortAlgo: sortAlgo = sortByMaxGoal; SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ -- cgit v1.2.3 From 84083e7229678c30d827270bfa25de66a02d7b8c Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 08:54:06 -0400 Subject: display name for algorithms --- ufund-ui/src/app/components/need-list/need-list.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 c1063ce..2fdd993 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 @@ -48,11 +48,11 @@ export class NeedListComponent { sortSelection: string = ''; currentSortAlgo: sortAlgo = sortByMaxGoal; - SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ - {func:sortByMaxGoal,name:"sortByMaxGoal"}, - {func:sortByName,name:"sortByName"}, - {func:sortByNameReverse,name:"sortByNameReverse"}, - {func:sortByMinGoal,name:"sortByMinGoal"}, + SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [ + {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"}, + {func:sortByName,name:"sortByName", display:"Name"}, + {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"}, + {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"}, ]; @Output() currentNeed = new EventEmitter(); -- cgit v1.2.3 From 65590e6dfbed90e4acd342a72feb8d7b5120d70c Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 09:49:41 -0400 Subject: refactor sorting to use acending descending toggle --- .../components/need-list/need-list.component.ts | 46 +++++++++++++--------- 1 file changed, 27 insertions(+), 19 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 2fdd993..97be0cb 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 @@ -17,11 +17,7 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => { return 1; } -const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => { - return sortByName(a,b)*-1; -} - -const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { +const sortByGoal: sortAlgo = (a: Need, b: Need): number => { if(a.maxGoal == b.maxGoal) { return sortByName(a,b); } @@ -31,10 +27,6 @@ const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { return 1; } -const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => { - return sortByMaxGoal(a,b)*-1; -} - @Component({ selector: 'app-need-list', standalone: false, @@ -45,14 +37,13 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + sortMode = 'Ascending' sortSelection: string = ''; - currentSortAlgo: sortAlgo = sortByMaxGoal; + currentSortAlgo: sortAlgo = sortByGoal; - SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [ - {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"}, - {func:sortByName,name:"sortByName", display:"Name"}, - {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"}, - {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"}, + SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ + {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; @Output() currentNeed = new EventEmitter(); @@ -64,22 +55,34 @@ export class NeedListComponent { refresh() { this.cupboardService.getNeeds().subscribe(n => { - this.needs = n.sort(this.currentSortAlgo); + if (this.sortMode == 'Ascending') { + this.needs = n.sort(this.currentSortAlgo); + } else { + this.needs = n.sort(this.currentSortAlgo).reverse(); + } this.searchResults = this.needs; }); - console.log(this.searchResults); } ngOnInit(): void { this.refresh() } + changeSortMode(form : any) { + if (this.sortMode == 'Ascending'){ + this.sortMode = 'Descending' + } else { + this.sortMode = 'Ascending' + } + this.search(form) + } + 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) + console.log("changed sorting algorithm to: ", algo.name + this.sortMode) return } }); @@ -102,7 +105,12 @@ export class NeedListComponent { if (form) { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n.sort(this.currentSortAlgo); + if (this.sortMode == 'Ascending') { + this.searchResults = n.sort(this.currentSortAlgo); + } else { + this.searchResults = n.sort(this.currentSortAlgo).reverse(); + } + console.log(currentSearchValue, this.searchResults); }); } -- cgit v1.2.3 From ee4154df85a971f3a0f8e43fd6afdfa6a620ea99 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 10:09:19 -0400 Subject: refactor change sort algo func with [(ngModel)] binding --- .../components/need-list/need-list.component.ts | 25 ++++++++++------------ 1 file changed, 11 insertions(+), 14 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 97be0cb..177d9f7 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 @@ -38,8 +38,9 @@ export class NeedListComponent { needs: Need[] = []; searchResults: Need[] = []; sortMode = 'Ascending' - sortSelection: string = ''; + currentSortAlgo: sortAlgo = sortByGoal; + sortSelection: string = this.currentSortAlgo.name; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, @@ -77,19 +78,6 @@ export class NeedListComponent { this.search(form) } - 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 + this.sortMode) - return - } - }); - this.refresh() - this.search(form); - } - private searchDelay: any; async search(form: any) { @@ -103,6 +91,15 @@ export class NeedListComponent { 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 + } + }); + const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { if (this.sortMode == 'Ascending') { -- cgit v1.2.3 From 0b4c76c5dc7313ae42c62be3c682c1f88cec13fd Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 10:36:32 -0400 Subject: defaut value for sorting --- ufund-ui/src/app/components/need-list/need-list.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 177d9f7..f935e03 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 @@ -40,10 +40,10 @@ export class NeedListComponent { sortMode = 'Ascending' currentSortAlgo: sortAlgo = sortByGoal; - sortSelection: string = this.currentSortAlgo.name; + sortSelection: string = 'sortByGoal'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]}, {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; -- cgit v1.2.3 From 9e011d85fd307768f7cec7214ca873208574ecfb Mon Sep 17 00:00:00 2001 From: benal01 Date: Fri, 28 Mar 2025 21:56:47 -0400 Subject: changed styling of search display to be wider and expand filter descriptions --- ufund-ui/src/app/components/need-list/need-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 f935e03..4359cfa 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 @@ -43,7 +43,7 @@ export class NeedListComponent { sortSelection: string = 'sortByGoal'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]}, {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; -- cgit v1.2.3 From 61b5b762b150c82e7d48190bcfe3416bfea96059 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 29 Mar 2025 14:37:57 -0400 Subject: frontend implementation of a needs' urgency and location --- ufund-ui/src/app/components/need-list/need-list.component.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 4359cfa..37a3775 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,5 +1,4 @@ -import {Component, input, Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component , Output, EventEmitter} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; import { UsersService } from '../../services/users.service'; @@ -39,12 +38,13 @@ export class NeedListComponent { searchResults: Need[] = []; sortMode = 'Ascending' - currentSortAlgo: sortAlgo = sortByGoal; - sortSelection: string = 'sortByGoal'; + currentSortAlgo: sortAlgo = sortByName; + sortSelection: string = 'sortByName'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]}, - {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, + {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]}, + {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, + {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, ]; @Output() currentNeed = new EventEmitter(); -- cgit v1.2.3 From 760b8efef4d683d26404ebca75b7a9c44a1db3a9 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sun, 30 Mar 2025 00:46:50 -0400 Subject: urgency sorting --- .../src/app/components/need-list/need-list.component.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 37a3775..4ae8f4a 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 @@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => { return 1; } +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; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -38,13 +48,13 @@ export class NeedListComponent { searchResults: Need[] = []; sortMode = 'Ascending' - currentSortAlgo: sortAlgo = sortByName; - sortSelection: string = 'sortByName'; + currentSortAlgo: sortAlgo = sortByPriority; + sortSelection: string = 'sortByPriority'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]}, {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, - {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, + {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, ]; @Output() currentNeed = new EventEmitter(); -- cgit v1.2.3 From f23afc7f3b0b62384b3b54a0864b02abc3b48b01 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sun, 30 Mar 2025 00:50:43 -0400 Subject: sortByCompletion --- .../src/app/components/need-list/need-list.component.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 4ae8f4a..17bb3e6 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 @@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => { return 1; } +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; +} + const sortByPriority: sortAlgo = (a: Need, b: Need): number => { if(a.urgent == b.urgent) { return sortByGoal(a,b); @@ -52,8 +62,9 @@ export class NeedListComponent { sortSelection: string = 'sortByPriority'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]}, + {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]}, {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, + {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]}, {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, ]; -- cgit v1.2.3 From 42725635e70426c4d2923c680609da8277c693ea Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 30 Mar 2025 14:44:04 -0400 Subject: fix imports in need-list.component.ts --- .../components/need-list/need-list.component.ts | 25 +++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 2bbacb0..66e53e8 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 @@ -3,6 +3,8 @@ import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; import { UsersService } from '../../services/users.service'; import { userType } from '../../models/User'; +import {AuthService} from '../../services/auth.service'; +import {catchError, of} from 'rxjs'; interface sortAlgo { (a: Need,b: Need): number; @@ -72,7 +74,8 @@ export class NeedListComponent { constructor( private cupboardService: CupboardService, - private usersService: UsersService + private usersService: UsersService, + private authService: AuthService ) {} refresh() { @@ -148,12 +151,12 @@ export class NeedListComponent { } isManager() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("MANAGER" as unknown as userType); } isHelper() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("HELPER" as unknown as userType); } @@ -165,17 +168,19 @@ export class NeedListComponent { } add(need: Need) { - const currentUser = this.usersService.getCurrentUser(); + 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).subscribe(() => { - this.usersService.refreshBasket(); - error: (err: any) => { - console.error(err); - } - }); + 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!") } -- cgit v1.2.3 From 5eba2e924c57a7771c002fa3833beb5ed4275fd2 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sun, 30 Mar 2025 16:44:38 -0400 Subject: location filter, filter order change, and refresh() resets search field for increased usability --- .../components/need-list/need-list.component.ts | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 66e53e8..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,4 +1,5 @@ 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'; @@ -48,6 +49,13 @@ const sortByPriority: sortAlgo = (a: Need, b: Need): number => { return 1; } +const sortByLocation: sortAlgo = (a: Need, b: Need): number => { + if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) { + return -1; + } + return 1; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -64,10 +72,11 @@ export class NeedListComponent { 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:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, + {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]}, {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]}, - {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, + {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, ]; @Output() currentNeed = new EventEmitter(); @@ -87,6 +96,10 @@ export class NeedListComponent { } this.searchResults = this.needs; }); + + const form = document.getElementById('search-form') as HTMLFormElement; + form.reset(); + this.search(null); } ngOnInit(): void { @@ -148,6 +161,7 @@ export class NeedListComponent { this.cupboardService.deleteNeed(id).subscribe(() => { this.needs = this.needs.filter(n => n.id !== id) }) + this.refresh(); } isManager() { @@ -226,3 +240,7 @@ export class NeedListComponent { } } } +function not(location: string) { + throw new Error('Function not implemented.'); +} + -- cgit v1.2.3