Commit 3f647e6582b97c86fbfbee8f8d59800ca155686c

Authored by Marcelo Puebla
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master'

Master(efernandez)

See merge request !38
src/app/components/busqueda-productos/busqueda-productos.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Categoria } from 'src/app/wrappers/categoria'; 4 import { Categoria } from 'src/app/wrappers/categoria';
5 import { appSettings } from 'src/etc/AppSettings'; 5 import { appSettings } from 'src/etc/AppSettings';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-busqueda-productos', 9 selector: 'app-busqueda-productos',
10 templateUrl: './busqueda-productos.component.html', 10 templateUrl: './busqueda-productos.component.html',
11 styleUrls: ['./busqueda-productos.component.scss'] 11 styleUrls: ['./busqueda-productos.component.scss']
12 }) 12 })
13 export class BusquedaProductosComponent implements OnInit { 13 export class BusquedaProductosComponent implements OnInit {
14 14
15 private productos: Producto[] = []; 15 private productos: Producto[] = [];
16 private auxProductos: Producto[] = []; 16 private auxProductos: Producto[] = [];
17 private searchTerm: string = ''; 17 private searchTerm: string = '';
18 private categoriaActive: number = null; 18 private categoriaActive: number = null;
19 private showSpinner: boolean = true; 19 private showSpinner: boolean = true;
20 private verCategorias: boolean = true; 20 private verCategorias: boolean = true;
21 private apiUrl: string = appSettings.apiUrl; 21 private apiUrl: string = appSettings.apiUrl;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 23
24 constructor( 24 constructor(
25 private productoService: ProductoService, 25 private productoService: ProductoService,
26 private router: Router) { } 26 private router: Router) { }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 29
30 this.verCategorias = this.productoService.verCategoriasProductos; 30 this.verCategorias = this.productoService.verCategoriasProductos;
31 31
32 this.productoService.getCategorias() 32 this.productoService.getCategorias()
33 .subscribe((categorias: Categoria[]) => { 33 .subscribe((categorias: Categoria[]) => {
34 this.categorias = categorias; 34 this.categorias = categorias;
35 this.categoriaActive = this.verCategorias ? 1 : categorias[0].id; 35 this.categoriaActive = this.verCategorias ? 1 : categorias[0].id;
36 }); 36 });
37 37
38 this.productoService.productoAcargar = undefined; 38 this.productoService.productoAcargar = undefined;
39 this.productoService.getAll() 39 this.productoService.getAll()
40 .subscribe((data: Producto[]) => { 40 .subscribe((data: Producto[]) => {
41 41
42 this.productos = data; 42 this.productos = data;
43 this.filterItems(); 43 this.filterItems();
44 }, (error) => { 44 }, (error) => {
45 this.showSpinner = false; 45 this.showSpinner = false;
46 console.error(error); 46 console.error(error);
47 }); 47 });
48 } 48 }
49 49
50 filterItems() { 50 filterItems() {
51 51
52 this.auxProductos = this.productos.filter(x => { 52 this.auxProductos = this.productos.filter(x => {
53 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 53 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
54 x.categoria_selfservice == this.categoriaActive; 54 x.categoria_selfservice == this.categoriaActive;
55 }); 55 });
56 } 56 }
57 57
58 agregarAlCarrito(producto: Producto) { 58 agregarAlCarrito(producto: Producto) {
59 59
60 producto.cantidad = 1; 60 producto.cantidad = 1;
61 this.productoService.productos.push(producto); 61 this.productoService.productos.push(producto);
62 } 62 }
63 63
64 private elegirProducto(producto: Producto) { 64 private elegirProducto(producto: Producto) {
65 65
66 if (producto.PRO) { 66 if (producto.PRO) {
67 67
68 let imagenes = producto.imagenes;
68 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 69 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
69 .subscribe(res => { 70 .subscribe(res => {
70 71
71 this.productoService.productoAcargar = res[0]; 72 this.productoService.productoAcargar = res[0];
72 this.router.navigate(['inicio']); 73 this.productoService.productoAcargar.imagenes = imagenes;
74 this.router.navigate(['inicio']);
73 }, 75 },
74 error => { console.error(error); } 76 error => { console.error(error); }
75 ); 77 );
76 }else { 78 }else {
77 79
78 this.productoService.productoAcargar = producto; 80 this.productoService.productoAcargar = producto;
79 this.router.navigate(['inicio']); 81 this.router.navigate(['inicio']);
80 } 82 }
81 83
82 } 84 }
83 } 85 }
84 86
src/app/components/inicio/inicio.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos(false)" 16 (click)="irBusquedaProductos(false)"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-auto"> 20 <div class="col-auto">
21 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-auto p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
39 </div> 39 </div>
40 <div class="carousel-item"> 40 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> 41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <!-- ORDENAR --> 47 <!-- ORDENAR -->
48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
49 <div class="card-body text-left px-4 py-3"> 49 <div class="card-body text-left px-4 py-3">
50 <div class="row"> 50 <div class="row">
51 <div class="col-auto"> 51 <div class="col-auto">
52 <p class="h3 card-title">Ordenar Pedido</p> 52 <p class="h3 card-title">Ordenar Pedido</p>
53 </div> 53 </div>
54 <div class="col-auto p-0"> 54 <div class="col-auto p-0">
55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
56 </div> 56 </div>
57 </div> 57 </div>
58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
59 </div> 59 </div>
60 <img 60 <img
61 class="card-img-bottom d-block w-100 mx-auto rounded" 61 class="card-img-bottom d-block w-100 mx-auto rounded"
62 src="{{apiUrl}}/imagenes/cafe.jpg"> 62 src="{{apiUrl}}/imagenes/cafe.jpg">
63 </div> 63 </div>
64 </div> 64 </div>
65 65
66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
67 67
68 <!-- CARGAR PRODUCTOS --> 68 <!-- CARGAR PRODUCTOS -->
69 <ng-template #popTemplate> 69 <ng-template #popTemplate>
70 <app-popover-promos 70 <app-popover-promos
71 *ngIf="promociones.length > 0 && sinonimos.length === 0" 71 *ngIf="promociones.length > 0 && sinonimos.length === 0"
72 [popover]="popoverDirective" 72 [popover]="popoverDirective"
73 [popoverContent]="promociones" 73 [popoverContent]="promociones"
74 (promoSeleccionada)="promoSeleccionada($event)" 74 (promoSeleccionada)="promoSeleccionada($event)"
75 class="text-white rounded-sm border-0"> 75 class="text-white rounded-sm border-0">
76 </app-popover-promos> 76 </app-popover-promos>
77 <app-popover-sinonimos 77 <app-popover-sinonimos
78 *ngIf="sinonimos.length > 0" 78 *ngIf="sinonimos.length > 0"
79 [popover]="popoverDirective" 79 [popover]="popoverDirective"
80 [popoverContent]="sinonimos" 80 [popoverContent]="sinonimos"
81 (productosPersonalizados)="productosPersonalizados($event)" 81 (productosPersonalizados)="productosPersonalizados($event)"
82 class="text-white rounded-sm border-0"> 82 class="text-white rounded-sm border-0">
83 </app-popover-sinonimos> 83 </app-popover-sinonimos>
84 </ng-template> 84 </ng-template>
85 <div 85 <div
86 placement="left" 86 placement="left"
87 triggers="" 87 triggers=""
88 [popover]="popTemplate" 88 [popover]="popTemplate"
89 class="w-100" 89 class="w-100"
90 #pop="bs-popover"> 90 #pop="bs-popover">
91 <div class="card bg-white border-0 shadow rounded mb-auto"> 91 <div class="card bg-white border-0 shadow rounded mb-auto">
92 <div class="card-body text-left px-4 py-3"> 92 <div class="card-body text-left px-4 py-3">
93 <div class="row"> 93 <div class="row">
94 <div class="col-auto"> 94 <div class="col-auto">
95 <p class="h3 card-title">Cargar Productos</p> 95 <p class="h3 card-title">Cargar Productos</p>
96 </div> 96 </div>
97 <div class="col-auto p-0"> 97 <div class="col-auto p-0">
98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
99 </div> 99 </div>
100 </div> 100 </div>
101 <p class="h5 card-text text-muted font-weight-light"> 101 <p class="h5 card-text text-muted font-weight-light">
102 Coloque un producto frente<br> 102 Coloque un producto frente<br>
103 al lector de códigos o selecciónelo en pantalla 103 al lector de códigos o selecciónelo en pantalla
104 </p> 104 </p>
105 </div> 105 </div>
106 <div class="row m-4"> 106 <div class="row m-4">
107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
108 <!-- IMAGEN DE ESCANER --> 108 <!-- IMAGEN DE ESCANER -->
109 <img 109 <img
110 *ngIf="!productoAcargar" 110 *ngIf="!productoAcargar"
111 class="card-img-top d-block w-100 mx-auto rounded-sm" 111 class="card-img-top d-block w-100 mx-auto rounded-sm"
112 src="{{apiUrl}}/imagenes/escanner.jpg"> 112 src="{{apiUrl}}/imagenes/escanner.jpg">
113 113
114 <!-- PRODUCTO A CARGAR --> 114 <!-- PRODUCTO A CARGAR -->
115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
116 <img 116 <img
117 class="card-img-top d-block w-75 mx-auto rounded-sm" 117 class="card-img-top d-block w-75 mx-auto rounded-sm"
118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
119 119
120 <div class="row justify-content-between m-3"> 120 <div class="row justify-content-between m-3">
121 <div class="col-12 text-left px-1"> 121 <div class="col-12 text-left px-1">
122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
123 </div> 123 </div>
124 <div class="col-12 text-right mt-2"> 124 <div class="col-12 text-right mt-2">
125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 129
130 <!-- PROMO A CARGAR --> 130 <!-- PROMO A CARGAR -->
131 <div class="fade-in m-0" *ngIf="promoAcargar"> 131 <div class="fade-in m-0" *ngIf="promoAcargar">
132 <!-- <img 132 <img
133 class="card-img-top d-block w-100 mx-auto rounded-sm" 133 class="card-img-top d-block w-100 mx-auto rounded-sm"
134 src="{{apiUrl}}/imagenes/{{promoAcargar. imagenes[0].imagen}}"> --> 134 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
135 135
136 <div class="row justify-content-between m-3"> 136 <div class="row justify-content-between m-3">
137 <div class="col-12 text-left px-1"> 137 <div class="col-12 text-left px-1">
138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p> 138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
139 </div> 139 </div>
140 <div class="col-12 text-right mt-2 align-self-end"> 140 <div class="col-12 text-right mt-2 align-self-end">
141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 145
146 </div> 146 </div>
147 <!-- BOTONES DE CARGAR PRODUCTOS--> 147 <!-- BOTONES DE CARGAR PRODUCTOS-->
148 <div 148 <div
149 class="col-5 pr-0" 149 class="col-5 pr-0"
150 *ngIf="promociones.length > 0"> 150 *ngIf="promociones.length > 0">
151 <button 151 <button
152 *ngIf="sinonimos.length > 0" 152 *ngIf="sinonimos.length > 0"
153 type="button" 153 type="button"
154 class="btn btn-light btn-block shadow-sm" 154 class="btn btn-light btn-block shadow-sm"
155 (click)="pop.show()"> 155 (click)="pop.show()">
156 <span class="pr-2">Personalizar</span> 156 <span class="pr-2">Personalizar</span>
157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
158 </button> 158 </button>
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 173 </button>
174 <button 174 <button
175 type="button" 175 type="button"
176 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 180 </button>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos(true)" 187 <div (click)="irBusquedaProductos(true)"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
189 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 190 <div class="row">
191 <div class="col-auto"> 191 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 192 <p class="h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 194 Busque aquí los productos<br>
195 que no tienen código </p> 195 que no tienen código </p>
196 </div> 196 </div>
197 <div class="col-auto p-0"> 197 <div class="col-auto p-0">
198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
199 </div> 199 </div>
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
209 </div> 209 </div>
210 </div> 210 </div>
211 211
src/app/components/sidebar/sidebar.component.html
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> --> 14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
19 </div> 19 </div>
20 <div class="col-12 pr-1 text-right h6 my-auto "> 20 <div class="col-12 pr-1 text-right h6 my-auto ">
21 <p class="m-0">{{producto.PreVen | currency}}</p> 21 <p class="m-0">{{producto.PreVen | currency}}</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <!-- BOTONES --> 25 <!-- BOTONES -->
26 <div class="row m-0 d-flex justify-content-between"> 26 <div class="row m-0 d-flex justify-content-between">
27 27
28 <!-- SUMAR - RESTAR CANTIDAD --> 28 <!-- SUMAR - RESTAR CANTIDAD -->
29 <div class="col-auto px-1 my-2"> 29 <div class="col-auto px-1 my-2">
30 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 30 <div class="btn-group-sm btn-group float-left my-auto" role="group">
31 <button 31 <button
32 type="button" 32 type="button"
33 class="btn btn-light btn-sm my-auto border shadow" 33 class="btn btn-light btn-sm my-auto border shadow"
34 (click)="aumentarCantidad(producto)"> 34 (click)="aumentarCantidad(producto)">
35 <i class="fa fa-plus" aria-hidden="true"></i> 35 <i class="fa fa-plus" aria-hidden="true"></i>
36 </button> 36 </button>
37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
38 <small>{{producto.cantidad}}</small> 38 <small>{{producto.cantidad}}</small>
39 </div> 39 </div>
40 <button 40 <button
41 type="button" 41 type="button"
42 class="btn btn-light btn-sm my-auto border shadow" 42 class="btn btn-light btn-sm my-auto border shadow"
43 (click)="restarCantidad(producto)"> 43 (click)="restarCantidad(producto)">
44 <i class="fa fa-minus" aria-hidden="true"></i> 44 <i class="fa fa-minus" aria-hidden="true"></i>
45 </button> 45 </button>
46 </div> 46 </div>
47 </div> 47 </div>
48 48
49 <!-- PERSONALIZAR --> 49 <!-- PERSONALIZAR -->
50 <div class="col-auto px-1 my-2"> 50 <div class="col-auto px-1 my-2">
51 <button 51 <button
52 *ngIf="esPersonalizable(producto)" 52 *ngIf="esPersonalizable(producto)"
53 type="button" 53 type="button"
54 class="btn btn-light btn-sm my-auto float-left border shadow" 54 class="btn btn-light btn-sm my-auto float-left border shadow"
55 (click)="personalizarPromo"> 55 (click)="personalizarPromo">
56 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 56 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
57 </button> 57 </button>
58 </div> 58 </div>
59 59
60 <!-- BORRAR --> 60 <!-- BORRAR -->
61 <div class="col-auto px-1 my-2"> 61 <div class="col-auto px-1 my-2">
62 <button 62 <button
63 type="button" 63 type="button"
64 class="btn btn-secondary btn-sm my-auto shadow" 64 class="btn btn-secondary btn-sm my-auto shadow"
65 (click)="deleteProducto(producto, i)"> 65 (click)="deleteProducto(producto, i)">
66 <i class="fa fa-trash" aria-hidden="true"></i> 66 <i class="fa fa-trash" aria-hidden="true"></i>
67 </button> 67 </button>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- TOTAL --> 73 <!-- TOTAL -->
74 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 74 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
75 <div class="card-body row"> 75 <div class="card-body row">
76 <div class="col-12"> 76 <div class="col-12">
77 <p 77 <p
78 class="h4 border-bottom border-secondary text-secondary pb-2"> 78 class="h4 border-bottom border-secondary text-secondary pb-2">
79 ({{getCantidadProductos()}}) artículos 79 ({{getCantidadProductos()}}) artículos
80 </p> 80 </p>
81 <p class="h3 text-secondary">Total</p> 81 <p class="h3 text-secondary">Total</p>
82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
83 </div> 83 </div>
84 <div class="col-12"> 84 <div class="col-12">
85 <button 85 <button
86 *ngIf="cantTotal > 0" 86 *ngIf="cantTotal > 0"
87 type="button" 87 type="button"
88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89 routerLink="/confirmacion-carrito"> 89 routerLink="/confirmacion-carrito">
90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
91 <i class="fa fa-check text-success" aria-hidden="true"></i> 91 <i class="fa fa-check text-success" aria-hidden="true"></i>
92 </button> 92 </button>
93 <button 93 <button
94 type="button" 94 type="button"
95 class="btn btn-block btn-light shadow btn-sm shadow" 95 class="btn btn-block btn-light shadow btn-sm shadow"
96 [routerLink]="['/cancelar-compra']"> 96 [routerLink]="['/cancelar-compra']">
97 <span class="pr-1">Cancelar</span> 97 <span class="pr-1">Cancelar</span>
98 <i class="fa fa-times text-danger" aria-hidden="true"></i> 98 <i class="fa fa-times text-danger" aria-hidden="true"></i>
99 </button> 99 </button>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
src/app/wrappers/producto.ts
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 categoria_selfservice: number; 90 categoria_selfservice: number;
91 cantidad?: number; 91 cantidad?: number;
92 esPadre?: boolean; 92 esPadre?: boolean;
93 codigoBarra: string; 93 codigoBarra: string;
94 idSinonimo?: number; 94 idSinonimo?: number;
95 productos?: Producto[]; 95 productos?: Producto[];
96 tieneSinonimos?: boolean; 96 tieneSinonimos?: boolean;
97 imagenes: object[]
97 } 98 }
98 99