Luis Suarez / autoservicio-axion

Commit b9fced4fceba96dd0bc790aaaea6b6326b1d3b7e

Authored by Marcelo Puebla 2020-01-30 12:44:08 -0300

Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !86

Showing 16 changed files Show diff stats

src/app/modules/carrito/carrito.component.ts

Diff comments View file @ b9fced4

1	import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';	1	import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2	import { Location } from '@angular/common';	2	import { Location } from '@angular/common';
3	import { ArticuloService } from 'src/app/services/articulo/articulo.service';	3	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4	import { APP_SETTINGS } from 'src/etc/AppSettings';	4	import { APP_SETTINGS } from 'src/etc/AppSettings';
5	import { Router } from '@angular/router';	5	import { Router } from '@angular/router';
6	import { BsModalRef } from 'ngx-bootstrap/modal/public_api';	6	import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
7	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';	7	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
8	import { ANIMATIONS } from 'src/app/utils/animations';	8	import { ANIMATIONS } from 'src/app/utils/animations';
9		9
10	@Component({	10	@Component({
11	selector: 'app-carrito',	11	selector: 'app-carrito',
12	templateUrl: './carrito.component.html',	12	templateUrl: './carrito.component.html',
13	styleUrls: ['./carrito.component.scss'],	13	styleUrls: ['./carrito.component.scss'],
14	animations: [ANIMATIONS.EnterLeaveX]	14	animations: [ANIMATIONS.EnterLeaveX]
15	})	15	})
16	export class CarritoComponent implements OnInit, OnDestroy {	16	export class CarritoComponent implements OnInit, OnDestroy {
17	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	17	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
18	maxCantidad = 50;	18	maxCantidad = 50;
19	modalRef: BsModalRef;	19	modalRef: BsModalRef;
20		20
21	constructor(	21	constructor(
22	public articuloService: ArticuloService,	22	public articuloService: ArticuloService,
23	private location: Location,	23	private location: Location,
24	private router: Router,	24	private router: Router,
25	private inactiveScreen: InactiveScreenService,	25	private inactiveScreen: InactiveScreenService,
26	) { }	26	) { }
27		27
28	ngOnInit() {	28	ngOnInit() {
29	if (!this.articuloService.carrito.length) {	29	if (!this.articuloService.carrito.length) {
30	this.router.navigate(['']);	30	this.router.navigate(['']);
31	return;	31	return;
32	}	32	}
33	this.mediaPantalla();	33	this.mediaPantalla();
34	}	34	}
35		35
36	ngOnDestroy() {	36	ngOnDestroy() {
37	if (this.modalRef) this.modalRef.hide();	37	if (this.modalRef) this.modalRef.hide();
38	}	38	}
39		39
40	deleteArticulo(index: number) {	40	deleteArticulo(index: number) {
41	this.articuloService.deleteArticulo(index);	41	this.articuloService.deleteArticulo(index);
42	}	42	}
43		43
44	goBack() {	44	goBack() {
45	this.location.back();	45	this.location.back();
46	}	46	}
47		47
48	@HostListener('document:click', ['$event'])	48	@HostListener('document:click', ['$event'])
49	eventListener(event: Event) {	49	eventListener(event: Event) {
50	clearTimeout(this.inactiveScreen.timerReposo);	50	clearTimeout(this.inactiveScreen.timerReposo);
51	this.inactiveScreen.startTimeOutInactividad();	51	this.inactiveScreen.startTimeOutInactividad();
52	}	52	}
53		53
54	@HostListener('scroll', ['$event'])	54	@HostListener('scroll', ['$event'])
55	scrollEvent(event: Event) {	55	scrollEvent(event: Event) {
56	clearTimeout(this.inactiveScreen.timerReposo);	56	clearTimeout(this.inactiveScreen.timerReposo);
57	this.inactiveScreen.startTimeOutInactividad();	57	this.inactiveScreen.startTimeOutInactividad();
58	}	58	}
59		59
60	mediaPantalla() {	60	mediaPantalla() {
61	if ($('body').hasClass('media-pantalla')) {	61	if ($('body').hasClass('media-pantalla')) {
62	$(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');	62	$(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');
63	}	63	}
64	}	64	}
65	}	65	}
66		66

src/app/modules/info-formas-pago/info-formas-pago.component.ts

Diff comments View file @ b9fced4

1	import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';	1	import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2	import { BsModalService } from 'ngx-bootstrap/modal';	2	import { BsModalService } from 'ngx-bootstrap/modal';
3		3
4	@Component({	4	@Component({
5	selector: 'app-formas-pago',	5	selector: 'app-formas-pago',
6	templateUrl: './info-formas-pago.component.html',	6	templateUrl: './info-formas-pago.component.html',
7	styleUrls: ['./info-formas-pago.component.scss']	7	styleUrls: ['./info-formas-pago.component.scss']
8	})	8	})
9	export class InfoFormasPagoComponent implements OnInit, OnDestroy {	9	export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10	timer: any;	10	timer: any;
11		11
12	constructor(	12	constructor(
13	private modalService: BsModalService,	13	private modalService: BsModalService,
14	) { }	14	) { }
15		15
16	ngOnInit() {	16	ngOnInit() {
17	this.mediaPantalla();	17	this.mediaPantalla();
18	}	18	}
19		19
20	ngOnDestroy() {	20	ngOnDestroy() {
21	if (this.timer) clearTimeout(this.timer);	21	if (this.timer) clearTimeout(this.timer);
22	}	22	}
23		23
24	openGoCaja(templateRef: TemplateRef<any>) {	24	openGoCaja(templateRef: TemplateRef<any>) {
25	const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' });	25	const modalRef = this.modalService.show(templateRef, { class: 'modal-dialog-centered' });
26	this.timer = setTimeout(() => {	26	this.timer = setTimeout(() => {
27	modalRef.hide();	27	modalRef.hide();
28	}, 3000);	28	}, 3000);
29	}	29	}
30		30
31	mediaPantalla() {	31	mediaPantalla() {
32	if ($('body').hasClass('media-pantalla')) {	32	if ($('body').hasClass('media-pantalla')) {
33	$('.reduce-card-1,.reduce-card-2')	33	$('.reduce-card-1,.reduce-card-2')
34	.addClass('media-pantalla')	34	.addClass('media-pantalla')
35	.addBack('media-pantalla');	35	.addBack('media-pantalla');
36	}	36	}
37	}	37	}
38	}	38	}
39		39

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

Diff comments View file @ b9fced4

