Marcelo Puebla / autoservicio-axion

Commit 571c49ba30f3b1216867f5a75c102d8b797f17e5

Authored by Marcelo Puebla 2020-01-23 14:12:07 -0300

Exists in develop

Change - Add

Forma de seleccionar articulos. Ahora ofrece sinonimos

Showing 10 changed files with 148 additions and 15 deletions Show diff stats

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ 571c49b

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<!-- PUBLICIDADES -->	2	<!-- PUBLICIDADES -->
3	<app-header-publicidad></app-header-publicidad>	3	<app-header-publicidad></app-header-publicidad>
4		4
5	<div class="row mx-0 h-80 align-items-end">	5	<div class="row mx-0 h-80 align-items-end">
6	<!-- CABECERA -->	6	<!-- CABECERA -->
7	<div class="row w-100 mx-3 h-auto border border-primary rounded-sm">	7	<div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8	<div class="col-12 p-2 align-self-center">	8	<div class="col-12 p-2 align-self-center">
9	<div class="px-3">	9	<div class="px-3">
10	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>	10	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11	</div>	11	</div>
12	</div>	12	</div>
13	</div>	13	</div>
14	<!-- CUERPO -->	14	<!-- CUERPO -->
15	<div class="row w-100 mr-4 h-50 h-md-70">	15	<div class="row w-100 mr-4 h-50 h-md-70">
16	<div class="col-12 h-100 px-0 py-3">	16	<div class="col-12 h-100 px-0 py-3">
17	<div class="row mx-0 h-100">	17	<div class="row mx-0 h-100">
18	<!-- FILTRO CATEGORIAS -->	18	<!-- FILTRO CATEGORIAS -->
19	<div class="col-5 col-sm-3 col-xl-2 h-100">	19	<div class="col-5 col-sm-3 col-xl-2 h-100">
20	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>	20	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21	<div class="row mx-0 h-94 justify-content-center align-items-center">	21	<div class="row mx-0 h-94 justify-content-center align-items-center">
22	<div class="col-auto btn-effect h-5">	22	<div class="col-auto btn-effect h-5">
23	<img	23	<img
24	draggable="false"	24	draggable="false"
25	ondragstart="return false;"	25	ondragstart="return false;"
26	(contextmenu)="false"	26	(contextmenu)="false"
27	class="h-100 d-block mx-auto rotate-90-neg"	27	class="h-100 d-block mx-auto rotate-90-neg"
28	src="assets/img/ir-color.svg"	28	src="assets/img/ir-color.svg"
29	(mousedown)="scrollY(templateCategorias, -100)"	29	(mousedown)="scrollY(templateCategorias, -100)"
30	(mouseup)="mouseup()"	30	(mouseup)="mouseup()"
31	(mouseleave)="mouseup()">	31	(mouseleave)="mouseup()">
32	</div>	32	</div>
33	<!-- CATEGORIAS -->	33	<!-- CATEGORIAS -->
34	<div	34	<div
35	#templateCategorias	35	#templateCategorias
36	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"	36	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
37	(scroll)="scrollEvent($event)">	37	(scroll)="scrollEvent($event)">
38	<div	38	<div
39	class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"	39	class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
40	[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"	40	[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
41	(click)="selectCategoria(-1, 0)">	41	(click)="selectCategoria(-1, 0)">
42	<img	42	<img
43	draggable="false"	43	draggable="false"
44	ondragstart="return false;"	44	ondragstart="return false;"
45	(contextmenu)="false"	45	(contextmenu)="false"
46	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"	46	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47	src="assets/img/logo-spot.svg">	47	src="assets/img/logo-spot.svg">
48	<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>	48	<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
49	</div>	49	</div>
50	<div	50	<div
51	class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"	51	class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
52	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"	52	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53	(click)="selectCategoria(i, categoria.id)"	53	(click)="selectCategoria(i, categoria.id)"
54	*ngFor="let categoria of categorias; let i = index;">	54	*ngFor="let categoria of categorias; let i = index;">
55	<img	55	<img
56	draggable="false"	56	draggable="false"
57	ondragstart="return false;"	57	ondragstart="return false;"
58	(contextmenu)="false"	58	(contextmenu)="false"
59	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"	59	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60	src="{{urlImagenes}}{{categoria.path_imagen}}"	60	src="{{urlImagenes}}{{categoria.path_imagen}}"
61	onerror="this.src='assets/img/image-not-found.jpg'">	61	onerror="this.src='assets/img/image-not-found.jpg'">
62	<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>	62	<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
63	</div>	63	</div>
64	</div>	64	</div>
65	<div class="col-auto btn-effect h-5">	65	<div class="col-auto btn-effect h-5">
66	<img	66	<img
67	draggable="false"	67	draggable="false"
68	ondragstart="return false;"	68	ondragstart="return false;"
69	(contextmenu)="false"	69	(contextmenu)="false"
70	class="h-100 d-block mx-auto rotate-90"	70	class="h-100 d-block mx-auto rotate-90"
71	src="assets/img/ir-color.svg"	71	src="assets/img/ir-color.svg"
72	(mousedown)="scrollY(templateCategorias, 100)"	72	(mousedown)="scrollY(templateCategorias, 100)"
73	(mouseup)="mouseup()"	73	(mouseup)="mouseup()"
74	(mouseleave)="mouseup()">	74	(mouseleave)="mouseup()">
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78	<!-- LISTA DE ARTICULOS -->	78	<!-- LISTA DE ARTICULOS -->
79	<div	79	<div
80	class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"	80	class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
81	(scroll)="scrollEvent($event)">	81	(scroll)="scrollEvent($event)">
82	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">	82	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
83	<!-- ARTICULO -->	83	<!-- ARTICULO -->
84	<div	84	<div
85	class="col px-2 my-1 my-md-3 h-auto"	85	class="col px-2 my-1 my-md-3 h-auto"
86	*ngFor="let articulo of auxArticulos \| slice:0:showQuantity;">	86	*ngFor="let articulo of auxArticulos \| slice:0:showQuantity;">
87	<div	87	<div
88	class="swing-in-top-fwd btn-effect card h-auto"	88	class="swing-in-top-fwd btn-effect card h-auto"
89	(click)="elegirArticulo(articulo)">	89	(click)="selectArticulo(articulo)">
90	<img	90	<img
91	draggable="false"	91	draggable="false"
92	ondragstart="return false;"	92	ondragstart="return false;"
93	(contextmenu)="false"	93	(contextmenu)="false"
94	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"	94	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
95	onerror="this.src='assets/img/image-not-found.jpg'"	95	onerror="this.src='assets/img/image-not-found.jpg'"
96	class="card-img-top h-30 h-md-55 rounded-sm">	96	class="card-img-top h-30 h-md-55 rounded-sm">
97	<div class="row mx-0 py-1 h-auto justify-content-center">	97	<div class="row mx-0 py-1 h-auto justify-content-center">
98	<p	98	<p
99	[ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"	99	[ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
100	class="col-12 px-1 h6 h-auto text-center min-h-60">	100	class="col-12 px-1 h6 h-auto text-center min-h-60">
101	{{articulo.DetArt}}	101	{{articulo.DetArt}}
102	</p>	102	</p>
103	<p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">	103	<p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
104	<small>{{articulo.DET_LAR}}</small>	104	<small>{{articulo.DET_LAR}}</small>
105	</p>	105	</p>
106	<div class="col-12 px-1 align-self-end h-auto">	106	<div class="col-12 px-1 align-self-end h-auto">
107	<div	107	<div
108	[ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"	108	[ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
109	class="row mx-0 justify-content-between badge-pill">	109	class="row mx-0 justify-content-between badge-pill">
110	<div class="col px-0 align-self-center text-white text-right">	110	<div class="col px-0 align-self-center text-white text-right">
111	{{articulo.PreVen \| currency}}	111	{{articulo.PreVen \| currency}}
112	</div>	112	</div>
113	<div class="col-5 px-0">	113	<div class="col-5 px-0">
114	<img	114	<img
115	draggable="false"	115	draggable="false"
116	ondragstart="return false;"	116	ondragstart="return false;"
117	(contextmenu)="false"	117	(contextmenu)="false"
118	class="d-block ml-auto py-1 icon-30"	118	class="d-block ml-auto py-1 icon-30"
119	src="assets/img/ir.svg">	119	src="assets/img/ir.svg">
120	</div>	120	</div>
121	</div>	121	</div>
122	</div>	122	</div>
123	</div>	123	</div>
124	</div>	124	</div>
125	</div>	125	</div>
126	</div>	126	</div>
127	<!-- BOTON VER MAS -->	127	<!-- BOTON VER MAS -->
128	<div class="row mx-0">	128	<div class="row mx-0">
129	<div	129	<div
130	*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"	130	*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
131	class="col-12 px-0 mb-2">	131	class="col-12 px-0 mb-2">
132	<button	132	<button
133	(click)="increaseShow()"	133	(click)="increaseShow()"
134	class="btn btn-block btn-outline-primary">	134	class="btn btn-block btn-outline-primary">
135	Ver Más	135	Ver Más
136	</button>	136	</button>
137	</div>	137	</div>
138	</div>	138	</div>
139	</div>	139	</div>
140	</div>	140	</div>
141	</div>	141	</div>
142	</div>	142	</div>
143	<!-- FOOTER CARRITO DE COMPRAS -->	143	<!-- FOOTER CARRITO DE COMPRAS -->
144	<div class="row w-90 mx-auto h-auto justify-content-center">	144	<div class="row w-90 mx-auto h-auto justify-content-center">
145	<div class="col-12 h-75 px-0 border border-primary rounded">	145	<div class="col-12 h-75 px-0 border border-primary rounded">
146	<!-- CABECERA -->	146	<!-- CABECERA -->
147	<div class="row mx-0 h-15 border-bottom border-primary">	147	<div class="row mx-0 h-15 border-bottom border-primary">
148	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>	148	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
149	</div>	149	</div>
150	<!-- CUERPO -->	150	<!-- CUERPO -->
151	<div class="row h-85 mx-0 justify-content-around">	151	<div class="row h-85 mx-0 justify-content-around">
152	<!-- BOTON SCROLL IZQUIERDA -->	152	<!-- BOTON SCROLL IZQUIERDA -->
153	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">	153	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
154	<img	154	<img
155	draggable="false"	155	draggable="false"
156	ondragstart="return false;"	156	ondragstart="return false;"
157	(contextmenu)="false"	157	(contextmenu)="false"
158	class="icon-30 rotate-180-neg"	158	class="icon-30 rotate-180-neg"
159	src="assets/img/ir-fondo-color.svg"	159	src="assets/img/ir-fondo-color.svg"
160	(mousedown)="scrollX(templateCarrito, -100)"	160	(mousedown)="scrollX(templateCarrito, -100)"
161	(mouseup)="mouseup()"	161	(mouseup)="mouseup()"
162	(mouseleave)="mouseup()">	162	(mouseleave)="mouseup()">
163	</div>	163	</div>
164	<!-- CARRITO -->	164	<!-- CARRITO -->
165	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">	165	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
166	<div	166	<div
167	#templateCarrito	167	#templateCarrito
168	class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"	168	class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
169	(scroll)="scrollEvent($event)">	169	(scroll)="scrollEvent($event)">
170	<!-- MENSAJE DE ADVERTENCIA -->	170	<!-- MENSAJE DE ADVERTENCIA -->
171	<div *ngIf="!articuloService.carrito.length" class="col h-100">	171	<div *ngIf="!articuloService.carrito.length" class="col h-100">
172	<p class="text-center py-5">No hay articulos en el carrito</p>	172	<p class="text-center py-5">No hay articulos en el carrito</p>
173	</div>	173	</div>
174	<!-- ARTICULOS -->	174	<!-- ARTICULOS -->
175	<div	175	<div
176	class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"	176	class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
177	*ngFor="let articulo of articuloService.carrito; let i = index;">	177	*ngFor="let articulo of articuloService.carrito; let i = index;">
178	<div class="swing-in-top-fwd">	178	<div class="swing-in-top-fwd">
179	<img	179	<img
180	class="btn-effect icon-20 position-absolute right-0"	180	class="btn-effect icon-20 position-absolute right-0"
181	src="assets/img/icono-cancelar-color.svg"	181	src="assets/img/icono-cancelar-color.svg"
182	(click)="deleteArticulo(i)">	182	(click)="deleteArticulo(i)">
183	<img	183	<img
184	draggable="false"	184	draggable="false"
185	ondragstart="return false;"	185	ondragstart="return false;"
186	(contextmenu)="false"	186	(contextmenu)="false"
187	class="d-block img-fluid p-2 mx-auto rounded"	187	class="d-block img-fluid p-2 mx-auto rounded"
188	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"	188	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
189	onerror="this.src='assets/img/image-not-found.jpg'">	189	onerror="this.src='assets/img/image-not-found.jpg'">
190	<p class="d-block mt-auto text-center text-primary text-truncate">	190	<p class="d-block mt-auto text-center text-primary text-truncate">
191	<small>{{articulo.DetArt}}</small>	191	<small>{{articulo.DetArt}}</small>
192	</p>	192	</p>
193	</div>	193	</div>
194	</div>	194	</div>
195	</div>	195	</div>
196	</div>	196	</div>
197	<!-- BOTON SCROLL DERECHA -->	197	<!-- BOTON SCROLL DERECHA -->
198	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">	198	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
199	<img	199	<img
200	draggable="false"	200	draggable="false"
201	ondragstart="return false;"	201	ondragstart="return false;"
202	(contextmenu)="false"	202	(contextmenu)="false"
203	class="icon-30"	203	class="icon-30"
204	src="assets/img/ir-fondo-color.svg"	204	src="assets/img/ir-fondo-color.svg"
205	(mousedown)="scrollX(templateCarrito, 100)"	205	(mousedown)="scrollX(templateCarrito, 100)"
206	(mouseup)="mouseup()"	206	(mouseup)="mouseup()"
207	(mouseleave)="mouseup()">	207	(mouseleave)="mouseup()">
208	</div>	208	</div>
209	</div>	209	</div>
210	</div>	210	</div>
211	<!-- TOTAL-->	211	<!-- TOTAL-->
212	<div	212	<div
213	class="col-auto mt-2 ml-auto h-20">	213	class="col-auto mt-2 ml-auto h-20">
214	<div class="row mx-0">	214	<div class="row mx-0">
215	<div class="col-auto align-self-center text-primary">TOTAL</div>	215	<div class="col-auto align-self-center text-primary">TOTAL</div>
216	<div class="col-auto bg-primary badge-pill">	216	<div class="col-auto bg-primary badge-pill">
217	<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal \| currency}}</p>	217	<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal \| currency}}</p>
218	</div>	218	</div>
219	</div>	219	</div>
220	</div>	220	</div>
221		221
222	<!-- VER CARRITO -->	222	<!-- VER CARRITO -->
223	<div	223	<div
224	class="col-auto px-0 mt-2 h-20"	224	class="col-auto px-0 mt-2 h-20"
225	*ngIf="articuloService.carrito.length">	225	*ngIf="articuloService.carrito.length">
226	<div	226	<div
227	class="btn-effect col-auto px-0 align-self-center bg-white"	227	class="btn-effect col-auto px-0 align-self-center bg-white"
228	[routerLink]="['/carrito']">	228	[routerLink]="['/carrito']">
229	<div class="row mx-0 bg-light">	229	<div class="row mx-0 bg-light">
230	<div class="col-auto p-0 bg-primary">	230	<div class="col-auto p-0 bg-primary">
231	<img	231	<img
232	draggable="false"	232	draggable="false"
233	ondragstart="return false;"	233	ondragstart="return false;"
234	(contextmenu)="false"	234	(contextmenu)="false"
235	class="p-2 icon-40"	235	class="p-2 icon-40"
236	src="assets/img/carrito.svg">	236	src="assets/img/carrito.svg">
237	</div>	237	</div>
238	<div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>	238	<div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
239	</div>	239	</div>
240	</div>	240	</div>
241	</div>	241	</div>
242		242
243	</div>	243	</div>
244	</div>	244	</div>
245		245
246	</div>	246	</div>
247		247

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ 571c49b

 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 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',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss']
 })
 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
