diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket')
3 files changed, 70 insertions, 132 deletions
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index bd41fda..4764b0f 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -80,3 +80,11 @@ padding: 5px; gap: 5px; } + +#footer { + display: flex; + flex-direction: row; + align-items: center; + gap: 20px; + margin-bottom: 10px; +} 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 b88ef31..7158194 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,81 +1,25 @@ - -<!--<div id="needCount">--> -<!-- <label for="needCount">Needs in Basket:</label>--> -<!-- <span>{{ this.usersService.getBasket().getValue().length }}</span>--> -<!--</div>--> - -<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">--> -<!-- <h2>There are no needs in the basket</h2>--> -<!--</div>--> - -<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">--> -<!-- <thead>--> -<!-- <tr>--> -<!-- <th class="need"></th>--> -<!-- </tr>--> -<!-- </thead>--> -<!-- <tbody>--> -<!-- <tr *ngFor="let need of usersService.getBasket().getValue()">--> -<!-- <td>--> -<!-- <a routerLink="/need/{{need.id}}">{{need.name}}</a>--> -<!-- <p>Goal: {{need.maxGoal}}</p>--> -<!-- <p>Current: {{(need.current).toFixed(2)}}</p>--> -<!-- <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>--> -<!-- <br>--> -<!-- <div>--> -<!-- <button type="button" class="removeNeed" title="delete need"--> -<!-- (click)="this.usersService.removeNeed(need.id)">Remove Need</button>--> -<!-- </div>--> -<!-- </td>--> -<!-- </tr>--> -<!-- </tbody>--> -<!--</table>--> -<!--<br>--> <div id="box"> - <h1>Funding Basket</h1> - <ng-template [ngIf]="usersService.getBasket().getValue().length"> - <div id="needList"> - <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry"> - <div [routerLink]="'/need/' + need.id" class="clickable"> - <div class="split"> - <div class="left"> - <span class="needName">{{need.name}}</span> - <span class="needType">{{need.type}}</span> - </div> - - <div class="right"> - <span *ngIf="need.urgent" class="urgent">URGENT</span> - <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span> - </div> - </div> - - <br> - - <div class="prog"> - <span id="hover-status-label-{{need.id}}"> </span> - <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> - <progress [value]="need.current" [max]="need.maxGoal"></progress> - </div> - - <!-- <div class="description">--> - <!-- {{need.description}}--> - <!-- </div>--> - </div> - - <div class="actionArea"> - <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution sort-scheme"> - <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)"> - <span class="icon">delete</span> Remove from Basket - </button> - </div> + @if ((authService.getCurrentUserSubject() | async)?.type === userType.HELPER) { + <h1>Funding Basket</h1> + <ng-template [ngIf]="(usersService.getBasket() | async)?.length"> + <ng-template let-need #NLActions> + <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="resetColor($event)"> + <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)"> + <span class="icon">delete</span>Remove from Basket + </button> + </ng-template> + <app-need-list [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/> + <br> + <div id="footer"> + <button class="button2" title="checkout" (click)="checkout()">Checkout</button> + <span id="running-total">Your current running total is: ${{runningTotal | async}}</span> </div> + </ng-template> + <div *ngIf="!usersService.getBasket().getValue().length"> + <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a> </div> - <br> - <div id="footer"> - <button class="button2" title="checkout" (click)="checkout()">Checkout</button> - </div> - </ng-template> - <div *ngIf="!usersService.getBasket().getValue().length"> - <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a> - </div> + } @else { + <h1>Unauthorized</h1> + <span>This page requires you to be logged in as a user! <a routerLink="/login">Log In</a></span> + } </div> diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts index 847baee..78ce958 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts @@ -2,9 +2,11 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {UsersService} from '../../services/users.service'; import {Router} from '@angular/router'; import {CupboardService} from '../../services/cupboard.service'; -import {catchError, firstValueFrom, Observable} from 'rxjs'; +import {BehaviorSubject, firstValueFrom, of} from 'rxjs'; import {AuthService} from '../../services/auth.service'; import {ToastsService, ToastType} from '../../services/toasts.service'; +import {userType} from '../../models/User'; +import {GoalType} from '../../models/Need'; @Component({ selector: 'app-funding-basket', @@ -18,77 +20,61 @@ export class FundingBasketComponent implements OnInit { private router: Router, protected cupboardService: CupboardService, protected usersService: UsersService, - private authService: AuthService, + protected authService: AuthService, private toastService: ToastsService ) {} + public runningTotal = new BehaviorSubject(0) @ViewChild("contribution") contribution?: Input; - @Input() isValid: boolean = true; - // this is for login rerouting ngOnInit(): void { - if (!this.authService.getCurrentUser()) { - this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); - return; - } this.usersService.refreshBasket(); - // this.usersService.removeNeed(); <- call this to remove } async checkout() { - this.isValid = true; - for (let c of document.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - contribution.setAttribute("style", ""); - if (contribution.value == '' || contribution.valueAsNumber <= 0) { - this.isValid = false; + let order: { needID: number, quantity: number }[] = [] + let isNotValid = false + for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { + if (contribution.value == '' || contribution.valueAsNumber <= 0) { + isNotValid = true contribution.setAttribute("style", "border-color: #ff0000"); - this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") - - setTimeout(() => { - contribution.setAttribute("style", "border-color: #ffffff"); - }, 3000); } + order.push({needID: +contribution.id, quantity: contribution.valueAsNumber}); } - // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1)) - // for (let c of this.usersService.getBasket().value) { - // if (c == null) { - // this.isValid = false; - // this.statusText.next("One or more needs have been deleted") - // } else { - // this.statusText.next("test") - // } - // } - if (this.isValid) { - for (let c of document.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); - need.current += +contribution.value; - this.usersService.removeNeed(+need.id); - this.cupboardService.checkoutNeed(need.id, +contribution.value) - .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 new Observable<string>(); - })) - .subscribe((result) => { - if (result) { - //this.needList?.refresh() - } else { - console.log('need update failed'); - } - this.toastService.sendToast(ToastType.INFO, "Checkout successful"); - }); - } + + if (isNotValid) { + this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") + return; + } + + try { + await firstValueFrom(this.cupboardService.checkoutNeed(order)) + } catch (ex:any) { + this.toastService.sendToast(ToastType.ERROR, ex.error); + return } + + order.forEach(contribution => this.usersService.removeNeed(contribution.needID)) + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); } + resetColor(ev: any) { + let total = 0 + this.runningTotal.next(total); + for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { + this.cupboardService.getNeed(+contribution.id).subscribe(need => { + if (contribution.value != '' && need.type != GoalType.PHYSICAL) { + total += contribution.valueAsNumber + } + this.runningTotal.next(total); + }) + } + + (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") + } + protected readonly of = of; + protected readonly userType = userType; } |