Commit df76d03326147545ee1ea639e3ef0195b132c01c

Authored by Marcelo Puebla
Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !39
src/app/modules/info-formas-pago/info-formas-pago.component.html
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"> 14 <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
15 <img 15 <img
16 draggable="false" 16 draggable="false"
17 ondragstart="return false;" 17 ondragstart="return false;"
18 (contextmenu)="false" 18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 20 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
22 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
23 tarjetas y 23 tarjetas y
24 <img 24 <img
25 draggable="false" 25 draggable="false"
26 ondragstart="return false;" 26 ondragstart="return false;"
27 (contextmenu)="false" 27 (contextmenu)="false"
28 class="w-15" 28 class="icon-150"
29 src="assets/img/icono-mercado-pago.svg"> 29 src="assets/img/icono-mercado-pago.svg">
30 </p> 30 </p>
31 <div 31 <div
32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" 32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
33 [routerLink]="['/opcion-pedido']"> 33 [routerLink]="['/opcion-pedido']">
34 CONTINUAR 34 CONTINUAR
35 <img 35 <img
36 draggable="false" 36 draggable="false"
37 ondragstart="return false;" 37 ondragstart="return false;"
38 (contextmenu)="false" 38 (contextmenu)="false"
39 class="icon-30" 39 class="icon-30"
40 src="assets/img/ir.svg"> 40 src="assets/img/ir.svg">
41 </div> 41 </div>
42 </div> 42 </div>
43 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border border-primary rounded"> 43 <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-center border border-primary rounded">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="img-in-top px-4 bg-white" 48 class="img-in-top px-4 bg-white"
49 src="assets/img/icono-efectivo.svg"> 49 src="assets/img/icono-efectivo.svg">
50 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 50 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
51 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 51 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } 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 { CategoriaService } from 'src/app/services/categoria/categoria.service'; 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.service'; 8 import { PromocionService } from 'src/app/services/promocion/promocion.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 11
12 @Component({ 12 @Component({
13 selector: 'app-seleccion-articulos', 13 selector: 'app-seleccion-articulos',
14 templateUrl: './seleccion-articulos.component.html', 14 templateUrl: './seleccion-articulos.component.html',
15 styleUrls: ['./seleccion-articulos.component.scss'] 15 styleUrls: ['./seleccion-articulos.component.scss']
16 }) 16 })
17 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 17 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
18 showSpinner = true; 18 showSpinner = true;
19 timeoutHandler: any; 19 timeoutHandler: any;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 articulos: IArticulo[] = []; 21 articulos: IArticulo[] = [];
22 auxArticulos: IArticulo[] = []; 22 auxArticulos: IArticulo[] = [];
23 showQuantity = 100; 23 showQuantity = 100;
24 queMostrar = 'todos'; 24 queMostrar = 'todos';
25 categoriaActive = null; 25 categoriaActive = null;
26 categorias: ICategoria[] = []; 26 categorias: ICategoria[] = [];
27 searchTerm = ''; 27 searchTerm = '';
28 ordenandoByVendidos = true; 28 ordenandoByVendidos = true;
29 allActive = true; 29 allActive = true;
30 modalRef: BsModalRef; 30 modalRef: BsModalRef;
31 total = 0; 31 total = 0;
32 32
33 constructor( 33 constructor(
34 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
35 private categoriaService: CategoriaService, 35 private categoriaService: CategoriaService,
36 private modalService: BsModalService, 36 private modalService: BsModalService,
37 private inactiveScreen: InactiveScreenService, 37 private inactiveScreen: InactiveScreenService,
38 ) { } 38 ) { }
39 39
40 ngOnInit() { 40 ngOnInit() {
41 this.getCategorias(); 41 this.getCategorias();
42 } 42 }
43 43
44 ngOnDestroy() { 44 ngOnDestroy() {
45 if (this.modalRef) this.modalRef.hide(); 45 if (this.modalRef) this.modalRef.hide();
46 } 46 }
47 47
48 getCategorias() { 48 getCategorias() {
49 this.categoriaService.getAll() 49 this.categoriaService.getAll()
50 .subscribe((categorias: ICategoria[]) => { 50 .subscribe((categorias: ICategoria[]) => {
51 switch (this.queMostrar) { 51 switch (this.queMostrar) {
52 case 'todos': 52 case 'todos':
53 this.categorias = categorias; 53 this.categorias = categorias;
54 this.categoriaActive = 0; 54 this.categoriaActive = 0;
55 break; 55 break;
56 case 'promociones': 56 case 'promociones':
57 this.categorias = categorias; 57 this.categorias = categorias;
58 this.categoriaActive = 19; 58 this.categoriaActive = 19;
59 break; 59 break;
60 case 'ordenar': 60 case 'ordenar':
61 this.categorias = categorias.filter((categoria: ICategoria) => { 61 this.categorias = categorias.filter((categoria: ICategoria) => {
62 return categoria.ES_PEDIDO; 62 return categoria.ES_PEDIDO;
63 }); 63 });
64 this.categoriaActive = 4; 64 this.categoriaActive = 4;
65 break; 65 break;
66 default: 66 default:
67 this.categorias = categorias; 67 this.categorias = categorias;
68 this.categoriaActive = 0; 68 this.categoriaActive = 0;
69 break; 69 break;
70 } 70 }
71 !localStorage.getItem('articulos') ? 71 !localStorage.getItem('articulos') ?
72 this.getProductos() : 72 this.getProductos() :
73 this.setProductos(); 73 this.setProductos();
74 }); 74 });
75 } 75 }
76 76
77 getProductos() { 77 getProductos() {
78 this.articuloService.getAll() 78 this.articuloService.getAll()
79 .subscribe((result: IArticulo[]) => { 79 .subscribe((result: IArticulo[]) => {
80 this.articuloService.setArticulosSinImagen(result); 80 this.articuloService.setArticulosSinImagen(result);
81 if (this.queMostrar === 'ordenar') { 81 if (this.queMostrar === 'ordenar') {
82 this.categorias.forEach((categoria: ICategoria) => { 82 this.categorias.forEach((categoria: ICategoria) => {
83 const tempArticulos = result.filter((articulo: IArticulo) => { 83 const tempArticulos = result.filter((articulo: IArticulo) => {
84 return articulo.categoria_selfservice === categoria.id; 84 return articulo.categoria_selfservice === categoria.id;
85 }); 85 });
86 result = tempArticulos; 86 result = tempArticulos;
87 }); 87 });
88 } 88 }
89 localStorage.setItem('articulos', JSON.stringify(result)); 89 localStorage.setItem('articulos', JSON.stringify(result));
90 this.setProductos(); 90 this.setProductos();
91 }, (error) => { 91 }, (error) => {
92 this.showSpinner = false; 92 this.showSpinner = false;
93 console.error(error); 93 console.error(error);
94 }); 94 });
95 } 95 }
96 96
97 setProductos() { 97 setProductos() {
98 this.articulos = JSON.parse(localStorage.getItem('articulos')); 98 this.articulos = JSON.parse(localStorage.getItem('articulos'));
99 this.filterItems(); 99 this.filterItems();
100 } 100 }
101 101
102 filterItems() { 102 filterItems() {
103 if (this.categoriaActive === 0) { 103 if (this.categoriaActive === 0) {
104 this.auxArticulos = this.articulos; 104 this.auxArticulos = this.articulos;
105 return; 105 return;
106 } 106 }
107 this.auxArticulos = this.articulos.filter(x => { 107 this.auxArticulos = this.articulos.filter(x => {
108 return x.categoria_selfservice === this.categoriaActive; 108 return x.categoria_selfservice === this.categoriaActive;
109 }); 109 });
110 this.ordenar(); 110 this.ordenar();
111 } 111 }
112 112
113 ordenar() { 113 ordenar() {
114 if (this.ordenandoByVendidos) { 114 if (this.ordenandoByVendidos) {
115 this.auxArticulos.sort((a, b) => { 115 this.auxArticulos.sort((a, b) => {
116 return b.cantidadVendida - a.cantidadVendida; 116 return b.cantidadVendida - a.cantidadVendida;
117 }); 117 });
118 } 118 }
119 } 119 }
120 120
121 selectCategoria(index: number, idCategoria?: number) { 121 selectCategoria(index: number, idCategoria?: number) {
122 if (this.categoriaActive === idCategoria) return; 122 if (this.categoriaActive === idCategoria) return;
123 this.categoriaActive = idCategoria; 123 this.categoriaActive = idCategoria;
124 this.allActive = idCategoria === 0 ? true : false; 124 this.allActive = idCategoria === 0 ? true : false;
125 this.categorias.forEach((categoria, i) => { 125 this.categorias.forEach((categoria, i) => {
126 categoria.selected = index === i ? true : false; 126 categoria.selected = index === i ? true : false;
127 }); 127 });
128 this.filterItems(); 128 this.filterItems();
129 } 129 }
130 130
131 elegirArticulo(articulo: IArticulo) { 131 elegirArticulo(articulo: IArticulo) {
132 if (!articulo.FPP) { 132 if (!articulo.FPP) {
133 this.getByID(articulo.id); 133 this.getByID(articulo.id);
134 } else { 134 } else {
135 this.openModalPromos(articulo); 135 this.openModalPromos(articulo);
136 } 136 }
137 } 137 }
138 138
139 getByID(id: number) { 139 getByID(id: number) {
140 this.articuloService.getById(id) 140 this.articuloService.getById(id)
141 .subscribe((res: IArticulo) => { 141 .subscribe((res: IArticulo) => {
142 res.cantidad = 1; 142 res.cantidad = 1;
143 this.articuloService.setArticulo(res); 143 this.articuloService.setArticulo(res);
144 }, err => console.error(err)); 144 }, err => console.error(err));
145 } 145 }
146 146
147 openModalPromos(articulo: IArticulo) { 147 openModalPromos(articulo: IArticulo) {
148 this.modalRef = this.modalService.show(PromocionComponent, 148 this.modalRef = this.modalService.show(PromocionComponent,
149 { 149 {
150 initialState: { 150 initialState: {
151 idArticulo: articulo.id 151 idArticulo: articulo.id
152 }, 152 },
153 class: 'modal-promo modal-dialog-centered' 153 class: 'modal-promo modal-dialog-centered'
154 }); 154 });
155 } 155 }
156 156
157 increaseShow() { 157 increaseShow() {
158 this.showQuantity += 100; 158 this.showQuantity += 100;
159 } 159 }
160 160
161 @HostListener("scroll", ['$event']) 161 @HostListener('scroll', ['$event'])
162 scrollEvent(event: Event) { 162 scrollEvent(event: Event) {
163 clearTimeout(this.inactiveScreen.timerReposo); 163 clearTimeout(this.inactiveScreen.timerReposo);
164 this.inactiveScreen.startTimeOutInactividad(); 164 this.inactiveScreen.startTimeOutInactividad();
165 } 165 }
166 166
167 mouseup() { 167 mouseup() {
168 if (!this.timeoutHandler) return; 168 if (!this.timeoutHandler) return;
169 clearInterval(this.timeoutHandler); 169 clearInterval(this.timeoutHandler);
170 } 170 }
171 171
172 scrollY(el: HTMLElement, value) { 172 scrollY(el: HTMLElement, value) {
173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
174 this.timeoutHandler = setInterval(() => { 174 this.timeoutHandler = setInterval(() => {
175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
176 }, 500); 176 }, 500);
177 } 177 }
178 178
179 scrollX(el: HTMLElement, value) { 179 scrollX(el: HTMLElement, value) {
180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
181 this.timeoutHandler = setInterval(() => { 181 this.timeoutHandler = setInterval(() => {
182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
183 }, 500); 183 }, 500);
184 } 184 }
185 } 185 }
186 186