1	import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';	1	import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
2	import { ICategoria } from 'src/app/interfaces/ICategoria';	2	import { ICategoria } from 'src/app/interfaces/ICategoria';
3	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';	3	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4	import { CategoriaService } from 'src/app/services/categoria/categoria.service';	4	import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5	import { APP_SETTINGS } from 'src/etc/AppSettings';	5	import { APP_SETTINGS } from 'src/etc/AppSettings';
6		6
7	@Component({	7	@Component({
8	selector: 'app-filtro-categorias',	8	selector: 'app-filtro-categorias',
9	templateUrl: './filtro-categorias.component.html',	9	templateUrl: './filtro-categorias.component.html',
10	styleUrls: ['./filtro-categorias.component.scss']	10	styleUrls: ['./filtro-categorias.component.scss']
11	})	11	})
12	export class FiltroCategoriasComponent implements OnInit {	12	export class FiltroCategoriasComponent implements OnInit {
13	@Output() getProductos = new EventEmitter<any>();	13	@Output() getProductos = new EventEmitter<any>();
14	@Output() setProductos = new EventEmitter<any>();	14	@Output() setProductos = new EventEmitter<any>();
15	@Output() filterItems = new EventEmitter<any>();	15	@Output() filterItems = new EventEmitter<any>();
16	categorias: ICategoria[] = [];	16	categorias: ICategoria[] = [];
17	timeoutHandler: any;	17	timeoutHandler: any;
18	categoriaActive = null;	18	categoriaActive = null;
19	allActive = true;	19	allActive = true;
20	queMostrar = 'todos';	20	queMostrar = 'todos';
21	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	21	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
22		22
23	constructor(	23	constructor(
24	private categoriaService: CategoriaService,	24	private categoriaService: CategoriaService,
25	private inactiveScreen: InactiveScreenService,	25	private inactiveScreen: InactiveScreenService,
26	) { }	26	) { }
27		27
28	ngOnInit() {	28	ngOnInit() {
29	this.mediaPantalla();	29	this.mediaPantalla();
30	}	30	}
31		31
32	getCategorias() {	32	getCategorias() {
33	this.categoriaService.getAll()	33	this.categoriaService.getAll()
34	.subscribe((categorias: ICategoria[]) => {	34	.subscribe((categorias: ICategoria[]) => {
35	switch (this.queMostrar) {	35	switch (this.queMostrar) {
36	case 'todos':	36	case 'todos':
37	this.categorias = categorias;	37	this.categorias = categorias;
38	this.categoriaActive = 0;	38	this.categoriaActive = 0;
39	break;	39	break;
40	case 'promociones':	40	case 'promociones':
41	this.categorias = categorias;	41	this.categorias = categorias;
42	this.categoriaActive = 19;	42	this.categoriaActive = 19;
43	break;	43	break;
44	case 'ordenar':	44	case 'ordenar':
45	this.categorias = categorias.filter((categoria: ICategoria) => {	45	this.categorias = categorias.filter((categoria: ICategoria) => {
46	return categoria.ES_PEDIDO;	46	return categoria.ES_PEDIDO;
47	});	47	});
48	this.categoriaActive = 4;	48	this.categoriaActive = 4;
49	break;	49	break;
50	default:	50	default:
51	this.categorias = categorias;	51	this.categorias = categorias;
52	this.categoriaActive = 0;	52	this.categoriaActive = 0;
53	break;	53	break;
54	}	54	}
55	!localStorage.getItem('articulos') ?	55	!localStorage.getItem('articulos') ?
56	this.getProductos.emit() :	56	this.getProductos.emit() :
57	this.setProductos.emit();	57	this.setProductos.emit();
58	});	58	});
59	this.mediaPantalla();	59	this.mediaPantalla();
60	}	60	}
61		61
62	selectCategoria(index: number, idCategoria?: number) {	62	selectCategoria(index: number, idCategoria?: number) {
63	if (this.categoriaActive === idCategoria) return;	63	if (this.categoriaActive === idCategoria) return;
64	this.categoriaActive = idCategoria;	64	this.categoriaActive = idCategoria;
65	this.allActive = idCategoria === 0 ? true : false;	65	this.allActive = idCategoria === 0 ? true : false;
66	this.categorias.forEach((categoria, i) => {	66	this.categorias.forEach((categoria, i) => {
67	categoria.selected = index === i ? true : false;	67	categoria.selected = index === i ? true : false;
68	});	68	});
69	this.filterItems.emit();	69	this.filterItems.emit();
70	}	70	}
71		71
72	@HostListener('scroll', ['$event'])	72	@HostListener('scroll', ['$event'])
73	scrollEvent(event: Event) {	73	scrollEvent(event: Event) {
74	clearTimeout(this.inactiveScreen.timerReposo);	74	clearTimeout(this.inactiveScreen.timerReposo);
75	this.inactiveScreen.startTimeOutInactividad();	75	this.inactiveScreen.startTimeOutInactividad();
76	}	76	}
77		77
78	mouseup() {	78	mouseup() {
79	if (!this.timeoutHandler) return;	79	if (!this.timeoutHandler) return;
80	clearInterval(this.timeoutHandler);	80	clearInterval(this.timeoutHandler);
81	}	81	}
82		82
83	scrollY(el: HTMLElement, value) {	83	scrollY(el: HTMLElement, value) {
84	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });	84	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
85	this.timeoutHandler = setInterval(() => {	85	this.timeoutHandler = setInterval(() => {
86	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });	86	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
87	}, 500);	87	}, 500);
88	}	88	}
89		89
90	mediaPantalla() {	90	mediaPantalla() {
91	if ($('body').hasClass('media-pantalla')) {	91	if ($('body').hasClass('media-pantalla')) {
92	$('.cat-content,#cat-content')	92	$('.cat-content,#cat-content')
93	.addClass('media-pantalla')	93	.addClass('media-pantalla')
94	.addBack('media-pantalla');	94	.addBack('media-pantalla');
95	}	95	}
96	}	96	}
97	}	97	}
98		98

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

Diff comments View file @ b9fced4

