abstraction working with search and sort

4 files changed, 152 insertions, 165 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index bdc8a0e..969b232 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -14,23 +14,23 @@
         <div id="sortArea">
             <label for="sort">Sort by: </label>
             <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input" (change)="search(searchForm.value)" [value]="currentSortAlgo">
-                <option *ngFor="let algorithm of Object.values(SortingAlgoArrays)" value="{{algorithm}}">
-                    {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
+                <option *ngFor="let algorithm of Object.keys(SortingAlgorithms)" [value]="algorithm">
+                    {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}}
                 </option>
             </select>
-            <button (click)="changeSortMode(searchForm.value)">
+            <button (click)="toggleSortMode(searchForm.value)">
                 <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
             </button>
             <label>Needs per page: </label>
-<!--            <input type ="number" [(ngModel)]="itemsPerPage" min="1" max="{{searchResults.length}}">-->
+            <input type ="number" [(ngModel)]="itemsPerPage" min="1" max="{{searchResults.length}}">
         </div>
         <!--<button (click)="close()">Close</button>-->
     </div>
-    <h2 *ngIf="(searchResults | async)?.length < needs.length && (searchResults | async)?.length != 0"> Search Results({{needs.length - (searchResults | async)?.length}} needs filtered): </h2>
-    <h2 *ngIf="(searchResults | async)?.length == needs.length"> All Needs </h2>
-    <h2 *ngIf="(searchResults | async)?.length == 0"> No Results Found </h2>
+    <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
+    <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
+    <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-    <app-need-list [needs]="searchResults" #needList></app-need-list>
+    <app-need-list *ngIf="searchResults.length > 0" [needs]="searchResults" [itemsPerPage]="itemsPerPage" #needList></app-need-list>
 </div>
 
 <!--<ng-template [ngIf]="isManager()" >-->
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 5139738..f723755 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -2,7 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
-import { catchError, of } from 'rxjs';
+import {BehaviorSubject, catchError, Observable, of} from 'rxjs';
 import { NeedListComponent } from '../need-list/need-list.component';
 import {AuthService} from '../../services/auth.service';
 import {ToastsService, ToastType} from '../../services/toasts.service';
