Merge branch 'develop' into 'develop'

Develop See merge request !125

Merge branch 'develop' into 'develop'
Develop See merge request !125
Marcelo Puebla
2 parents 2f21bbf007 a2c178d714
Showing 6 changed files Show diff stats
src/app/interfaces/ISinonimo.ts
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
src/app/shared/sinonimo/sinonimo.component.html
src/app/shared/sinonimo/sinonimo.component.scss
src/app/shared/sinonimo/sinonimo.component.ts
src/styles.scss
@@ -6,5 +6,6 @@ export interface ISinonimo {
   productos: IArticulo[];
   productoPadre?: number;
   cantidad?: number;
+  cantidadRestante?: number;
   selected?: boolean;
 }
@@ -117,8 +117,10 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
-          Object.keys(gruposArticulos).forEach(key => {
+          Object.keys(gruposArticulos).forEach((key, i) => {
             sinonimos.push({ productos: gruposArticulos[key] });
+            sinonimos[i].cantidad = articulo.productos[i].cantidad;
+            sinonimos[i].cantidadRestante = articulo.productos[i].cantidad;
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
@@ -7,8 +7,8 @@
       (click)="close()"
       class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
       src="assets/img/icono-cancelar-blanco.svg">
-    <p class="col-7 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
-    <div class="col-5 pt-4 pr-0 text-right">
+    <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
+    <!-- <div class="col-5 pt-4 pr-0 text-right">
       <p *ngFor="let s of sinonimos; let i = index">
         <span
           class="btn-effect"
@@ -17,26 +17,42 @@
           <i class="far fa-hand-point-left"></i>
         </span>
       </p>
-    </div>
+    </div> -->
   </div>
  
   <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
-    <div *ngFor="let s of sinonimos; let i = index">
-      <div [id]="i"></div>
-      <hr [hidden]="i === 0" class="bg-white">
-      <div *ngFor="let articulo of s.productos">
-        <div class="custom-control custom-checkbox">
-          <input
-            type="checkbox"
-            class="custom-control-input"
-            [(ngModel)]="articulo.seleccionado"
-            (click)="selectSinonimo(i, articulo)"
-            [id]="articulo.id">
-          <label
-            class="custom-control-label"
-            [for]="articulo.id">
-            {{articulo.DET_LAR.toUpperCase()}}
-          </label>
+    <div class="row mx-0 mb-2"  *ngFor="let articulo of sinonimos[currentIndex].productos">
+      <div class="col-7 p-0 my-auto h6 text-right">
+        <p class="m-0 font-weight-normal">
+          {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
+        </p>
+      </div>
+      <div class="col-5 pr-0">
+        <div class="row mx-0 justify-content-between border border-white badge-pill">
+          <!-- BOTON MENOS -->
+          <div class="col-auto px-0 my-auto">
+            <img
+              draggable="false"
+              ondragstart="return false;"
+              (contextmenu)="false"
+              class="d-block ml-auto py-2 icon-15 btn-effect"
+              src="assets/img/menos-blanco.svg"
+              (click)="restarCantidadSinonimo(articulo, currentIndex)">
+          </div>
+          <!-- CANTIDAD -->
+          <div class="col px-0 my-auto text-white text-center">
+            <p><small>{{articulo.cantidad}}</small></p>
+          </div>
+          <!-- BOTON MAS -->
+          <div class="col-auto px-0 my-auto">
+            <img
+              draggable="false"
+              ondragstart="return false;"
+              (contextmenu)="false"
+              class="d-block ml-auto py-2 icon-15 btn-effect"
+              src="assets/img/mas-blanco.svg"
+              (click)="sumarCantidadSinonimo(articulo, currentIndex)">
+          </div>
         </div>
       </div>
     </div>
@@ -44,8 +60,33 @@
  
   <div class="modal-footer">
     <div
+      *ngIf="currentIndex != 0 && sinonimos.length > 1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto"
+      (click)="currentIndex = currentIndex-1">
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30 flip"
+        src="assets/img/ir-color.svg">
+      VOLVER
+    </div>
+    <div
+      *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
+      (click)="currentIndex = currentIndex+1">
+      SIGUIENTE
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30"
+        src="assets/img/ir-color.svg">
+    </div>
+    <div
       [ngClass]="validate()"
-      class="d-inline-block py-1 bg-white badge-pill text-primary"
+      *ngIf="currentIndex == sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
       (click)="continue()">
       CONTINUAR
       <img
 .lista-sinonimos {
-  min-height: auto;
+  min-height: 35vh;
   max-height: 35vh;
 }
@@ -18,6 +18,7 @@ export class SinonimoComponent implements OnInit {
   articulosSelected: IArticulo[] = [];
   articulo: IArticulo;
   isSinonimoSelected = false;
+  currentIndex = 0;
  
   constructor(
     private modalRef: BsModalRef,
@@ -27,7 +28,13 @@ export class SinonimoComponent implements OnInit {
     this.articulosSelected.length = this.sinonimos.length;
   }
  
-  ngOnInit() { }
+  ngOnInit() {
+    for (const s of this.sinonimos) {
+      for (const a of s.productos) {
+        a.cantidad = 0;
+      }
+    }
+  }
  
   selectSinonimo(index: number, articulo: IArticulo) {
     for (const a of this.sinonimos[index].productos) {
@@ -73,6 +80,19 @@ export class SinonimoComponent implements OnInit {
       }, err => console.error(err));
   }
  
+  sumarCantidadSinonimo(articulo: IArticulo, i: number) {
+    if (this.sinonimos[i].cantidadRestante === 0) return;
+    articulo.cantidad++;
+    this.sinonimos[i].cantidadRestante--;
+  }
+
+  restarCantidadSinonimo(articulo: IArticulo, i: number) {
+    if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return;
+    if (articulo.cantidad === 0) return;
+    articulo.cantidad--;
+    this.sinonimos[i].cantidadRestante++;
+  }
+
   scrollTo(index: number) {
     const el = document.getElementById(index.toString());
     el.scrollIntoView({ behavior: 'smooth' });
@@ -102,3 +102,8 @@ p {
 .z-index {
   z-index: 1000;
 }
+
+.flip {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
 \ No newline at end of file
...	...	@@ -6,5 +6,6 @@ export interface ISinonimo {
6	6	productos: IArticulo[];
7	7	productoPadre?: number;
8	8	cantidad?: number;
	9	+ cantidadRestante?: number;
9	10	selected?: boolean;
10	11	}
...	...	@@ -117,8 +117,10 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
117	117	if (res.length) {
118	118	const sinonimos = [];
119	119	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
120		- Object.keys(gruposArticulos).forEach(key => {
	120	+ Object.keys(gruposArticulos).forEach((key, i) => {
121	121	sinonimos.push({ productos: gruposArticulos[key] });
	122	+ sinonimos[i].cantidad = articulo.productos[i].cantidad;
	123	+ sinonimos[i].cantidadRestante = articulo.productos[i].cantidad;
122	124	});
123	125	res = sinonimos;
124	126	this.openModalSinonimos(res, articulo);
...	...	@@ -7,8 +7,8 @@
7	7	(click)="close()"
8	8	class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
9	9	src="assets/img/icono-cancelar-blanco.svg">
10		- <p class="col-7 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
11		- <div class="col-5 pt-4 pr-0 text-right">
	10	+ <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
	11	+ <!-- <div class="col-5 pt-4 pr-0 text-right">
12	12	<p *ngFor="let s of sinonimos; let i = index">
13	13	<span
14	14	class="btn-effect"
...	...	@@ -17,26 +17,42 @@
17	17	<i class="far fa-hand-point-left"></i>
18	18	</span>
19	19	</p>
20		- </div>
	20	+ </div> -->
21	21	</div>
22	22
23	23	<div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
24		- <div *ngFor="let s of sinonimos; let i = index">
25		- <div [id]="i"></div>
26		- <hr [hidden]="i === 0" class="bg-white">
27		- <div *ngFor="let articulo of s.productos">
28		- <div class="custom-control custom-checkbox">
29		- <input
30		- type="checkbox"
31		- class="custom-control-input"
32		- [(ngModel)]="articulo.seleccionado"
33		- (click)="selectSinonimo(i, articulo)"
34		- [id]="articulo.id">
35		- <label
36		- class="custom-control-label"
37		- [for]="articulo.id">
38		- {{articulo.DET_LAR.toUpperCase()}}
39		- </label>
	24	+ <div class="row mx-0 mb-2" *ngFor="let articulo of sinonimos[currentIndex].productos">
	25	+ <div class="col-7 p-0 my-auto h6 text-right">
	26	+ <p class="m-0 font-weight-normal">
	27	+ {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
	28	+ </p>
	29	+ </div>
	30	+ <div class="col-5 pr-0">
	31	+ <div class="row mx-0 justify-content-between border border-white badge-pill">
	32	+ <!-- BOTON MENOS -->
	33	+ <div class="col-auto px-0 my-auto">
	34	+ <img
	35	+ draggable="false"
	36	+ ondragstart="return false;"
	37	+ (contextmenu)="false"
	38	+ class="d-block ml-auto py-2 icon-15 btn-effect"
	39	+ src="assets/img/menos-blanco.svg"
	40	+ (click)="restarCantidadSinonimo(articulo, currentIndex)">
	41	+ </div>
	42	+ <!-- CANTIDAD -->
	43	+ <div class="col px-0 my-auto text-white text-center">
	44	+ <p><small>{{articulo.cantidad}}</small></p>
	45	+ </div>
	46	+ <!-- BOTON MAS -->
	47	+ <div class="col-auto px-0 my-auto">
	48	+ <img
	49	+ draggable="false"
	50	+ ondragstart="return false;"
	51	+ (contextmenu)="false"
	52	+ class="d-block ml-auto py-2 icon-15 btn-effect"
	53	+ src="assets/img/mas-blanco.svg"
	54	+ (click)="sumarCantidadSinonimo(articulo, currentIndex)">
	55	+ </div>
40	56	</div>
41	57	</div>
42	58	</div>
...	...	@@ -44,8 +60,33 @@
44	60
45	61	<div class="modal-footer">
46	62	<div
	63	+ *ngIf="currentIndex != 0 && sinonimos.length > 1"
	64	+ class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto"
	65	+ (click)="currentIndex = currentIndex-1">
	66	+ <img
	67	+ draggable="false"
	68	+ ondragstart="return false;"
	69	+ (contextmenu)="false"
	70	+ class="icon-30 flip"
	71	+ src="assets/img/ir-color.svg">
	72	+ VOLVER
	73	+ </div>
	74	+ <div
	75	+ *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
	76	+ class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
	77	+ (click)="currentIndex = currentIndex+1">
	78	+ SIGUIENTE
	79	+ <img
	80	+ draggable="false"
	81	+ ondragstart="return false;"
	82	+ (contextmenu)="false"
	83	+ class="icon-30"
	84	+ src="assets/img/ir-color.svg">
	85	+ </div>
	86	+ <div
47	87	[ngClass]="validate()"
48		- class="d-inline-block py-1 bg-white badge-pill text-primary"
	88	+ *ngIf="currentIndex == sinonimos.length-1"
	89	+ class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
49	90	(click)="continue()">
50	91	CONTINUAR
51	92	<img
1	1	.lista-sinonimos {
2		- min-height: auto;
	2	+ min-height: 35vh;
3	3	max-height: 35vh;
4	4	}
...	...	@@ -18,6 +18,7 @@ export class SinonimoComponent implements OnInit {
18	18	articulosSelected: IArticulo[] = [];
19	19	articulo: IArticulo;
20	20	isSinonimoSelected = false;
	21	+ currentIndex = 0;
21	22
22	23	constructor(
23	24	private modalRef: BsModalRef,
...	...	@@ -27,7 +28,13 @@ export class SinonimoComponent implements OnInit {
27	28	this.articulosSelected.length = this.sinonimos.length;
28	29	}
29	30
30		- ngOnInit() { }
	31	+ ngOnInit() {
	32	+ for (const s of this.sinonimos) {
	33	+ for (const a of s.productos) {
	34	+ a.cantidad = 0;
	35	+ }
	36	+ }
	37	+ }
31	38
32	39	selectSinonimo(index: number, articulo: IArticulo) {
33	40	for (const a of this.sinonimos[index].productos) {
...	...	@@ -73,6 +80,19 @@ export class SinonimoComponent implements OnInit {
73	80	}, err => console.error(err));
74	81	}
75	82
	83	+ sumarCantidadSinonimo(articulo: IArticulo, i: number) {
	84	+ if (this.sinonimos[i].cantidadRestante === 0) return;
	85	+ articulo.cantidad++;
	86	+ this.sinonimos[i].cantidadRestante--;
	87	+ }
	88	+
	89	+ restarCantidadSinonimo(articulo: IArticulo, i: number) {
	90	+ if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return;
	91	+ if (articulo.cantidad === 0) return;
	92	+ articulo.cantidad--;
	93	+ this.sinonimos[i].cantidadRestante++;
	94	+ }
	95	+
76	96	scrollTo(index: number) {
77	97	const el = document.getElementById(index.toString());
78	98	el.scrollIntoView({ behavior: 'smooth' });
...	...	@@ -102,3 +102,8 @@ p {
102	102	.z-index {
103	103	z-index: 1000;
104	104	}
	105	+
	106	+.flip {
	107	+ -webkit-transform: scaleX(-1);
	108	+ transform: scaleX(-1);
	109	+}
105	110	\ No newline at end of file