1	import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';	1	import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
2	import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';	2	import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3	import { ArticuloService } from 'src/app/services/articulo/articulo.service';	3	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4	import { IArticulo } from 'src/app/interfaces/IArticulo';	4	import { IArticulo } from 'src/app/interfaces/IArticulo';
5	import { APP_SETTINGS } from 'src/etc/AppSettings';	5	import { APP_SETTINGS } from 'src/etc/AppSettings';
6	import { ICategoria } from 'src/app/interfaces/ICategoria';	6	import { ICategoria } from 'src/app/interfaces/ICategoria';
7	import { ISinonimo } from 'src/app/interfaces/ISinonimo';	7	import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8	import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';	8	import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';	9	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
10	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';	10	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11	import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';	11	import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
12	import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';	12	import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13	import * as _ from 'lodash';	13	import * as _ from 'lodash';
14	import { ANIMATIONS } from 'src/app/utils/animations';	14	import { ANIMATIONS } from 'src/app/utils/animations';
15		15
16	@Component({	16	@Component({
17	selector: 'app-seleccion-articulos',	17	selector: 'app-seleccion-articulos',
18	templateUrl: './seleccion-articulos.component.html',	18	templateUrl: './seleccion-articulos.component.html',
19	styleUrls: ['./seleccion-articulos.component.scss'],	19	styleUrls: ['./seleccion-articulos.component.scss'],
20	animations: [ANIMATIONS.EnterLeaveY]	20	animations: [ANIMATIONS.EnterLeaveY]
21	})	21	})
22	export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {	22	export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
23	showSpinner = true;	23	showSpinner = true;
24	timeoutHandler: any;	24	timeoutHandler: any;
25	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	25	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
26	articulos: IArticulo[] = [];	26	articulos: IArticulo[] = [];
27	auxArticulos: IArticulo[] = [];	27	auxArticulos: IArticulo[] = [];
28	showQuantity = 100;	28	showQuantity = 100;
29	searchTerm = '';	29	searchTerm = '';
30	ordenandoByVendidos = true;	30	ordenandoByVendidos = true;
31	modalRef: BsModalRef;	31	modalRef: BsModalRef;
32	total = 0;	32	total = 0;
33	@ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;	33	@ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
34		34
35	constructor(	35	constructor(
36	public articuloService: ArticuloService,	36	public articuloService: ArticuloService,
37	private sinonimoService: SinonimoService,	37	private sinonimoService: SinonimoService,
38	private modalService: BsModalService,	38	private modalService: BsModalService,
39	private inactiveScreen: InactiveScreenService,	39	private inactiveScreen: InactiveScreenService,
40	) { }	40	) { }
41		41
42	ngOnInit() { }	42	ngOnInit() { }
43		43
44	ngAfterViewInit(): void {	44	ngAfterViewInit(): void {
45	this.filtroCategorias.getCategorias();	45	this.filtroCategorias.getCategorias();
46	this.mediaPantalla();	46	this.mediaPantalla();
47	}	47	}
48		48
49	ngOnDestroy() {	49	ngOnDestroy() {
50	for (let i = 1; i <= this.modalService.getModalsCount(); i++) {	50	for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
51	this.modalService.hide(i);	51	this.modalService.hide(i);
52	}	52	}
53	}	53	}
54		54
55	getProductos() {	55	getProductos() {
56	this.articuloService.getAll()	56	this.articuloService.getAll()
57	.subscribe((result: IArticulo[]) => {	57	.subscribe((result: IArticulo[]) => {
58	this.articuloService.setArticulosSinImagen(result);	58	this.articuloService.setArticulosSinImagen(result);
59	if (this.filtroCategorias.queMostrar === 'ordenar') {	59	if (this.filtroCategorias.queMostrar === 'ordenar') {
60	this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {	60	this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
61	const tempArticulos = result.filter((articulo: IArticulo) => {	61	const tempArticulos = result.filter((articulo: IArticulo) => {
62	return articulo.categoria_selfservice === categoria.id;	62	return articulo.categoria_selfservice === categoria.id;
63	});	63	});
64	result = tempArticulos;	64	result = tempArticulos;
65	});	65	});
66	}	66	}
67	localStorage.setItem('articulos', JSON.stringify(result));	67	localStorage.setItem('articulos', JSON.stringify(result));
68	this.setProductos();	68	this.setProductos();
69	}, (error) => {	69	}, (error) => {
70	this.showSpinner = false;	70	this.showSpinner = false;
71	console.error(error);	71	console.error(error);
72	});	72	});
73	}	73	}
74		74
75	setProductos() {	75	setProductos() {
76	this.articulos = JSON.parse(localStorage.getItem('articulos'));	76	this.articulos = JSON.parse(localStorage.getItem('articulos'));
77	this.filterItems();	77	this.filterItems();
78	}	78	}
79		79
80	filterItems() {	80	filterItems() {
81	if (this.filtroCategorias.categoriaActive === 0) {	81	if (this.filtroCategorias.categoriaActive === 0) {
82	this.auxArticulos = this.articulos;	82	this.auxArticulos = this.articulos;
83	return;	83	return;
84	}	84	}
85	this.auxArticulos = this.articulos.filter(x => {	85	this.auxArticulos = this.articulos.filter(x => {
86	return x.categoria_selfservice === this.filtroCategorias.categoriaActive;	86	return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
87	});	87	});
88	this.ordenar();	88	this.ordenar();
89	}	89	}
90		90
91	ordenar() {	91	ordenar() {
92	if (this.ordenandoByVendidos) {	92	if (this.ordenandoByVendidos) {
93	this.auxArticulos.sort((a, b) => {	93	this.auxArticulos.sort((a, b) => {
94	return b.cantidadVendida - a.cantidadVendida;	94	return b.cantidadVendida - a.cantidadVendida;
95	});	95	});
96	}	96	}
97	}	97	}
98		98
99	selectArticulo(articulo: IArticulo) {	99	selectArticulo(articulo: IArticulo) {
100	this.getByID(articulo.id);	100	this.getByID(articulo.id);
101	}	101	}
102		102
103	getByID(id: number) {	103	getByID(id: number) {
104	this.articuloService.getById(id)	104	this.articuloService.getById(id)
105	.subscribe((res: IArticulo) => {	105	.subscribe((res: IArticulo) => {
106	if (res.FPP) {	106	if (res.FPP) {
107	this.openModalPromos(res);	107	this.openModalPromos(res);
108	} else {	108	} else {
109	this.getSinonimos(res);	109	this.getSinonimos(res);
110	}	110	}
111	}, err => console.error(err));	111	}, err => console.error(err));
112	}	112	}
113		113
114	getSinonimos(articulo: IArticulo) {	114	getSinonimos(articulo: IArticulo) {
115	this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)	115	this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
116	.subscribe((res: any[]) => {	116	.subscribe((res: any[]) => {
117	if (res.length) {	117	if (res.length) {
118	const sinonimos = [];	118	const sinonimos = [];
119	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');	119	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
120	Object.keys(gruposArticulos).forEach(key => {	120	Object.keys(gruposArticulos).forEach(key => {
121	sinonimos.push({ productos: gruposArticulos[key] });	121	sinonimos.push({ productos: gruposArticulos[key] });
122	});	122	});
123	res = sinonimos;	123	res = sinonimos;
124	this.openModalSinonimos(res, articulo);	124	this.openModalSinonimos(res, articulo);
125	} else {	125	} else {
126	this.articuloService.setArticulo(articulo);	126	this.articuloService.setArticulo(articulo);
127	}	127	}
128	});	128	});
129	}	129	}
130		130
131	openModalPromos(articulo: IArticulo) {	131	openModalPromos(articulo: IArticulo) {
132	this.modalRef = this.modalService.show(PromocionComponent, {	132	this.modalRef = this.modalService.show(PromocionComponent, {
133	initialState: { articulosPromo: [articulo] },	133	initialState: { articulosPromo: [articulo] },
134	class: 'modal-promo modal-dialog-centered'	134	class: 'modal-dialog-centered'
135	});	135	});
136	this.mediaPantalla();	136	this.mediaPantalla();
137	}	137	}
138		138
139	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {	139	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
140	this.modalRef = this.modalService.show(SinonimoComponent, {	140	this.modalRef = this.modalService.show(SinonimoComponent, {
141	initialState: {	141	initialState: {
142	sinonimos: sinonimosData,	142	sinonimos: sinonimosData,
143	articulo	143	articulo
144	},	144	},
145	class: 'modal-promo modal-dialog-centered'	145	class: 'modal-dialog-centered'
146	});	146	});
147		147
148	this.modalRef.content.onClose	148	this.modalRef.content.onClose
149	.subscribe((res: any) => {	149	.subscribe((res: any) => {
150	for (const a of articulo.productos) {	150	for (const a of articulo.productos) {
151	for (const aRes of res.articulos) {	151	for (const aRes of res.articulos) {
152	if (a.idSinonimo === aRes.ID_SIN) {	152	if (a.idSinonimo === aRes.ID_SIN) {
153	a.CODA = aRes.CodArt;	153	a.CODA = aRes.CodArt;
154	a.CodArt = aRes.CodArt;	154	a.CodArt = aRes.CodArt;
155	a.SECA = aRes.CodSec;	155	a.SECA = aRes.CodSec;
156	aRes.CodSec = aRes.CodSec;	156	aRes.CodSec = aRes.CodSec;
157	a.PreVen = aRes.PreVen;	157	a.PreVen = aRes.PreVen;
158	a.id = aRes.id;	158	a.id = aRes.id;
159	a.DET_LAR = aRes.DET_LAR;	159	a.DET_LAR = aRes.DET_LAR;
160	a.DetArt = aRes.DetArt;	160	a.DetArt = aRes.DetArt;
161	}	161	}
162	}	162	}
163	}	163	}
164	this.articuloService.setArticulo(articulo);	164	this.articuloService.setArticulo(articulo);
165	});	165	});
166	this.mediaPantalla();	166	this.mediaPantalla();
167	}	167	}
168		168
169	deleteArticulo(index: number) {	169	deleteArticulo(index: number) {
170	this.articuloService.deleteArticulo(index);	170	this.articuloService.deleteArticulo(index);
171	}	171	}
172		172
173	increaseShow() {	173	increaseShow() {
174	this.showQuantity += 100;	174	this.showQuantity += 100;
175	}	175	}
176		176
177	@HostListener('scroll', ['$event'])	177	@HostListener('scroll', ['$event'])
178	scrollEvent(event: Event) {	178	scrollEvent(event: Event) {
179	clearTimeout(this.inactiveScreen.timerReposo);	179	clearTimeout(this.inactiveScreen.timerReposo);
180	this.inactiveScreen.startTimeOutInactividad();	180	this.inactiveScreen.startTimeOutInactividad();
181	}	181	}
182		182
183	mouseup() {	183	mouseup() {
184	if (!this.timeoutHandler) return;	184	if (!this.timeoutHandler) return;
185	clearInterval(this.timeoutHandler);	185	clearInterval(this.timeoutHandler);
186	}	186	}
187		187
188	scrollY(el: HTMLElement, value) {	188	scrollY(el: HTMLElement, value) {
189	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });	189	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
190	this.timeoutHandler = setInterval(() => {	190	this.timeoutHandler = setInterval(() => {
191	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });	191	el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
192	}, 500);	192	}, 500);
193	}	193	}
194		194
195	scrollX(el: HTMLElement, value) {	195	scrollX(el: HTMLElement, value) {
196	el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });	196	el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
197	this.timeoutHandler = setInterval(() => {	197	this.timeoutHandler = setInterval(() => {
198	el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });	198	el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
199	}, 500);	199	}, 500);
200	}	200	}
201		201
202	mediaPantalla() {	202	mediaPantalla() {
203	if ($('body').hasClass('media-pantalla')) {	203	if ($('body').hasClass('media-pantalla')) {
204	$(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,	204	$(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
205	.cat-box,.img-categoria, .modal-content`)	205	.cat-box,.img-categoria, .modal-content`)
206	.addClass('media-pantalla')	206	.addClass('media-pantalla')
207	.addBack('media-pantalla');	207	.addBack('media-pantalla');
208	}	208	}
209	}	209	}
210	}	210	}
211		211