@@ -17,17 +17,17 @@ import {SortingAlgoArrays} from './sorting';
 })
 export class CupboardComponent implements OnInit {
 
-    selectedForm?: string = undefined;
+    // selectedForm?: string = undefined;
     // needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
     private searchDelay: any;
-    selectedNeed: Need | null = null;
+    // selectedNeed: Need | null = null;
     needs: Need[] = [];
     searchResults: Need[] = [];
     sortMode: 'Ascending' | 'Descending' = 'Ascending'
-
-    currentSortAlgo = SortingAlgoArrays.sortByPriority;
+    itemsPerPage = 5;
+    currentSortAlgo = 'sortByPriority';
 
     constructor(
         private cupboardService: CupboardService,
@@ -39,16 +39,17 @@ export class CupboardComponent implements OnInit {
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => {
             this.needs = n;
-            this.refresh()
+            // this.refresh()
+            this.search(null)
         });
     }
 
     refresh() {
         this.cupboardService.getNeeds().subscribe(n => {
             if (this.sortMode == 'Ascending') {
-                this.needs = n.sort(this.currentSortAlgo.func);
+                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
             } else {
-                this.needs = n.sort(this.currentSortAlgo.func).reverse();
+                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
             }
             this.searchResults = this.needs;
             // this.updateVisibleNeeds();
@@ -59,24 +60,8 @@ export class CupboardComponent implements OnInit {
         this.search(null);
     }
 
-    selectForm(name: string) {
-        //get search results from the need list
-        if (this.needList) {
-            // this.searchResults = this.needList.searchResults;
-        }
-        console.log(this.searchResults)
-        this.selectedForm = name;
-        if (name == 'update') {
-            if (this.searchResults) {
-                this.searchResults.forEach((element: any) => {
-                    console.log(element)
-                });
-            }
-
-        }
-    }
-
     async search(form: any) {
+        console.log(this.currentSortAlgo)
         //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
@@ -99,9 +84,9 @@ export class CupboardComponent implements OnInit {
                     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.func);
+                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
                         } else {
-                            this.searchResults = n.sort(this.currentSortAlgo.func).reverse();
+                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
                         }
                         // this.updateVisibleNeeds();
                     });
@@ -115,7 +100,7 @@ export class CupboardComponent implements OnInit {
         }
     }
 
-    changeSortMode(form : any) {
+    toggleSortMode(form : any) {
         if (this.sortMode == 'Ascending'){
             this.sortMode = 'Descending'
         } else {
@@ -124,26 +109,16 @@ export class CupboardComponent implements OnInit {
         this.search(form)
     }
 
-    changeText(id : number, text : string) {
-        const span = document.getElementById('hover-status-label-' + id);
-        if (span) {
-            span.innerHTML = ' ' + text;
-        }
-    }
-
     async updateSearchResults() {
-        if (this.needList) {
-            while (this.selectedForm == 'update') {
-                // this.searchResults = this.needList.searchResults
-                await new Promise(resolve => setTimeout(resolve, 100));
-            }
-        }
+        // if (this.needList) {
+        //     while (this.selectedForm == 'update') {
+        //         // this.searchResults = this.needList.searchResults
+        //         await new Promise(resolve => setTimeout(resolve, 100));
+        //     }
+        // }
     }
 
-    populateForm(need: any): void {
-        this.selectForm('update');
-        this.selectedNeed = { ...need };
-    }
+    // ------------ HELPER FUNCTIONS --------------- //
 
     isManager() {
         const type = this.authService.getCurrentUser()?.type;
@@ -157,107 +132,129 @@ export class CupboardComponent implements OnInit {
 
     // -------------- DISPLAY FUNCTIONS -------------- //
 
-    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';
-        }
+    selectForm(name: string) {
+        // //get search results from the need list
+        // if (this.needList) {
+        //     // this.searchResults = this.needList.searchResults;
+        // }
+        // console.log(this.searchResults)
+        // this.selectedForm = name;
+        // if (name == 'update') {
+        //     if (this.searchResults) {
+        //         this.searchResults.forEach((element: any) => {
+        //             console.log(element)
+        //         });
+        //     }
+        //
+        // }
     }
 
-    submit(form: any) {
-        const need: Need = {
-            name: form.name,
-            image: form.image,
-            location: form.location,
-            id: 0,
-            maxGoal: form.maxGoal,
-            type: form.type,
-            urgent: !!form.urgent,
-            filterAttributes: [],
-            current: 0,
-            description: form.description
-        };
-        console.log("need:", need);
-        console.log("form submitted. creating need: ", need);
-        this.cupboardService.createNeed(need)
-            .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
-                } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.ERROR, ex.error);
-                } else {
-                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
-                }
-                return of()
-            }))
-            .subscribe(
-                (result) => {
-                    if (result) {
-                        console.log("need created successfully");
-                        // this.needList?.refresh()
-                    } else {
-                        console.log("need creation failed");
-                    }
-                }
+    // populateForm(need: any): void {
+    //     this.selectForm('update');
+    //     this.selectedNeed = { ...need };
+    // }
+    //
+    // 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';
+    //     }
+    // }
 
-            );
-    }
+    // submit(form: any) {
+    //     const need: Need = {
+    //         name: form.name,
+    //         image: form.image,
+    //         location: form.location,
+    //         id: 0,
+    //         maxGoal: form.maxGoal,
+    //         type: form.type,
+    //         urgent: !!form.urgent,
+    //         filterAttributes: [],
+    //         current: 0,
+    //         description: form.description
+    //     };
+    //     console.log("need:", need);
+    //     console.log("form submitted. creating need: ", need);
+    //     this.cupboardService.createNeed(need)
+    //         .pipe(catchError((ex, _) => {
+    //             if (ex.status == 500) {
+    //                 this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
+    //             } else if (ex.status == 400) {
+    //                 this.toastService.sendToast(ToastType.ERROR, ex.error);
+    //             } else {
+    //                 this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+    //             }
+    //             return of()
+    //         }))
+    //         .subscribe(
+    //             (result) => {
+    //                 if (result) {
+    //                     console.log("need created successfully");
+    //                     // this.needList?.refresh()
+    //                 } else {
+    //                     console.log("need creation failed");
+    //                 }
+    //             }
+    //
+    //         );
+    // }
 
     // -------------- CRUD OPERATIONS -------------- //
 
