Luis Suarez / autoservicio-axion

Browse Code »

Commit ae818e5dfaf2de31abc3cfc45a8920d51d272380

Authored by Benjamin Rodriguez 2020-01-31 12:02:35 -0300

2 parents 8ee1c6e43b 171af3cdfd

Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion

Showing 7 changed files Show diff stats

src/app/modules/pago-tarjeta/pago-tarjeta.component.html

Diff comments View file @ ae818e5

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<div class="row mx-0 h-15">	2	<div class="row mx-0 h-15">
3	<div class="col-12 px-0 h-80 my-auto">	3	<div class="col-12 px-0 h-80 my-auto">
4	<img	4	<img
5	draggable="false"	5	draggable="false"
6	ondragstart="return false;"	6	ondragstart="return false;"
7	(contextmenu)="false"	7	(contextmenu)="false"
8	class="d-block mx-auto h-100"	8	class="d-block mx-auto h-100"
9	src="assets/img/logo-spot.svg">	9	src="assets/img/logo-spot.svg">
10	</div>	10	</div>
11	</div>	11	</div>
12	<div class="h-85 pago-tarjeta">	12	<div class="h-85 pago-tarjeta">
13	<div class="row h-50 mx-0 justify-content-center text-center">	13	<div class="row h-50 mx-0 justify-content-center text-center">
14	<div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">	14	<div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
15	<img	15	<img
16	draggable="false"	16	draggable="false"
17	ondragstart="return false;"	17	ondragstart="return false;"
18	(contextmenu)="false"	18	(contextmenu)="false"
19	class="img-in-top px-4 bg-white"	19	class="img-in-top px-4 bg-white"
20	src="assets/img/icono-tarjetas.svg">	20	src="assets/img/icono-tarjetas.svg">
21	<p class="h6 m-0">AHORA</p>	21	<p class="h6 m-0">AHORA ESPERE QUE SE ACTIVE EL POSNET</p>
22	<p class="h2 mb-3 text-secondary">	22	<p class="h2 mb-3 text-secondary">
23	introducí o insertá tu tarjeta	23	deslice su tarjeta
24	</p>	24	</p>
25	<p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>	25	<p class="h6 m-0">Y SIGA LAS INSTRUCCIONES DEL LECTOR</p>
26	</div>	26	</div>
27	</div>	27	</div>
28	<div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">	28	<div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
29	<div class="col-1">	29	<div class="col-1">
30	<img	30	<img
31	draggable="false"	31	draggable="false"
32	ondragstart="return false;"	32	ondragstart="return false;"
33	(contextmenu)="false"	33	(contextmenu)="false"
34	class="img-fluid"	34	class="img-fluid"
35	src="assets/img/down-chevron.svg">	35	src="assets/img/down-chevron.svg">
36	</div>	36	</div>
37	</div>	37	</div>
38	<div class="row justify-content-center arrow-slide arrow-delay-2">	38	<div class="row justify-content-center arrow-slide arrow-delay-2">
39	<div class="col-1">	39	<div class="col-1">
40	<img	40	<img
41	draggable="false"	41	draggable="false"
42	ondragstart="return false;"	42	ondragstart="return false;"
43	(contextmenu)="false"	43	(contextmenu)="false"
44	class="img-fluid"	44	class="img-fluid"
45	src="assets/img/down-chevron.svg">	45	src="assets/img/down-chevron.svg">
46	</div>	46	</div>
47	</div>	47	</div>
48	<div class="row justify-content-center arrow-slide arrow-delay-3">	48	<div class="row justify-content-center arrow-slide arrow-delay-3">
49	<div class="col-1">	49	<div class="col-1">
50	<img	50	<img
51	draggable="false"	51	draggable="false"
52	ondragstart="return false;"	52	ondragstart="return false;"
53	(contextmenu)="false"	53	(contextmenu)="false"
54	class="img-fluid"	54	class="img-fluid"
55	src="assets/img/down-chevron.svg">	55	src="assets/img/down-chevron.svg">
56	</div>	56	</div>
57	</div>	57	</div>
58	</div>	58	</div>
59	</div>	59	</div>
60		60
61	<ng-template #template>	61	<ng-template #template>
62	<div class="modal-body rounded bg-primary">	62	<div class="modal-body rounded bg-primary">
63	<h1 class="text-white text-center my-4">Por favor,<br>espera un momento</h1>	63	<h1 class="text-white text-center my-4">Por favor,<br>espera un momento</h1>
64	<div class="d-flex justify-content-center mt-2 mb-4">	64	<div class="d-flex justify-content-center mt-2 mb-4">
65	<div class="spinner-border text-white text-center" role="status">	65	<div class="spinner-border text-white text-center" role="status">
66	<span class="sr-only">Loading...</span>	66	<span class="sr-only">Loading...</span>
67	</div>	67	</div>
68	</div>	68	</div>
69	</div>	69	</div>
70	</ng-template>	70	</ng-template>

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

