Change - Add

Forma de seleccionar articulos. Ahora ofrece sinonimos

Change - Add
Forma de seleccionar articulos. Ahora ofrece sinonimos
Marcelo Puebla
1 parent 6b94f5f761
Showing 10 changed files with 148 additions and 15 deletions Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
src/app/shared/promocion/promocion.component.html
src/app/shared/promocion/promocion.component.ts
src/app/shared/sinonimo/sinonimo.component.html
src/app/shared/sinonimo/sinonimo.component.scss
src/app/shared/sinonimo/sinonimo.component.ts
src/scss/styles-bootstrap.scss
src/styles.scss
@@ -86,7 +86,7 @@
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
-                  (click)="elegirArticulo(articulo)">
+                  (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
@@ -4,10 +4,13 @@ import { ArticuloService } from &#39;src/app/services/articulo/articulo.service&#39;;
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
  
 @Component({
   selector: 'app-seleccion-articulos',
@@ -33,6 +36,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
+    private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
@@ -128,7 +132,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     this.filterItems();
   }
  
-  elegirArticulo(articulo: IArticulo) {
+  selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
  
@@ -138,12 +142,23 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
-          res.cantidad = 1;
-          this.articuloService.setArticulo(res);
+          this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
  
+  getSinonimos(articulo: IArticulo) {
+    this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
+      .subscribe((res: ISinonimo[]) => {
+        if (res.length) {
+          this.openModalSinonimos(res);
+        } else {
+          articulo.cantidad = 1;
+          this.articuloService.setArticulo(articulo);
+        }
+      })
+  }
+
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
@@ -151,6 +166,13 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     });
   }
  
+  openModalSinonimos(sinonimosData: ISinonimo[]) {
+    this.modalRef = this.modalService.show(SinonimoComponent, {
+      initialState: { sinonimos: sinonimosData },
+      class: 'modal-promo modal-dialog-centered'
+    });
+  }
+
   deleteArticulo(index: number) {
     this.articuloService.carrito.splice(index, 1);
     this.articuloService.calcularTotal();
@@ -7,21 +7,25 @@ import { ModalModule } from &#39;ngx-bootstrap/modal&#39;;
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
+import { FormsModule } from '@angular/forms';
  
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
-    PromocionComponent
+    PromocionComponent,
+    SinonimoComponent,
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
+    FormsModule,
     ModalModule.forRoot(),
     CarouselModule.forRoot(),
     SharedModule
   ],
   exports: [HeaderPublicidadComponent],
-  entryComponents: [PromocionComponent]
+  entryComponents: [PromocionComponent, SinonimoComponent]
 })
 export class SeleccionArticulosModule { }
@@ -6,7 +6,7 @@
     <div class="col-4 align-self-center">
       <div
         class="row mx-0 justify-content-between bg-white badge-pill"
-        (click)="elegirPromo(articulosPromo[0])">
+        (click)="selectPromo(articulosPromo[0])">
         <div class="col px-0 align-self-center text-primary">
           <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 
         </div>
@@ -43,7 +43,7 @@
     (scroll)="scrollEvent($event)">
     <div class="col-12">
       <div *ngFor="let promo of promociones">
-        <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
+        <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)">
           <div class="d-flex">
             <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
             <p class="font-weight-bold my-auto pr-2">
 import { Component, OnInit, HostListener } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { Subject } from 'rxjs';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