-    delete(id : number) {
-        this.cupboardService.deleteNeed(id).subscribe(() => {
-            this.toastService.sendToast(ToastType.INFO, "Need deleted.")
-            this.needs = this.needs.filter(n => n.id !== id)
-        })
-        this.refresh();
-    }
-
-    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 {
-                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
-            }
-        }
-    }
+    // delete(id : number) {
+    //     this.cupboardService.deleteNeed(id).subscribe(() => {
+    //         this.toastService.sendToast(ToastType.INFO, "Need deleted.")
+    //         this.needs = this.needs.filter(n => n.id !== id)
+    //     })
+    //     this.refresh();
+    // }
+    //
+    // 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 {
+    //             this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+    //         }
+    //     }
+    // }
 
-    protected readonly SortingAlgoArrays = SortingAlgoArrays;
+    protected readonly SortingAlgorithms = SortingAlgoArrays;
     protected readonly Object = Object;
 }
diff --git a/ufund-ui/src/app/components/cupboard/sorting.ts b/ufund-ui/src/app/components/cupboard/sorting.ts
index a512f22..7cb3f39 100644
--- a/ufund-ui/src/app/components/cupboard/sorting.ts
+++ b/ufund-ui/src/app/components/cupboard/sorting.ts
@@ -49,10 +49,10 @@ const sortByLocation: sortAlgo = (a: Need, b: Need): number => {
     return 1;
 }
 
-export const SortingAlgoArrays = {
-    sortByPriority:   { func: sortByPriority,   display: ["Highest Priority",     "Lowest Priority"       ] },
-    sortByName:       { func: sortByName,       display: ["Name (A to Z)",        "Name (Z to A)"         ] },
-    sortByLocation:   { func: sortByLocation,   display: ["Location (A to Z)",    "Location (Z to A)"     ] },
-    sortByCompletion: { func: sortByCompletion, display: ["Most Completed",       "Least Completed"       ] },
-    sortByGoal:       { func: sortByGoal,       display: ["Largest Maximum Goal", "Smallest Maximum Goal" ] },
+export const SortingAlgoArrays: {[key: string]: { func: sortAlgo, display: [string, string]}} = {
+    "sortByPriority":   { func: sortByPriority,   display: ["Highest Priority",     "Lowest Priority"       ] },
+    "sortByName":       { func: sortByName,       display: ["Name (A to Z)",        "Name (Z to A)"         ] },
+    "sortByLocation":   { func: sortByLocation,   display: ["Location (A to Z)",    "Location (Z to A)"     ] },
+    "sortByCompletion": { func: sortByCompletion, display: ["Most Completed",       "Least Completed"       ] },
+    "sortByGoal":       { func: sortByGoal,       display: ["Largest Maximum Goal", "Smallest Maximum Goal" ] },
 };
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 d027690..cd7debb 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,10 +11,10 @@ import {Observable} from 'rxjs';
 export class NeedListComponent implements OnChanges {
 
     @Input({required: true}) needs!: Need[]
+    @Input() itemsPerPage: number = 5;
 
     visibleNeeds: Need[] = [];
     currentPage: number = 0;
-    itemsPerPage: number = 5;
     totalPages: number = 0;
 
     constructor(
@@ -45,19 +45,9 @@ export class NeedListComponent implements OnChanges {
         this.updateVisibleNeeds()
     }
 
-    editNeedsPerPage(amount: number) {
-        this.itemsPerPage = amount;
-        this.updateVisibleNeeds();
-    }
-
     updateVisibleNeeds() {
         this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage);
         this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
     }
-
-    resetVisibleNeeds() {
-        this.currentPage = 0;
-        this.updateVisibleNeeds();
-    }
 }