Commit ee99e503b10202339c62b437dfba6424081dd2a8

Authored by Marcelo Puebla
1 parent 099c7c0baa
Exists in master

Arreglo para mantener el valor de la personalizacion.

src/app/components/inicio/inicio.component.ts
1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 7 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-inicio', 10 selector: 'app-inicio',
11 templateUrl: './inicio.component.html', 11 templateUrl: './inicio.component.html',
12 styleUrls: ['./inicio.component.scss'] 12 styleUrls: ['./inicio.component.scss']
13 }) 13 })
14 export class InicioComponent implements OnInit, AfterViewInit { 14 export class InicioComponent implements OnInit, AfterViewInit {
15 15
16 private tienePromo = false; 16 private tienePromo = false;
17 private productoEsPromo = false; 17 private productoEsPromo = false;
18 private busqueda: string = ''; 18 private busqueda: string = '';
19 private productoAcargar: Producto; 19 private productoAcargar: Producto;
20 private promoAcargar: Producto; 20 private promoAcargar: Producto;
21 private productos: Producto[] = []; 21 private productos: Producto[] = [];
22 private promociones: Producto[] = []; 22 private promociones: Producto[] = [];
23 private sinonimos: Sinonimo[] = []; 23 private sinonimos: Sinonimo[] = [];
24 private apiUrl: string = appSettings.apiUrl 24 private apiUrl: string = appSettings.apiUrl;
25 25
26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
27 27
28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
29 29
30 if (e.keyCode == 13) { 30 if (e.keyCode == 13) {
31 this.buscarByCodigoBarras(this.busqueda); 31 this.buscarByCodigoBarras(this.busqueda);
32 this.busqueda = ''; 32 this.busqueda = '';
33 } else { 33 } else {
34 this.busqueda += e.key; 34 this.busqueda += e.key;
35 } 35 }
36 36
37 }; 37 };
38 38
39 constructor( 39 constructor(
40 private router: Router, 40 private router: Router,
41 private productoService: ProductoService 41 private productoService: ProductoService
42 ) { } 42 ) { }
43 43
44 ngOnInit() { 44 ngOnInit() {
45 45
46 this.productoAcargar = this.productoService.productoAcargar; 46 this.productoAcargar = this.productoService.productoAcargar;
47 this.getProductos(); 47 this.getProductos();
48 } 48 }
49 49
50 ngAfterViewInit() { 50 ngAfterViewInit() {
51 51
52 setTimeout(() => { 52 setTimeout(() => {
53 if (!this.productoAcargar) return; 53 if (!this.productoAcargar) return;
54 54
55 if (this.productoAcargar.PRO) { 55 if (this.productoAcargar.PRO) {
56 this.promociones.push(this.productoAcargar); 56 this.promociones.push(this.productoAcargar);
57 this.promoSeleccionada(this.productoAcargar, true); 57 this.promoSeleccionada(this.productoAcargar, true);
58 } 58 }
59 else { 59 else {
60 this.getPromociones(); 60 this.getPromociones();
61 } 61 }
62 }) 62 })
63 } 63 }
64 64
65 getProductos() { 65 getProductos() {
66 66
67 this.productoService.getAll() 67 this.productoService.getAll()
68 .subscribe((productos: Producto[]) => { 68 .subscribe((productos: Producto[]) => {
69 this.productos = productos; 69 this.productos = productos;
70 }); 70 });
71 } 71 }
72 72
73 getPromociones() { 73 getPromociones() {
74 74
75 var sector = this.productoAcargar.CodSec; 75 var sector = this.productoAcargar.CodSec;
76 var codigo = this.productoAcargar.CodArt; 76 var codigo = this.productoAcargar.CodArt;
77 this.productoService.getPromociones(sector, codigo) 77 this.productoService.getPromociones(sector, codigo)
78 .subscribe((res: Producto[]) => { 78 .subscribe((res: Producto[]) => {
79 79
80 if (res.length === 0) { 80 if (res.length === 0) {
81 81
82 this.productoAcargar.cantidad = 1; 82 this.productoAcargar.cantidad = 1;
83 this.productoService.productos.push(this.productoAcargar); 83 this.productoService.productos.push(this.productoAcargar);
84 this.productoAcargar = this.productoService.productoAcargar = undefined; 84 this.productoAcargar = this.productoService.productoAcargar = undefined;
85 } else { 85 } else {
86 86
87 this.promociones = res; 87 this.promociones = res;
88 this.popoverDirective.show(); 88 this.popoverDirective.show();
89 } 89 }
90 }, error => { console.error(error); }) 90 }, error => { console.error(error); })
91 } 91 }
92 92
93 confirmarProducto() { 93 confirmarProducto() {
94 94
95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; 95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
96 producto.cantidad = 1; 96 producto.cantidad = 1;
97 this.productoService.productos.push(producto); 97 this.productoService.productos.push(producto);
98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
99 this.promociones = []; 99 this.promociones = [];
100 this.popoverDirective.hide(); 100 this.popoverDirective.hide();
101 } 101 }
102 102
103 promoSeleccionada($event: Producto, showPopover: boolean) { 103 promoSeleccionada($event: Producto, showPopover: boolean) {
104 104
105 this.productoService.getProductoById($event.id) 105 this.productoService.getProductoById($event.id)
106 .subscribe((res: Producto) => { 106 .subscribe((res: Producto) => {
107 107
108 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; 108 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
109 this.promoAcargar = $event; 109 this.promoAcargar = $event;
110 110
111 if ($event.tieneSinonimos) { 111 if ($event.tieneSinonimos) {
112 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 112 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
113 } else if (showPopover) { 113 } else if (showPopover) {
114 this.popoverDirective.show(); 114 this.popoverDirective.show();
115 } else { 115 } else {
116 this.popoverDirective.hide(); 116 this.popoverDirective.hide();
117 } 117 }
118 118
119 }, 119 },
120 error => { console.log(error); }) 120 error => { console.log(error); })
121 } 121 }
122 122
123 getSinonimos(sector, codigo) { 123 getSinonimos(sector, codigo) {
124 124
125 this.productoService.getPromocionSinonimos(sector, codigo) 125 this.productoService.getPromocionSinonimos(sector, codigo)
126 .subscribe((res: Sinonimo[]) => { 126 .subscribe((res: Sinonimo[]) => {
127 127
128 res.forEach(sinonimo => { 128 res.forEach(sinonimo => {
129 129
130 sinonimo.productos.forEach(productoSinonimo => { 130 sinonimo.cantidad = 0;
131 this.promoAcargar.productos.forEach(productoPromo => {
131 132
132 this.promoAcargar.productos.forEach(productoPromo => { 133 sinonimo.productos.forEach(productoSinonimo => {
133 134
134 if (productoSinonimo.id === productoPromo.id) { 135 if (productoSinonimo.id === productoPromo.id) {
135 sinonimo.cantidad = productoPromo.cantidad; 136 productoSinonimo.cantidad = productoPromo.cantidad;
136 sinonimo.productoPadre = productoPromo.id; 137 sinonimo.cantidad += productoPromo.cantidad;
137 } 138 }
138 }) 139 })
139 }) 140 })
140 }) 141 })
141
142 this.sinonimos = res; 142 this.sinonimos = res;
143 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); 143 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
144 }) 144 })
145 } 145 }
146 146
147 productosPersonalizados($event: Producto[]) { 147 productosPersonalizados($event: Producto[]) {
148 148
149 var productosPersonalizados = $event; 149 var productosPersonalizados = $event;
150 150
151 this.promoAcargar.productos.forEach(productoPromo => { 151 this.promoAcargar.productos.forEach(productoPromo => {
152 152
153 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo); 153 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
154 }) 154 })
155 155
156 this.promoAcargar.productos = productosPersonalizados; 156 this.promoAcargar.productos = productosPersonalizados;
157 this.confirmarProducto(); 157 this.confirmarProducto();
158 } 158 }
159 159
160 buscarByCodigoBarras(busqueda) { 160 buscarByCodigoBarras(busqueda) {
161 161
162 let producto = this.productos.filter(producto => { 162 let producto = this.productos.filter(producto => {
163 return producto.codigoBarra == busqueda; 163 return producto.codigoBarra == busqueda;
164 }); 164 });
165 165
166 if (producto.length) { 166 if (producto.length) {
167 167
168 this.productoAcargar = producto[0]; 168 this.productoAcargar = producto[0];
169 this.getPromociones(); 169 this.getPromociones();
170 170
171 } else { 171 } else {
172 alert('No se encuentra el producto'); 172 alert('No se encuentra el producto');
173 } 173 }
174 174
175 } 175 }
176 176
177 irBusquedaProductos(value) { 177 irBusquedaProductos(value) {
178 178
179 this.productoService.mostrar = value; 179 this.productoService.mostrar = value;
180 this.router.navigate(['busqueda-productos']); 180 this.router.navigate(['busqueda-productos']);
181 } 181 }
182 182
183 deshacerCarga() { 183 deshacerCarga() {
184 184
185 if (this.sinonimos.length > 0) { 185 if (this.sinonimos.length > 0) {
186 this.sinonimos = []; 186 this.sinonimos = [];
187 this.popoverDirective.hide(); 187 this.popoverDirective.hide();
188 } 188 }
189 189
190 if (this.promoAcargar) { 190 if (this.promoAcargar) {
191 this.promoAcargar = undefined; 191 this.promoAcargar = undefined;
192 if (this.productoAcargar.PRO) { 192 if (this.productoAcargar.PRO) {
193 this.productoAcargar = undefined; 193 this.productoAcargar = undefined;
194 this.promociones = []; 194 this.promociones = [];
195 this.popoverDirective.hide(); 195 this.popoverDirective.hide();
196 } else { 196 } else {
197 this.popoverDirective.show(); 197 this.popoverDirective.show();
198 } 198 }
199 } else { 199 } else {
200 this.productoAcargar = undefined; 200 this.productoAcargar = undefined;
201 this.promociones = []; 201 this.promociones = [];
202 this.popoverDirective.hide(); 202 this.popoverDirective.hide();
203 } 203 }
204 } 204 }
205 205
206 } 206 }
src/app/components/popover-sinonimos/popover-sinonimos.component.html
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 2
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col text-left"> 4 <div class="col text-left">
5 <p class="h4 card-title"> 5 <p class="h4 card-title">
6 Personalice su pedido 6 Personalice su pedido
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0 pr-2 my-2"> 11 <div class="row m-0 pr-2 my-2">
12 <div class="col"> 12 <div class="col">
13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index"> 13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
14 <div class="col p-0"> 14 <div class="col p-0">
15 15
16 <div class="row m-0"> 16 <div class="row m-0">
17 <div class="col text-left"> 17 <div class="col text-left">
18 <p class="h5 card-title"> 18 <p class="h5 card-title">
19 Elija opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}} 19 Elija opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <div class="row m-0 popover-size overflow-scroll"> 24 <div class="row m-0 popover-size overflow-scroll">
25 <div class="col-12 p-0"> 25 <div class="col-12 p-0">
26 <div class="row m-0 my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> 26 <div class="row m-0 my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
27 <div class="col-7 p-0 h6 text-right"> 27 <div class="col-7 p-0 h6 text-right">
28 <p class="m-0 font-weight-normal"> 28 <p class="m-0 font-weight-normal">
29 {{producto.DetArt}} 29 {{producto.DetArt}}
30 </p> 30 </p>
31 </div> 31 </div>
32 <div class="col-5 pr-0"> 32 <div class="col-5 pr-0">
33 <div class="btn-group float-right my-auto" role="group"> 33 <div class="btn-group float-right my-auto" role="group">
34 <button 34 <button
35 type="button" 35 type="button"
36 class="btn btn-light my-auto border shadow" 36 class="btn btn-light my-auto border shadow"
37 (click)="sumarCantidad(producto, i)"> 37 (click)="sumarCantidad(producto, i)">
38 <i class="fa fa-plus" aria-hidden="true"></i> 38 <i class="fa fa-plus" aria-hidden="true"></i>
39 </button> 39 </button>
40 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5"> 40 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
41 <small 41 <small
42 [ngClass]="{'font-weight-bold': producto.cantidad > 0}"> 42 [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
43 {{producto.cantidad}} 43 {{producto.cantidad}}
44 </small> 44 </small>
45 </div> 45 </div>
46 <button 46 <button
47 type="button" 47 type="button"
48 class="btn btn-light my-auto border shadow" 48 class="btn btn-light my-auto border shadow"
49 (click)="restarCantidad(producto, i)"> 49 (click)="restarCantidad(producto, i)">
50 <i class="fa fa-minus" aria-hidden="true"></i> 50 <i class="fa fa-minus" aria-hidden="true"></i>
51 </button> 51 </button>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 57
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 </div> 61 </div>
62 62
63 <div class="row mt-3 justify-content-end"> 63 <div class="row mt-3 justify-content-end">
64 <div class="col-auto"> 64 <div class="col">
65 <button 65 <button
66 type="button" 66 type="button"
67 class="btn btn-sm btn-light shadow" 67 class="btn btn-block btn-light shadow"
68 (click)="continuar()"> 68 (click)="continuar()">
69 <span class="font-weight-bold pr-2">Continuar</span> 69 <span class="font-weight-bold pr-2">Continuar</span>
70 <i class="fa fa-check text-success" aria-hidden="true"></i> 70 <i class="fa fa-check text-success" aria-hidden="true"></i>
71 </button> 71 </button>
72 </div> 72 </div>
73 </div> 73 </div>
74 74
75 </div> 75 </div>
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 4 import { Sinonimo } from 'src/app/wrappers/sinonimo';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-popover-sinonimos', 8 selector: 'app-popover-sinonimos',
9 templateUrl: './popover-sinonimos.component.html', 9 templateUrl: './popover-sinonimos.component.html',
10 styleUrls: ['./popover-sinonimos.component.scss'] 10 styleUrls: ['./popover-sinonimos.component.scss']
11 }) 11 })
12 export class PopoverSinonimosComponent implements OnInit { 12 export class PopoverSinonimosComponent implements OnInit {
13 13
14 //Directiva del popover, para poder cerrarlo desde este componente 14 //Directiva del popover, para poder cerrarlo desde este componente
15 @Input() popover: PopoverDirective; 15 @Input() popover: PopoverDirective;
16 @Input() popoverContent: Sinonimo[]; 16 @Input() popoverContent: Sinonimo[];
17 @Output() productosPersonalizados = new EventEmitter<Producto[]>(); 17 @Output() productosPersonalizados = new EventEmitter<Producto[]>();
18 // sinonimo: Sinonimo; 18 // sinonimo: Sinonimo;
19 19
20 private cantidadRestanteSinonimos: number[] = []; 20 private cantidadRestanteSinonimos: number[] = [];
21 21
22 constructor(private productoService: ProductoService) { } 22 constructor(private productoService: ProductoService) { }
23 23
24 ngOnInit() { 24 ngOnInit() {
25 25
26 this.popoverContent.forEach(sinonimo => { 26 this.popoverContent.forEach(sinonimo => {
27 27
28 this.cantidadRestanteSinonimos.push(0); 28 this.cantidadRestanteSinonimos.push(0);
29 29
30 sinonimo.productos.forEach((producto, index) => { 30 sinonimo.productos.forEach((producto, index) => {
31 31
32 if (producto.id === sinonimo.productoPadre) { 32 if (producto.cantidad) {
33 sinonimo.productos.splice(index, 1); 33 sinonimo.productos.splice(index, 1);
34 sinonimo.productos.splice(0, 0, producto); 34 sinonimo.productos.splice(0, 0, producto);
35 producto.cantidad = sinonimo.cantidad;
36 } else { 35 } else {
37 producto.cantidad = 0; 36 producto.cantidad = 0;
38 } 37 }
39 38
40 }) 39 })
41 }) 40 })
42 } 41 }
43 42
44 continuar() { 43 continuar() {
45 44
46 //Si aún quedan articulos que agregar no deja continuar. 45 //Si aún quedan articulos que agregar no deja continuar.
47 for (let i = 0; i < this.cantidadRestanteSinonimos.length; i++) { 46 for (let i = 0; i < this.cantidadRestanteSinonimos.length; i++) {
48 47
49 if (this.cantidadRestanteSinonimos[i] > 0) return; 48 if (this.cantidadRestanteSinonimos[i] > 0) return;
50 } 49 }
51 50
52 var productosAenviar: Producto[] = []; 51 var productosAenviar: Producto[] = [];
53 52
54 this.popoverContent.forEach(sinonimo => { 53 this.popoverContent.forEach(sinonimo => {
55 54
56 sinonimo.productos.forEach(producto => { 55 sinonimo.productos.forEach(producto => {
57 56
58 if (producto.cantidad > 0) { 57 if (producto.cantidad > 0) {
59 producto.idSinonimo = sinonimo.ID_SIN; 58 producto.idSinonimo = sinonimo.ID_SIN;
60 productosAenviar.push(producto); 59 productosAenviar.push(producto);
61 } 60 }
62 }) 61 })
63 62
64 }) 63 })
65 64
66 this.productosPersonalizados.emit(productosAenviar); 65 this.productosPersonalizados.emit(productosAenviar);
67 this.popover.hide(); 66 this.popover.hide();
68 } 67 }
69 68
70 sumarCantidad(producto: Producto, i: number) { 69 sumarCantidad(producto: Producto, i: number) {
71 70
72 if (this.cantidadRestanteSinonimos[i] === 0) return; 71 if (this.cantidadRestanteSinonimos[i] === 0) return;
73 producto.cantidad++; 72 producto.cantidad++;
74 this.cantidadRestanteSinonimos[i]--; 73 this.cantidadRestanteSinonimos[i]--;
75 } 74 }
76 75
77 restarCantidad(producto: Producto, i: number) { 76 restarCantidad(producto: Producto, i: number) {
78 77
79 if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return; 78 if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
80 if (producto.cantidad === 0) return; 79 if (producto.cantidad === 0) return;
81 producto.cantidad--; 80 producto.cantidad--;
82 this.cantidadRestanteSinonimos[i]++; 81 this.cantidadRestanteSinonimos[i]++;
83 } 82 }
84 83
85 } 84 }
86 85