Commit 2a7315c2779022da2f0f6ff85b3a2b894e52710c

Authored by Marcelo Puebla
1 parent a052e0f38a
Exists in develop

Fix

Al cerrar modal de promocion
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
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 loading = true; 23 loading = true;
24 timeoutHandler: any; 24 timeoutHandler: any;
25 urlImagenes = `${APP_SETTINGS.apiImagenes}/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 console.error(error); 70 console.error(error);
71 }); 71 });
72 } 72 }
73 73
74 setProductos() { 74 setProductos() {
75 this.articulos = JSON.parse(localStorage.getItem('articulos')); 75 this.articulos = JSON.parse(localStorage.getItem('articulos'));
76 this.filterItems(); 76 this.filterItems();
77 this.loading = false; 77 this.loading = false;
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 if (this.modalRef) return;
132 this.articuloService.setArticulosSinImagen([articulo]); 133 this.articuloService.setArticulosSinImagen([articulo]);
133 this.modalRef = this.modalService.show(PromocionComponent, { 134 this.modalRef = this.modalService.show(PromocionComponent, {
134 initialState: { articulosPromo: [articulo] }, 135 initialState: { articulosPromo: [articulo] },
135 class: 'modal-dialog-centered' 136 class: 'modal-dialog-centered',
137 ignoreBackdropClick: true,
136 }); 138 });
139 this.modalRef.content.onClose
140 .subscribe(() => this.modalRef = null);
137 this.mediaPantalla(); 141 this.mediaPantalla();
138 } 142 }
139 143
140 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 144 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
141 this.modalRef = this.modalService.show(SinonimoComponent, { 145 this.modalRef = this.modalService.show(SinonimoComponent, {
142 initialState: { 146 initialState: {
143 sinonimos: sinonimosData, 147 sinonimos: sinonimosData,
144 articulo 148 articulo
145 }, 149 },
146 class: 'modal-dialog-centered' 150 class: 'modal-dialog-centered'
147 }); 151 });
148 152
149 this.modalRef.content.onClose 153 this.modalRef.content.onClose
150 .subscribe((res: any) => { 154 .subscribe((res: any) => {
151 for (const a of articulo.productos) { 155 for (const a of articulo.productos) {
152 for (const aRes of res.articulos) { 156 for (const aRes of res.articulos) {
153 if (a.idSinonimo === aRes.ID_SIN) { 157 if (a.idSinonimo === aRes.ID_SIN) {
154 a.CODA = aRes.CodArt; 158 a.CODA = aRes.CodArt;
155 a.CodArt = aRes.CodArt; 159 a.CodArt = aRes.CodArt;
156 a.SECA = aRes.CodSec; 160 a.SECA = aRes.CodSec;
157 aRes.CodSec = aRes.CodSec; 161 aRes.CodSec = aRes.CodSec;
158 a.PreVen = aRes.PreVen; 162 a.PreVen = aRes.PreVen;
159 a.id = aRes.id; 163 a.id = aRes.id;
160 a.DET_LAR = aRes.DET_LAR; 164 a.DET_LAR = aRes.DET_LAR;
161 a.DetArt = aRes.DetArt; 165 a.DetArt = aRes.DetArt;
162 } 166 }
163 } 167 }
164 } 168 }
165 this.articuloService.setArticulo(articulo); 169 this.articuloService.setArticulo(articulo);
166 }); 170 });
167 this.mediaPantalla(); 171 this.mediaPantalla();
168 } 172 }
169 173
170 deleteArticulo(index: number) { 174 deleteArticulo(index: number) {
171 this.articuloService.deleteArticulo(index); 175 this.articuloService.deleteArticulo(index);
172 } 176 }
173 177
174 increaseShow() { 178 increaseShow() {
175 this.showQuantity += 100; 179 this.showQuantity += 100;
176 } 180 }
177 181
178 @HostListener('scroll', ['$event']) 182 @HostListener('scroll', ['$event'])
179 scrollEvent(event: Event) { 183 scrollEvent(event: Event) {
180 clearTimeout(this.inactiveScreen.timerReposo); 184 clearTimeout(this.inactiveScreen.timerReposo);
181 this.inactiveScreen.startTimeOutInactividad(); 185 this.inactiveScreen.startTimeOutInactividad();
182 } 186 }
183 187
184 mouseup() { 188 mouseup() {
185 if (!this.timeoutHandler) return; 189 if (!this.timeoutHandler) return;
186 clearInterval(this.timeoutHandler); 190 clearInterval(this.timeoutHandler);
187 } 191 }
188 192
189 scrollY(el: HTMLElement, value) { 193 scrollY(el: HTMLElement, value) {
190 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 194 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
191 this.timeoutHandler = setInterval(() => { 195 this.timeoutHandler = setInterval(() => {
192 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 196 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
193 }, 500); 197 }, 500);
194 } 198 }
195 199
196 scrollX(el: HTMLElement, value) { 200 scrollX(el: HTMLElement, value) {
197 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 201 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
198 this.timeoutHandler = setInterval(() => { 202 this.timeoutHandler = setInterval(() => {
199 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 203 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
200 }, 500); 204 }, 500);
201 } 205 }
202 206
203 mediaPantalla() { 207 mediaPantalla() {
204 if ($('body').hasClass('media-pantalla')) { 208 if ($('body').hasClass('media-pantalla')) {
205 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, 209 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
206 .cat-box,.img-categoria, .modal-content`) 210 .cat-box,.img-categoria, .modal-content`)
207 .addClass('media-pantalla') 211 .addClass('media-pantalla')
208 .addBack('media-pantalla'); 212 .addBack('media-pantalla');
209 } 213 }
210 } 214 }
211 } 215 }
212 216
src/app/shared/promocion/promocion.component.ts
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.apiImagenes}/imagenes/`; 23 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
24 loading = true; 24 loading = true;
25 25
26 constructor( 26 constructor(
27 public modalPromocion: BsModalRef, 27 public modalPromocion: BsModalRef,
28 private modalService: BsModalService, 28 private modalService: BsModalService,
29 private articuloService: ArticuloService, 29 private articuloService: ArticuloService,
30 private promocionService: PromocionService, 30 private promocionService: PromocionService,
31 private sinonimoService: SinonimoService, 31 private sinonimoService: SinonimoService,
32 private inactiveScreen: InactiveScreenService, 32 private inactiveScreen: InactiveScreenService,
33 ) { 33 ) {
34 this.onClose = new Subject(); 34 this.onClose = new Subject();
35 } 35 }
36 36
37 ngOnInit() { 37 ngOnInit() {
38 this.getPromociones(); 38 this.getPromociones();
39 } 39 }
40 40
41 selectPromo(promo: IArticulo) { 41 selectPromo(promo: IArticulo) {
42 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) 42 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
43 .subscribe((res: ISinonimo[]) => { 43 .subscribe((res: ISinonimo[]) => {
44 if (res.length) { 44 if (res.length) {
45 const sinonimos = []; 45 const sinonimos = [];
46 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); 46 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
47 Object.keys(gruposArticulos).forEach(key => { 47 Object.keys(gruposArticulos).forEach(key => {
48 sinonimos.push({ productos: gruposArticulos[key] }); 48 sinonimos.push({ productos: gruposArticulos[key] });
49 }); 49 });
50 res = sinonimos; 50 res = sinonimos;
51 this.openModalSinonimos(res, promo); 51 this.openModalSinonimos(res, promo);
52 } else { 52 } else {
53 promo.cantidad = 1; 53 promo.cantidad = 1;
54 this.articuloService.setArticulo(promo); 54 this.articuloService.setArticulo(promo);
55 this.onClose.next();
55 this.modalPromocion.hide(); 56 this.modalPromocion.hide();
56 } 57 }
57 }, err => console.error(err)); 58 }, err => console.error(err));
58 this.mediaPantalla(); 59 this.mediaPantalla();
59 } 60 }
60 61
61 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 62 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
62 const modalSinonimo = this.modalService.show(SinonimoComponent, { 63 const modalSinonimo = this.modalService.show(SinonimoComponent, {
63 initialState: { 64 initialState: {
64 sinonimos: sinonimosData, 65 sinonimos: sinonimosData,
65 articulo 66 articulo
66 }, 67 },
67 class: 'modal-dialog-centered' 68 class: 'modal-dialog-centered'
68 }); 69 });
69 70
70 modalSinonimo.content.onClose 71 modalSinonimo.content.onClose
71 .subscribe((res: any) => { 72 .subscribe((res: any) => {
72 for (const a of articulo.productos) { 73 for (const a of articulo.productos) {
73 for (const aRes of res.articulos) { 74 for (const aRes of res.articulos) {
74 if (a.idSinonimo === aRes.ID_SIN) { 75 if (a.idSinonimo === aRes.ID_SIN) {
75 a.CODA = aRes.CodArt; 76 a.CODA = aRes.CodArt;
76 a.CodArt = aRes.CodArt; 77 a.CodArt = aRes.CodArt;
77 a.SECA = aRes.CodSec; 78 a.SECA = aRes.CodSec;
78 aRes.CodSec = aRes.CodSec; 79 aRes.CodSec = aRes.CodSec;
79 a.PreVen = aRes.PreVen; 80 a.PreVen = aRes.PreVen;
80 a.id = aRes.id; 81 a.id = aRes.id;
81 a.DET_LAR = aRes.DET_LAR; 82 a.DET_LAR = aRes.DET_LAR;
82 a.DetArt = aRes.DetArt; 83 a.DetArt = aRes.DetArt;
83 } 84 }
84 } 85 }
85 } 86 }
86 this.articuloService.setArticulo(articulo); 87 this.articuloService.setArticulo(articulo);
87 this.modalPromocion.hide(); 88 this.modalPromocion.hide();
88 }); 89 });
89 } 90 }
90 91
91 getPromociones() { 92 getPromociones() {
92 const sector = this.articulosPromo[0].CodSec; 93 const sector = this.articulosPromo[0].CodSec;
93 const codigo = this.articulosPromo[0].CodArt; 94 const codigo = this.articulosPromo[0].CodArt;
94 this.promocionService.getPromociones(sector, codigo) 95 this.promocionService.getPromociones(sector, codigo)
95 .subscribe((res: IArticulo[]) => { 96 .subscribe((res: IArticulo[]) => {
96 this.promociones = res; 97 this.promociones = res;
97 this.loading = false; 98 this.loading = false;
98 }, error => { console.error(error); }); 99 }, error => { console.error(error); });
99 } 100 }
100 101
101 @HostListener('document:click', ['$event']) 102 @HostListener('document:click', ['$event'])
102 eventListener(event: Event) { 103 eventListener(event: Event) {
103 clearTimeout(this.inactiveScreen.timerReposo); 104 clearTimeout(this.inactiveScreen.timerReposo);
104 this.inactiveScreen.startTimeOutInactividad(); 105 this.inactiveScreen.startTimeOutInactividad();
105 } 106 }
106 107
107 @HostListener('scroll', ['$event']) 108 @HostListener('scroll', ['$event'])
108 scrollEvent(event: Event) { 109 scrollEvent(event: Event) {
109 clearTimeout(this.inactiveScreen.timerReposo); 110 clearTimeout(this.inactiveScreen.timerReposo);
110 this.inactiveScreen.startTimeOutInactividad(); 111 this.inactiveScreen.startTimeOutInactividad();
111 } 112 }
112 113
113 mediaPantalla() { 114 mediaPantalla() {
114 if ($('body').hasClass('media-pantalla')) { 115 if ($('body').hasClass('media-pantalla')) {
115 $('.modal-content').addClass('media-pantalla'); 116 $('.modal-content').addClass('media-pantalla');
116 } 117 }
117 } 118 }
118 } 119 }
119 120