Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 924d1d4f5d4e4ca23b603639d4cf0e3bffdc3db9

Authored by Marcelo Puebla
1 parent 158a2e33ff
Exists in develop

Fix 

Modales
Showing 7 changed files with 69 additions and 73 deletions   Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 924d1d4
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/seleccion-articulos.component.ts
Diff comments   View file @ 924d1d4
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.apiDeboSuite}/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/footer/footer.component.ts
Diff comments   View file @ 924d1d4
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-footer', 5 selector: 'app-footer',
6 templateUrl: './footer.component.html', 6 templateUrl: './footer.component.html',
7 styleUrls: ['./footer.component.scss'] 7 styleUrls: ['./footer.component.scss']
8 }) 8 })
9 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) { } 10 constructor(private location: Location) { }
11 11
12 ngOnInit() { } 12 ngOnInit() { }
13 13
14 goBack() { 14 goBack() {
15 this.location.back(); 15 this.location.back();
16 } 16 }
17 17
18 reducirPantalla() { 18 reducirPantalla() {
19 $(`body, 19 $(`body,
20 .reduce-card-1, 20 .reduce-card-1,
21 .reduce-card-2, 21 .reduce-card-2,
22 #content, 22 #content,
23 .cat-content, 23 .cat-content,
24 .cat-btn, 24 .cat-btn,
25 .cat-box, 25 .cat-box,
26 #boxCarrito, 26 #boxCarrito,
27 #headerPublicidad, 27 #headerPublicidad,
28 #headerPad, 28 #headerPad,
29 .img-categoria, 29 .img-categoria,
30 .carrito-articulo, 30 .carrito-articulo,
31 .carrito-content, 31 .carrito-content,
32 .pago-tarjeta, 32 .pago-tarjeta,
33 .modal-promo,
34 .modal-content, 33 .modal-content,
35 .qr-mt`) 34 .qr-mt`)
36 .toggleClass('media-pantalla'); 35 .toggleClass('media-pantalla');
37 } 36 }
38 } 37 }
39 38
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 924d1d4
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.apiDeboSuite}/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 @ 924d1d4
1 <!-- <div class="d-flex justify-content-center" 1 <!-- <div class="d-flex justify-content-center"
2 *ngIf="loading"> 2 *ngIf="loading">
3 <div class="spinner-border text-primary" role="status"> 3 <div class="spinner-border text-primary" role="status">
4 <span class="sr-only">Loading...</span> 4 <span class="sr-only">Loading...</span>
5 </div> 5 </div>
6 </div> --> 6 </div> -->
7 <div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length"> 7 <div class="bg-primary rounded">
8 <img 8 <div class="modal-header" *ngIf="articulosPromo.length">
9 draggable="false" 9 <img
10 ondragstart="return false;" 10 draggable="false"
11 (contextmenu)="false" 11 ondragstart="return false;"
12 (click)="selectPromo(articulosPromo[0])" 12 (contextmenu)="false"
13 class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0 z-index" 13 (click)="selectPromo(articulosPromo[0])"
14 src="assets/img/icono-cancelar-blanco.svg"> 14 class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
15 <div class="row mx-0 w-100 justify-content-between mt-3"> 15 src="assets/img/icono-cancelar-blanco.svg">
16 <div class="col-8"> 16 <div class="row w-100 no-gutters justify-content-between">
17 <p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p> 17 <div class="col align-self-center">
18 </div> 18 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
19 <div class="col-4 align-self-center">
20 <div
21 class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
22 (click)="selectPromo(articulosPromo[0])">
23 <div class="col px-0 align-self-center text-primary">
24 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
25 </div>
26 <div class="col-3 px-0">
27 <img
28 draggable="false"
29 ondragstart="return false;"
30 (contextmenu)="false"
31 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
32 src="assets/img/ir-color.svg">
33 </div>
34 </div> 19 </div>
35 </div> 20 <div class="col-auto align-self-center mt-4 pl-2">
36 </div>
37 </div>
38 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
39 <div class="row mx-0 w-100">
40 <div class="col-9">
41 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
42 <h1 class="text-white mb-4">en un combo?</h1>
43 </div>
44 <div class="col-3">
45 <img
46 draggable="false"
47 ondragstart="return false;"
48 (contextmenu)="false"
49 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
50 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
51 class="card-img-top img-fluid rounded-circle">
52 </div>
53 </div>
54 <div
55 class="row mx-0 lista-promociones scroll-y-visible"
56 (scroll)="scrollEvent($event)">
57 <div class="col-12">
58 <div *ngFor="let promo of promociones">
59 <div 21 <div
60 class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary" 22 class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
61 (click)="selectPromo(promo)"> 23 (click)="selectPromo(articulosPromo[0])">
62 <div class="d-flex"> 24 <div class="col-auto align-self-center text-primary">
63 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 25 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
64 <p class="font-weight-bold my-auto pr-2"> 26 </div>
65 <span>{{promo.PreVen | currency}}</span> 27 <div class="col-auto px-0">
66 </p>
67 <img 28 <img
68 draggable="false" 29 draggable="false"
69 ondragstart="return false;" 30 ondragstart="return false;"
70 (contextmenu)="false" 31 (contextmenu)="false"
71 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 32 class="d-block ml-auto my-1 icon-20"
72 src="assets/img/ir-color.svg"> 33 src="assets/img/ir-color.svg">
73 </div> 34 </div>
74 </div> 35 </div>
75 </div> 36 </div>
76 </div> 37 </div>
77 </div> 38 </div>
39 <div class="modal-body" *ngIf="articulosPromo.length">
40 <div class="row no-gutters w-100">
41 <div class="col-9">
42 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
43 <p class="h1 text-white">en un combo?</p>
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 924d1d4
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.apiDeboSuite}/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/scss/styles-bootstrap.scss
Diff comments   View file @ 924d1d4
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $dark: #61666c; 9 $dark: #61666c;
10 $theme-colors: ( 10 $theme-colors: (
11 primary: $primary, 11 primary: $primary,
12 secondary: $secondary, 12 secondary: $secondary,
13 info: $info, 13 info: $info,
14 light: $light, 14 light: $light,
15 dark: $dark 15 dark: $dark
16 ); 16 );
17 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
18 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
19 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
20 20
21 .custom-modal { 21 .custom-modal {
22 max-width: 90% !important; 22 max-width: 90% !important;
23 & > .modal-content { 23 & > .modal-content {
24 background-color: $primary !important; 24 background-color: $primary !important;
25 color: white; 25 color: white;
26 border: none !important; 26 border: none !important;
27 border-radius: $border-radius !important; 27 border-radius: $border-radius !important;
28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
29 } 29 }
30 } 30 }
31 31
32 .carousel-control { 32 .carousel-control {
33 visibility: hidden !important; 33 visibility: hidden !important;
34 } 34 }
35 35
36 .carousel, 36 .carousel,
37 .carousel-inner, 37 .carousel-inner,
38 .carousel-item, 38 .carousel-item,
39 .item { 39 .item {
40 height: 100% !important; 40 height: 100% !important;
41 } 41 }
42 42
43 .custom-checkbox .custom-control-label::before { 43 .custom-checkbox .custom-control-label::before {
44 border-radius: 50% !important; 44 border-radius: 50% !important;
45 } 45 }
46 46
47 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { 47 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
48 background-color: $primary !important; 48 background-color: $primary !important;
49 } 49 }
50 50
51 .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before { 51 .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
52 box-shadow: none !important; 52 box-shadow: none !important;
53 } 53 }
54 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before { 54 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
55 box-shadow: none !important; 55 box-shadow: none !important;
56 } 56 }
57 57
58 .custom-control-input:checked ~ .custom-control-label::before { 58 .custom-control-input:checked ~ .custom-control-label::before {
59 background-color: white !important; 59 background-color: white !important;
60 border-color: white !important; 60 border-color: white !important;
61 border-width: 2px; 61 border-width: 2px;
62 } 62 }
63 63
64 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before { 64 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
65 background-color: $primary !important; 65 background-color: $primary !important;
66 } 66 }
67 67
68 .modal { 68 .modal {
69 background-color: #0000004d; 69 background-color: #0000004d;
70 } 70 }
71 71
72 .modal-promo > div {
73 border: none !important;
74 border-radius: $border-radius;
75 margin-left: 10px !important;
76 }
77
78 .modal-content.media-pantalla { 72 .modal-content.media-pantalla {
79 margin-top: auto !important; 73 margin-top: auto !important;
80 margin-bottom: 50px !important; 74 margin-bottom: 50px !important;
81 } 75 }
82 76
83 .card { 77 .card {
84 border: none !important; 78 border: none !important;
85 } 79 }
86 80
87 @import "node_modules/bootstrap/scss/bootstrap"; 81 @import "node_modules/bootstrap/scss/bootstrap";
88 82