Diff comments View file @ ae818e5

 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } 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 { 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';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 import * as _ from 'lodash';
 import { ANIMATIONS } from 'src/app/utils/animations';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss'],
   animations: [ANIMATIONS.EnterLeaveY]
 })
 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   searchTerm = '';
   ordenandoByVendidos = true;
   modalRef: BsModalRef;
   total = 0;
   @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
   constructor(
     public articuloService: ArticuloService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() { }
   ngAfterViewInit(): void {
     this.filtroCategorias.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
       this.modalService.hide(i);
     }
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.filtroCategorias.queMostrar === 'ordenar') {
           this.filtroCategorias.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) => {
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
     this.loading = false;
   }
   filterItems() {
     if (this.filtroCategorias.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
           this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
   getSinonimos(articulo: IArticulo) {
     this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
       .subscribe((res: any[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
           Object.keys(gruposArticulos).forEach(key => {
             sinonimos.push({ productos: gruposArticulos[key] });
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
+    if (this.modalRef) return;
     this.articuloService.setArticulosSinImagen([articulo]);
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
-      class: 'modal-dialog-centered'
+      class: 'modal-dialog-centered',
+      ignoreBackdropClick: true,
     });
+    this.modalRef.content.onClose
+      .subscribe(() => this.modalRef = null);
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
+    if (this.modalRef) return;
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
-      class: 'modal-dialog-centered'
+      class: 'modal-dialog-centered',
+      ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe((res: any) => {
+        this.modalRef = null;
         for (const a of articulo.productos) {
           for (const aRes of res.articulos) {
             if (a.idSinonimo === aRes.ID_SIN) {
               a.CODA = aRes.CodArt;
               a.CodArt = aRes.CodArt;
               a.SECA = aRes.CodSec;
               aRes.CodSec = aRes.CodSec;
               a.PreVen = aRes.PreVen;
               a.id = aRes.id;
               a.DET_LAR = aRes.DET_LAR;
               a.DetArt = aRes.DetArt;
             }
           }
         }
         this.articuloService.setArticulo(articulo);
       });
     this.mediaPantalla();
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
   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);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
         .cat-box,.img-categoria, .modal-content`)
         .addClass('media-pantalla')
         .addBack('media-pantalla');
     }
   }
 }

src/app/services/articulo/articulo.service.ts

Diff comments View file @ ae818e5

1	import { Injectable } from '@angular/core';	1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';	2	import { HttpClient } from '@angular/common/http';
3	import { APP_SETTINGS } from '../../../etc/AppSettings';	3	import { APP_SETTINGS } from '../../../etc/AppSettings';
4	import { IArticulo } from '../../interfaces/IArticulo';	4	import { IArticulo } from '../../interfaces/IArticulo';
5	import { ClienteService } from '../cliente/cliente.service';	5	import { ClienteService } from '../cliente/cliente.service';
6	import { Observable } from 'rxjs';	6	import { Observable } from 'rxjs';
7		7
8	@Injectable()	8	@Injectable()
9	export class ArticuloService {	9	export class ArticuloService {
10	carrito: IArticulo[] = [];	10	carrito: IArticulo[] = [];
11	articuloAcargar: IArticulo;	11	articuloAcargar: IArticulo;
12	promoAcargar: IArticulo;	12	promoAcargar: IArticulo;
13	mostrar: string;	13	mostrar: string;
14	esPromoPersonalizada = false;	14	esPromoPersonalizada = false;
15	urlDeboSuite = APP_SETTINGS.apiDeboSuite;	15	urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16	medioPago: number;	16	medioPago: number;
17	idComanda: number;	17	idComanda: number;
18	subTotal = 0;	18	subTotal = 0;
19	maxCantidad = 50;	19	maxCantidad = 50;
20		20
21	constructor(	21	constructor(
22	private http: HttpClient,	22	private http: HttpClient,
23	private clienteService: ClienteService,	23	private clienteService: ClienteService,
24	) { }	24	) { }
25		25
26	getById(id) {	26	getById(id) {
27	return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);	27	return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
28	}	28	}
29		29
30	getAll() {	30	getAll() {
31	return this.http.get(`${this.urlDeboSuite}/articulos/`);	31	return this.http.get(`${this.urlDeboSuite}/articulos/`);
32	}	32	}
33		33
34	getAllWithPaginator(page: number = 1) {	34	getAllWithPaginator(page: number = 1) {
35	return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);	35	return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
36	}	36	}
37		37
38	substractCant(articulo: IArticulo) {	38	substractCant(articulo: IArticulo) {
39	if (articulo.cantidad === 1) return;	39	if (articulo.cantidad === 1) return;
40	articulo.cantidad--;	40	articulo.cantidad--;
41	this.calcularTotal();	41	this.calcularTotal();
42	}	42	}
43		43
44	addCant(articulo: IArticulo) {	44	addCant(articulo: IArticulo) {
45	if (articulo.cantidad >= this.maxCantidad) return;	45	if (articulo.cantidad >= this.maxCantidad) return;
46	articulo.cantidad++;	46	articulo.cantidad++;
47	this.calcularTotal();	47	this.calcularTotal();
48	}	48	}
49		49
50	calcularTotal() {	50	calcularTotal() {
51	this.subTotal = 0;	51	this.subTotal = 0;
52	this.carrito.forEach(articulo => {	52	this.carrito.forEach(articulo => {
53	this.subTotal += (articulo.PreVen * articulo.cantidad);	53	this.subTotal += (articulo.PreVen * articulo.cantidad);
54	});	54	});
55	}	55	}
56		56
57	setArticulo(articulo: IArticulo) {	57	setArticulo(articulo: IArticulo) {
58	articulo.cantidad = 1;	58	articulo.cantidad = 1;
59	for (const articuloCarrito of this.carrito) {	59	for (const articuloCarrito of this.carrito) {
60	if (articuloCarrito.id === articulo.id && !articulo.productos.length) {	60	if (articuloCarrito.id === articulo.id && !articulo.productos) {
61	articuloCarrito.cantidad++;	61	articuloCarrito.cantidad++;
62	this.calcularTotal();	62	this.calcularTotal();
63	return;	63	return;
64	}	64	}
65	}	65	}
66	this.setArticulosSinImagen([articulo]);	66	this.setArticulosSinImagen([articulo]);
67	this.carrito.unshift(articulo);	67	this.carrito.unshift(articulo);
68	this.calcularTotal();	68	this.calcularTotal();
69	}	69	}
70		70
71	deleteArticulo(index: number) {	71	deleteArticulo(index: number) {
72	this.carrito.splice(index, 1);	72	this.carrito.splice(index, 1);
73	this.calcularTotal();	73	this.calcularTotal();
74	}	74	}
75		75
76	pay(dataPago: any) {	76	pay(dataPago: any) {
77	return new Observable((observer) => {	77	return new Observable((observer) => {
78	this.clienteService.getById(-1)	78	this.clienteService.getById(-1)
79	.subscribe(cliente => {	79	.subscribe(cliente => {
80	this.markArticuloInPromoAsRemoved();	80	this.markArticuloInPromoAsRemoved();
81	this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {	81	this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
82	productos: this.carrito,	82	productos: this.carrito,
83	cliente,	83	cliente,
84	origen: 'autoservicio',	84	origen: 'autoservicio',
85	codigoVendedor: 5,	85	codigoVendedor: 5,
86	puntoVenta: APP_SETTINGS.puntoVenta,	86	puntoVenta: APP_SETTINGS.puntoVenta,
87	pedidoAnombreDe: dataPago.pedidoAnombreDe,	87	pedidoAnombreDe: dataPago.pedidoAnombreDe,
88	numeroPlanilla: APP_SETTINGS.numeroPlanilla,	88	numeroPlanilla: APP_SETTINGS.numeroPlanilla,
89	pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),	89	pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
90	})	90	})
91	.subscribe((data) => {	91	.subscribe((data) => {
92	observer.next(data);	92	observer.next(data);
93	observer.complete();	93	observer.complete();
94	});	94	});
95	});	95	});
96	});	96	});
97	}	97	}
98		98
99	cleanShoppingCar() {	99	cleanShoppingCar() {
100	this.articuloAcargar = undefined;	100	this.articuloAcargar = undefined;
101	this.promoAcargar = undefined;	101	this.promoAcargar = undefined;
102	this.carrito = [];	102	this.carrito = [];
103	}	103	}
104		104
105	setArticulosSinImagen(articulos: IArticulo[]) {	105	setArticulosSinImagen(articulos: IArticulo[]) {
106	articulos.forEach((articulo: IArticulo) => {	106	articulos.forEach((articulo: IArticulo) => {
107	articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :	107	articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
108	!articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;	108	!articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
109	});	109	});
110	}	110	}
111		111
112	markArticuloInPromoAsRemoved() {	112	markArticuloInPromoAsRemoved() {
113	this.carrito.forEach((articuloCarrito: IArticulo) => {	113	this.carrito.forEach((articuloCarrito: IArticulo) => {
114	if (articuloCarrito.PRO) {	114	if (articuloCarrito.PRO) {
115	articuloCarrito.productos.forEach((articulo: IArticulo) => {	115	articuloCarrito.productos.forEach((articulo: IArticulo) => {
116	if (articulo.cantidadAdicionada === 0) {	116	if (articulo.cantidadAdicionada === 0) {
117	articulo.cantidad = 0;	117	articulo.cantidad = 0;
118	articulo.importeValorExtra = 0;	118	articulo.importeValorExtra = 0;
119	}	119	}
120	});	120	});
121	}	121	}
122	});	122	});
123	}	123	}
124	}	124	}
125		125

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

Diff comments View file @ ae818e5

 import { Component, OnInit, HostListener } from '@angular/core';
 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';
 import * as _ from 'lodash';
 @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.apiImagenes}/imagenes/`;
   loading = true;
+  modalSinonimo: BsModalRef;
+  isPromoSelected = false;
   constructor(
-    public modalPromocion: BsModalRef,
+    private modalPromocion: BsModalRef,
     private modalService: BsModalService,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
     private sinonimoService: SinonimoService,
     private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
   }
   ngOnInit() {
     this.getPromociones();
   }
   selectPromo(promo: IArticulo) {
+    if (this.isPromoSelected) return;
+    this.isPromoSelected = true;
     this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
       .subscribe((res: ISinonimo[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
           Object.keys(gruposArticulos).forEach(key => {
             sinonimos.push({ productos: gruposArticulos[key] });
           });
           res = sinonimos;
           this.openModalSinonimos(res, promo);
         } else {
           promo.cantidad = 1;
           this.articuloService.setArticulo(promo);
+          this.onClose.next();
           this.modalPromocion.hide();
         }
       }, err => console.error(err));
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
-    const modalSinonimo = this.modalService.show(SinonimoComponent, {
+    if (this.modalSinonimo) return;
+    this.modalSinonimo = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
-      class: 'modal-dialog-centered'
+      class: 'modal-dialog-centered',
+      ignoreBackdropClick: true,
     });
-    modalSinonimo.content.onClose
+    this.modalSinonimo.content.onClose
       .subscribe((res: any) => {
+        this.modalSinonimo = null;
+        if (!res) {
+          this.onClose.next();
+          this.modalPromocion.hide();
+          return;
+        }
         for (const a of articulo.productos) {
           for (const aRes of res.articulos) {
             if (a.idSinonimo === aRes.ID_SIN) {
               a.CODA = aRes.CodArt;
               a.CodArt = aRes.CodArt;
               a.SECA = aRes.CodSec;
               aRes.CodSec = aRes.CodSec;
               a.PreVen = aRes.PreVen;
               a.id = aRes.id;
               a.DET_LAR = aRes.DET_LAR;
               a.DetArt = aRes.DetArt;
             }
           }
         }
         this.articuloService.setArticulo(articulo);
+        this.onClose.next();
         this.modalPromocion.hide();
       });
   }
   getPromociones() {
     const sector = this.articulosPromo[0].CodSec;
     const codigo = this.articulosPromo[0].CodArt;
     this.promocionService.getPromociones(sector, codigo)
       .subscribe((res: IArticulo[]) => {
         this.promociones = res;
         this.loading = false;
       }, error => { console.error(error); });
   }
   @HostListener('document:click', ['$event'])
   eventListener(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.modal-content').addClass('media-pantalla');
     }
   }
 }

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

Diff comments View file @ ae818e5

 import { Component, OnInit } from '@angular/core';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Subject, forkJoin } from 'rxjs';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { element } from 'protractor';
 @Component({
   selector: 'app-sinonimo',
   templateUrl: './sinonimo.component.html',
   styleUrls: ['./sinonimo.component.scss']
 })
 export class SinonimoComponent implements OnInit {
   sinonimos: ISinonimo[] = [];
   isValid: boolean;
   onClose: Subject<any>;
   articulosSelected: IArticulo[] = [];
   articulo: IArticulo;
+  isSinonimoSelected = false;
   constructor(
     private modalRef: BsModalRef,
     private articuloService: ArticuloService,
   ) {
     this.onClose = new Subject();
     this.articulosSelected.length = this.sinonimos.length;
   }
   ngOnInit() { }
   selectSinonimo(index: number, articulo: IArticulo) {
     for (const a of this.sinonimos[index].productos) {
       a.seleccionado = false;
     }
     articulo.seleccionado = true;
     this.articulosSelected[index] = articulo;
   }
   validate() {
     this.isValid = true;
     for (const s of this.sinonimos) {
       for (const a of s.productos) {
         this.isValid = (!a.seleccionado) ? false : true;
         if (this.isValid) break;
       }
       if (!this.isValid) break;
     }
     return !this.isValid ? 'disabled' : 'btn-effect';
   }
   continue() {
     if (!this.isValid) return;
+    if (this.isSinonimoSelected) return;
+    this.isSinonimoSelected = true;
     const ID_SINS = [];
     const observables = [];
     for (const articulo of this.articulosSelected) {
       ID_SINS.push(articulo.ID_SIN);
     }
     for (const articulo of this.articulosSelected) {
       observables.push(this.articuloService.getById(articulo.id));
     }
     forkJoin(observables)
       .subscribe((res: IArticulo[]) => {
         for (const articulo of res) {
           for (const ID_SIN of ID_SINS) {
             articulo.ID_SIN = ID_SIN;
           }
         }
         this.modalRef.hide();
         this.onClose.next({
           articulos: res,
         });
       }, err => console.error(err));
   }
   scrollTo(index: number) {
     const el = document.getElementById(index.toString());
     el.scrollIntoView({ behavior: 'smooth' });
   }
   close() {
     this.modalRef.hide();
+    this.onClose.next();
   }
 }

src/scss/scroll.scss

Diff comments View file @ ae818e5

 @import "node_modules/bootstrap/scss/variables";
 .scroll-y {
   overflow-y: auto;
+  overflow-x: hidden;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
   }
 }
 .scroll-y-visible {
   overflow-y: auto;
+  overflow-x: hidden;
   &::-webkit-scrollbar {
     width: 0.75em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .scroll-x {
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
   }
 }

src/scss/styles-bootstrap.scss

Diff comments View file @ ae818e5

 @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-label::before {
   border-radius: 50% !important;
 }
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
   background-color: $primary !important;
 }
 .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
   box-shadow: none !important;
 }
 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
   box-shadow: none !important;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
   background-color: white !important;
   border-color: white !important;
   border-width: 2px;
 }
 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
   background-color: $primary !important;
 }
 .modal {
   background-color: #0000004d;
 }
+.modal-content {
+  border: none !important;
+}
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .card {
   border: none !important;
 }
 @import "node_modules/bootstrap/scss/bootstrap";