aboutsummaryrefslogtreecommitdiff
path: root/ufund-ui/src/app/components/need-list/need-list.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts')
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.ts326
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.');
+}
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 09:57:23 +0000