src/app/shared/confirmacion/confirmacion.component.html

Diff comments View file @ b9fced4

1	<div class="modal-header bg-primary rounded-top pt-4 px-2">	1	<div class="bg-primary rounded">
2	<img	2	<div class="modal-header">
3	draggable="false"
4	ondragstart="return false;"
5	(contextmenu)="false"
6	(click)="close()"
7	class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0"
8	src="assets/img/icono-cancelar-blanco.svg">
9	<div class="row mx-0 w-100 justify-content-between">
10	<div class="col-8">
11	<p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p>
12	</div>
13	</div>
14	<div *ngIf="imagenPath" class="col-4 align-self-center">
15	<img	3	<img
16	draggable="false"	4	draggable="false"
17	ondragstart="return false;"	5	ondragstart="return false;"
18	(contextmenu)="false"	6	(contextmenu)="false"
19	src="{{urlImagenes}}{{imagenPath}}"	7	(click)="close()"
20	onerror="this.src='assets/img/imagen-no-encontrada.jpg'"	8	class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
21	class="card-img-top img-fluid rounded-circle">	9	src="assets/img/icono-cancelar-blanco.svg">
22	</div>	10	<div class="row no-gutters w-100 justify-content-between">
23	</div>	11	<div class="col align-self-center">
24	<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2">	12	<p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p>
25	<div class="row justify-content-between mx-0 w-100">	13	</div>
26	<div class="col-8">	14	<div *ngIf="imagenPath" class="col-4 px-3 pt-3 align-self-center">
27	<p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >	15	<img
28	<h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1>	16	draggable="false"
		17	ondragstart="return false;"
		18	(contextmenu)="false"
		19	src="{{urlImagenes}}{{imagenPath}}"
		20	onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
		21	class="d-block mx-auto img-fluid rounded-circle">
		22	</div>
29	</div>	23	</div>
30	<div class="col-4">	24	</div>
31	<div	25	<div class="modal-body">
32	class="mx-0"	26	<div class="row justify-content-between mx-0 w-100">
33	(click)="confirmarArticulo()">	27	<div class="col-7 col-md-8 pl-0 align-self-center">
34	<div class="col-auto bg-white badge-pill">	28	<p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >
35	<div class="row justify-content-between">	29	<p *ngIf="footerMessageSecond" class="h1 text-white">{{footerMessageSecond}}</p>
36	<div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3">	30	</div>
37	<p class="font-weight-bold">{{footerConfirmation \| currency}}</p>	31	<div class="col-5 col-md-4 align-self-center">
38	</div>	32	<div
39	<div class="col-auto px-0">	33	class="row justify-content-between bg-white badge-pill btn-effect"
40	<img	34	*ngIf="footerConfirmation"
41	draggable="false"	35	(click)="confirmar()">
42	ondragstart="return false;"	36	<div class="col-auto px-0 align-self-center text-primary pl-3">
43	(contextmenu)="false"	37	<p class="font-weight-bold">{{footerConfirmation \| currency}}</p>
44	class="d-block ml-auto my-1 icon-30 pr-2"	38	</div>
45	src="assets/img/ir-color.svg">	39	<div class="col-auto px-0">
46	</div>	40	<img
		41	draggable="false"
		42	ondragstart="return false;"
		43	(contextmenu)="false"
		44	class="d-block ml-auto my-1 icon-20"
		45	src="assets/img/ir-color.svg">
