Modificada la forma de añadir productos a la cesta, para añadir productos y no...

Modificada la forma de añadir productos a la cesta, para añadir productos y no solo su id de producto

src/app/cesta-compra/cesta/cesta.component.html

@@ -55,11 +55,8 @@
 
       <!-- Zona de carga de productos de la cesta de compra -->
       <div *ngIf="cesta.productos.length > 0">
-        <div class="border" *ngFor="let p of productosEnCesta; let i = index">
-          <app-item-cesta
-            [producto]="p"
-            [entradaCesta]="cesta.productos[i]"
-          ></app-item-cesta>
+        <div class="border" *ngFor="let e of cesta.productos">
+          <app-item-cesta [entradaCesta]="e"></app-item-cesta>
         </div>
       </div>
       <!-- Fin zona carga productos -->

src/app/cesta-compra/cesta/cesta.component.ts

@@ -17,7 +17,6 @@ export class CestaCompraComponent implements OnInit, OnDestroy {
   diasTipicosParaUnEnvio = 4;
   cestaSubscription: Subscription;
   cesta: Cesta;
-  productosEnCesta: Producto[];
   sumaPreciosProductos = 0;
   gastosDeEnvio = 5.95;
 
@@ -33,14 +32,9 @@ export class CestaCompraComponent implements OnInit, OnDestroy {
         this.cesta = cesta;
         console.log(cesta);
         this.sumaPreciosProductos = 0;
-        this.productosEnCesta = [];
+
         this.cesta.productos.forEach((p) => {
-          this.databaseService
-            .getProductoFromDatabase(p.productoID)
-            .subscribe((productoDB) => {
-              this.productosEnCesta.push(productoDB);
-              this.sumaPreciosProductos += productoDB.precio * p.unidades;
-            });
+          this.sumaPreciosProductos += p.producto.precio * p.unidades;
         });
       },
       () => {}
@@ -63,12 +57,6 @@ export class CestaCompraComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.cestaSubscription.unsubscribe();
   }
-  eliminarProducto(productoID: string) {
-    this.cestaService.deleteProducto(productoID);
-    if (this.cesta.productos.length === 0) {
-      this.cesta = null;
-    }
-  }
 
   iniciarPedido() {}
 }

src/app/cesta-compra/cesta/item-cesta/item-cesta.component.html

@@ -3,19 +3,28 @@
     <div class="col-12">
       <div class="pt-3 pb-3 border d-flex">
         <div class="col-4 d-flex flex-column align-items-center">
-          <a [routerLink]="['/tienda/producto', producto.productoID]"
+          <a
+            [routerLink]="[
+              '/tienda/producto',
+              entradaCesta.producto.productoID
+            ]"
             ><img [src]="imagen | async" class="imgAux ms-3"
           /></a>
         </div>
         <div class="ms-3 col-8 d-flex flex-column">
           <a
-            [routerLink]="['/tienda/producto', producto.productoID]"
+            [routerLink]="[
+              '/tienda/producto',
+              entradaCesta.producto.productoID
+            ]"
             class="text-dark text-decoration-none"
-            ><h6>{{ producto.nombre }}</h6></a
+            ><h6>{{ entradaCesta.producto.nombre }}</h6></a
           >
 
           <h6 class="">
-            <label for="" class="verde-tienda">{{ producto.precio }} €</label>
+            <label for="" class="verde-tienda"
+              >{{ entradaCesta.producto.precio }} €</label
+            >
             <label for="" class="ms-2">/ Unidad</label>
           </h6>
           <div class="row">
@@ -23,7 +32,7 @@
               <label for="unidades">Unidades en la cesta</label>
               <input
                 type="number"
-                [name]="producto.productoID"
+                [name]="entradaCesta.producto.productoID"
                 min="1"
                 class="ms-2"
                 style="max-width: 4rem"

src/app/cesta-compra/cesta/item-cesta/item-cesta.component.ts

