Commit 6bcc15aa08d3274d620d0f5780e97a05d337aa43
1 parent
64226e7eed
Exists in
master
and in
1 other branch
funcion de agregar cantidad de promociones
Showing
7 changed files
with
74 additions
and
19 deletions
Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
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 | | 13 | |
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/inicio/inicio.component.ts
1 | import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; | 1 | import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; |
2 | import { PopoverDirective } from 'ngx-bootstrap'; | 2 | import { PopoverDirective } from 'ngx-bootstrap'; |
3 | import { appSettings } from 'src/etc/AppSettings'; | 3 | import { appSettings } from 'src/etc/AppSettings'; |
4 | import { Router } from '@angular/router'; | 4 | import { Router } from '@angular/router'; |
5 | import { ProductoService } from 'src/app/services/producto.service'; | 5 | import { ProductoService } from 'src/app/services/producto.service'; |
6 | import { Producto } from 'src/app/wrappers/producto'; | 6 | import { Producto } from 'src/app/wrappers/producto'; |
7 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; | 7 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; |
8 | 8 | ||
9 | @Component({ | 9 | @Component({ |
10 | selector: 'app-inicio', | 10 | selector: 'app-inicio', |
11 | templateUrl: './inicio.component.html', | 11 | templateUrl: './inicio.component.html', |
12 | styleUrls: ['./inicio.component.scss'] | 12 | styleUrls: ['./inicio.component.scss'] |
13 | }) | 13 | }) |
14 | export class InicioComponent implements OnInit, AfterViewInit { | 14 | export class InicioComponent implements OnInit, AfterViewInit { |
15 | 15 | ||
16 | private tienePromo = false; | 16 | private tienePromo = false; |
17 | private productoEsPromo = false; | 17 | private productoEsPromo = false; |
18 | private busqueda: string = ''; | 18 | private busqueda: string = ''; |
19 | private productoAcargar: Producto; | 19 | private productoAcargar: Producto; |
20 | private promoAcargar: Producto; | 20 | private promoAcargar: Producto; |
21 | private productos: Producto[] = []; | 21 | private productos: Producto[] = []; |
22 | private promociones: Producto[] = []; | 22 | private promociones: Producto[] = []; |
23 | private sinonimos: Sinonimo[] = []; | 23 | private sinonimos: Sinonimo[] = []; |
24 | private apiImagenes: string = appSettings.apiImagenes; | 24 | private apiImagenes: string = appSettings.apiImagenes; |
25 | 25 | ||
26 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; | 26 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; |
27 | 27 | ||
28 | @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { | 28 | @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { |
29 | 29 | ||
30 | if (e.keyCode == 13) { | 30 | if (e.keyCode == 13) { |
31 | this.buscarByCodigoBarras(this.busqueda); | 31 | this.buscarByCodigoBarras(this.busqueda); |
32 | this.busqueda = ''; | 32 | this.busqueda = ''; |
33 | } else { | 33 | } else { |
34 | this.busqueda += e.key; | 34 | this.busqueda += e.key; |
35 | } | 35 | } |
36 | |||
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-promos/popover-promos.component.ts
1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; | 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; |
2 | import { PopoverDirective } from 'ngx-bootstrap/popover'; | 2 | import { PopoverDirective } from 'ngx-bootstrap/popover'; |
3 | import { Producto } from 'src/app/wrappers/producto'; | 3 | import { Producto } from 'src/app/wrappers/producto'; |
4 | 4 | ||
5 | @Component({ | 5 | @Component({ |
6 | selector: 'app-popover-promos', | 6 | selector: 'app-popover-promos', |
7 | templateUrl: './popover-promos.component.html', | 7 | templateUrl: './popover-promos.component.html', |
8 | styleUrls: ['./popover-promos.component.scss'] | 8 | styleUrls: ['./popover-promos.component.scss'] |
9 | }) | 9 | }) |
10 | export class PopoverPromosComponent implements OnInit { | 10 | export class PopoverPromosComponent implements OnInit { |
11 | 11 | ||
12 | @Input() popover: PopoverDirective; | 12 | @Input() popover: PopoverDirective; |
13 | @Input() popoverContent: Producto[]; | 13 | @Input() popoverContent: Producto[]; |
14 | @Output() promoSeleccionada = new EventEmitter<Producto>(); | 14 | @Output() promoSeleccionada = new EventEmitter<Producto>(); |
15 | 15 | ||
16 | constructor() { } | 16 | constructor() { } |
17 | 17 | ||
18 | ngOnInit() { | 18 | ngOnInit() { |
19 | } | 19 | } |
20 | 20 | ||
21 | hide() { | 21 | hide() { |
22 | this.popover.hide(); | 22 | this.popover.hide(); |
23 | } | 23 | } |
24 | 24 | ||
25 | seleccionarPromo(promo: Producto) { | 25 | seleccionarPromo(promo: Producto) { |
26 | 26 | ||
27 | this.promoSeleccionada.emit(promo); | 27 | this.promoSeleccionada.emit(promo); |
28 | } | 28 | } |
29 | 29 | ||
30 | calcularPrecioDePromo(promo: Producto) { | 30 | calcularPrecioDePromo(promo: Producto) { |
31 | 31 | ||
32 | promo.PreVen = 0; | 32 | promo.PreVen = 0; |
33 | promo.productos.forEach(producto => { | 33 | promo.productos.forEach(producto => { |
34 | promo.PreVen += producto.PreVen; | 34 | promo.PreVen += producto.PreVen; |
35 | }) | 35 | }) |
36 | return promo.PreVen; | 36 | return promo.PreVen; |
37 | } | 37 | } |
38 | 38 | ||
39 | } | 39 | } |
40 | 40 |
src/app/components/popover-sinonimos/popover-sinonimos.component.html
1 | <div class="card-body fade-left"> | 1 | <div class="card-body fade-left"> |
2 | 2 | ||
3 | <div class="row m-0"> | 3 | <div class="row m-0"> |
4 | <div class="col text-left"> | 4 | <div class="col text-left"> |
5 | <p class="h4 card-title"> | 5 | <p class="h4 card-title"> |
6 | Personalice su pedido | 6 | Personalice su pedido |
7 | </p> | 7 | </p> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | 10 | ||
11 | <div class="row m-0 pr-2 my-2"> | 11 | <div class="row m-0 pr-2 my-2"> |
12 | <div class="col"> | 12 | <div class="col"> |
13 | <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index"> | 13 | <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index"> |
14 | <div class="col p-0"> | 14 | <div class="col p-0"> |
15 | 15 | ||
16 | <div class="row 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
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
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 |
src/etc/AppSettings..ts
File was created | 1 | export const appSettings = { | |
2 | apiUrl: 'http://localhost:4705/autoservicio', | ||
3 | apiImagenes: 'http://localhost:5635', | ||
4 | apiClientes: 'http://localhost:1515/clientes' | ||
5 | }; | ||
6 |