47	</div>	46	</div>
48	</div>	47	</div>
49	</div>	48	<div
50	<div *ngIf="footerClose" class="bg-white badge-pill mt-2">	49	*ngIf="footerClose"
51	<div class="row justify-content-between">	50	class="row justify-content-center bg-white badge-pill btn-effect mt-2"
52	<div	51	(click)="close()">

src/app/shared/confirmacion/confirmacion.component.ts

Diff comments View file @ b9fced4

1	import { Component, OnInit, HostListener } from '@angular/core';	1	import { Component, OnInit, HostListener } from '@angular/core';
2	import { BsModalRef } from 'ngx-bootstrap/modal';	2	import { BsModalRef } from 'ngx-bootstrap/modal';
3	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';	3	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4	import { Subject } from 'rxjs';	4	import { Subject } from 'rxjs';
5	import { APP_SETTINGS } from 'src/etc/AppSettings';	5	import { APP_SETTINGS } from 'src/etc/AppSettings';
6		6
7	@Component({	7	@Component({
8	selector: 'app-confirmacion',	8	selector: 'app-confirmacion',
9	templateUrl: './confirmacion.component.html',	9	templateUrl: './confirmacion.component.html',
10	styleUrls: ['./confirmacion.component.scss']	10	styleUrls: ['./confirmacion.component.scss']
11	})	11	})
12	export class ConfirmacionComponent implements OnInit {	12	export class ConfirmacionComponent implements OnInit {
13	titleMessage: string;	13	titleMessage: string;
14	imagenPath: any;	14	imagenPath: any;
15	footerMessageFirst: string;	15	footerMessageFirst: string;
16	footerMessageSecond: string;	16	footerMessageSecond: string;
17	footerConfirmation: number;	17	footerConfirmation: number;
18	footerClose: string;	18	footerClose: string;
19	onClose: Subject<any>;	19	onClose: Subject<any>;
20	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	20	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
21		21
22	constructor(	22	constructor(
23	public modalRef: BsModalRef,	23	public modalRef: BsModalRef,
24	private inactiveScreen: InactiveScreenService,	24	private inactiveScreen: InactiveScreenService,
25	) {	25	) {
26	this.onClose = new Subject();	26	this.onClose = new Subject();
27	}	27	}
28		28
29	ngOnInit() {	29	ngOnInit() {
30	}	30	}
31		31
32	confirmarArticulo() {	32	confirmar() {
33	this.onClose.next();	33	this.onClose.next();
34	this.modalRef.hide();	34	this.modalRef.hide();
35	}	35	}
36		36
37	close() {	37	close() {
38	this.modalRef.hide();	38	this.modalRef.hide();
39	}	39	}
40		40
41	@HostListener('document:click', ['$event'])	41	@HostListener('document:click', ['$event'])
42	eventListener(event: Event) {	42	eventListener(event: Event) {
43	clearTimeout(this.inactiveScreen.timerReposo);	43	clearTimeout(this.inactiveScreen.timerReposo);
44	this.inactiveScreen.startTimeOutInactividad();	44	this.inactiveScreen.startTimeOutInactividad();
45	}	45	}
46	}	46	}
47		47

src/app/shared/footer/footer.component.ts

Diff comments View file @ b9fced4

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
   constructor(private location: Location) { }
   ngOnInit() { }
   goBack() {
     this.location.back();
   }
   reducirPantalla() {
     $(`body,
       .reduce-card-1,
       .reduce-card-2,
       #content,
       .cat-content,
       .cat-btn,
       .cat-box,
       #boxCarrito,
       #headerPublicidad,
       #headerPad,
       .img-categoria,
       .carrito-articulo,
       .carrito-content,
       .pago-tarjeta,
-      .modal-promo,
       .modal-content,
       .qr-mt`)
       .toggleClass('media-pantalla');
   }
 }

src/app/shared/header-publicidad/header-publicidad.component.html

Diff comments View file @ b9fced4

1	<div class="row mx-0" id="headerPublicidad" #headerPublicidad	1	<div class="row mx-0 btn-effect" id="headerPublicidad" #headerPublicidad
2	[ngClass]="headerPublicidad.classList.contains('media-pantalla')	2	[ngClass]="headerPublicidad.classList.contains('media-pantalla')
3	? 'h-31' : 'h-20'" id="boxCarrito">	3	? 'h-31' : 'h-20'" id="boxCarrito">
4	<div class="col-12 p-3 h-100" id="headerPad">	4	<div class="col-12 p-3 h-100" id="headerPad">
5	<div class="h-100">	5	<div class="h-100">
6	<carousel [showIndicators]="false" [interval]="4000">	6	<carousel [showIndicators]="false" [interval]="4000">
7	<slide *ngFor="let p of publicidades">	7	<slide *ngFor="let p of publicidades">
8	<img	8	<img
9	class="h-100 w-100"	9	class="h-100 w-100"
10	draggable="false"	10	draggable="false"
11	ondragstart="return false;"	11	ondragstart="return false;"
12	(contextmenu)="false"	12	(contextmenu)="false"
13	src="{{urlImagenes}}{{p.imagen}}"	13	src="{{urlImagenes}}{{p.imagen}}"
14	(click)="elegirArticulo(p)">	14	(click)="elegirArticulo(p)">
15	</slide>	15	</slide>
16	</carousel>	16	</carousel>
17	</div>	17	</div>
18	</div>	18	</div>
19	</div>	19	</div>
20		20

src/app/shared/header-publicidad/header-publicidad.component.ts

Diff comments View file @ b9fced4

