Commit 62e2409095d21948f8b401d9818604969a15c553

Authored by Eric Fernandez
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !74
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
1 <div 1 <div
2 class="row m-0 fade-in bg-primary-gradient disable-user-select" 2 class="row m-0 fade-in bg-primary-gradient disable-user-select"
3 (click)="reiniciarTimer"> 3 (click)="reiniciarTimer">
4 <div class="col-12 p-0 vh-100"> 4 <div class="col-12 p-0 vh-100">
5 5
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
10 <div class="row m-0"> 10 <div class="row m-0">
11 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
12 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 Pagar 13 Pagar
14 </p> 14 </p>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="row m-0"> 18 <div class="row m-0">
19 <div class="col-12"> 19 <div class="col-12">
20 20
21 <!-- TEXTO DE IZQUIERDA --> 21 <!-- TEXTO DE IZQUIERDA -->
22 <div class="row mx-2 mt-4 text-white"> 22 <div class="row mx-2 mt-4 text-white">
23 <div class="col-sm-auto my-auto"> 23 <div class="col-sm-auto my-auto">
24 <p class="h2">Mi Compra 24 <p class="h2">Mi Compra
25 <i class="fa fa-shopping-cart "></i> 25 <i class="fa fa-shopping-cart "></i>
26 </p> 26 </p>
27 </div> 27 </div>
28 <div class="col-sm-7 my-auto"> 28 <div class="col-sm-7 my-auto">
29 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="row"> 33 <div class="row">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 35 <div class="col-sm-7">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
39 <img 39 <img
40 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 40 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
41 class="shadow rounded-sm w-100 m-auto"> 41 class="shadow rounded-sm w-100 m-auto">
42 <div class="p-2"> 42 <div class="p-2">
43 <p class="h6 min-h-55 text-left m-0"> 43 <p class="h6 min-h-55 text-left m-0">
44 <small> 44 <small>
45 {{producto.DET_LAR}} 45 {{producto.DET_LAR}}
46 </small> 46 </small>
47 </p> 47 </p>
48 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 48 <div *ngIf="producto.tieneSinonimos">
49 <small> 49 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
50 - {{p.cantidad}} {{p.DET_LAR}} 50 <small>
51 </small> 51 - {{p.cantidad}} {{p.DET_LAR}}
52 </p> 52 </small>
53 </p>
54 </div>
53 <div class="row m-0"> 55 <div class="row m-0">
54 <div class="col-6 my-auto pt-2 pr-2 p-0"> 56 <div class="col-6 my-auto pt-2 pr-2 p-0">
55 <p class="text-left m-0 h6"> 57 <p class="text-left m-0 h6">
56 {{producto.cantidad}} x {{producto.PreVen | currency}} 58 {{producto.cantidad}} x {{producto.PreVen | currency}}
57 </p> 59 </p>
58 </div> 60 </div>
59 <div class="col-6 my-auto pt-2 pr-2 p-0"> 61 <div class="col-6 my-auto pt-2 pr-2 p-0">
60 <p class="text-right m-0 h6"> 62 <p class="text-right m-0 h6">
61 {{producto.cantidad * producto.PreVen | currency}} 63 {{producto.cantidad * producto.PreVen | currency}}
62 </p> 64 </p>
63 </div> 65 </div>
64 </div> 66 </div>
65 </div> 67 </div>
66 </div> 68 </div>
67 </div> 69 </div>
68 </div> 70 </div>
69 </div> 71 </div>
70 72
71 <div class="col-sm-5 pl-0"> 73 <div class="col-sm-5 pl-0">
72 <div class="row ml-3"> 74 <div class="row ml-3">
73 <!-- TICKET --> 75 <!-- TICKET -->
74 <div class="col-sm-7 p-0"> 76 <div class="col-sm-7 p-0">
75 <div class="card rounded-sm shadow"> 77 <div class="card rounded-sm shadow">
76 <div class="card-body"> 78 <div class="card-body">
77 <p class="h5 card-title">Su Ticket</p> 79 <p class="h5 card-title">Su Ticket</p>
78 <div class="row mt-4 m-0"> 80 <div class="row mt-4 m-0">
79 <div class="col-12 p-0 mb-2"> 81 <div class="col-12 p-0 mb-2">
80 <p class="h6 m-0 card-text text-left"> 82 <p class="h6 m-0 card-text text-left">
81 <small class="font-weight-bold">DESCRIPCIÓN</small> 83 <small class="font-weight-bold">DESCRIPCIÓN</small>
82 </p> 84 </p>
83 <p class="h6 m-0 card-text text-left"> 85 <p class="h6 m-0 card-text text-left">
84 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 86 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
85 </p> 87 </p>
86 </div> 88 </div>
87 </div> 89 </div>
88 <div class="row vh-50 px-2 overflow-scroll m-0"> 90 <div class="row vh-50 px-2 overflow-scroll m-0">
89 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 91 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
90 <p class="h6 m-0 card-text text-left"> 92 <p class="h6 m-0 card-text text-left">
91 <small>{{producto.DET_LAR}}</small> 93 <small>{{producto.DET_LAR}}</small>
92 </p> 94 </p>
93 <div class="row d-flex justify-content-between m-0"> 95 <div class="row d-flex justify-content-between m-0">
94 <div class="col p-0"> 96 <div class="col p-0">
95 <p class="h6 m-0 card-text text-left"> 97 <p class="h6 m-0 card-text text-left">
96 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 98 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
97 </p> 99 </p>
98 </div> 100 </div>
99 <div class="col p-0"> 101 <div class="col p-0">
100 <p class="h6 m-0 card-text text-right"> 102 <p class="h6 m-0 card-text text-right">
101 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 103 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
102 </p> 104 </p>
103 </div> 105 </div>
104 </div> 106 </div>
105 </div> 107 </div>
106 </div> 108 </div>
107 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 109 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
108 Total {{getTotal() | currency}} 110 Total {{getTotal() | currency}}
109 </p> 111 </p>
110 </div> 112 </div>
111 </div> 113 </div>
112 </div> 114 </div>
113 </div> 115 </div>
114 </div> 116 </div>
115 </div> 117 </div>
116 118
117 <!-- OPCIONES ABAJO DERECHA --> 119 <!-- OPCIONES ABAJO DERECHA -->
118 <div class="row m-0 fixed-bottom"> 120 <div class="row m-0 fixed-bottom">
119 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 121 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
120 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 122 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
121 <div class="card-body row m-0"> 123 <div class="card-body row m-0">
122 <div class="col-12 p-3"> 124 <div class="col-12 p-3">
123 <button 125 <button
124 type="button" 126 type="button"
125 class="btn btn-block btn-light shadow btn-sm shadow" 127 class="btn btn-block btn-light shadow btn-sm shadow"
126 (click)="volverPreviousPage()"> 128 (click)="volverPreviousPage()">
127 <span class="pr-2">Volver</span> 129 <span class="pr-2">Volver</span>
128 <i class="fa fa-undo text-warning"></i> 130 <i class="fa fa-undo text-warning"></i>
129 </button> 131 </button>
130 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 132 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
131 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 133 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
132 <i class="fa fa-check text-success"></i> 134 <i class="fa fa-check text-success"></i>
133 </button> 135 </button>
134 <button 136 <button
135 type="button" 137 type="button"
136 class="btn btn-block btn-light shadow btn-sm shadow" 138 class="btn btn-block btn-light shadow btn-sm shadow"
137 [routerLink]="['/cancelar-compra']"> 139 [routerLink]="['/cancelar-compra']">
138 <span class="pr-2">Cancelar</span> 140 <span class="pr-2">Cancelar</span>
139 <i class="fa fa-times text-danger"></i> 141 <i class="fa fa-times text-danger"></i>
140 </button> 142 </button>
141 </div> 143 </div>
142 </div> 144 </div>
143 </div> 145 </div>
144 </div> 146 </div>
145 </div> 147 </div>
146 148
147 </div> 149 </div>
148 </div> 150 </div>
149 151
150 </div> 152 </div>
151 153
152 </div> 154 </div>
153 155
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 apiImagenes: string = appSettings.apiImagenes; 24 private apiImagenes: string = appSettings.apiImagenes;
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.setProductos(this.productoAcargar); 83 this.productoService.setProductos(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.setProductos(producto); 97 this.productoService.setProductos(producto);
98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
99 this.productoService.esPromoPersonalizada = false; 99 this.productoService.esPromoPersonalizada = false;
100 this.promociones = []; 100 this.promociones = [];
101 this.popoverDirective.hide(); 101 this.popoverDirective.hide();
102 } 102 }
103 103
104 promoSeleccionada($event: Producto, showPopover: boolean) { 104 promoSeleccionada($event: Producto, showPopover: boolean) {
105 105
106 this.productoService.getProductoById($event.id) 106 this.productoService.getProductoById($event.id)
107 .subscribe((res: Producto) => { 107 .subscribe((res: Producto) => {
108 108
109 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; 109 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
110 this.promoAcargar = $event; 110 this.promoAcargar = $event;
111 111
112 if ($event.tieneSinonimos) { 112 if ($event.tieneSinonimos) {
113 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 113 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
114 } else if (showPopover) { 114 } else if (showPopover) {
115 this.popoverDirective.show(); 115 this.popoverDirective.show();
116 } else { 116 } else {
117 this.popoverDirective.hide(); 117 this.popoverDirective.hide();
118 } 118 }
119 119
120 }, 120 },
121 error => { console.log(error); }) 121 error => { console.log(error); })
122 } 122 }
123 123
124 getSinonimos(sector, codigo) { 124 getSinonimos(sector, codigo) {
125 125
126 this.productoService.getPromocionSinonimos(sector, codigo) 126 this.productoService.getPromocionSinonimos(sector, codigo)
127 .subscribe((res: Sinonimo[]) => { 127 .subscribe((res: Sinonimo[]) => {
128 128
129 res.forEach(sinonimo => { 129 res.forEach(sinonimo => {
130 130
131 sinonimo.cantidad = 0; 131 sinonimo.cantidad = 0;
132 this.promoAcargar.productos.forEach(productoPromo => { 132 this.promoAcargar.productos.forEach(productoPromo => {
133 133
134 sinonimo.productos.forEach(productoSinonimo => { 134 sinonimo.productos.forEach(productoSinonimo => {
135 135
136 if (productoSinonimo.id === productoPromo.id) { 136 if (productoSinonimo.id === productoPromo.id) {
137 productoSinonimo.cantidad = productoPromo.cantidad; 137 productoSinonimo.cantidad = productoPromo.cantidad;
138 sinonimo.cantidad += productoPromo.cantidad; 138 sinonimo.cantidad += productoPromo.cantidad;
139 } 139 }
140 }) 140 })
141 }) 141 })
142 }) 142 })
143 this.sinonimos = res; 143 this.sinonimos = res;
144 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); 144 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
145 }) 145 })
146 } 146 }
147 147
148 productosPersonalizados($event: Producto[]) { 148 productosPersonalizados($event: Producto[]) {
149 149
150 var productosPersonalizados = $event; 150 var productosPersonalizados = $event;
151
152 this.promoAcargar.productos.forEach(productoPromo => {
153
154 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
155 })
156
157 this.promoAcargar.productos = productosPersonalizados; 151 this.promoAcargar.productos = productosPersonalizados;
158 this.confirmarProducto(); 152 this.confirmarProducto();
159 } 153 }
160 154
161 buscarByCodigoBarras(busqueda) { 155 buscarByCodigoBarras(busqueda) {
162 156
163 let producto = this.productos.filter(producto => { 157 let producto = this.productos.filter(producto => {
164 return producto.codigoBarra == busqueda; 158 return producto.codigoBarra == busqueda;
165 }); 159 });
166 160
167 if (producto.length) { 161 if (producto.length) {
168 162
169 this.productoAcargar = producto[0]; 163 this.productoAcargar = producto[0];
170 this.getPromociones(); 164 this.getPromociones();
171 165
172 } else { 166 } else {
173 alert('No se encuentra el producto'); 167 alert('No se encuentra el producto');
174 } 168 }
175 169
176 } 170 }
177 171
178 irBusquedaProductos(value) { 172 irBusquedaProductos(value) {
179 173
180 this.productoService.mostrar = value; 174 this.productoService.mostrar = value;
181 this.router.navigate(['busqueda-productos']); 175 this.router.navigate(['busqueda-productos']);
182 } 176 }
183 177
184 deshacerCarga() { 178 deshacerCarga() {
185 179
186 if (this.sinonimos.length > 0) { 180 if (this.sinonimos.length > 0) {
187 this.sinonimos = []; 181 this.sinonimos = [];
188 this.productoService.esPromoPersonalizada = false; 182 this.productoService.esPromoPersonalizada = false;
189 this.popoverDirective.hide(); 183 this.popoverDirective.hide();
190 } 184 }
191 185
192 if (this.promoAcargar) { 186 if (this.promoAcargar) {
193 this.promoAcargar = undefined; 187 this.promoAcargar = undefined;
194 if (this.productoAcargar.PRO) { 188 if (this.productoAcargar.PRO) {
195 this.productoAcargar = undefined; 189 this.productoAcargar = undefined;
196 this.promociones = []; 190 this.promociones = [];
197 this.popoverDirective.hide(); 191 this.popoverDirective.hide();
198 } else { 192 } else {
199 this.popoverDirective.show(); 193 this.popoverDirective.show();
200 } 194 }
201 } else { 195 } else {
202 this.productoAcargar = undefined; 196 this.productoAcargar = undefined;
203 this.promociones = []; 197 this.promociones = [];
204 this.popoverDirective.hide(); 198 this.popoverDirective.hide();
205 } 199 }
206 } 200 }
207 201
208 } 202 }
209 203