@@ -11,8 +11,7 @@ import { CestaCompraService } from 'src/app/shared/services/cesta-compra.service
   styleUrls: ['./item-cesta.component.css'],
 })
 export class ItemCestaComponent implements OnInit {
-  @Input('producto') producto: Producto;
-  @Input('entradaCesta') entradaCesta: { productoID: string; unidades: number };
+  @Input('entradaCesta') entradaCesta: { producto: Producto; unidades: number };
   imagen;
   rutaProducto: string;
   botonCambiarUnidades: boolean = false;
@@ -24,14 +23,15 @@ export class ItemCestaComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    const ref = this.storage.ref(this.producto.imagenIconoPath);
+    const ref = this.storage.ref(this.entradaCesta.producto.imagenIconoPath);
     this.imagen = ref.getDownloadURL();
     console.log(this.entradaCesta);
 
-    this.rutaProducto = '/tienda/producto' + this.producto.productoID;
+    this.rutaProducto =
+      '/tienda/producto' + this.entradaCesta.producto.productoID;
   }
   eliminarProducto() {
-    this.cestaService.deleteProducto(this.producto.productoID);
+    this.cestaService.deleteProducto(this.entradaCesta.producto.productoID);
   }
   mostrarBotonCambiarUnidades() {
     this.botonCambiarUnidades = true;
@@ -39,7 +39,7 @@ export class ItemCestaComponent implements OnInit {
   modificarCantidad() {
     this.botonCambiarUnidades = false;
     this.cestaService.modificarCantidadProducto({
-      productoID: this.producto.productoID,
+      producto: this.entradaCesta.producto,
       unidades: this.entradaCesta.unidades,
     });
   }

src/app/shared/interfaces/cesta.model.ts

+import { Producto } from './producto.model';
+
 export class Cesta {
   productos: {
-    productoID: string;
+    producto: Producto;
     unidades: number;
   }[] /* Array con pares producto-unidades para saber los productos que hay en la cesta y las unidades de cada uno  */;
   constructor() {

src/app/shared/services/cesta-compra.service.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject } from 'rxjs';
 import { PedidosComponent } from 'src/app/mi-cuenta/perfil-cuenta/pedidos/pedidos.component';
 import { Cesta } from '../interfaces/cesta.model';
 import { Pedido } from '../interfaces/pedido.model';
+import { Producto } from '../interfaces/producto.model';
 import { DatabaseService } from './database.service';
 
 @Injectable({
@@ -15,16 +16,16 @@ export class CestaCompraService implements OnInit {
   constructor(private databaseService: DatabaseService) {}
   ngOnInit(): void {}
 
-  addProducto(productoID: string, unidades: number) {
+  addProducto(producto: Producto, unidades: number) {
     let index = this.cesta.productos.findIndex(
-      (p) => p.productoID === productoID
+      (e) => e.producto.productoID === producto.productoID
     );
     if (index > -1) {
       this.cesta.productos[index].unidades =
         this.cesta.productos[index].unidades + unidades;
     } else {
       this.cesta.productos.push({
-        productoID: productoID,
+        producto: producto,
         unidades: unidades,
       });
       console.log('en addproducto');
@@ -37,7 +38,7 @@ export class CestaCompraService implements OnInit {
   }
   deleteProducto(productoID: string) {
     let index = this.cesta.productos.findIndex(
-      (p) => p.productoID === productoID
+      (p) => p.producto.productoID === productoID
     );
 
     let cestaEmit = new Cesta();
@@ -46,17 +47,14 @@ export class CestaCompraService implements OnInit {
     this.cestaBS.next(cestaEmit);
   }
 
-  modificarCantidadProducto(producto: {
-    productoID: string;
-    unidades: number;
-  }) {
+  modificarCantidadProducto(entrada: { producto: Producto; unidades: number }) {
     let index = this.cesta.productos.findIndex(
-      (p) => p.productoID === producto.productoID
+      (e) => e.producto.productoID === entrada.producto.productoID
     );
 
     let cestaEmit = new Cesta();
     cestaEmit.productos = this.cesta.productos;
-    cestaEmit.productos[index] = producto;
+    cestaEmit.productos[index] = entrada;
     this.cestaBS.next(cestaEmit);
   }
 

src/app/tienda/modulo-productos/card-producto/card-producto.component.ts

@@ -22,6 +22,6 @@ export class CardProductoComponent implements OnInit {
     this.imagen = ref.getDownloadURL();
   }
   addCesta() {
-    this.cestaService.addProducto(this.producto.productoID, 1);
+    this.cestaService.addProducto(this.producto, 1);
   }
 }

src/app/tienda/modulo-productos/producto/producto.component.ts

@@ -41,9 +41,6 @@ export class ProductoComponent implements OnInit {
     return ref.getDownloadURL();
   }
   addCesta() {
-    this.cestaService.addProducto(
-      this.producto.productoID,
-      this.cantidadAIncluirEnCesta
-    );
+    this.cestaService.addProducto(this.producto, this.cantidadAIncluirEnCesta);
   }
 }