Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit ae69d092e57fc8ae2b0f2ff8dd16f03b8617db85

Authored by Marcelo Puebla
2 parents 017a1140d6 2d5ff955b6
Exists in master

Merge branch 'master' into 'develop' 

Master(mpuebla)

See merge request !133
Showing 5 changed files   Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ ae69d09
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" 2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select" 3 class="row m-0 fade-in bg-primary-gradient disable-user-select"
4 (click)="reiniciarTimer()"> 4 (click)="reiniciarTimer()">
5 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
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 &nbsp; 13 &nbsp;
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-10 px-1"> 19 <div class="col-10 px-1">
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white"> 21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
22 <div class="col-sm-auto my-auto"> 22 <div class="col-sm-auto my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-9 my-auto"> 27 <div class="col-sm-9 my-auto">
28 <p class="h4">Por favor, controle y confirme su compra.</p> 28 <p class="h4">Por favor, controle y confirme su compra.</p>
29 </div> 29 </div>
30 <label for="customLabel" class="col-auto font-weight-bold h4 m-0"> 30 <label for="customLabel" class="col-auto font-weight-bold h4 m-0">
31 Pedido a nombre de: 31 Pedido a nombre de:
32 </label> 32 </label>
33 <div class="col-12 col-sm-6 col-md-5 col-lg-5"> 33 <div class="col-12 col-sm-6 col-md-5 col-lg-5">
34 <input 34 <input
35 [matKeyboard]="'spanish'" 35 [matKeyboard]="'spanish'"
36 type="text" 36 type="text"
37 class="form-control text-center" 37 class="form-control text-center"
38 id="customLabel" 38 id="customLabel"
39 maxlength="24" 39 maxlength="24"
40 [(ngModel)]="pedidoAnombreDe" 40 [(ngModel)]="pedidoAnombreDe"
41 autofocus 41 autofocus
42 > 42 >
43 </div> 43 </div>
44 </div> 44 </div>
45 45
46 <div [ngClass]="{'mt-5': verQR}" class="row m-0"> 46 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
47 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 47 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
48 <div *ngIf="!verQR" class="col-sm-9 pr-1"> 48 <div *ngIf="!verQR" class="col-sm-9 pr-1">
49 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> 49 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
50 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos"> 50 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
51 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0"> 51 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
52 <div class="d-flex align-items-end flex-column"> 52 <div class="d-flex align-items-end flex-column">
53 <div class="w-100"> 53 <div class="w-100">
54 <img 54 <img
55 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 55 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
56 class="shadow rounded-sm w-100 m-auto"> 56 class="shadow rounded-sm w-100 m-auto">
57 </div> 57 </div>
58 <div class="w-100 pt-2 px-2"> 58 <div class="w-100 pt-2 px-2">
59 <p class="h6 text-left"> 59 <p class="h6 text-left">
60 <small class="font-weight-bold"> 60 <small class="font-weight-bold">
61 {{producto.DET_LAR}} 61 {{producto.DET_LAR}}
62 </small> 62 </small>
63 </p> 63 </p>
64 <div *ngIf="producto.tieneSinonimos"> 64 <div *ngIf="producto.tieneSinonimos">
65 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 65 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
66 <small> 66 <small>
67 - {{producto.cantidad}} {{p.DET_LAR}} 67 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
68 </small> 68 </small>
69 </p> 69 </p>
70 </div> 70 </div>
71 </div> 71 </div>
72 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2"> 72 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
73 <span class="text-left m-0 px-1 h6"> 73 <span class="text-left m-0 px-1 h6">
74 {{producto.cantidad}} x {{producto.PreVen | currency}} 74 {{producto.cantidad}} x {{producto.PreVen | currency}}
75 </span> 75 </span>
76 <span class="text-right m-0 px-1 h6"> 76 <span class="text-right m-0 px-1 h6">
77 {{producto.cantidad * producto.PreVen | currency}} 77 {{producto.cantidad * producto.PreVen | currency}}
78 </span> 78 </span>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 85
86 <!-- CODIGO QR --> 86 <!-- CODIGO QR -->
87 <div *ngIf="verQR" class="col-sm-9"> 87 <div *ngIf="verQR" class="col-sm-9">
88 <div class="col-6 offset-3 border-0 mb-auto"> 88 <div class="col-6 offset-3 border-0 mb-auto">
89 <img 89 <img
90 src="../../../assets/img/qrmp.jpg" 90 src="../../../assets/img/qrmp.jpg"
91 class="w-100 mx-auto d-block shadow rounded-sm"> 91 class="w-100 mx-auto d-block shadow rounded-sm">
92 </div> 92 </div>
93 </div> 93 </div>
94 94
95 <!-- TICKET --> 95 <!-- TICKET -->
96 <div class="col-sm-3 px-1"> 96 <div class="col-sm-3 px-1">
97 <div class="card shadow"> 97 <div class="card shadow">
98 <div class="card-body"> 98 <div class="card-body">
99 <p class="h5 card-title">Su Ticket</p> 99 <p class="h5 card-title">Su Ticket</p>
100 <div class="row mt-4 m-0"> 100 <div class="row mt-4 m-0">
101 <div class="col-12 p-0 mb-2"> 101 <div class="col-12 p-0 mb-2">
102 <p class="h6 m-0 card-text text-left"> 102 <p class="h6 m-0 card-text text-left">
103 <small class="font-weight-bold">DESCRIPCIÓN</small> 103 <small class="font-weight-bold">DESCRIPCIÓN</small>
104 </p> 104 </p>
105 <p class="h6 m-0 card-text text-left"> 105 <p class="h6 m-0 card-text text-left">
106 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 106 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
107 </p> 107 </p>
108 </div> 108 </div>
109 </div> 109 </div>
110 <div class="row vh-50 px-2 overflow-scroll m-0"> 110 <div class="row vh-50 px-2 overflow-scroll m-0">
111 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 111 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
112 <p class="h6 m-0 card-text text-left"> 112 <p class="h6 m-0 card-text text-left">
113 <small>{{producto.DET_LAR}}</small> 113 <small>{{producto.DET_LAR}}</small>
114 </p> 114 </p>
115 <div class="row d-flex justify-content-between m-0"> 115 <div class="row d-flex justify-content-between m-0">
116 <div class="col p-0"> 116 <div class="col p-0">
117 <p class="h6 m-0 card-text text-left"> 117 <p class="h6 m-0 card-text text-left">
118 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 118 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
119 </p> 119 </p>
120 </div> 120 </div>
121 <div class="col p-0"> 121 <div class="col p-0">
122 <p class="h6 m-0 card-text text-right"> 122 <p class="h6 m-0 card-text text-right">
123 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 123 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
124 </p> 124 </p>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 129 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
130 Total {{getTotal() | currency}} 130 Total {{getTotal() | currency}}
131 </p> 131 </p>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 136
137 <!-- OPCIONES ABAJO DERECHA --> 137 <!-- OPCIONES ABAJO DERECHA -->
138 <div class="row m-0 fixed-bottom"> 138 <div class="row m-0 fixed-bottom">
139 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 139 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
140 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 140 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
141 <div class="card-body row m-0 p-1"> 141 <div class="card-body row m-0 p-1">
142 <div class="col-12 p-3"> 142 <div class="col-12 p-3">
143 <button 143 <button
144 type="button" 144 type="button"
145 class="btn btn-block btn-light shadow btn-sm shadow" 145 class="btn btn-block btn-light shadow btn-sm shadow"
146 (click)="volverPreviousPage()"> 146 (click)="volverPreviousPage()">
147 <span class="pr-2">Volver</span> 147 <span class="pr-2">Volver</span>
148 <i class="fa fa-undo text-warning"></i> 148 <i class="fa fa-undo text-warning"></i>
149 </button> 149 </button>
150 <button 150 <button
151 type="button" 151 type="button"
152 class="btn btn-block btn-light shadow btn-sm shadow" 152 class="btn btn-block btn-light shadow btn-sm shadow"
153 [routerLink]="['/cancelar-compra']"> 153 [routerLink]="['/cancelar-compra']">
154 <span class="pr-2">Cancelar</span> 154 <span class="pr-2">Cancelar</span>
155 <i class="fa fa-times text-danger"></i> 155 <i class="fa fa-times text-danger"></i>
156 </button> 156 </button>
157 </div> 157 </div>
158 </div> 158 </div>
159 </div> 159 </div>
160 </div> 160 </div>
161 </div> 161 </div>
162 </div> 162 </div>
163 163
164 <!-- FORMAS DE PAGO --> 164 <!-- FORMAS DE PAGO -->
165 <div *ngIf="!verQR" class="col-2 px-1"> 165 <div *ngIf="!verQR" class="col-2 px-1">
166 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> 166 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
167 Forma de pago 167 Forma de pago
168 </p> 168 </p>
169 169
170 <!-- EFECTIVO --> 170 <!-- EFECTIVO -->
171 <div 171 <div
172 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 172 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
173 (click)="pagar(1)"> 173 (click)="pagar(1)">
174 <div class="col-7 text-center my-auto px-2"> 174 <div class="col-7 text-center my-auto px-2">
175 <span class="h5 font-weight-bold">Efectivo</span> 175 <span class="h5 font-weight-bold">Efectivo</span>
176 </div> 176 </div>
177 <div class="col-5 my-auto p-0"> 177 <div class="col-5 my-auto p-0">
178 <img 178 <img
179 src="../../../assets/img/efectivo.png" 179 src="../../../assets/img/efectivo.png"
180 class="w-100 float-right"> 180 class="w-100 float-right">
181 </div> 181 </div>
182 </div> 182 </div>
183 183
184 <!-- TARJETA --> 184 <!-- TARJETA -->
185 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 185 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
186 (click)="abrirPagoConTarjeta()"> 186 (click)="abrirPagoConTarjeta()">
187 <div class="col-7 text-center my-auto px-2"> 187 <div class="col-7 text-center my-auto px-2">
188 <span class="h5 font-weight-bold">Tarjeta</span> 188 <span class="h5 font-weight-bold">Tarjeta</span>
189 </div> 189 </div>
190 <div class="col-5 my-auto p-0"> 190 <div class="col-5 my-auto p-0">
191 <img 191 <img
192 src="../../../assets/img/tarjeta.png" 192 src="../../../assets/img/tarjeta.png"
193 class="w-100 float-right"> 193 class="w-100 float-right">
194 </div> 194 </div>
195 </div> 195 </div>
196 196
197 <!-- QR --> 197 <!-- QR -->
198 <div 198 <div
199 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 199 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
200 (click)="pagar(9)"> 200 (click)="pagar(9)">
201 <div class="col-7 text-center my-auto px-2"> 201 <div class="col-7 text-center my-auto px-2">
202 <span class="h5 font-weight-bold">Pago Electrónico</span> 202 <span class="h5 font-weight-bold">Pago Electrónico</span>
203 </div> 203 </div>
204 <div class="col-5 my-auto p-0"> 204 <div class="col-5 my-auto p-0">
205 <img 205 <img
206 src="../../../assets/img/qr.png" 206 src="../../../assets/img/qr.png"
207 class="w-100 float-right"> 207 class="w-100 float-right">
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 </div> 211 </div>
212 212
213 </div> 213 </div>
214 </div> 214 </div>
215 215
216 <div 216 <div
217 *ngIf="compraConQRfinalizada" 217 *ngIf="compraConQRfinalizada"
218 [routerLink]="['/mensaje-final']" 218 [routerLink]="['/mensaje-final']"
219 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 219 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
220 <div class="col-12 text-center text-white my-auto"> 220 <div class="col-12 text-center text-white my-auto">
221 <p class="font-weight-bold display-4"> 221 <p class="font-weight-bold display-4">
222 Su pago fue<br> 222 Su pago fue<br>
223 acreditado 223 acreditado
224 exitosamente 224 exitosamente
225 </p> 225 </p>
226 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 226 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
227 </div> 227 </div>
228 <div class="row z-index-0 fixed-top m-0 w-100"> 228 <div class="row z-index-0 fixed-top m-0 w-100">
229 <div class="col-12 p-3"> 229 <div class="col-12 p-3">
230 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 230 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
231 </div> 231 </div>
232 </div> 232 </div>
233 </div> 233 </div>
234 234
235 <div 235 <div
236 *ngIf="compraConEfectivofinalizada" 236 *ngIf="compraConEfectivofinalizada"
237 [routerLink]="['/mensaje-final']" 237 [routerLink]="['/mensaje-final']"
238 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 238 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
239 <div class="col-12 text-center text-white my-auto"> 239 <div class="col-12 text-center text-white my-auto">
240 <p class="font-weight-bold display-4"> 240 <p class="font-weight-bold display-4">
241 Retire su ticket<br> 241 Retire su ticket<br>
242 y diríjase a caja para<br> 242 y diríjase a caja para<br>
243 efectuar el pago. 243 efectuar el pago.
244 </p> 244 </p>
245 </div> 245 </div>
246 <div class="row z-index-0 fixed-top m-0 w-100"> 246 <div class="row z-index-0 fixed-top m-0 w-100">
247 <div class="col-12 p-3"> 247 <div class="col-12 p-3">
248 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 248 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
249 </div> 249 </div>
250 </div> 250 </div>
251 </div> 251 </div>
252 252
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ ae69d09
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 { APP_SETTINGS } from 'src/etc/AppSettings'; 3 import { APP_SETTINGS } 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 = APP_SETTINGS.apiImagenes; 24 private apiImagenes: string = APP_SETTINGS.apiImagenes;
25 private mostrarPantalla : boolean = false; 25 private mostrarPantalla : boolean = false;
26 26
27 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 27 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
28 28
29 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 29 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
30 30
31 if (e.keyCode == 13) { 31 if (e.keyCode == 13) {
32 this.buscarByCodigoBarras(this.busqueda); 32 this.buscarByCodigoBarras(this.busqueda);
33 this.busqueda = ''; 33 this.busqueda = '';
34 } else { 34 } else {
35 this.busqueda += e.key; 35 this.busqueda += e.key;
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 this.mostrarPantalla = localStorage.getItem('impresoraPVE') ? true : false; 48 this.mostrarPantalla = localStorage.getItem('impresoraPVE') ? true : false;
49 } 49 }
50 50
51 ngAfterViewInit() { 51 ngAfterViewInit() {
52 52
53 setTimeout(() => { 53 setTimeout(() => {
54 if (!this.productoAcargar) return; 54 if (!this.productoAcargar) return;
55 55
56 if (this.productoAcargar.PRO) { 56 if (this.productoAcargar.PRO) {
57 this.promociones.push(this.productoAcargar); 57 this.promociones.push(this.productoAcargar);
58 this.promoSeleccionada(this.productoAcargar, true); 58 this.promoSeleccionada(this.productoAcargar, true);
59 } 59 }
60 else { 60 else {
61 this.getPromociones(); 61 this.getPromociones();
62 } 62 }
63 }) 63 })
64 } 64 }
65 65
66 getProductos() { 66 getProductos() {
67 67
68 this.productoService.getAll() 68 this.productoService.getAll()
69 .subscribe((productos: Producto[]) => { 69 .subscribe((productos: Producto[]) => {
70 this.productos = productos; 70 this.productos = productos;
71 }); 71 });
72 } 72 }
73 73
74 getPromociones() { 74 getPromociones() {
75 75
76 var sector = this.productoAcargar.CodSec; 76 var sector = this.productoAcargar.CodSec;
77 var codigo = this.productoAcargar.CodArt; 77 var codigo = this.productoAcargar.CodArt;
78 this.productoService.getPromociones(sector, codigo) 78 this.productoService.getPromociones(sector, codigo)
79 .subscribe((res: Producto[]) => { 79 .subscribe((res: Producto[]) => {
80 80
81 if (res.length === 0) { 81 if (res.length === 0) {
82 82
83 this.productoAcargar.cantidad ? false : this.productoAcargar.cantidad = 1; 83 this.productoAcargar.cantidad ? false : this.productoAcargar.cantidad = 1;
84 this.productoService.setProductos(this.productoAcargar); 84 this.productoService.setProductos(this.productoAcargar);
85 this.productoAcargar = this.productoService.productoAcargar = undefined; 85 this.productoAcargar = this.productoService.productoAcargar = undefined;
86 } else { 86 } else {
87 87
88 this.promociones = res; 88 this.promociones = res;
89 this.popoverDirective.show(); 89 this.popoverDirective.show();
90 } 90 }
91 }, error => { console.error(error); }) 91 }, error => { console.error(error); })
92 } 92 }
93 93
94 confirmarProducto(cantidad?: number) { 94 confirmarProducto() {
95 95
96 let producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; 96 let producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
97 97
98 if (cantidad) { 98 producto.cantidad = producto.cantidad ? producto.cantidad : 1;
99 producto.cantidad = cantidad;
100 } else {
101 producto.cantidad = producto.cantidad ? producto.cantidad : 1;
102 }
103 99
104 this.productoService.setProductos(producto); 100 this.productoService.setProductos(producto);
105 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 101 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
106 this.productoService.esPromoPersonalizada = false; 102 this.productoService.esPromoPersonalizada = false;
107 this.promociones = []; 103 this.promociones = [];
108 this.popoverDirective.hide(); 104 this.popoverDirective.hide();
109 } 105 }
110 106
111 promoSeleccionada($event: Producto, showPopover: boolean) { 107 promoSeleccionada($event: Producto, showPopover: boolean) {
112 108
113 this.productoService.getProductoById($event.id) 109 this.productoService.getProductoById($event.id)
114 .subscribe((res: Producto) => { 110 .subscribe((res: Producto) => {
115 111
116 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; 112 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
117 this.promoAcargar = $event; 113 this.promoAcargar = $event;
118 114
119 if ($event.tieneSinonimos) { 115 if ($event.tieneSinonimos) {
120 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 116 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
121 } else if (showPopover) { 117 } else if (showPopover) {
122 this.popoverDirective.show(); 118 this.popoverDirective.show();
123 } else { 119 } else {
124 this.popoverDirective.hide(); 120 this.popoverDirective.hide();
125 } 121 }
126 122
127 }, 123 },
128 error => { console.log(error); }) 124 error => { console.log(error); })
129 } 125 }
130 126
131 getSinonimos(sector, codigo) { 127 getSinonimos(sector, codigo) {
132 128
133 this.productoService.getPromocionSinonimos(sector, codigo) 129 this.productoService.getPromocionSinonimos(sector, codigo)
134 .subscribe((res: Sinonimo[]) => { 130 .subscribe((res: Sinonimo[]) => {
135 131
136 res.forEach(sinonimo => { 132 res.forEach(sinonimo => {
137 133
138 sinonimo.cantidad = 0; 134 sinonimo.cantidad = 0;
139 this.promoAcargar.productos.forEach(productoPromo => { 135 this.promoAcargar.productos.forEach(productoPromo => {
140 136
141 sinonimo.productos.forEach(productoSinonimo => { 137 sinonimo.productos.forEach(productoSinonimo => {
142 138
143 if (productoSinonimo.id === productoPromo.id) { 139 if (productoSinonimo.id === productoPromo.id) {
144 productoSinonimo.cantidad = productoPromo.cantidad; 140 productoSinonimo.cantidad = productoPromo.cantidad;
145 sinonimo.cantidad += productoPromo.cantidad; 141 sinonimo.cantidad += productoPromo.cantidad;
146 } 142 }
147 }) 143 })
148 }) 144 })
149 }) 145 })
150 this.sinonimos = res; 146 this.sinonimos = res;
151 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); 147 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
152 }) 148 })
153 } 149 }
154 150
155 productosPersonalizados($event: any) { 151 productosPersonalizados($event: Producto[]) {
156 152
157 let productosPersonalizados = $event.productosAenviar; 153 let productosPersonalizados = $event;
158 154
159 productosPersonalizados.forEach(productoElegido => { 155 productosPersonalizados.forEach(productoElegido => {
160 156
161 this.promoAcargar.productos = this.promoAcargar.productos.filter(productoPromo => { 157 this.promoAcargar.productos = this.promoAcargar.productos.filter(productoPromo => {
162 return productoPromo.idSinonimo != productoElegido.idSinonimo; 158 return productoPromo.idSinonimo != productoElegido.idSinonimo;
163 }); 159 });
164 }); 160 });
165 161
166 this.promoAcargar.productos = this.promoAcargar.productos.concat(productosPersonalizados); 162 this.promoAcargar.productos = this.promoAcargar.productos.concat(productosPersonalizados);
167 this.confirmarProducto($event.cantidadPromo); 163
164 this.confirmarProducto();
168 } 165 }
169 166
170 buscarByCodigoBarras(busqueda) { 167 buscarByCodigoBarras(busqueda) {
171 168
172 let producto = this.productos.filter(producto => { 169 let producto = this.productos.filter(producto => {
173 return producto.codigoBarra == busqueda; 170 return producto.codigoBarra == busqueda;
174 }); 171 });
175 172
176 if (producto.length) { 173 if (producto.length) {
177 174
178 this.productoAcargar = producto[0]; 175 this.productoAcargar = producto[0];
179 this.getPromociones(); 176 this.getPromociones();
180 177
181 } else { 178 } else {
182 alert('No se encuentra el producto'); 179 alert('No se encuentra el producto');
183 } 180 }
184 181
185 } 182 }
186 183
187 irBusquedaProductos(value) { 184 irBusquedaProductos(value) {
188 185
189 this.productoService.mostrar = value; 186 this.productoService.mostrar = value;
190 this.router.navigate(['busqueda-productos']); 187 this.router.navigate(['busqueda-productos']);
191 } 188 }
192 189
193 deshacerCarga() { 190 deshacerCarga() {
194 191
195 if (this.sinonimos.length > 0) { 192 if (this.sinonimos.length > 0) {
196 this.sinonimos = []; 193 this.sinonimos = [];
197 this.productoService.esPromoPersonalizada = false; 194 this.productoService.esPromoPersonalizada = false;
198 this.popoverDirective.hide(); 195 this.popoverDirective.hide();
199 } 196 }
200 197
201 if (this.promoAcargar) { 198 if (this.promoAcargar) {
202 this.promoAcargar = undefined; 199 this.promoAcargar = undefined;
203 if (this.productoAcargar.PRO) { 200 if (this.productoAcargar.PRO) {
204 this.productoAcargar = undefined; 201 this.productoAcargar = undefined;
205 this.promociones = []; 202 this.promociones = [];
206 this.popoverDirective.hide(); 203 this.popoverDirective.hide();
207 } else { 204 } else {
208 this.popoverDirective.show(); 205 this.popoverDirective.show();
209 } 206 }
210 } else { 207 } else {
211 this.productoAcargar = undefined; 208 this.productoAcargar = undefined;
212 this.promociones = []; 209 this.promociones = [];
213 this.popoverDirective.hide(); 210 this.popoverDirective.hide();
214 } 211 }
215 } 212 }
216 213
217 } 214 }
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ ae69d09
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"> 11 <div class="row m-0 pr-2">
12 <div class="col"> 12 <div class="col">
13 <div class="row" *ngFor="let sinonimo of popoverContent; let i = index"> 13 <div class="row" *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 py-2">
17 <div class="col-12">
18 <div class="btn-group float-right my-auto" role="group">
19 <button
20 type="button"
21 class="btn btn-light my-auto border shadow"
22 (click)="sumarCantidadPromo()">
23 <i class="fa fa-plus" aria-hidden="true"></i>
24 </button>
25 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
26 <small
27 class="font-weight-bold">
28 {{cantidadPromo}}
29 </small>
30 </div>
31 <button
32 type="button"
33 class="btn btn-light my-auto border shadow"
34 (click)="restarCantidadPromo()"
35 [disabled]="cantidadRestanteSinonimos < cantidadOriginal || cantidadPromo === 1">
36 <i class="fa fa-minus" aria-hidden="true"></i>
37 </button>
38 </div>
39 </div>
40 </div>
41
42 <div class="row bg-white text-dark m-0 py-1 shadow"> 16 <div class="row bg-white text-dark m-0 py-1 shadow">
43 <div class="col text-left"> 17 <div class="col text-left">
44 <p class="h5 m-0 card-title"> 18 <p class="h5 m-0 card-title">
45 Elija opción - 19 Elija opción -
46 <span [ngClass]=" 20 <span [ngClass]="
47 { 21 {
48 'text-success': cantidadRestanteSinonimos == 0, 22 'text-success': cantidadRestanteSinonimos == 0,
49 'text-danger': cantidadRestanteSinonimos > 0 23 'text-danger': cantidadRestanteSinonimos > 0
50 }"> 24 }">
51 Cantidad Restante {{cantidadRestanteSinonimos}} 25 Cantidad Restante {{cantidadRestanteSinonimos}}
52 </span> 26 </span>
53 </p> 27 </p>
54 </div> 28 </div>
55 </div> 29 </div>
56 30
57 <div class="row m-0 popover-size overflow-scroll"> 31 <div class="row m-0 popover-size overflow-scroll">
58 <div class="col-12 p-0"> 32 <div class="col-12 p-0">
59 <div class="row m-0 my-2 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> 33 <div class="row m-0 my-2 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
60 <div class="col-7 p-0 h6 text-right"> 34 <div class="col-7 p-0 h6 text-right">
61 <p class="m-0 font-weight-normal"> 35 <p class="m-0 font-weight-normal">
62 {{producto.DetArt}} 36 {{producto.DetArt}}
63 </p> 37 </p>
64 </div> 38 </div>
65 <!-- SUMA -RESTA CANTIDAD DE PRODUCTOS --> 39 <!-- SUMA -RESTA CANTIDAD DE PRODUCTOS -->
66 <div class="col-5 pr-0"> 40 <div class="col-5 pr-0">
67 <div class="btn-group float-right my-auto" role="group"> 41 <div class="btn-group float-right my-auto" role="group">
68 <button 42 <button
69 type="button" 43 type="button"
70 class="btn btn-light my-auto border shadow" 44 class="btn btn-light my-auto border shadow"
71 (click)="sumarCantidad(producto, i)"> 45 (click)="sumarCantidad(producto, i)">
72 <i class="fa fa-plus" aria-hidden="true"></i> 46 <i class="fa fa-plus" aria-hidden="true"></i>
73 </button> 47 </button>
74 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5"> 48 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
75 <small 49 <small
76 [ngClass]="{'font-weight-bold': producto.cantidad > 0}"> 50 [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
77 {{producto.cantidad}} 51 {{producto.cantidad}}
78 </small> 52 </small>
79 </div> 53 </div>
80 <button 54 <button
81 type="button" 55 type="button"
82 class="btn btn-light my-auto border shadow" 56 class="btn btn-light my-auto border shadow"
83 (click)="restarCantidad(producto, i)"> 57 (click)="restarCantidad(producto, i)">
84 <i class="fa fa-minus" aria-hidden="true"></i> 58 <i class="fa fa-minus" aria-hidden="true"></i>
85 </button> 59 </button>
86 </div> 60 </div>
87 </div> 61 </div>
88 </div> 62 </div>
89 </div> 63 </div>
90 </div> 64 </div>
91 65
92 </div> 66 </div>
93 </div> 67 </div>
94 </div> 68 </div>
95 </div> 69 </div>
96 70
97 <div class="row m-0"> 71 <div class="row m-0">
98 <div class="col"> 72 <div class="col">
99 <button 73 <button
100 [disabled]="cantidadRestanteSinonimos > 0" 74 [disabled]="cantidadRestanteSinonimos > 0"
101 type="button" 75 type="button"
102 class="btn btn-block btn-light shadow" 76 class="btn btn-block btn-light shadow"
103 (click)="continuar()"> 77 (click)="continuar()">
104 <span class="font-weight-bold pr-2">Continuar</span> 78 <span class="font-weight-bold pr-2">Continuar</span>
105 <i class="fa fa-check text-success" aria-hidden="true"></i> 79 <i class="fa fa-check text-success" aria-hidden="true"></i>
106 </button> 80 </button>
107 </div> 81 </div>
108 </div> 82 </div>
109 83
110 </div> 84 </div>
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ ae69d09
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<any>(); 17 @Output() productosPersonalizados = new EventEmitter<Producto[]>();
18 private cantMin: number = 1;
19 private cantMax: number = 50;
20 private cantidadRestanteSinonimos: number = 0; 18 private cantidadRestanteSinonimos: number = 0;
21 private cantidadOriginal: number = 0;
22 private cantidadPromo: number = 1;
23 19
24 constructor(private productoService: ProductoService) { } 20 constructor(private productoService: ProductoService) { }
25 21
26 ngOnInit() { 22 ngOnInit() {
27 23
28 this.popoverContent.forEach(sinonimo => { 24 this.popoverContent.forEach(sinonimo => {
29 25
30 sinonimo.productos.forEach((producto, index) => { 26 sinonimo.productos.forEach((producto, index) => {
31 27
32 if (this.productoService.esPromoPersonalizada) { 28 if (this.productoService.esPromoPersonalizada) {
33 producto.cantidad = producto.cantidad ? producto.cantidad : 0; 29 producto.cantidad = producto.cantidad ? producto.cantidad : 0;
34 this.cantidadRestanteSinonimos = 0; 30 this.cantidadRestanteSinonimos = 0;
35 this.cantidadOriginal = 0;
36 } else { 31 } else {
37 this.cantidadRestanteSinonimos += producto.cantidad ? producto.cantidad : 0; 32 this.cantidadRestanteSinonimos += producto.cantidad ? producto.cantidad : 0;
38 this.cantidadOriginal += producto.cantidad ? producto.cantidad : 0;
39 producto.cantidad = 0; 33 producto.cantidad = 0;
40 } 34 }
41 35
42 }) 36 })
43 }) 37 })
44 } 38 }
45 39
46 continuar() { 40 continuar() {
47 41
48 //Si aún quedan articulos que agregar no deja continuar. 42 //Si aún quedan articulos que agregar no deja continuar.
49 if (this.cantidadRestanteSinonimos > 0) return; 43 if (this.cantidadRestanteSinonimos > 0) return;
50 var productosAenviar: Producto[] = []; 44 var productosAenviar: Producto[] = [];
51 45
52 this.popoverContent.forEach(sinonimo => { 46 this.popoverContent.forEach(sinonimo => {
53 47
54 sinonimo.productos.forEach(producto => { 48 sinonimo.productos.forEach(producto => {
55 49
56 if (producto.cantidad > 0) { 50 if (producto.cantidad > 0) {
57 producto.idSinonimo = sinonimo.ID_SIN; 51 producto.idSinonimo = sinonimo.ID_SIN;
58
59 productosAenviar.push(producto); 52 productosAenviar.push(producto);
60 } 53 }
61 }) 54 })
62 }) 55 })
63 56
64 this.productosPersonalizados.emit({productosAenviar: productosAenviar, cantidadPromo: this.cantidadPromo}); 57 this.productosPersonalizados.emit(productosAenviar);
65 this.popover.hide(); 58 this.popover.hide();
66 } 59 }
67 60
68 sumarCantidad(producto: Producto, i: number) { 61 sumarCantidad(producto: Producto, i: number) {
69 62
70 if (this.cantidadRestanteSinonimos === 0) return; 63 if (this.cantidadRestanteSinonimos === 0) return;
71 producto.cantidad++; 64 producto.cantidad++;
72 this.cantidadRestanteSinonimos--; 65 this.cantidadRestanteSinonimos--;
73 } 66 }
74 67
75 restarCantidad(producto: Producto, i: number) { 68 restarCantidad(producto: Producto, i: number) {
76 69
77 if (this.cantidadRestanteSinonimos === this.popoverContent[i].cantidad) return; 70 if (this.cantidadRestanteSinonimos === this.popoverContent[i].cantidad) return;
78 if (producto.cantidad === 0) return; 71 if (producto.cantidad === 0) return;
79 producto.cantidad--; 72 producto.cantidad--;
80 this.cantidadRestanteSinonimos++; 73 this.cantidadRestanteSinonimos++;
81 } 74 }
82
83 sumarCantidadPromo() {
84
85 if (this.cantidadPromo < this.cantMax) {
86 this.cantidadPromo++;
87 this.cantidadRestanteSinonimos += this.cantidadOriginal;
88 }
89 }
90
91 restarCantidadPromo() {
92
93 if (this.cantidadPromo > this.cantMin) {
94 this.cantidadPromo--;
95 this.cantidadRestanteSinonimos -= this.cantidadOriginal;
96 }
97 }
98
99 } 75 }
100 76
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ ae69d09
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white pb-2"> 4 <p class="h4 border-bottom border-white text-white 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-scroll px-1 mb-1 w-100"> 9 <div class="overflow-scroll px-1 mb-1 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div class="row m-0" 11 <div class="row m-0"
12 *ngFor="let producto of productosCarrito; let i = index" 12 *ngFor="let producto of productosCarrito; let i = index"
13 [@EnterLeave]="flyIn"> 13 [@EnterLeave]="flyIn">
14 <div class="col p-0 my-1 bg-white border-0 rounded-sm"> 14 <div class="col p-0 my-1 bg-white border-0 rounded-sm">
15 <div class="row m-0"> 15 <div class="row m-0">
16 <div class="col-6 pl-1 pr-0 my-auto"> 16 <div class="col-6 pl-1 pr-0 my-auto">
17 <img 17 <img
18 class="w-100 float-left rounded-sm shadow" 18 class="w-100 float-left rounded-sm shadow"
19 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"> 19 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
20 </div> 20 </div>
21 <div class="col-6 px-1"> 21 <div class="col-6 px-1">
22 <!-- BOTONES --> 22 <!-- BOTONES -->
23 <div class="row m-0 d-flex justify-content-between"> 23 <div class="row m-0 d-flex justify-content-between">
24 24
25 <!-- SUMAR - RESTAR CANTIDAD --> 25 <!-- SUMAR - RESTAR CANTIDAD -->
26 <div class="col p-1"> 26 <div class="col p-1">
27 <div class="btn-group-sm btn-group float-left" role="group"> 27 <div class="btn-group-sm btn-group float-left" role="group">
28 <button 28 <button
29 type="button" 29 type="button"
30 class="btn btn-light btn-sm border shadow" 30 class="btn btn-light btn-sm border shadow"
31 (click)="aumentarCantidad(producto)" 31 (click)="aumentarCantidad(producto)">
32 [hidden]="producto.PRO">
33 <i class="fa fa-plus" aria-hidden="true"></i> 32 <i class="fa fa-plus" aria-hidden="true"></i>
34 </button> 33 </button>
35 <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow"> 34 <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
36 <small>{{producto.cantidad}}</small> 35 <small>{{producto.cantidad}}</small>
37 </div> 36 </div>
38 <button 37 <button
39 type="button" 38 type="button"
40 class="btn btn-light btn-sm border shadow" 39 class="btn btn-light btn-sm border shadow"
41 (click)="restarCantidad(producto)" 40 (click)="restarCantidad(producto)">
42 [hidden]="producto.PRO">
43 <i class="fa fa-minus" aria-hidden="true"></i> 41 <i class="fa fa-minus" aria-hidden="true"></i>
44 </button> 42 </button>
45 </div> 43 </div>
46 </div> 44 </div>
47 45
48 <!-- PERSONALIZAR --> 46 <!-- PERSONALIZAR -->
49 <div class="col p-1"> 47 <div class="col p-1">
50 <button 48 <button
51 *ngIf="producto.tieneSinonimos" 49 *ngIf="producto.tieneSinonimos"
52 type="button" 50 type="button"
53 class="btn btn-light btn-sm float-left border shadow" 51 class="btn btn-light btn-sm float-left border shadow"
54 (click)="personalizarPromo(producto, i)"> 52 (click)="personalizarPromo(producto, i)">
55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 53 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
56 </button> 54 </button>
57 </div> 55 </div>
58 56
59 <!-- BORRAR --> 57 <!-- BORRAR -->
60 <div class="col p-1"> 58 <div class="col p-1">
61 <button 59 <button
62 type="button" 60 type="button"
63 class="btn btn-secondary btn-sm float-right shadow" 61 class="btn btn-secondary btn-sm float-right shadow"
64 (click)="deleteProducto(producto, i)"> 62 (click)="deleteProducto(producto, i)">
65 <i class="fa fa-trash" aria-hidden="true"></i> 63 <i class="fa fa-trash" aria-hidden="true"></i>
66 </button> 64 </button>
67 </div> 65 </div>
68 </div> 66 </div>
69 </div> 67 </div>
70 </div> 68 </div>
71 <div class="row m-0 shadow rounded-sm"> 69 <div class="row m-0 shadow rounded-sm">
72 <div class="col px-2"> 70 <div class="col px-2">
73 <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p> 71 <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
74 <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p> 72 <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
75 </div> 73 </div>
76 </div> 74 </div>
77 </div> 75 </div>
78 </div> 76 </div>
79 </div> 77 </div>
80 78
81 <!-- TOTAL --> 79 <!-- TOTAL -->
82 <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0"> 80 <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
83 <div class="card-body p-2 pt-3 row m-0"> 81 <div class="card-body p-2 pt-3 row m-0">
84 <div class="col-12 p-0"> 82 <div class="col-12 p-0">
85 <p 83 <p
86 class="h4 border-bottom border-secondary text-secondary pb-2"> 84 class="h4 border-bottom border-secondary text-secondary pb-2">
87 ({{getCantidadProductos()}}) artículos 85 ({{getCantidadProductos()}}) artículos
88 </p> 86 </p>
89 <p class="h4 text-secondary">Total</p> 87 <p class="h4 text-secondary">Total</p>
90 <p class="h2 font-weight-bold">{{getTotal() | currency}}</p> 88 <p class="h2 font-weight-bold">{{getTotal() | currency}}</p>
91 </div> 89 </div>
92 <div class="col-12 p-0"> 90 <div class="col-12 p-0">
93 <button 91 <button
94 *ngIf="getCantidadProductos() > 0" 92 *ngIf="getCantidadProductos() > 0"
95 type="button" 93 type="button"
96 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 94 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
97 routerLink="/confirmacion-carrito"> 95 routerLink="/confirmacion-carrito">
98 <span class="font-weight-bold pr-1">Pagar</span> 96 <span class="font-weight-bold pr-1">Pagar</span>
99 <i class="fa fa-check text-success" aria-hidden="true"></i> 97 <i class="fa fa-check text-success" aria-hidden="true"></i>
100 </button> 98 </button>
101 <button 99 <button
102 type="button" 100 type="button"
103 class="btn btn-block btn-light shadow btn-sm shadow" 101 class="btn btn-block btn-light shadow btn-sm shadow"
104 [routerLink]="['/cancelar-compra']"> 102 [routerLink]="['/cancelar-compra']">
105 <span class="pr-1">Cancelar</span> 103 <span class="pr-1">Cancelar</span>
106 <i class="fa fa-times text-danger" aria-hidden="true"></i> 104 <i class="fa fa-times text-danger" aria-hidden="true"></i>
107 </button> 105 </button>
108 </div> 106 </div>
109 </div> 107 </div>
110 </div> 108 </div>
111 </div> 109 </div>
112 110