Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit e89398eb9e98b56ef0a02997e315657d54924f39

Authored by Marcelo Puebla
2 parents 64226e7eed cd58fc31dc
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(benjamin)

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