1	import { Component, OnInit, TemplateRef } from '@angular/core';	1	import { Component, OnInit, TemplateRef } from '@angular/core';
2	import { APP_SETTINGS } from 'src/etc/AppSettings';	2	import { APP_SETTINGS } from 'src/etc/AppSettings';
3	import { IPublicidad } from 'src/app/interfaces/IPublicidad';	3	import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4	import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';	4	import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
5	import { IArticulo } from 'src/app/interfaces/IArticulo';	5	import { IArticulo } from 'src/app/interfaces/IArticulo';
6	import { PromocionComponent } from '../promocion/promocion.component';	6	import { PromocionComponent } from '../promocion/promocion.component';
7	import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';	7	import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8	import { ArticuloService } from 'src/app/services/articulo/articulo.service';	8	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
9	import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';	9	import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
10	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';	10	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11	import { ISinonimo } from 'src/app/interfaces/ISinonimo';	11	import { ISinonimo } from 'src/app/interfaces/ISinonimo';
12	import { SinonimoComponent } from '../sinonimo/sinonimo.component';	12	import { SinonimoComponent } from '../sinonimo/sinonimo.component';
13	import * as _ from 'lodash';	13	import * as _ from 'lodash';
14		14
15	@Component({	15	@Component({
16	selector: 'app-header-publicidad',	16	selector: 'app-header-publicidad',
17	templateUrl: './header-publicidad.component.html',	17	templateUrl: './header-publicidad.component.html',
18	styleUrls: ['./header-publicidad.component.scss']	18	styleUrls: ['./header-publicidad.component.scss']
19	})	19	})
20	export class HeaderPublicidadComponent implements OnInit {	20	export class HeaderPublicidadComponent implements OnInit {
21	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	21	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
22	publicidades: IPublicidad[] = [];	22	publicidades: IPublicidad[] = [];
23	modalRef: BsModalRef;	23	modalRef: BsModalRef;
24		24
25	constructor(	25	constructor(
26	private publicidadService: PublicidadService,	26	private publicidadService: PublicidadService,
27	private articuloService: ArticuloService,	27	private articuloService: ArticuloService,
28	private modalService: BsModalService,	28	private modalService: BsModalService,
29	private sinonimoService: SinonimoService	29	private sinonimoService: SinonimoService
30	) { }	30	) { }
31		31
32	ngOnInit() {	32	ngOnInit() {
33	this.getPublicidades();	33	this.getPublicidades();
34	this.mediaPantalla();	34	this.mediaPantalla();
35	}	35	}
36		36
37	getPublicidades() {	37	getPublicidades() {
38	this.publicidadService.getAll()	38	this.publicidadService.getAll()
39	.subscribe((res: IPublicidad[]) => {	39	.subscribe((res: IPublicidad[]) => {
40	this.publicidades = res;	40	this.publicidades = res;
41	}, err => console.error(err));	41	}, err => console.error(err));
42	}	42	}
43		43
44	elegirArticulo(publicidad: IPublicidad) {	44	elegirArticulo(publicidad: IPublicidad) {
45	if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);	45	if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
46	}	46	}
47		47
48	getByID(id: number) {	48	getByID(id: number) {
49	this.articuloService.getById(id)	49	this.articuloService.getById(id)
50	.subscribe((res: IArticulo) => {	50	.subscribe((res: IArticulo) => {
51	if (res.FPP) {	51	if (res.FPP) {
52	this.openModalPromos(res);	52	this.openModalPromos(res);
53	return;	53	return;
54	} else {	54	} else {
55	this.openModalConfirmacion(res);	55	this.openModalConfirmacion(res);
56	return;	56	return;
57	}	57	}
58	}, err => console.error(err));	58	}, err => console.error(err));
59	}	59	}
60		60
61	openModalPromos(articulo: IArticulo) {	61	openModalPromos(articulo: IArticulo) {
62	this.modalRef = this.modalService.show(PromocionComponent,	62	this.modalRef = this.modalService.show(PromocionComponent,
63	{	63	{
64	initialState: {	64	initialState: {
65	idArticulo: articulo.id	65	idArticulo: articulo.id
66	},	66	},
67	class: 'modal-promo modal-dialog-centered'	67	class: 'modal-dialog-centered'
68	});	68	});
69	}	69	}
70		70
71	openModalConfirmacion(articulo: IArticulo) {	71	openModalConfirmacion(articulo: IArticulo) {
72	this.modalRef = this.modalService.show(ConfirmacionComponent,	72	this.modalRef = this.modalService.show(ConfirmacionComponent,
73	{	73	{
74	initialState: {	74	initialState: {
75	titleMessage: articulo.DET_LAR,	75	titleMessage: articulo.DET_LAR,
76	imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg',	76	imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg',
77	footerMessageFirst: `¿DESEA AGREGAR ESTE COMBO`,	77	footerMessageFirst: `¿DESEA AGREGAR ESTE COMBO`,
78	footerMessageSecond: `a su carrito?`,	78	footerMessageSecond: `a su carrito?`,
79	footerConfirmation: articulo.PreVen,	79	footerConfirmation: articulo.PreVen,
80	footerClose: `volver`	80	footerClose: `volver`
81	},	81	},
82	class: 'modal-promo modal-dialog-centered'	82	class: 'modal-dialog-centered'
83	});	83	});
84	this.modalRef.content.onClose.subscribe(() => {	84	this.modalRef.content.onClose.subscribe(() => {
85	this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)	85	this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
86	.subscribe((res: ISinonimo[]) => {	86	.subscribe((res: ISinonimo[]) => {
87	if (res.length) {	87	if (res.length) {
88	const sinonimos = [];	88	const sinonimos = [];
89	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');	89	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
90	Object.keys(gruposArticulos).forEach(key => {	90	Object.keys(gruposArticulos).forEach(key => {
91	sinonimos.push({ productos: gruposArticulos[key] });	91	sinonimos.push({ productos: gruposArticulos[key] });
92	});	92	});
93	res = sinonimos;	93	res = sinonimos;
94	this.openModalSinonimos(res, articulo);	94	this.openModalSinonimos(res, articulo);
95	} else {	95	} else {
96	articulo.cantidad = 1;	96	articulo.cantidad = 1;
97	this.articuloService.setArticulo(articulo);	97	this.articuloService.setArticulo(articulo);
98	}	98	}
99	}, err => console.error(err));	99	}, err => console.error(err));
100	});	100	});
101	this.mediaPantalla();	101	this.mediaPantalla();
102	}	102	}
103		103
104	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {	104	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
105	const modalSinonimo = this.modalService.show(SinonimoComponent, {	105	const modalSinonimo = this.modalService.show(SinonimoComponent, {
106	initialState: {	106	initialState: {
107	sinonimos: sinonimosData,	107	sinonimos: sinonimosData,
108	articulo	108	articulo
109	},	109	},
110	class: 'modal-promo modal-dialog-centered'	110	class: 'modal-dialog-centered'
111	});	111	});
112	modalSinonimo.content.onClose	112	modalSinonimo.content.onClose
113	.subscribe((res: any) => {	113	.subscribe((res: any) => {
114	for (const a of articulo.productos) {	114	for (const a of articulo.productos) {
115	for (const aRes of res.articulos) {	115	for (const aRes of res.articulos) {
116	if (a.idSinonimo === aRes.ID_SIN) {	116	if (a.idSinonimo === aRes.ID_SIN) {
117	a.CODA = aRes.CodArt;	117	a.CODA = aRes.CodArt;
118	a.CodArt = aRes.CodArt;	118	a.CodArt = aRes.CodArt;
119	a.SECA = aRes.CodSec;	119	a.SECA = aRes.CodSec;
120	aRes.CodSec = aRes.CodSec;	120	aRes.CodSec = aRes.CodSec;
121	a.PreVen = aRes.PreVen;	121	a.PreVen = aRes.PreVen;
122	a.id = aRes.id;	122	a.id = aRes.id;
123	a.DET_LAR = aRes.DET_LAR;	123	a.DET_LAR = aRes.DET_LAR;
124	a.DetArt = aRes.DetArt;	124	a.DetArt = aRes.DetArt;
125	}	125	}
126	}	126	}
127	}	127	}
128	this.articuloService.setArticulo(articulo);	128	this.articuloService.setArticulo(articulo);
129	});	129	});
130	}	130	}
131		131
132	mediaPantalla() {	132	mediaPantalla() {
133	if ($('body').hasClass('media-pantalla')) {	133	if ($('body').hasClass('media-pantalla')) {
134	$('#headerPublicidad,#headerPad').addClass('media-pantalla');	134	$('#headerPublicidad,#headerPad').addClass('media-pantalla');
135	}	135	}
136	}	136	}
137	}	137	}
138		138

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

