From 5f735da461ab04a9a6b957065dc5b72b95657e54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= Date: Fri, 22 Nov 2024 00:34:06 +0100 Subject: [PATCH 1/2] =?UTF-8?q?P=C3=A1gina=20lista=20de=20la=20compra=20-?= =?UTF-8?q?=20Actualizar=20datos=20-=20Agrego=20los=20nuevos=20campos=20de?= =?UTF-8?q?=20la=20consulta=20a=20la=20API=20/shopping-list/{id}=20(total?= =?UTF-8?q?=20de=20unidades=20por=20producto,=20total=20de=20productos=20s?= =?UTF-8?q?eleccionados=20y=20precio=20total=20de=20productos=20selecciona?= =?UTF-8?q?dos).=20-=20Ahora=20cuando=20se=20modifica=20un=20elemento=20de?= =?UTF-8?q?=20la=20lista=20(en=20este=20caso=20cuando=20se=20selecciona=20?= =?UTF-8?q?un=20producto),=20se=20actualiza=20la=20propiedad=20con=20la=20?= =?UTF-8?q?informaci=C3=B3n=20de=20la=20lista=20en=20local.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../models/find-by-id-shopping-list-res.ts | 3 + .../shopping-list/shopping-list.component.ts | 71 ++++++++++++++----- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/src/app/models/find-by-id-shopping-list-res.ts b/src/app/models/find-by-id-shopping-list-res.ts index f1218b5..9e6c472 100644 --- a/src/app/models/find-by-id-shopping-list-res.ts +++ b/src/app/models/find-by-id-shopping-list-res.ts @@ -3,6 +3,9 @@ export interface FindByIdShoppingListRes { name: string; totalProducts: number; totalPrice: number; + totalUnitsPerProducts: number; + totalSelectedProducts: number; + totalPriceSelectedProducts: number; products: ProductShoppingList[]; } diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts index 56868d6..da21e6d 100644 --- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts +++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts @@ -2,8 +2,6 @@ import {Component, effect, Input, signal} from '@angular/core'; import {tap} from 'rxjs'; import {FindByIdShoppingListRes, ProductShoppingList} from '../../../../models/find-by-id-shopping-list-res'; import {ShoppingListsService} from '../../../../services/pages/shopping-lists.service'; -import {AsyncPipe} from '@angular/common'; -import {NavbarComponent} from '../../../../layout/navbar/navbar.component'; import {NavbarShoppingListComponent} from '../../layout/navbar-shopping-list/navbar-shopping-list.component'; import {HeaderShoppingListComponent} from '../../layout/header-shopping-list/header-shopping-list.component'; import {PageComponent} from '../../../../layout/page/page.component'; @@ -13,20 +11,24 @@ import {ButtonModule} from 'primeng/button'; import {ButtonGroupModule} from 'primeng/buttongroup'; import {DialogModule} from 'primeng/dialog'; import {ImageModule} from 'primeng/image'; -import {UpdateShoppingListReq} from '../../../../models/update-shopping-list-req'; +import { + ProductShoppingList as ProductUpdateShoppingListReq, + UpdateShoppingListReq +} from '../../../../models/update-shopping-list-req'; import {DeleteProductsShoppingListReq} from '../../../../models/delete-products-shopping-list-req'; import {SaveShoppingListReq} from '../../../../models/save-shopping-list-req'; -import {Router, RouterLink} from '@angular/router'; +import {Router} from '@angular/router'; import { ProductModalShoppingListComponent } from '../../layout/product-modal-shopping-list/product-modal-shopping-list.component'; +import { + TotalsSummaryComponent +} from '@app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component'; @Component({ selector: 'app-shopping-list', standalone: true, imports: [ - AsyncPipe, - NavbarComponent, NavbarShoppingListComponent, HeaderShoppingListComponent, PageComponent, @@ -37,8 +39,8 @@ import { DialogModule, ImageModule, ReactiveFormsModule, - RouterLink, - ProductModalShoppingListComponent + ProductModalShoppingListComponent, + TotalsSummaryComponent ], templateUrl: './shopping-list.component.html', styleUrl: './shopping-list.component.css' @@ -50,6 +52,9 @@ export class ShoppingListComponent { name: '', totalProducts: 0, totalPrice: 0, + totalUnitsPerProducts: 0, + totalPriceSelectedProducts: 0, + totalSelectedProducts: 0, products: [] }; @@ -118,18 +123,14 @@ export class ShoppingListComponent { control.valueChanges .pipe( tap(value => { - const request: UpdateShoppingListReq = { - name: this.shoppingListRes().name, - products: [ - { - selected: value.selected!, - productId: value.productId!, - unitTypeId: value.unitTypeId! - } - ] + const productReq: ProductUpdateShoppingListReq = { + selected: value.selected!, + productId: value.productId!, + unitTypeId: value.unitTypeId! }; - this.updateShoppingList(request); + this.updateShoppingListRes(productReq); + this.updateShoppingList([productReq]); }) ) .subscribe(); @@ -227,11 +228,43 @@ export class ShoppingListComponent { .subscribe(); } - private updateShoppingList(request: UpdateShoppingListReq) { + private updateShoppingList(products: ProductUpdateShoppingListReq[]) { + const request: UpdateShoppingListReq = { + name: this.shoppingListRes().name, + products + }; + this.shoppingListsService.update(this.shoppingListRes().id, request) .subscribe(); } + private updateShoppingListRes(productReq: ProductUpdateShoppingListReq) { + this.shoppingListRes.update(value => { + const products = value.products + .map(product => { + if (product.product.id === productReq.productId) { + return { + ...product, + selected: productReq.selected! + }; + } + + return product; + }); + const selectedProducts = products.filter(product => product.selected); + const totalPriceSelectedProducts = selectedProducts + .map(product => product.totalPrice) + .reduce((totalPrice, currentPrice) => totalPrice + currentPrice, 0); + + return { + ...value, + totalSelectedProducts: selectedProducts.length, + totalPriceSelectedProducts, + products + }; + }); + } + goToAddProductsEvent() { if (this.shoppingListRes().id) { this.goToAddProducts(this.shoppingListRes().id); From efee2ef37fd66e6318c7fea92f96d1bacb911687 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= Date: Fri, 22 Nov 2024 00:35:17 +0100 Subject: [PATCH 2/2] =?UTF-8?q?P=C3=A1gina=20lista=20de=20la=20compra=20-?= =?UTF-8?q?=20Resumen=20y=20total=20-=20Nuevo=20componente=20"totals-summa?= =?UTF-8?q?ry.component".?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../totals-summary.component.css | 0 .../totals-summary.component.html | 90 +++++++++++++++++++ .../totals-summary.component.ts | 23 +++++ .../shopping-list.component.html | 3 + 4 files changed, 116 insertions(+) create mode 100644 src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.css create mode 100644 src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.html create mode 100644 src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.ts diff --git a/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.css b/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.html b/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.html new file mode 100644 index 0000000..fdadb7a --- /dev/null +++ b/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.html @@ -0,0 +1,90 @@ +
+
+ + + +
+
+
+
+
+
+
{{ shoppingList().totalProducts }}
+ Productos +
+
+
+
+
{{ shoppingList().totalPrice }} €
+ Importe +
+
+
+
+
{{ shoppingList().totalUnitsPerProducts }}
+ Unidades +
+
+
+
+
+
+
+
+ Productos marcados + + {{ shoppingList().totalSelectedProducts }} / {{ shoppingList().totalProducts }} + +
+
+
+
+
+ Importe restante + + {{ shoppingList().totalPriceSelectedProducts }} € / {{ shoppingList().totalPrice }} € +
+
+
+
+
+
+
diff --git a/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.ts b/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.ts new file mode 100644 index 0000000..8be977f --- /dev/null +++ b/src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.ts @@ -0,0 +1,23 @@ +import {Component, computed, input} from '@angular/core'; +import {FindByIdShoppingListRes} from '@app/models/find-by-id-shopping-list-res'; + +@Component({ + selector: 'app-totals-summary', + standalone: true, + imports: [], + templateUrl: './totals-summary.component.html', + styleUrl: './totals-summary.component.css' +}) +export class TotalsSummaryComponent { + + shoppingList = input.required(); + + totalPriceSelectedProductPercent = computed(() => { + return this.shoppingList().totalPriceSelectedProducts / this.shoppingList().totalPrice * 100; + }); + + totalSelectedProductPercent = computed(() => { + return this.shoppingList().totalSelectedProducts / this.shoppingList().totalProducts * 100; + }); + +} diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html index 9a5f23d..556d258 100644 --- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html +++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html @@ -11,6 +11,9 @@ (saveEvent)="saveEvent()"/> + + + @if (isEditOrNew()) {