+    private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     this.getCategorias();
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar === 'ordenar') {
           this.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
   }
   filterItems() {
     if (this.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
-  elegirArticulo(articulo: IArticulo) {
+  selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
-          res.cantidad = 1;
+          this.getSinonimos(res);
-          this.articuloService.setArticulo(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] },
       class: 'modal-promo modal-dialog-centered'
     });
   }
+  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();
   }
   increaseShow() {
     this.showQuantity += 100;
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.module.ts

Diff comments View file @ 571c49b

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
 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 { }

src/app/shared/promocion/promocion.component.html

Diff comments View file @ 571c49b

1	<div class="modal-header bg-primary rounded-top pt-4 px-2">	1	<div class="modal-header bg-primary rounded-top pt-4 px-2">
2	<div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">	2	<div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3	<div class="col-8">	3	<div class="col-8">
4	<p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>	4	<p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5	</div>	5	</div>
6	<div class="col-4 align-self-center">	6	<div class="col-4 align-self-center">
7	<div	7	<div
8	class="row mx-0 justify-content-between bg-white badge-pill"	8	class="row mx-0 justify-content-between bg-white badge-pill"
9	(click)="elegirPromo(articulosPromo[0])">	9	(click)="selectPromo(articulosPromo[0])">
10	<div class="col px-0 align-self-center text-primary">	10	<div class="col px-0 align-self-center text-primary">
11	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>	11	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>
12	</div>	12	</div>
13	<div class="col-3 px-0">	13	<div class="col-3 px-0">
14	<img	14	<img
15	draggable="false"	15	draggable="false"
16	ondragstart="return false;"	16	ondragstart="return false;"
17	(contextmenu)="false"	17	(contextmenu)="false"
18	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"	18	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19	src="assets/img/ir-color.svg">	19	src="assets/img/ir-color.svg">
20	</div>	20	</div>
21	</div>	21	</div>
22	</div>	22	</div>
23	</div>	23	</div>
24	</div>	24	</div>
25	<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">	25	<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26	<div class="row mx-0 w-100">	26	<div class="row mx-0 w-100">
27	<div class="col-9">	27	<div class="col-9">
28	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>	28	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29	<h1 class="text-white mb-4">en un combo?</h1>	29	<h1 class="text-white mb-4">en un combo?</h1>
30	</div>	30	</div>
31	<div class="col-3">	31	<div class="col-3">
32	<img	32	<img
33	draggable="false"	33	draggable="false"
34	ondragstart="return false;"	34	ondragstart="return false;"
35	(contextmenu)="false"	35	(contextmenu)="false"
36	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"	36	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37	onerror="this.src='assets/img/image-not-found.jpg'"	37	onerror="this.src='assets/img/image-not-found.jpg'"
38	class="card-img-top img-fluid rounded-circle">	38	class="card-img-top img-fluid rounded-circle">
39	</div>	39	</div>
40	</div>	40	</div>
41	<div	41	<div
42	class="row mx-0 lista-promociones scroll-y-visible"	42	class="row mx-0 lista-promociones scroll-y-visible"
43	(scroll)="scrollEvent($event)">	43	(scroll)="scrollEvent($event)">
44	<div class="col-12">	44	<div class="col-12">
45	<div *ngFor="let promo of promociones">	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	<div class="d-flex">	47	<div class="d-flex">
48	<p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>	48	<p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49	<p class="font-weight-bold my-auto pr-2">	49	<p class="font-weight-bold my-auto pr-2">
50	<span>{{promo.PreVen \| currency}}</span>	50	<span>{{promo.PreVen \| currency}}</span>
51	</p>	51	</p>
52	<img	52	<img
53	draggable="false"	53	draggable="false"
54	ondragstart="return false;"	54	ondragstart="return false;"
55	(contextmenu)="false"	55	(contextmenu)="false"
56	class="d-block icon-30 py-1"	56	class="d-block icon-30 py-1"
57	src="assets/img/ir-color.svg">	57	src="assets/img/ir-color.svg">
58	</div>	58	</div>
59	</div>	59	</div>
60	</div>	60	</div>
61	</div>	61	</div>
62	</div>	62	</div>
63	</div>	63	</div>
64		64

src/app/shared/promocion/promocion.component.ts

Diff comments View file @ 571c49b

 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',
   templateUrl: './promocion.component.html',
   styleUrls: ['./promocion.component.scss']
 })
 export class PromocionComponent implements OnInit {
   articulosPromo: IArticulo[] = [];
   promociones: IArticulo[] = [];
   onClose: Subject<any>;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   constructor(
     public modalRef: BsModalRef,
+    private modalService: BsModalService,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
+    private sinonimoService: SinonimoService,
     private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
   }
   ngOnInit() {
     this.getPromociones();
   }
-  elegirPromo(promo: IArticulo) {
+  selectPromo(promo: IArticulo) {
-    promo.cantidad = 1;
+    this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
-    this.articuloService.setArticulo(promo);
+      .subscribe((res: ISinonimo[]) => {
-    this.modalRef.hide();
+        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() {
     const sector = this.articulosPromo[0].CodSec;
     const codigo = this.articulosPromo[0].CodArt;
     this.promocionService.getPromociones(sector, codigo)
       .subscribe((res: IArticulo[]) => {
         this.promociones = res;
       }, error => { console.error(error); });
   }
   @HostListener('document:click', ['$event'])
   eventListener(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
 }

src/app/shared/sinonimo/sinonimo.component.html

Diff comments View file @ 571c49b

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>
2		42

src/app/shared/sinonimo/sinonimo.component.scss

Diff comments View file @ 571c49b

		1	.lista-sinonimos {
		2	min-height: auto;
		3	max-height: 25vh;
		4	}
		5

src/app/shared/sinonimo/sinonimo.component.ts

Diff comments View file @ 571c49b

1	import { Component, OnInit } from '@angular/core';	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	@Component({	5	@Component({
4	selector: 'app-sinonimo',	6	selector: 'app-sinonimo',
5	templateUrl: './sinonimo.component.html',	7	templateUrl: './sinonimo.component.html',
6	styleUrls: ['./sinonimo.component.scss']	8	styleUrls: ['./sinonimo.component.scss']
7	})	9	})
8	export class SinonimoComponent implements OnInit {	10	export class SinonimoComponent implements OnInit {
		11	sinonimos: ISinonimo[] = [];
		12	isValid: boolean;
9		13
10	constructor() { }	14	constructor() { }
11		15
12	ngOnInit() {	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	}
16		41

src/scss/styles-bootstrap.scss

Diff comments View file @ 571c49b

 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 $primary: #aa006b;
 $secondary: #00acd8;
 $info: #f4b223;
 $light: #e6e7e9;
 $dark: #61666c;
 $theme-colors: (
   primary: $primary,
   secondary: $secondary,
   info: $info,
   light: $light,
   dark: $dark
 );
 $border-radius: 1.5rem;
 $border-radius-lg: 2.5rem;
 $border-radius-sm: 0.5rem;
 .custom-modal {
   max-width: 90% !important;
   & > .modal-content {
     background-color: $primary !important;
     color: white;
     border: none !important;
     border-radius: $border-radius !important;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   }
 }
 .carousel-control {
   visibility: hidden !important;
 }
 .carousel,
 .carousel-inner,
 .carousel-item,
 .item {
   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;
 }
 @import "node_modules/bootstrap/scss/bootstrap";

src/styles.scss

Diff comments View file @ 571c49b

 @import "scss/styles-bootstrap.scss";
 @import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
 @import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @font-face {
   font-family: "Gotham";
   font-style: normal;
   font-weight: normal;
   src: url("assets/fonts/gotham-medium.woff") format("woff");
 }
 html,
 body {
   max-height: 100vh;
   height: 100%;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
 }
 .btn-effect {
   transition: all 0.3s !important;
   &:hover {
     cursor: pointer !important;
     opacity: 0.7 !important;
   }
   &:active {
     transform: scale(1.02) !important;
   }
 }
 .cursor-pointer {
   cursor: pointer;
 }
 p {
   margin: 0 !important;
 }
 .img-in-top {
   position: absolute;
   top: -35px;
   left: 50%;
   height: 70px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .right-0 {
   right: 0;
 }
 .left-0 {
   left: 0;
 }
 .rotate-45 {
   transform: rotate(45deg);
 }
 .rotate-90 {
   transform: rotate(90deg);
 }
 .rotate-90-neg {
   transform: rotate(-90deg);
 }
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
+.disabled {
+  opacity: 0.5;
+}