diff options
Diffstat (limited to 'ufund-ui/src/app/components')
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; |