From f88e5d727ae42d0e27ae7949d0f0d4189dda464d Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 2 Apr 2025 21:08:38 -0400 Subject: [incomplete] checkout flow improvement --- .../funding-basket/funding-basket.component.html | 39 +------------- .../funding-basket/funding-basket.component.ts | 60 ++++++---------------- 2 files changed, 18 insertions(+), 81 deletions(-) (limited to 'ufund-ui') 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 52b35c1..bba66a3 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,36 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Funding Basket

@@ -56,14 +23,10 @@ {{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)
- - - -
- + 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..18bb9b8 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 @@ -23,7 +23,6 @@ export class FundingBasketComponent implements OnInit { ) {} @ViewChild("contribution") contribution?: Input; - @Input() isValid: boolean = true; // this is for login rerouting ngOnInit(): void { @@ -37,58 +36,33 @@ export class FundingBasketComponent implements OnInit { } 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: { id: number, quantity: number }[] = [] + for (let contribution of document.querySelectorAll('.contribution')!) { + if (contribution.value == '' || contribution.valueAsNumber <= 0) { contribution.setAttribute("style", "border-color: #ff0000"); this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") - - setTimeout(() => { - contribution.setAttribute("style", "border-color: #ffffff"); - }, 3000); + return; } + order.push({id: +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; + + for (let c of document.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + try { let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); + await firstValueFrom(this.cupboardService.checkoutNeed(need.id, +contribution.value)); 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(); - })) - .subscribe((result) => { - if (result) { - //this.needList?.refresh() - } else { - console.log('need update failed'); - } - this.toastService.sendToast(ToastType.INFO, "Checkout successful"); - }); + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); + } catch (ex: any) { + this.toastService.sendToast(ToastType.ERROR, ex.error); } } } - + resetColor(ev: any) { + console.log(ev); + (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") + } } -- cgit v1.2.3 From 26b4a37cb91dfe5551f3e227512cd5ceff897d54 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Thu, 3 Apr 2025 14:49:04 -0400 Subject: Changes to cupboard on front end and back end to try and fix bugs --- .../funding-basket/funding-basket.component.ts | 30 +++++++++++++--------- ufund-ui/src/app/services/cupboard.service.ts | 5 ++-- 2 files changed, 21 insertions(+), 14 deletions(-) (limited to 'ufund-ui') 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 18bb9b8..015d5b5 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 @@ -47,22 +47,28 @@ export class FundingBasketComponent implements OnInit { order.push({id: +contribution.id, quantity: contribution.valueAsNumber}); } - for (let c of document.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - try { - let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); - await firstValueFrom(this.cupboardService.checkoutNeed(need.id, +contribution.value)); - need.current += +contribution.value; - this.usersService.removeNeed(+need.id); - this.toastService.sendToast(ToastType.INFO, "Checkout successful"); - } catch (ex: any) { - this.toastService.sendToast(ToastType.ERROR, ex.error); - } + try { + this.cupboardService.checkoutNeed(order) + } catch (ex:any) { + this.toastService.sendToast(ToastType.ERROR, ex.error); + return } + + console.log(order) + + for (let contribution of order) { + let need = await firstValueFrom(this.cupboardService.getNeed(contribution.id)) + need.current += contribution.quantity; + this.usersService.removeNeed(need.id); + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); + } + + // this.usersService.getBasket().subscribe(console.log) + // this.usersService.refreshBasket() } resetColor(ev: any) { - console.log(ev); + // console.log(ev); (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") } } diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts index 9232c0c..786973e 100644 --- a/ufund-ui/src/app/services/cupboard.service.ts +++ b/ufund-ui/src/app/services/cupboard.service.ts @@ -47,7 +47,8 @@ export class CupboardService { return this.http.delete(`${this.url}/${id}`, this.httpOptions()) } - checkoutNeed(id: number, quantity: number) { - return this.http.put(`${this.url}/checkout`, {needID: id, amount: quantity}, this.httpOptions()) + checkoutNeed(data: {id: number, quantity: number}[]) { + console.log("GOT HERE") + return this.http.put(`${this.url}/checkout`, data, this.httpOptions()) } } -- cgit v1.2.3 From 75f5ad5fb154811d7acd236687bb7f30bb7c10aa Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Thu, 3 Apr 2025 15:35:12 -0400 Subject: Fixed incognito race condition and checkout bugs --- .../funding-basket/funding-basket.component.ts | 23 ++++++---------------- .../src/app/components/toast/toast.component.ts | 1 - ufund-ui/src/app/services/cupboard.service.ts | 3 +-- 3 files changed, 7 insertions(+), 20 deletions(-) (limited to 'ufund-ui') 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 015d5b5..5d94124 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,7 +2,7 @@ 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 {firstValueFrom} from 'rxjs'; import {AuthService} from '../../services/auth.service'; import {ToastsService, ToastType} from '../../services/toasts.service'; @@ -32,11 +32,10 @@ export class FundingBasketComponent implements OnInit { } this.usersService.refreshBasket(); - // this.usersService.removeNeed(); <- call this to remove } async checkout() { - let order: { id: number, quantity: number }[] = [] + let order: { needID: number, quantity: number }[] = [] for (let contribution of document.querySelectorAll('.contribution')!) { if (contribution.value == '' || contribution.valueAsNumber <= 0) { @@ -44,31 +43,21 @@ export class FundingBasketComponent implements OnInit { this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") return; } - order.push({id: +contribution.id, quantity: contribution.valueAsNumber}); + order.push({needID: +contribution.id, quantity: contribution.valueAsNumber}); } try { - this.cupboardService.checkoutNeed(order) + await firstValueFrom(this.cupboardService.checkoutNeed(order)) } catch (ex:any) { this.toastService.sendToast(ToastType.ERROR, ex.error); return } - console.log(order) - - for (let contribution of order) { - let need = await firstValueFrom(this.cupboardService.getNeed(contribution.id)) - need.current += contribution.quantity; - this.usersService.removeNeed(need.id); - this.toastService.sendToast(ToastType.INFO, "Checkout successful"); - } - - // this.usersService.getBasket().subscribe(console.log) - // this.usersService.refreshBasket() + order.forEach(contribution => this.usersService.removeNeed(contribution.needID)) + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); } resetColor(ev: any) { - // console.log(ev); (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") } } diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts index 47fd7ff..6bbae34 100644 --- a/ufund-ui/src/app/components/toast/toast.component.ts +++ b/ufund-ui/src/app/components/toast/toast.component.ts @@ -21,7 +21,6 @@ export class ToastComponent implements OnInit{ } hide() { - console.log(this.toastDiv, typeof this.toastDiv) this.toastDiv.nativeElement.classList.add('hide') } diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts index 786973e..1060476 100644 --- a/ufund-ui/src/app/services/cupboard.service.ts +++ b/ufund-ui/src/app/services/cupboard.service.ts @@ -47,8 +47,7 @@ export class CupboardService { return this.http.delete(`${this.url}/${id}`, this.httpOptions()) } - checkoutNeed(data: {id: number, quantity: number}[]) { - console.log("GOT HERE") + checkoutNeed(data: {needID: number, quantity: number}[]) { return this.http.put(`${this.url}/checkout`, data, this.httpOptions()) } } -- cgit v1.2.3