Implemented action buttons with ng-template!!!

5 files changed, 97 insertions, 110 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 969b232..cd387a3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -24,13 +24,23 @@
             <label>Needs per page: </label>
             <input type ="number" [(ngModel)]="itemsPerPage" min="1" max="{{searchResults.length}}">
         </div>
-        <!--<button (click)="close()">Close</button>-->
     </div>
     <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 *ngIf="searchResults.length > 0" [needs]="searchResults" [itemsPerPage]="itemsPerPage" #needList></app-need-list>
+    <ng-template let-need #NLActions>
+        <button *ngIf="isHelper()" (click)="addToBasket(need)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+        <button *ngIf="isManager()" (click)="select(need)">
+            <span class="icon">edit</span>Edit Need
+        </button>
+        <button *ngIf="isManager()" (click)="deleteNeed(need.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
+    </ng-template>
+    <app-need-list [actionArea]="NLActions" *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 f723755..a4f8db2 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,9 +1,9 @@
 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 {BehaviorSubject, catchError, Observable, of} from 'rxjs';
-import { NeedListComponent } from '../need-list/need-list.component';
+import {CupboardService} from '../../services/cupboard.service';
+import {Need} from '../../models/Need';
+import {userType} from '../../models/User';
+import {catchError, of} from 'rxjs';
+import {NeedListComponent} from '../need-list/need-list.component';
 import {AuthService} from '../../services/auth.service';
 import {ToastsService, ToastType} from '../../services/toasts.service';
 import {UsersService} from '../../services/users.service';
@@ -72,14 +72,6 @@ export class CupboardComponent implements OnInit {
             this.searchDelay = setTimeout(() => {
 
                 if (form) {
-                    //sorting based on algo selected
-                    // SortingAlgoArrays.forEach(algo => {
-                    //     if(algo.name === this.sortSelection) {
-                    //         this.currentSortAlgo = SortingAlgoArrays[this.sort];
-                    //         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) => {
@@ -109,28 +101,52 @@ export class CupboardComponent implements OnInit {
         this.search(form)
     }
 
-    async updateSearchResults() {
-        // if (this.needList) {
-        //     while (this.selectedForm == 'update') {
-        //         // this.searchResults = this.needList.searchResults
-        //         await new Promise(resolve => setTimeout(resolve, 100));
-        //     }
-        // }
+    deleteNeed(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();
     }
 
-    // ------------ HELPER FUNCTIONS --------------- //
+    addToBasket(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!")
+            }
+        }
+    }
 
     isManager() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
+        return this.authService.getCurrentUser()?.type === userType.MANAGER
     }
 
     isHelper() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("HELPER" as unknown as userType);
+        return this.authService.getCurrentUser()?.type === userType.HELPER
     }
 
-    // -------------- DISPLAY FUNCTIONS -------------- //
+    // --------------- FORM STUFF NOT IMPLEMENTED YET --------------- //
+
+    // async updateSearchResults() {
+    //     if (this.needList) {
+    //         while (this.selectedForm == 'update') {
+    //             // this.searchResults = this.needList.searchResults
+    //             await new Promise(resolve => setTimeout(resolve, 100));
+    //         }
+    //     }
+    // }
 
     selectForm(name: string) {
         // //get search results from the need list
@@ -154,37 +170,37 @@ export class CupboardComponent implements OnInit {
     //     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';
-    //     }
-    // }
+    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 = {
@@ -225,36 +241,6 @@ export class CupboardComponent implements OnInit {
     //         );
     // }
 
-    // -------------- 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!")
-    //         }
-    //     }
-    // }
-
     protected readonly SortingAlgorithms = SortingAlgoArrays;
     protected readonly Object = Object;
 }
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 2b05d01..3e884cd 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -1,7 +1,13 @@
 <div id="box">
     <h1>Funding Basket</h1>
     <ng-template [ngIf]="(usersService.getBasket() | async)?.length">
-        <app-need-list [needs]="(usersService.getBasket() | async)!"/>
+        <ng-template let-need #NLActions>
+            <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution">
+            <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
+                <span class="icon">delete</span>Remove from Basket
+            </button>
+        </ng-template>
+        <app-need-list [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/>
         <br>
         <div id="footer">
             <button class="button2" title="checkout" (click)="checkout()">Checkout</button>
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 b19c33d..ffed91d 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
@@ -20,24 +20,9 @@
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
-
-<!--        <div class="actionArea">-->
-<!--            <button *ngIf="isHelper()" (click)="add(need)">-->
-<!--                <span class="icon">add</span>Add To Basket-->
-<!--            </button>-->
-<!--            <button *ngIf="isManager()" (click)="select(need)">-->
-<!--                <span class="icon">edit</span>Edit Need-->
-<!--            </button>-->
-<!--            <button *ngIf="isManager()" (click)="delete(need.id)" >-->
-<!--                <span class="icon">delete</span>Delete Need-->
-<!--            </button>-->
-<!--        </div>-->
-<!--        <div class="actionArea">-->
-<!--            <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">-->
-<!--            <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">-->
-<!--                <span class="icon">delete</span> Remove from Basket-->
-<!--            </button>-->
-<!--        </div>-->
+        <div *ngIf="actionArea" class="actionArea">
+            <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
+        </div>
     </div>
 </div>
 
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 cd7debb..7e5c3f4 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,6 +1,5 @@
-import {Component, Input, OnChanges, OnInit} from '@angular/core';
+import {Component, Input, OnChanges, TemplateRef} from '@angular/core';
 import {Need} from '../../models/Need';
-import {Observable} from 'rxjs';
 
 @Component({
     selector: 'app-need-list',
@@ -12,6 +11,7 @@ export class NeedListComponent implements OnChanges {
 
     @Input({required: true}) needs!: Need[]
     @Input() itemsPerPage: number = 5;
+    @Input() actionArea: TemplateRef<any> | null = null
 
     visibleNeeds: Need[] = [];
     currentPage: number = 0;