Agregada logica para manejar la cantidad de los sinonimos.

Marcelo Puebla
1 parent 5b2721a0bd
Showing 5 changed files with 57 additions and 29 deletions Show diff stats
src/app/components/inicio/inicio.component.ts
src/app/components/popover-sinonimos/popover-sinonimos.component.html
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
src/app/wrappers/producto.ts
src/app/wrappers/sinonimo.ts
@@ -117,15 +117,17 @@ export class InicioComponent implements OnInit {
       var codigo = this.promoAcargar.codigo;
       this.productoService.getPromocionSinonimos(sector, codigo)
         .subscribe((res: Sinonimo[]) => {
+
           res.forEach(resSinonimo => {
-            resSinonimo.productos.forEach(productoSinonimo => {
-              this.promoAcargar.productos.forEach(productoPromo => {
-                if (productoPromo.id === productoSinonimo.id) {
-                  productoSinonimo.esPadre = true;
-                }
-              });
-
-            })
+
+            this.promoAcargar.productos.forEach(productoPromo => {
+
+              if (productoPromo.idSinonimo === resSinonimo.ID_SIN) {
+                resSinonimo.cantidad = productoPromo.cantidad;
+                resSinonimo.productoPadre = productoPromo.id;
+              }
+            });
+
           })
           this.sinonimos = res;
           this.showPopover();
@@ -10,41 +10,41 @@
  
   <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
     <div class="col">
-      <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
+      <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
         <div class="col">
  
           <div class="row m-0">
             <div class="col text-left">
               <p class="h5 card-title">
-                Elija una opción
+                Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
               </p>
             </div>
           </div>
  
           <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
-            <div class="col-8 pl-4 h6 m-0">
-              <div class="custom-control custom-radio">
-                <input
-                  type="radio"
-                  [id]="producto.id"
-                  [checked]="producto.esPadre"
-                  name="sinonimoOpciones"
-                  class="custom-control-input"
-                  (click)="setSinonimo(sinonimo)">
-                <label class="font-weight-normal custom-control-label" [for]="producto.id">
-                  {{producto.DetArt}}
-                </label>
-              </div>
+            <div class="col-7 pl-4 h6 text-right">
+              <p class="m-0 font-weight-normal">
+                {{producto.DetArt}}
+              </p>
             </div>
             <div class="col-auto">
-              <div class="btn-group-sm btn-group float-left my-auto" role="group">
-                <button type="button" class="btn btn-light btn-sm my-auto border">
+              <div class="btn-group float-left my-auto" role="group">
+                <button
+                  type="button"
+                  class="btn btn-light my-auto border"
+                  (click)="sumarCantidad(producto, i)">
                   <i class="fa fa-plus" aria-hidden="true"></i>
                 </button>
-                <div class="bg-white border border-white px-3 my-auto text-dark h5">
-                  <small>{{producto.cantidad}}</small>
+                <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
+                  <small
+                    [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
+                    {{producto.cantidad}}
+                  </small>
                 </div>
-                <button type="button" class="btn btn-light btn-sm my-auto border">
+                <button
+                  type="button"
+                  class="btn btn-light my-auto border"
+                  (click)="restarCantidad(producto, i)">
                   <i class="fa fa-minus" aria-hidden="true"></i>
                 </button>
               </div>
@@ -16,13 +16,21 @@ export class PopoverSinonimosComponent implements OnInit {
   @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
   sinonimo: Sinonimo;
  
+  private cantidadRestanteSinonimos: number[] = [];
+
   constructor() { }
  
   ngOnInit() {
  
     //Seteo en la variable a emitir el sinonimo que sea padre
     this.popoverContent.forEach(sinonimo => {
-      // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
+
+      this.cantidadRestanteSinonimos.push(0);
+      this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined;
+      sinonimo.productos.forEach(producto => {
+
+        producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0;
+      })
     })
   }
  
@@ -37,4 +45,19 @@ export class PopoverSinonimosComponent implements OnInit {
     this.sinonimo = sinonimo;
   }
  
+  sumarCantidad(producto: Producto, i: number) {
+
+    if (this.cantidadRestanteSinonimos[i] === 0) return;
+    producto.cantidad++;
+    this.cantidadRestanteSinonimos[i]--;
+  }
+
+  restarCantidad(producto: Producto, i: number) {
+
+    if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
+    if (producto.cantidad === 0) return;
+    producto.cantidad--;
+    this.cantidadRestanteSinonimos[i]++;
+  }
+
 }
@@ -92,4 +92,5 @@ export interface Producto {
   showCargarProducto?: boolean;
   esPadre?: boolean;
   codigoBarra: string;
+  idSinonimo?: number;
 }
@@ -5,4 +5,6 @@ export interface Sinonimo {
   ID_SIN: number,
   descripcion: string,
   productos: Producto[],
+  productoPadre?: number;
+  cantidad? : number;
 }
...	...	@@ -117,15 +117,17 @@ export class InicioComponent implements OnInit {
117	117	var codigo = this.promoAcargar.codigo;
118	118	this.productoService.getPromocionSinonimos(sector, codigo)
119	119	.subscribe((res: Sinonimo[]) => {
	120	+
120	121	res.forEach(resSinonimo => {
121		- resSinonimo.productos.forEach(productoSinonimo => {
122		- this.promoAcargar.productos.forEach(productoPromo => {
123		- if (productoPromo.id === productoSinonimo.id) {
124		- productoSinonimo.esPadre = true;
125		- }
126		- });
127		-
128		- })
	122	+
	123	+ this.promoAcargar.productos.forEach(productoPromo => {
	124	+
	125	+ if (productoPromo.idSinonimo === resSinonimo.ID_SIN) {
	126	+ resSinonimo.cantidad = productoPromo.cantidad;
	127	+ resSinonimo.productoPadre = productoPromo.id;
	128	+ }
	129	+ });
	130	+
129	131	})
130	132	this.sinonimos = res;
131	133	this.showPopover();
...	...	@@ -10,41 +10,41 @@
10	10
11	11	<div class="row m-0 overflow-scroll popover-size pr-2 my-2">
12	12	<div class="col">
13		- <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
	13	+ <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
14	14	<div class="col">
15	15
16	16	<div class="row m-0">
17	17	<div class="col text-left">
18	18	<p class="h5 card-title">
19		- Elija una opción
	19	+ Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
20	20	</p>
21	21	</div>
22	22	</div>
23	23
24	24	<div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
25		- <div class="col-8 pl-4 h6 m-0">
26		- <div class="custom-control custom-radio">
27		- <input
28		- type="radio"
29		- [id]="producto.id"
30		- [checked]="producto.esPadre"
31		- name="sinonimoOpciones"
32		- class="custom-control-input"
33		- (click)="setSinonimo(sinonimo)">
34		- <label class="font-weight-normal custom-control-label" [for]="producto.id">
35		- {{producto.DetArt}}
36		- </label>
37		- </div>
	25	+ <div class="col-7 pl-4 h6 text-right">
	26	+ <p class="m-0 font-weight-normal">
	27	+ {{producto.DetArt}}
	28	+ </p>
38	29	</div>
39	30	<div class="col-auto">
40		- <div class="btn-group-sm btn-group float-left my-auto" role="group">
41		- <button type="button" class="btn btn-light btn-sm my-auto border">
	31	+ <div class="btn-group float-left my-auto" role="group">
	32	+ <button
	33	+ type="button"
	34	+ class="btn btn-light my-auto border"
	35	+ (click)="sumarCantidad(producto, i)">
42	36	<i class="fa fa-plus" aria-hidden="true"></i>
43	37	</button>
44		- <div class="bg-white border border-white px-3 my-auto text-dark h5">
45		- <small>{{producto.cantidad}}</small>
	38	+ <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
	39	+ <small
	40	+ [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
	41	+ {{producto.cantidad}}
	42	+ </small>
46	43	</div>
47		- <button type="button" class="btn btn-light btn-sm my-auto border">
	44	+ <button
	45	+ type="button"
	46	+ class="btn btn-light my-auto border"
	47	+ (click)="restarCantidad(producto, i)">
48	48	<i class="fa fa-minus" aria-hidden="true"></i>
49	49	</button>
50	50	</div>
...	...	@@ -16,13 +16,21 @@ export class PopoverSinonimosComponent implements OnInit {
16	16	@Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
17	17	sinonimo: Sinonimo;
18	18
	19	+ private cantidadRestanteSinonimos: number[] = [];
	20	+
19	21	constructor() { }
20	22
21	23	ngOnInit() {
22	24
23	25	//Seteo en la variable a emitir el sinonimo que sea padre
24	26	this.popoverContent.forEach(sinonimo => {
25		- // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
	27	+
	28	+ this.cantidadRestanteSinonimos.push(0);
	29	+ this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined;
	30	+ sinonimo.productos.forEach(producto => {
	31	+
	32	+ producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0;
	33	+ })
26	34	})
27	35	}
28	36
...	...	@@ -37,4 +45,19 @@ export class PopoverSinonimosComponent implements OnInit {
37	45	this.sinonimo = sinonimo;
38	46	}
39	47
	48	+ sumarCantidad(producto: Producto, i: number) {
	49	+
	50	+ if (this.cantidadRestanteSinonimos[i] === 0) return;
	51	+ producto.cantidad++;
	52	+ this.cantidadRestanteSinonimos[i]--;
	53	+ }
	54	+
	55	+ restarCantidad(producto: Producto, i: number) {
	56	+
	57	+ if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
	58	+ if (producto.cantidad === 0) return;
	59	+ producto.cantidad--;
	60	+ this.cantidadRestanteSinonimos[i]++;
	61	+ }
	62	+
40	63	}
...	...	@@ -92,4 +92,5 @@ export interface Producto {
92	92	showCargarProducto?: boolean;
93	93	esPadre?: boolean;
94	94	codigoBarra: string;
	95	+ idSinonimo?: number;
95	96	}
...	...	@@ -5,4 +5,6 @@ export interface Sinonimo {
5	5	ID_SIN: number,
6	6	descripcion: string,
7	7	productos: Producto[],
	8	+ productoPadre?: number;
	9	+ cantidad? : number;
8	10	}