diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket')
3 files changed, 69 insertions, 75 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 e69de29..3dec496 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 @@ -0,0 +1,7 @@ +td, p { + border: 2px solid #000; + border-radius: 5px; + padding: 5px; + margin: 5px; + +}
\ No newline at end of file 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 0a880af..504e694 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 @@ -2,33 +2,30 @@ <div id="needCount"> <label for="needCount">Needs in Basket:</label> - <span>{{ needCount }}</span> + <span>{{ this.usersService.getBasket().getValue().length }}</span> </div> -<div *ngIf="isBasketEmpty"> +<div *ngIf="this.usersService.getBasket().getValue().length == 0"> <h2>There are no needs in the basket</h2> </div> -<table class="needs" *ngIf="!isBasketEmpty"> +<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 basket"> + <tr *ngFor="let need of usersService.getBasket().getValue()"> <td> - <a routerLink="/need/{{need.id}}"> - {{need.name}} - </a> - <div> - <button type="button" class="addNeed" title="add need" - (click)="addNeed(need)">Add Need</button> - </div> + <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)="removeNeed(need)">Remove Need</button> + <button type="button" class="removeNeed" title="delete need" + (click)="this.usersService.removeNeed(need.id)">Remove Need</button> </div> </td> </tr> @@ -36,6 +33,7 @@ </table> <br> <div> - <button type="submit" class="checkout" title="checkout" - (click)="checkout()">Checkout</button> + <p *ngIf="!isValid">Invalid input in funding basket!</p> + <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button> + <span *ngIf="statusText">{{statusText | async}}</span> </div>
\ No newline at end of file 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 dd68c0c..e654711 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 @@ -1,10 +1,11 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {User} from '../../models/User'; import { UsersService } from '../../services/users.service'; import { Need } from '../../models/Need'; import { NeedListComponent } from '../need-list/need-list.component'; import { Router } from '@angular/router'; import { CupboardService } from '../../services/cupboard.service'; +import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; @Component({ selector: 'app-funding-basket', @@ -12,80 +13,68 @@ import { CupboardService } from '../../services/cupboard.service'; templateUrl: './funding-basket.component.html', styleUrl: './funding-basket.component.css' }) -export class FundingBasketComponent implements - OnInit { - user!: User; - needs: Need[] = []; - basket: Need[] = []; - needCount = 0; - need_quantity: {[key: number]: number} = {}; +export class FundingBasketComponent implements OnInit { + statusText: any; constructor( private router: Router, - private cupboardService: CupboardService, private usersService: UsersService + protected cupboardService: CupboardService, + protected usersService: UsersService ) {} + @ViewChild("contribution") contribution?: Input; + @Input() isValid: boolean = true; + + // this is for login rerouting ngOnInit(): void { if (!this.usersService.getCurrentUser()) { this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); return; } - this.cupboardService.getNeeds().subscribe(n => this.needs = n) - const currentUser = this.usersService.getCurrentUser(); - if (currentUser) { - this.user = currentUser; - } - this.getBasketNeeds(); - } - getBasketNeeds(): void { - if (this.user && this.user.basket) { - this.user.basket.forEach(need => { - // if (this.isInBasket(need)) { - // this.basket.push(need); - // } - }); - } - } - - isInBasket(need: Need): boolean { - return this.basket.includes(need) - } + this.usersService.refreshBasket(); + // this.usersService.removeNeed(); <- call this to remove + } - addNeed(need: Need, quantity: number = 1): void { - if (this.user && !this.isInBasket(need)) { - this.basket.push(need); - this.need_quantity[need.id] = quantity; - } - if (this.isInBasket(need)) { - this.need_quantity[need.id] += quantity; - } - this.needCount++; + async checkout() { + this.isValid = true; + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + contribution.setAttribute("style",""); + if ( contribution.value == '' || contribution.valueAsNumber <= 0) { + this.isValid = false; + contribution.setAttribute("style","color: #ff0000"); + } } - - removeNeed(need: Need, quantity: number = 1): void { - if (this.user && this.isInBasket(need)) { - this.need_quantity[need.id] -= quantity; - if (this.need_quantity[need.id] === 0) { - this.basket = this.basket.filter(n => need.id !== n.id); - } - this.needCount--; - } + if (this.isValid) { + for (let c of document.getElementById("funding-basket")?.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.updateNeed(need.id, need) + .pipe(catchError((ex, r) => { + if (ex.status == 500) { + this.statusText.next('Fields cannot be blank'); + } else if (ex.status == 400) { + this.statusText.next('Goal must be greater than 0'); + } else { + this.statusText.next('Error on creating need'); + } + return new Observable<string>(); + })) + .subscribe((result) => { + if (result) { + console.log('need updated successfully'); + //this.needList?.refresh() + } else { + console.log('need update failed'); + } + }); + } } + } - removeAllNeeds(): void { - this.basket.forEach(need => { - this.need_quantity = []; - }); - this.basket = []; - this.needCount = 0; - } - isBasketEmpty(): boolean { - return this.needCount === 0; - } - checkout(): void { - this.removeAllNeeds(); - } } |