Feature/total summary

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[];
 }
 

src/app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component.html

@@ -0,0 +1,90 @@
+<div id="total-summary-shopping-list-collapse">
+  <div class="mb-3 d-flex">
+    <ul class="nav nav-pills flex-grow-1 align-content-center"
+        role="tablist">
+      <li class="nav-item">
+        <button class="nav-link btn btn-xs text-sm"
+                type="button"
+                data-toggle="collapse"
+                data-target="#totals-total-summary-shopping-list-collapse"
+                aria-expanded="false"
+                aria-controls="totals-total-summary-shopping-list-collapse">
+          Totales
+          <i class="fas fa-angle-down w-25px"></i>
+        </button>
+      </li>
+      <li class="nav-item">
+        <button class="nav-link btn btn-xs text-sm"
+                type="button"
+                data-toggle="collapse"
+                data-target="#summary-total-summary-shopping-list-collapse"
+                aria-expanded="false"
+                aria-controls="summary-total-summary-shopping-list-collapse">
+          Resumen
+          <i class="fas fa-angle-down w-25px"></i>
+        </button>
+      </li>
+    </ul>
+    <button class="btn btn-default text-primary border-primary mr-1"
+            disabled
+            type="button">
+      <i class="fas fa-bars text-lg"></i>
+    </button>
+    <button class="btn btn-default"
+            disabled
+            type="button">
+      <i class="fas fa-th-large text-lg"></i>
+    </button>
+  </div>
+  <div class="collapse"
+       data-parent="#total-summary-shopping-list-collapse"
+       id="totals-total-summary-shopping-list-collapse">
+    <div class="card card-body">
+      <div class="row">
+        <div class="col-sm-4 col-6">
+          <div class="description-block border-right">
+            <h5 class="description-header">{{ shoppingList().totalProducts }}</h5>
+            <span class="description-text">Productos</span>
+          </div>
+        </div>
+        <div class="col-sm-4 col-6">
+          <div class="description-block border-right">
+            <h5 class="description-header">{{ shoppingList().totalPrice }} €</h5>
+            <span class="description-text">Importe</span>
+          </div>
+        </div>
+        <div class="col-sm-4 col-6">
+          <div class="description-block">
+            <h5 class="description-header">{{ shoppingList().totalUnitsPerProducts }}</h5>
+            <span class="description-text">Unidades</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="collapse"
+       data-parent="#total-summary-shopping-list-collapse"
+       id="summary-total-summary-shopping-list-collapse">
+    <div class="card card-body">
+      <div class="progress-group">
+        Productos marcados
+        <span class="float-right">
+          <b>{{ shoppingList().totalSelectedProducts }}</b> / {{ shoppingList().totalProducts }}
+        </span>
+        <div class="progress progress-sm">
+          <div class="progress-bar bg-primary"
+               style="{{ 'width:' + totalSelectedProductPercent() + '%' }}"></div>
+        </div>
+      </div>
+      <div class="progress-group">
+        Importe restante
+        <span class="float-right">
+          <b>{{ shoppingList().totalPriceSelectedProducts }} €</b> / {{ shoppingList().totalPrice }} €</span>
+        <div class="progress progress-sm">
+          <div class="progress-bar bg-success"
+               style="{{ 'width:' + totalPriceSelectedProductPercent() + '%' }}"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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<FindByIdShoppingListRes>();
+
+  totalPriceSelectedProductPercent = computed<number>(() => {
+    return this.shoppingList().totalPriceSelectedProducts / this.shoppingList().totalPrice * 100;
+  });
+
+  totalSelectedProductPercent = computed<number>(() => {
+    return this.shoppingList().totalSelectedProducts / this.shoppingList().totalProducts * 100;
+  });
+
+}

src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html

@@ -11,6 +11,9 @@
                               (saveEvent)="saveEvent()"/>
   </ng-container>
   <ng-container content>
+
+    <app-totals-summary [shoppingList]="shoppingListRes()"/>
+
     @if (isEditOrNew()) {
       <a class="btn btn-success btn-block mb-3"
          (click)="goToAddProductsEvent()">

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);