+import { SinonimoComponent } from '../sinonimo/sinonimo.component';
  
 @Component({
   selector: 'app-promocion',
@@ -20,8 +23,10 @@ export class PromocionComponent implements OnInit {
  
   constructor(
     public modalRef: BsModalRef,
+    private modalService: BsModalService,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
+    private sinonimoService: SinonimoService,
     private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
@@ -31,10 +36,24 @@ export class PromocionComponent implements OnInit {
     this.getPromociones();
   }
  
-  elegirPromo(promo: IArticulo) {
-    promo.cantidad = 1;
-    this.articuloService.setArticulo(promo);
-    this.modalRef.hide();
+  selectPromo(promo: IArticulo) {
+    this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
+      .subscribe((res: ISinonimo[]) => {
+        if (res.length) {
+          this.openModalSinonimos(res);
+        } else {
+          promo.cantidad = 1;
+          this.articuloService.setArticulo(promo);
+          this.modalRef.hide();
+        }
+      }, err => console.error(err));
+  }
+
+  openModalSinonimos(sinonimosData: ISinonimo[]) {
+    this.modalRef = this.modalService.show(SinonimoComponent, {
+      initialState: { sinonimos: sinonimosData },
+      class: 'modal-promo modal-dialog-centered'
+    });
   }
  
   getPromociones() {
-<p>sinonimo works!</p>
+<div class="bg-primary rounded text-white">
+  <div class="modal-header">
+    <p class="h4">Seleccione sinonimos</p>
+  </div>
+
+  <div class="modal-body">
+    <div
+      class="lista-sinonimos scroll-y-visible"
+      *ngFor="let s of sinonimos">
+      <div *ngFor="let articulo of s.productos">
+        <div class="custom-control custom-checkbox">
+          <input
+            type="checkbox"
+            class="custom-control-input"
+            [(ngModel)]="articulo.seleccionado"
+            (click)="selectArticulo(articulo)"
+            [id]="articulo.id">
+          <label
+            class="custom-control-label"
+            [for]="articulo.id">
+            {{articulo.DET_LAR}}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="modal-footer">
+    <div
+      [ngClass]="validate()"
+      class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary">
+      CONTINUAR
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30"
+        src="assets/img/ir-color.svg">
+    </div>
+  </div>
+</div>
@@ -0,0 +1,4 @@
+.lista-sinonimos {
+  min-height: auto;
+  max-height: 25vh;
+}
 import { Component, OnInit } from '@angular/core';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
+import { IArticulo } from 'src/app/interfaces/IArticulo';
  
 @Component({
   selector: 'app-sinonimo',
@@ -6,10 +8,33 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
   styleUrls: ['./sinonimo.component.scss']
 })
 export class SinonimoComponent implements OnInit {
+  sinonimos: ISinonimo[] = [];
+  isValid: boolean;
  
   constructor() { }
  
   ngOnInit() {
   }
  
+  selectArticulo(articulo: IArticulo) {
+    for (const s of this.sinonimos) {
+      for (const articulo of s.productos) {
+        articulo.seleccionado = false;
+      }
+    }
+    articulo.seleccionado = true;
+  }
+
+  validate() {
+    this.isValid = false;
+    for (const s of this.sinonimos) {
+      for (const articulo of s.productos) {
+        if (articulo.seleccionado) {
+          this.isValid = true;
+        }
+      }
+    }
+    return !this.isValid ? 'disabled' : '';
+  }
+
 }
@@ -40,9 +40,24 @@ $border-radius-sm: 0.5rem;
   height: 100% !important;
 }
  
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
+  background-color: $primary !important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  border-color: $primary !important;
+  background-color: $primary !important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  color: #fff;
+  border-color: $primary !important;
+  background-color: $primary !important;
+}
+
 .modal-promo > div {
   border: none !important;
-  border-radius: 10rem;
+  border-radius: $border-radius;
   margin-left: 10px !important;
 }
  
@@ -73,3 +73,7 @@ p {
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
+
+.disabled {
+  opacity: 0.5;
+}
...	...	@@ -86,7 +86,7 @@
86	86	*ngFor="let articulo of auxArticulos \| slice:0:showQuantity;">
87	87	<div
88	88	class="swing-in-top-fwd btn-effect card h-auto"
89		- (click)="elegirArticulo(articulo)">
	89	+ (click)="selectArticulo(articulo)">
90	90	<img
91	91	draggable="false"
92	92	ondragstart="return false;"
...	...	@@ -4,10 +4,13 @@ import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4	4	import { IArticulo } from 'src/app/interfaces/IArticulo';
5	5	import { APP_SETTINGS } from 'src/etc/AppSettings';
6	6	import { ICategoria } from 'src/app/interfaces/ICategoria';
	7	+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
7	8	import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8	9	import { PromocionService } from 'src/app/services/promocion/promocion.service';
9	10	import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10	11	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
	12	+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
	13	+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11	14
12	15	@Component({
13	16	selector: 'app-seleccion-articulos',
...	...	@@ -33,6 +36,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
33	36	constructor(
34	37	public articuloService: ArticuloService,
35	38	private categoriaService: CategoriaService,
	39	+ private sinonimoService: SinonimoService,
36	40	private modalService: BsModalService,
37	41	private inactiveScreen: InactiveScreenService,
38	42	) { }
...	...	@@ -128,7 +132,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
128	132	this.filterItems();
129	133	}
130	134
131		- elegirArticulo(articulo: IArticulo) {
	135	+ selectArticulo(articulo: IArticulo) {
132	136	this.getByID(articulo.id);
133	137	}
134	138
...	...	@@ -138,12 +142,23 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
138	142	if (res.FPP) {
139	143	this.openModalPromos(res);
140	144	} else {
141		- res.cantidad = 1;
142		- this.articuloService.setArticulo(res);
	145	+ this.getSinonimos(res);
143	146	}
144	147	}, err => console.error(err));
145	148	}
146	149
	150	+ getSinonimos(articulo: IArticulo) {
	151	+ this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
	152	+ .subscribe((res: ISinonimo[]) => {
	153	+ if (res.length) {
	154	+ this.openModalSinonimos(res);
	155	+ } else {
	156	+ articulo.cantidad = 1;
	157	+ this.articuloService.setArticulo(articulo);
	158	+ }
	159	+ })
	160	+ }
	161	+
147	162	openModalPromos(articulo: IArticulo) {
148	163	this.modalRef = this.modalService.show(PromocionComponent, {
149	164	initialState: { articulosPromo: [articulo] },
...	...	@@ -151,6 +166,13 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
151	166	});
152	167	}
153	168
	169	+ openModalSinonimos(sinonimosData: ISinonimo[]) {
	170	+ this.modalRef = this.modalService.show(SinonimoComponent, {
	171	+ initialState: { sinonimos: sinonimosData },
	172	+ class: 'modal-promo modal-dialog-centered'
	173	+ });
	174	+ }
	175	+
154	176	deleteArticulo(index: number) {
155	177	this.articuloService.carrito.splice(index, 1);
156	178	this.articuloService.calcularTotal();
...	...	@@ -7,21 +7,25 @@ import { ModalModule } from 'ngx-bootstrap/modal';
7	7	import { CarouselModule } from 'ngx-bootstrap/carousel';
8	8	import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9	9	import { SharedModule } from '../shared/shared.module';
	10	+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
	11	+import { FormsModule } from '@angular/forms';
10	12
11	13	@NgModule({
12	14	declarations: [
13	15	SeleccionArticulosComponent,
14	16	HeaderPublicidadComponent,
15		- PromocionComponent
	17	+ PromocionComponent,
	18	+ SinonimoComponent,
16	19	],
17	20	imports: [
18	21	CommonModule,
19	22	SeleccionArticulosRoutingModule,
	23	+ FormsModule,
20	24	ModalModule.forRoot(),
21	25	CarouselModule.forRoot(),
22	26	SharedModule
23	27	],
24	28	exports: [HeaderPublicidadComponent],
25		- entryComponents: [PromocionComponent]
	29	+ entryComponents: [PromocionComponent, SinonimoComponent]
26	30	})
27	31	export class SeleccionArticulosModule { }
...	...	@@ -6,7 +6,7 @@
6	6	<div class="col-4 align-self-center">
7	7	<div
8	8	class="row mx-0 justify-content-between bg-white badge-pill"
9		- (click)="elegirPromo(articulosPromo[0])">
	9	+ (click)="selectPromo(articulosPromo[0])">
10	10	<div class="col px-0 align-self-center text-primary">
11	11	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>
12	12	</div>
...	...	@@ -43,7 +43,7 @@
43	43	(scroll)="scrollEvent($event)">
44	44	<div class="col-12">
45	45	<div *ngFor="let promo of promociones">
46		- <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
	46	+ <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)">
47	47	<div class="d-flex">
48	48	<p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49	49	<p class="font-weight-bold my-auto pr-2">
1	1	import { Component, OnInit, HostListener } from '@angular/core';
2		-import { BsModalRef } from 'ngx-bootstrap/modal';
	2	+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3	3	import { IArticulo } from 'src/app/interfaces/IArticulo';
4	4	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5	5	import { PromocionService } from 'src/app/services/promocion/promocion.service';
6	6	import { Subject } from 'rxjs';
7	7	import { APP_SETTINGS } from 'src/etc/AppSettings';
8	8	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
	9	+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
	10	+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
	11	+import { SinonimoComponent } from '../sinonimo/sinonimo.component';
9	12
10	13	@Component({
11	14	selector: 'app-promocion',
...	...	@@ -20,8 +23,10 @@ export class PromocionComponent implements OnInit {
20	23
21	24	constructor(
22	25	public modalRef: BsModalRef,
	26	+ private modalService: BsModalService,
23	27	private articuloService: ArticuloService,
24	28	private promocionService: PromocionService,
	29	+ private sinonimoService: SinonimoService,
25	30	private inactiveScreen: InactiveScreenService,
26	31	) {
27	32	this.onClose = new Subject();
...	...	@@ -31,10 +36,24 @@ export class PromocionComponent implements OnInit {
31	36	this.getPromociones();
32	37	}
33	38
34		- elegirPromo(promo: IArticulo) {
35		- promo.cantidad = 1;
36		- this.articuloService.setArticulo(promo);
37		- this.modalRef.hide();
	39	+ selectPromo(promo: IArticulo) {
	40	+ this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
	41	+ .subscribe((res: ISinonimo[]) => {
	42	+ if (res.length) {
	43	+ this.openModalSinonimos(res);
	44	+ } else {
	45	+ promo.cantidad = 1;
	46	+ this.articuloService.setArticulo(promo);
	47	+ this.modalRef.hide();
	48	+ }
	49	+ }, err => console.error(err));
	50	+ }
	51	+
	52	+ openModalSinonimos(sinonimosData: ISinonimo[]) {
	53	+ this.modalRef = this.modalService.show(SinonimoComponent, {
	54	+ initialState: { sinonimos: sinonimosData },
	55	+ class: 'modal-promo modal-dialog-centered'
	56	+ });
38	57	}
39	58
40	59	getPromociones() {
1		-<p>sinonimo works!</p>
	1	+<div class="bg-primary rounded text-white">
	2	+ <div class="modal-header">
	3	+ <p class="h4">Seleccione sinonimos</p>
	4	+ </div>
	5	+
	6	+ <div class="modal-body">
	7	+ <div
	8	+ class="lista-sinonimos scroll-y-visible"
	9	+ *ngFor="let s of sinonimos">
	10	+ <div *ngFor="let articulo of s.productos">
	11	+ <div class="custom-control custom-checkbox">
	12	+ <input
	13	+ type="checkbox"
	14	+ class="custom-control-input"
	15	+ [(ngModel)]="articulo.seleccionado"
	16	+ (click)="selectArticulo(articulo)"
	17	+ [id]="articulo.id">
	18	+ <label
	19	+ class="custom-control-label"
	20	+ [for]="articulo.id">
	21	+ {{articulo.DET_LAR}}
	22	+ </label>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ </div>
	27	+
	28	+ <div class="modal-footer">
	29	+ <div
	30	+ [ngClass]="validate()"
	31	+ class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary">
	32	+ CONTINUAR
	33	+ <img
	34	+ draggable="false"
	35	+ ondragstart="return false;"
	36	+ (contextmenu)="false"
	37	+ class="icon-30"
	38	+ src="assets/img/ir-color.svg">
	39	+ </div>
	40	+ </div>
	41	+</div>
...	...	@@ -0,0 +1,4 @@
	1	+.lista-sinonimos {
	2	+ min-height: auto;
	3	+ max-height: 25vh;
	4	+}
1	1	import { Component, OnInit } from '@angular/core';
	2	+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
	3	+import { IArticulo } from 'src/app/interfaces/IArticulo';
2	4
3	5	@Component({
4	6	selector: 'app-sinonimo',
...	...	@@ -6,10 +8,33 @@ import { Component, OnInit } from '@angular/core';
6	8	styleUrls: ['./sinonimo.component.scss']
7	9	})
8	10	export class SinonimoComponent implements OnInit {
	11	+ sinonimos: ISinonimo[] = [];
	12	+ isValid: boolean;
9	13
10	14	constructor() { }
11	15
12	16	ngOnInit() {
13	17	}
14	18
	19	+ selectArticulo(articulo: IArticulo) {
	20	+ for (const s of this.sinonimos) {
	21	+ for (const articulo of s.productos) {
	22	+ articulo.seleccionado = false;
	23	+ }
	24	+ }
	25	+ articulo.seleccionado = true;
	26	+ }
	27	+
	28	+ validate() {
	29	+ this.isValid = false;
	30	+ for (const s of this.sinonimos) {
	31	+ for (const articulo of s.productos) {
	32	+ if (articulo.seleccionado) {
	33	+ this.isValid = true;
	34	+ }
	35	+ }
	36	+ }
	37	+ return !this.isValid ? 'disabled' : '';
	38	+ }
	39	+
15	40	}
...	...	@@ -40,9 +40,24 @@ $border-radius-sm: 0.5rem;
40	40	height: 100% !important;
41	41	}
42	42
	43	+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	44	+ background-color: $primary !important;
	45	+}
	46	+
	47	+.custom-control-input:checked ~ .custom-control-label::before {
	48	+ border-color: $primary !important;
	49	+ background-color: $primary !important;
	50	+}
	51	+
	52	+.custom-control-input:checked ~ .custom-control-label::before {
	53	+ color: #fff;
	54	+ border-color: $primary !important;
	55	+ background-color: $primary !important;
	56	+}
	57	+
43	58	.modal-promo > div {
44	59	border: none !important;
45		- border-radius: 10rem;
	60	+ border-radius: $border-radius;
46	61	margin-left: 10px !important;
47	62	}
48	63
...	...	@@ -73,3 +73,7 @@ p {
73	73	.rotate-180-neg {
74	74	transform: rotate(-180deg);
75	75	}
	76	+
	77	+.disabled {
	78	+ opacity: 0.5;
	79	+}