Diff comments View file @ b9fced4

 <!-- <div class="d-flex justify-content-center"
      *ngIf="loading">
   <div class="spinner-border text-primary" role="status">
     <span class="sr-only">Loading...</span>
   </div>
 </div> -->
-<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length">
+<div class="bg-primary rounded">
-  <img
+  <div class="modal-header" *ngIf="articulosPromo.length">
-  draggable="false"
+    <img
-  ondragstart="return false;"
+      draggable="false"
-  (contextmenu)="false"
+      ondragstart="return false;"
-  (click)="selectPromo(articulosPromo[0])"
+      (contextmenu)="false"
-  class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0"
+      (click)="selectPromo(articulosPromo[0])"
-  src="assets/img/icono-cancelar-blanco.svg">
+      class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
-  <div class="row mx-0 w-100 justify-content-between mt-3">
+      src="assets/img/icono-cancelar-blanco.svg">
-    <div class="col-8">
+    <div class="row w-100 no-gutters justify-content-between">
-      <p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p>
+      <div class="col align-self-center">
-    </div>
+        <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
-    <div class="col-4 align-self-center">
-      <div
-        class="row mx-0 justify-content-between bg-white badge-pill"
-        (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>
-        <div class="col-3 px-0">
-          <img
-            draggable="false"
-            ondragstart="return false;"
-            (contextmenu)="false"
-            class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
-            src="assets/img/ir-color.svg">
-        </div>
       </div>
-    </div>
+      <div class="col-auto align-self-center mt-4 pl-2">
-  </div>
-</div>
-<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
-  <div class="row mx-0 w-100">
-    <div class="col-9">
-      <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
-      <h1 class="text-white mb-4">en un combo?</h1>
-    </div>
-    <div class="col-3">
-      <img
-        draggable="false"
-        ondragstart="return false;"
-        (contextmenu)="false"
-        src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
-        onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
-        class="card-img-top img-fluid rounded-circle">
-    </div>
-  </div>
-  <div
-    class="row mx-0 lista-promociones scroll-y-visible"
-    (scroll)="scrollEvent($event)">
-    <div class="col-12">
-      <div *ngFor="let promo of promociones">
         <div
-          class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
+          class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
-          (click)="selectPromo(promo)">
+          (click)="selectPromo(articulosPromo[0])">
-          <div class="d-flex">
+          <div class="col-auto align-self-center text-primary">
-            <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
+            <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
-            <p class="font-weight-bold my-auto pr-2">
+          </div>
-              <span>{{promo.PreVen | currency}}</span>
+          <div class="col-auto px-0">
-            </p>
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
-              class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
+              class="d-block ml-auto my-1 icon-20"
               src="assets/img/ir-color.svg">
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div class="modal-body" *ngIf="articulosPromo.length">
+    <div class="row no-gutters w-100">
+      <div class="col-9 col-9 align-self-center">
+        <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
+        <p class="h1 text-white">en un combo?</p>

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

Diff comments View file @ b9fced4

1	import { Component, OnInit, HostListener } from '@angular/core';	1	import { Component, OnInit, HostListener } from '@angular/core';
2	import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';	2	import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3	import { IArticulo } from 'src/app/interfaces/IArticulo';	3	import { IArticulo } from 'src/app/interfaces/IArticulo';
4	import { ArticuloService } from 'src/app/services/articulo/articulo.service';	4	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5	import { PromocionService } from 'src/app/services/promocion/promocion.service';	5	import { PromocionService } from 'src/app/services/promocion/promocion.service';
6	import { Subject } from 'rxjs';	6	import { Subject } from 'rxjs';
7	import { APP_SETTINGS } from 'src/etc/AppSettings';	7	import { APP_SETTINGS } from 'src/etc/AppSettings';
8	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';	8	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
9	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';	9	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
10	import { ISinonimo } from 'src/app/interfaces/ISinonimo';	10	import { ISinonimo } from 'src/app/interfaces/ISinonimo';
11	import { SinonimoComponent } from '../sinonimo/sinonimo.component';	11	import { SinonimoComponent } from '../sinonimo/sinonimo.component';
12	import * as _ from 'lodash';	12	import * as _ from 'lodash';
13		13
14	@Component({	14	@Component({
15	selector: 'app-promocion',	15	selector: 'app-promocion',
16	templateUrl: './promocion.component.html',	16	templateUrl: './promocion.component.html',
17	styleUrls: ['./promocion.component.scss']	17	styleUrls: ['./promocion.component.scss']
18	})	18	})
19	export class PromocionComponent implements OnInit {	19	export class PromocionComponent implements OnInit {
20	articulosPromo: IArticulo[] = [];	20	articulosPromo: IArticulo[] = [];
21	promociones: IArticulo[] = [];	21	promociones: IArticulo[] = [];
22	onClose: Subject<any>;	22	onClose: Subject<any>;
23	urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;	23	urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
24		24
25	constructor(	25	constructor(
26	public modalPromocion: BsModalRef,	26	public modalPromocion: BsModalRef,
27	private modalService: BsModalService,	27	private modalService: BsModalService,
28	private articuloService: ArticuloService,	28	private articuloService: ArticuloService,
29	private promocionService: PromocionService,	29	private promocionService: PromocionService,
30	private sinonimoService: SinonimoService,	30	private sinonimoService: SinonimoService,
31	private inactiveScreen: InactiveScreenService,	31	private inactiveScreen: InactiveScreenService,
32	) {	32	) {
33	this.onClose = new Subject();	33	this.onClose = new Subject();
34	}	34	}
35		35
36	ngOnInit() {	36	ngOnInit() {
37	this.getPromociones();	37	this.getPromociones();
38	}	38	}
39		39
40	selectPromo(promo: IArticulo) {	40	selectPromo(promo: IArticulo) {
41	this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)	41	this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
42	.subscribe((res: ISinonimo[]) => {	42	.subscribe((res: ISinonimo[]) => {
43	if (res.length) {	43	if (res.length) {
44	const sinonimos = [];	44	const sinonimos = [];
45	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');	45	const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
46	Object.keys(gruposArticulos).forEach(key => {	46	Object.keys(gruposArticulos).forEach(key => {
47	sinonimos.push({ productos: gruposArticulos[key] });	47	sinonimos.push({ productos: gruposArticulos[key] });
48	});	48	});
49	res = sinonimos;	49	res = sinonimos;
50	this.openModalSinonimos(res, promo);	50	this.openModalSinonimos(res, promo);
51	} else {	51	} else {
52	promo.cantidad = 1;	52	promo.cantidad = 1;
53	this.articuloService.setArticulo(promo);	53	this.articuloService.setArticulo(promo);
54	this.modalPromocion.hide();	54	this.modalPromocion.hide();
55	}	55	}
56	}, err => console.error(err));	56	}, err => console.error(err));
57	this.mediaPantalla();	57	this.mediaPantalla();
58	}	58	}
59		59
60	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {	60	openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
61	const modalSinonimo = this.modalService.show(SinonimoComponent, {	61	const modalSinonimo = this.modalService.show(SinonimoComponent, {
62	initialState: {	62	initialState: {
63	sinonimos: sinonimosData,	63	sinonimos: sinonimosData,
64	articulo	64	articulo
65	},	65	},
66	class: 'modal-promo modal-dialog-centered'	66	class: 'modal-dialog-centered'
67	});	67	});
68		68
69	modalSinonimo.content.onClose	69	modalSinonimo.content.onClose
70	.subscribe((res: any) => {	70	.subscribe((res: any) => {
71	for (const a of articulo.productos) {	71	for (const a of articulo.productos) {
72	for (const aRes of res.articulos) {	72	for (const aRes of res.articulos) {
73	if (a.idSinonimo === aRes.ID_SIN) {	73	if (a.idSinonimo === aRes.ID_SIN) {
74	a.CODA = aRes.CodArt;	74	a.CODA = aRes.CodArt;
75	a.CodArt = aRes.CodArt;	75	a.CodArt = aRes.CodArt;
76	a.SECA = aRes.CodSec;	76	a.SECA = aRes.CodSec;
77	aRes.CodSec = aRes.CodSec;	77	aRes.CodSec = aRes.CodSec;
78	a.PreVen = aRes.PreVen;	78	a.PreVen = aRes.PreVen;
79	a.id = aRes.id;	79	a.id = aRes.id;
80	a.DET_LAR = aRes.DET_LAR;	80	a.DET_LAR = aRes.DET_LAR;
81	a.DetArt = aRes.DetArt;	81	a.DetArt = aRes.DetArt;
82	}	82	}
83	}	83	}
84	}	84	}
85	this.articuloService.setArticulo(articulo);	85	this.articuloService.setArticulo(articulo);
86	this.modalPromocion.hide();	86	this.modalPromocion.hide();
87	});	87	});
88	}	88	}
89		89
90	getPromociones() {	90	getPromociones() {
91	const sector = this.articulosPromo[0].CodSec;	91	const sector = this.articulosPromo[0].CodSec;
92	const codigo = this.articulosPromo[0].CodArt;	92	const codigo = this.articulosPromo[0].CodArt;
93	this.promocionService.getPromociones(sector, codigo)	93	this.promocionService.getPromociones(sector, codigo)
94	.subscribe((res: IArticulo[]) => {	94	.subscribe((res: IArticulo[]) => {
95	this.promociones = res;	95	this.promociones = res;
96	}, error => { console.error(error); });	96	}, error => { console.error(error); });
97	}	97	}
98		98
99	@HostListener('document:click', ['$event'])	99	@HostListener('document:click', ['$event'])
100	eventListener(event: Event) {	100	eventListener(event: Event) {
101	clearTimeout(this.inactiveScreen.timerReposo);	101	clearTimeout(this.inactiveScreen.timerReposo);
102	this.inactiveScreen.startTimeOutInactividad();	102	this.inactiveScreen.startTimeOutInactividad();
103	}	103	}
104		104
105	@HostListener('scroll', ['$event'])	105	@HostListener('scroll', ['$event'])
106	scrollEvent(event: Event) {	106	scrollEvent(event: Event) {
107	clearTimeout(this.inactiveScreen.timerReposo);	107	clearTimeout(this.inactiveScreen.timerReposo);
108	this.inactiveScreen.startTimeOutInactividad();	108	this.inactiveScreen.startTimeOutInactividad();
109	}	109	}
110		110
111	mediaPantalla() {	111	mediaPantalla() {
112	if ($('body').hasClass('media-pantalla')) {	112	if ($('body').hasClass('media-pantalla')) {
113	$('.modal-content').addClass('media-pantalla');	113	$('.modal-content').addClass('media-pantalla');
114	}	114	}
115	}	115	}
116	}	116	}
117		117

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

Diff comments View file @ b9fced4

 <div class="bg-primary rounded text-white">
   <div class="modal-header">
+    <img
+      draggable="false"
+      ondragstart="return false;"
+      (contextmenu)="false"
+      (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.DetArt}}</p>
-    <div class="col-5 pr-0 text-right">
+    <div class="col-5 pt-4 pr-0 text-right">
       <p *ngFor="let s of sinonimos; let i = index">
         <span
           class="btn-effect"
           (click)="scrollTo(i)">
           Ir a opción {{i+1}}
           <i class="far fa-hand-point-left"></i>
         </span>
       </p>
     </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>
       </div>
     </div>
   </div>
   <div class="modal-footer">
     <div
       [ngClass]="validate()"
       class="d-inline-block py-1 bg-white badge-pill text-primary"
       (click)="continue()">
       CONTINUAR
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="icon-30"
         src="assets/img/ir-color.svg">
     </div>
   </div>
 </div>

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

Diff comments View file @ b9fced4

 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;
   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;
     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', block: 'center' });
+    el.scrollIntoView({ behavior: 'smooth' });
+  }
+  close() {
+    this.modalRef.hide();
   }
 }

src/etc/AppSettings.ejemplo.ts

Diff comments View file @ b9fced4

1	// export const APP_SETTINGS = {	1	// export const APP_SETTINGS = {
2	// apiDeboSuite: 'http://localhost:1515',	2	// apiDeboSuite: 'http://localhost:1515',
		3	// apiImagenes: 'http://10.231.45.220:1515',
3	// puntoVenta: 9998,	4	// puntoVenta: 9998,
4	// numeroPlanilla: 1111,	5	// numeroPlanilla: 1111,
5	// codigoP: 99996,	6	// codigoP: 99996,
6	// terminal: 101,	7	// terminal: 101,
7	// deploy: 'dev'	8	// deploy: 'dev'
8	// };	9	// };
9		10

src/scss/styles-bootstrap.scss

Diff comments View file @ b9fced4

 @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-promo > div {
-  border: none !important;
-  border-radius: $border-radius;
-  margin-left: 10px !important;
-}
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .card {
   border: none !important;
 }
 @import "node_modules/bootstrap/scss/bootstrap";

src/styles.scss

Diff comments View file @ b9fced4

 @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;
 }
 body.media-pantalla {
   height: calc(50%) !important;
   position: absolute;
   bottom: 0;
   width: 100%;
   background-color: #3d3d3d;
 }
 .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;
 }
+.top-0 {
+  top: 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;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .modal-content {
   background: transparent !important;
 }
+.z-index {
+  z-index: 1000;
+}