Martin Macola / autoservicio

Download as
Browse Code »

Commit b695e77f11fd45d9cf23e911ee6ab1e47bb8cb0d

Authored by Marcelo Puebla
1 parent 0b89cb8931
Exists in master

Logica para cargar productos al carrito.

Showing 6 changed files with 140 additions and 85 deletions   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ b695e77
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos(false)" 16 (click)="irBusquedaProductos(false)"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-7"> 20 <div class="col-7">
21 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-5 p-0"> 23 <div class="col-5 p-0">
24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-75 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-75 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-75 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
39 </div>
40 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
39 </div> 42 </div>
40 </div> 43 </div>
41 </div> 44 </div>
42 </div> 45 </div>
43 46
44 <!-- ORDENAR --> 47 <!-- ORDENAR -->
45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
46 <div class="card-body text-left px-4 py-3"> 49 <div class="card-body text-left px-4 py-3">
47 <div class="row"> 50 <div class="row">
48 <div class="col-5"> 51 <div class="col-5">
49 <p class="h3 card-title">Ordenar Pedido</p> 52 <p class="h3 card-title">Ordenar Pedido</p>
50 </div> 53 </div>
51 <div class="col-7 p-0"> 54 <div class="col-7 p-0">
52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
53 </div> 56 </div>
54 </div> 57 </div>
55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
56 </div> 59 </div>
57 <img 60 <img
58 class="card-img-bottom d-block w-100 mx-auto rounded" 61 class="card-img-bottom d-block w-100 mx-auto rounded"
59 src="{{apiUrl}}/imagenes/cafe.jpg"> 62 src="{{apiUrl}}/imagenes/cafe.jpg">
60 </div> 63 </div>
61 </div> 64 </div>
62 65
63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
64 67
65 <!-- CARGAR PRODUCTOS --> 68 <!-- CARGAR PRODUCTOS -->
66 <ng-template #popTemplate> 69 <ng-template #popTemplate>
67 <app-popover-promos 70 <app-popover-promos
68 *ngIf="promociones.length > 0 && sinonimos.length === 0" 71 *ngIf="promociones.length > 0 && sinonimos.length === 0"
69 [popover]="popoverDirective" 72 [popover]="popoverDirective"
70 [popoverContent]="promociones" 73 [popoverContent]="promociones"
71 (promoSeleccionada)="promoSeleccionada($event)" 74 (promoSeleccionada)="promoSeleccionada($event)"
72 class="text-white rounded-sm border-0"> 75 class="text-white rounded-sm border-0">
73 </app-popover-promos> 76 </app-popover-promos>
74 <app-popover-sinonimos 77 <app-popover-sinonimos
75 *ngIf="sinonimos.length > 0" 78 *ngIf="sinonimos.length > 0"
76 [popover]="popoverDirective" 79 [popover]="popoverDirective"
77 [popoverContent]="sinonimos" 80 [popoverContent]="sinonimos"
78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)" 81 (productosPersonalizados)="productosPersonalizados($event)"
79 class="text-white rounded-sm border-0"> 82 class="text-white rounded-sm border-0">
80 </app-popover-sinonimos> 83 </app-popover-sinonimos>
81 </ng-template> 84 </ng-template>
82 <div 85 <div
83 placement="left" 86 placement="left"
84 triggers="" 87 triggers=""
85 [popover]="popTemplate" 88 [popover]="popTemplate"
86 class="w-100" 89 class="w-100"
87 #pop="bs-popover"> 90 #pop="bs-popover">
88 <div class="card bg-white border-0 shadow rounded mb-auto"> 91 <div class="card bg-white border-0 shadow rounded mb-auto">
89 <div class="card-body text-left px-4 py-3"> 92 <div class="card-body text-left px-4 py-3">
90 <div class="row"> 93 <div class="row">
91 <div class="col-6"> 94 <div class="col-6">
92 <p class="h3 card-title">Cargar Productos</p> 95 <p class="h3 card-title">Cargar Productos</p>
93 </div> 96 </div>
94 <div class="col-6 p-0"> 97 <div class="col-6 p-0">
95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
96 </div> 99 </div>
97 </div> 100 </div>
98 <p class="h5 card-text text-muted font-weight-light"> 101 <p class="h5 card-text text-muted font-weight-light">
99 Coloque un producto frente<br> 102 Coloque un producto frente<br>
100 al lector de códigos o selecciónelo en pantalla 103 al lector de códigos o selecciónelo en pantalla
101 </p> 104 </p>
102 </div> 105 </div>
103 <div class="row m-4"> 106 <div class="row m-4">
104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
105 <!-- IMAGEN DE ESCANER --> 108 <!-- IMAGEN DE ESCANER -->
106 <img 109 <img
107 *ngIf="!productoAcargar" 110 *ngIf="!productoAcargar"
108 class="card-img-top d-block w-100 mx-auto rounded-sm" 111 class="card-img-top d-block w-100 mx-auto rounded-sm"
109 src="{{apiUrl}}/imagenes/escanner.jpg"> 112 src="{{apiUrl}}/imagenes/escanner.jpg">
110 113
111 <!-- PRODUCTO A CARGAR --> 114 <!-- PRODUCTO A CARGAR -->
112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
113 <img 116 <img
114 class="card-img-top d-block w-75 mx-auto rounded-sm" 117 class="card-img-top d-block w-75 mx-auto rounded-sm"
115 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
116 119
117 <div class="row justify-content-between m-3"> 120 <div class="row justify-content-between m-3">
118 <div class="col-12 text-left px-1"> 121 <div class="col-12 text-left px-1">
119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
120 </div> 123 </div>
121 <div class="col-12 text-right mt-2"> 124 <div class="col-12 text-right mt-2">
122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
123 </div> 126 </div>
124 </div> 127 </div>
125 </div> 128 </div>
126 129
127 <!-- PROMO A CARGAR --> 130 <!-- PROMO A CARGAR -->
128 <div class="fade-in m-0" *ngIf="promoAcargar"> 131 <div class="fade-in m-0" *ngIf="promoAcargar">
129 <img 132 <!-- <img
130 class="card-img-top d-block w-100 mx-auto rounded-sm" 133 class="card-img-top d-block w-100 mx-auto rounded-sm"
131 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 134 src="{{apiUrl}}/imagenes/{{promoAcargar. imagenes[0].imagen}}"> -->
132 135
133 <div class="row justify-content-between m-3"> 136 <div class="row justify-content-between m-3">
134 <div class="col-12 text-left px-1"> 137 <div class="col-12 text-left px-1">
135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
136 </div> 139 </div>
137 <div class="col-12 text-right mt-2 align-self-end"> 140 <div class="col-12 text-right mt-2 align-self-end">
138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p> 141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
139 </div> 142 </div>
140 </div> 143 </div>
141 </div> 144 </div>
142 145
143 </div> 146 </div>
144 <!-- BOTONES DE CARGAR PRODUCTOS--> 147 <!-- BOTONES DE CARGAR PRODUCTOS-->
145 <div 148 <div
146 class="col-5 pr-0" 149 class="col-5 pr-0"
147 *ngIf="promociones.length > 0"> 150 *ngIf="promociones.length > 0">
148 <button 151 <button
149 *ngIf="sinonimos.length > 0" 152 *ngIf="sinonimos.length > 0"
150 type="button" 153 type="button"
151 class="btn btn-light btn-block shadow-sm" 154 class="btn btn-light btn-block shadow-sm"
152 (click)="pop.show()"> 155 (click)="pop.show()">
153 <span class="pr-2">Personalizar</span> 156 <span class="pr-2">Personalizar</span>
154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
155 </button> 158 </button>
156 <button 159 <button
157 *ngIf="!promoAcargar" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
158 type="button" 161 type="button"
159 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
160 (click)="pop.show()"> 163 (click)="pop.show()">
161 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
163 </button> 166 </button>
164 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 167 <button
168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()">
165 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
166 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
167 </button> 173 </button>
168 <button 174 <button
169 type="button" 175 type="button"
170 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
171 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
172 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
173 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
174 </button> 180 </button>
175 </div> 181 </div>
176 </div> 182 </div>
177 </div> 183 </div>
178 </div> 184 </div>
179 185
180 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
181 <div (click)="irBusquedaProductos(true)" 187 <div (click)="irBusquedaProductos(true)"
182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
183 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
184 <div class="row"> 190 <div class="row">
185 <div class="col-6"> 191 <div class="col-6">
186 <p class="h3 card-title">Buscar Productos</p> 192 <p class="h3 card-title">Buscar Productos</p>
187 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
188 Busque aquí los productos<br> 194 Busque aquí los productos<br>
189 que no tienen código </p> 195 que no tienen código </p>
190 </div> 196 </div>
191 <div class="col-6 p-0"> 197 <div class="col-6 p-0">
192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
193 </div> 199 </div>
194 </div> 200 </div>
195 201
196 </div> 202 </div>
197 </div> 203 </div>
198 204
199 </div> 205 </div>
200 206
201 </div> 207 </div>
202 208
203 </div> 209 </div>
204 </div> 210 </div>
205 211
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ b695e77
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild, HostListener } 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 { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Producto } from 'src/app/wrappers/producto';
8 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 7 import { Sinonimo } from 'src/app/wrappers/sinonimo';
9 import { HostListener } from '@angular/core';
10 8
11 @Component({ 9 @Component({
12 selector: 'app-inicio', 10 selector: 'app-inicio',
13 templateUrl: './inicio.component.html', 11 templateUrl: './inicio.component.html',
14 styleUrls: ['./inicio.component.scss'] 12 styleUrls: ['./inicio.component.scss']
15 }) 13 })
16 export class InicioComponent implements OnInit { 14 export class InicioComponent implements OnInit {
17 15
18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 16 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
19 17
20 if (e.keyCode == 13) { 18 if (e.keyCode == 13) {
21 this.buscarByCodigoBarras(this.busqueda); 19 this.buscarByCodigoBarras(this.busqueda);
22 this.busqueda = ''; 20 this.busqueda = '';
23 } else { 21 } else {
24 this.busqueda += e.key; 22 this.busqueda += e.key;
25 } 23 }
26 24
27 }; 25 };
28 26
29 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 27 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
30 private productoAcargar: Producto;
31 private productos: Producto[];
32 private promoAcargar: Promocion;
33 private tienePromo = false; 28 private tienePromo = false;
34 private productoEsPromo = false; 29 private productoEsPromo = false;
35 private busqueda: string = ''; 30 private busqueda: string = '';
36 private sinonimoAcargar: Sinonimo;
37 31
38 promociones: Promocion[] = []; 32 private productoAcargar: Producto;
33 private promoAcargar: Producto;
34
35 productos: Producto[] = [];
36 promociones: Producto[] = [];
39 sinonimos: Sinonimo[] = []; 37 sinonimos: Sinonimo[] = [];
40 apiUrl: string = appSettings.apiUrl 38 apiUrl: string = appSettings.apiUrl
41 39
42 constructor( 40 constructor(
43 private router: Router, 41 private router: Router,
44 private productoService: ProductoService) { } 42 private productoService: ProductoService) { }
45 43
46 ngOnInit() { 44 ngOnInit() {
47 45
48 this.productoAcargar = this.productoService.productoAcargar; 46 this.productoAcargar = this.productoService.productoAcargar;
49 this.getPromociones(); 47 if (this.productoAcargar) {
48 if (this.productoAcargar.PRO) {
49 this.promociones.push(this.productoAcargar);
50 this.promoSeleccionada(this.productoAcargar);
51 }
52 else
53 this.getPromociones();
54 }
50 this.getProductos(); 55 this.getProductos();
51 } 56 }
52 57
53 getPromociones() { 58 getPromociones() {
54 if (this.productoAcargar) { 59
55 var sector = this.productoAcargar.CodSec; 60 var sector = this.productoAcargar.CodSec;
56 var codigo = this.productoAcargar.CodArt; 61 var codigo = this.productoAcargar.CodArt;
57 this.productoService.getPromocion(sector, codigo) 62 this.productoService.getPromociones(sector, codigo)
58 .subscribe((res: Promocion[]) => { 63 .subscribe((res: Producto[]) => {
59 64
60 if (res.length === 0) { 65 if (res.length === 0) {
61 //Si no tiene promociones la cargará al carrito despues de un tiempo 66 //Si no tiene promociones la cargará al carrito despues de un tiempo
62 setTimeout(() => { 67 setTimeout(() => {
63 this.productoService.productos.push(this.productoAcargar); 68 this.productoService.productos.push(this.productoAcargar);
64 this.productoAcargar = this.productoService.productoAcargar = undefined; 69 this.productoAcargar = this.productoService.productoAcargar = undefined;
65 }, 2000) 70 }, 2000)
66 } else { 71 } else {
67 72
68 this.promociones = res; 73 this.promociones = res;
69 this.popoverDirective.show(); 74 this.popoverDirective.show();
70 } 75 }
71 }, error => { console.error(error); }) 76 }, error => { console.error(error); })
72 }
73 } 77 }
74 78
75 showPopover() { 79 showPopover() {
76 80
77 this.popoverDirective.show(); 81 this.popoverDirective.show();
78 } 82 }
79 83
80 getProductos() { 84 getProductos() {
81 this.productoService.getAll() 85 this.productoService.getAll()
82 .subscribe((productos: Producto[]) => { 86 .subscribe((productos: Producto[]) => {
83 this.productos = productos; 87 this.productos = productos;
84 }); 88 });
85 } 89 }
86 90
87 private irBusquedaProductos(verPromociones) { 91 irBusquedaProductos(verPromociones) {
88 92
89 this.productoService.verCategoriasProductos = verPromociones; 93 this.productoService.verCategoriasProductos = verPromociones;
90 this.router.navigate(['busqueda-productos']); 94 this.router.navigate(['busqueda-productos']);
91 } 95 }
92 96
97 confirmarProducto() {
98
99 this.productoService.productos.push(this.promoAcargar);
100 this.promoAcargar = undefined;
101 this.productoAcargar = undefined;
102 this.promociones = [];
103 this.popoverDirective.hide();
104 }
105
93 deshacerCarga() { 106 deshacerCarga() {
94 107
95 if (this.sinonimoAcargar || this.sinonimos.length > 0) { 108 if (this.sinonimos.length > 0) {
96 this.sinonimos = []; 109 this.sinonimos = [];
97 this.sinonimoAcargar = undefined;
98 this.popoverDirective.hide(); 110 this.popoverDirective.hide();
99 } 111 }
100 112
101 if (this.promoAcargar) { 113 if (this.promoAcargar) {
102 this.promoAcargar = undefined; 114 this.promoAcargar = undefined;
103 this.popoverDirective.show(); 115 if(this.productoAcargar.PRO){
116 this.productoAcargar = undefined;
117 this.promociones = [];
118 this.popoverDirective.hide();
119 }else{
120 this.popoverDirective.show();
121 }
104 } else { 122 } else {
105 this.productoAcargar = undefined; 123 this.productoAcargar = undefined;
106 this.promociones = []; 124 this.promociones = [];
107 this.popoverDirective.hide(); 125 this.popoverDirective.hide();
108 } 126 }
109 } 127 }
110 128
111 promoSeleccionada($event: Promocion) { 129 promoSeleccionada($event: Producto) {
112 130
113 this.promoAcargar = $event; 131 this.promoAcargar = $event;
114 this.popoverDirective.hide(); 132 this.promoAcargar.tieneSinonimos = true;
115 if (this.promoAcargar.sinonimos) { 133 if (this.promoAcargar.tieneSinonimos) {
116 var sector = this.promoAcargar.sector; 134 var sector = this.promoAcargar.CodSec;
117 var codigo = this.promoAcargar.codigo; 135 var codigo = this.promoAcargar.CodArt;
118 this.productoService.getPromocionSinonimos(sector, codigo) 136 this.productoService.getPromocionSinonimos(sector, codigo)
119 .subscribe((res: Sinonimo[]) => { 137 .subscribe((res: Sinonimo[]) => {
120 138
121 res.forEach(resSinonimo => { 139 res.forEach(sinonimo => {
122 140
123 this.promoAcargar.productos.forEach(productoPromo => { 141 sinonimo.productos.forEach(productoSinonimo => {
124 142
125 if (productoPromo.idSinonimo === resSinonimo.ID_SIN) { 143 this.promoAcargar.productos.forEach(productoPromo => {
126 resSinonimo.cantidad = productoPromo.cantidad;
127 resSinonimo.productoPadre = productoPromo.id;
128 }
129 });
130 144
145 if (productoSinonimo.id === productoPromo.id) {
146 sinonimo.cantidad = productoPromo.cantidad;
147 sinonimo.productoPadre = productoPromo.id;
148 }
149 })
150 })
131 }) 151 })
152
132 this.sinonimos = res; 153 this.sinonimos = res;
133 this.showPopover(); 154 if (res.length > 0)
155 this.showPopover();
134 }) 156 })
157 } else {
158 this.popoverDirective.hide();
135 } 159 }
136 } 160 }
137 161
138 sinonimoSeleccionado($event: Sinonimo) { 162 productosPersonalizados($event: Producto[]) {
163
164 var productosPersonalizados = $event;
165
166 this.promoAcargar.productos.forEach(productoPromo => {
167
168 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
169 })
139 170
140 console.log($event); 171 this.promoAcargar.productos = productosPersonalizados;
141 this.sinonimoAcargar = $event;
142 } 172 }
143 173
144 buscarByCodigoBarras(busqueda) { 174 buscarByCodigoBarras(busqueda) {
145 175
146 let producto = this.productos.filter(producto => { 176 let producto = this.productos.filter(producto => {
147 return producto.codigoBarra == busqueda; 177 return producto.codigoBarra == busqueda;
148 }); 178 });
src/app/components/popover-promos/popover-promos.component.html
Diff comments   View file @ b695e77
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 <div class="row"> 2 <div class="row">
3 <div class="col text-left"> 3 <div class="col text-left">
4 <p class="h5 card-title"> 4 <p class="h5 card-title">
5 Este producto forma parte<br> 5 Este producto forma parte<br>
6 de Combos y Promociones 6 de Combos y Promociones
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="overflow-scroll popover-size pr-2"> 11 <div class="overflow-scroll popover-size pr-2">
12 <div 12 <div
13 class="row my-2" 13 class="row my-2"
14 *ngFor="let promo of popoverContent"> 14 *ngFor="let promo of popoverContent">
15 <div class="col text-dark"> 15 <div class="col text-dark">
16 <div 16 <div
17 class="bg-white card-effect rounded-sm p-2 px-3" 17 class="bg-white card-effect rounded-sm p-2 px-3"
18 (click)="seleccionarPromo(promo)"> 18 (click)="seleccionarPromo(promo)">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <div class="col-12 text-left"> 20 <div class="col-12 text-left">
21 <p class="h5 mb-0"> 21 <p class="h5 mb-0">
22 <small class="font-weight-bold">{{promo.nombrePromo}}</small> 22 <small class="font-weight-bold">{{promo.DetArt}}</small>
23 </p> 23 </p>
24 </div> 24 </div>
25 <div class="col-12 text-right mt-2"> 25 <div class="col-12 text-right mt-2">
26 <p class="h4 font-weight-bold mb-0"> 26 <p class="h4 font-weight-bold mb-0">
27 {{calcularPrecioDePromo(promo) | currency}} 27 {{promo.PreVen | currency}}
28 </p> 28 </p>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 35
36 <div class="row mt-3 justify-content-end"> 36 <div class="row mt-3 justify-content-end">
37 <div class="col-auto"> 37 <div class="col-auto">
38 <button 38 <button
39 type="button" 39 type="button"
40 class="btn btn-sm btn-light shadow" 40 class="btn btn-sm btn-light shadow"
41 (click)="hide()"> 41 (click)="hide()">
42 <span class="pr-2">No, gracias</span> 42 <span class="pr-2">No, gracias</span>
43 <i class="fa fa-times text-danger" aria-hidden="true"></i> 43 <i class="fa fa-times text-danger" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 </div> 48 </div>
49 49
src/app/components/popover-promos/popover-promos.component.ts
Diff comments   View file @ b695e77
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 { Promocion } from 'src/app/wrappers/promocion';
4 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
5 4
6 @Component({ 5 @Component({
7 selector: 'app-popover-promos', 6 selector: 'app-popover-promos',
8 templateUrl: './popover-promos.component.html', 7 templateUrl: './popover-promos.component.html',
9 styleUrls: ['./popover-promos.component.scss'] 8 styleUrls: ['./popover-promos.component.scss']
10 }) 9 })
11 export class PopoverPromosComponent implements OnInit { 10 export class PopoverPromosComponent implements OnInit {
12 11
13 @Input() popover: PopoverDirective; 12 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Promocion[]; 13 @Input() popoverContent: Producto[];
15 @Output() promoSeleccionada = new EventEmitter<Promocion>(); 14 @Output() promoSeleccionada = new EventEmitter<Producto>();
16 15
17 constructor() { } 16 constructor() { }
18 17
19 ngOnInit() { 18 ngOnInit() {
20 } 19 }
21 20
22 hide() { 21 hide() {
23 this.popover.hide(); 22 this.popover.hide();
24 } 23 }
25 24
26 seleccionarPromo(promo: Promocion) { 25 seleccionarPromo(promo: Producto) {
27 26
28 this.promoSeleccionada.emit(promo); 27 this.promoSeleccionada.emit(promo);
29 } 28 }
30 29
31 calcularPrecioDePromo(promo: Promocion) { 30 calcularPrecioDePromo(promo: Producto) {
32 31
33 promo.precioTotal = 0; 32 promo.PreVen = 0;
34 promo.productos.forEach(producto => { 33 promo.productos.forEach(producto => {
35 promo.precioTotal += producto.PreVen; 34 promo.PreVen += producto.PreVen;
36 }) 35 })
37 return promo.precioTotal; 36 return promo.PreVen;
38 } 37 }
39 38
40 } 39 }
41 40
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ b695e77
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 overflow-scroll popover-size pr-2 my-2"> 11 <div class="row m-0 overflow-scroll popover-size 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"> 14 <div class="col">
15 15
16 <div class="row m-0"> 16 <div class="row m-0">
17 <div class="col text-left"> 17 <div class="col text-left">
18 <p class="h5 card-title"> 18 <p class="h5 card-title">
19 Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}} 19 Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> 24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
25 <div class="col-7 pl-4 h6 text-right"> 25 <div class="col-7 pl-2 h6 text-right">
26 <p class="m-0 font-weight-normal"> 26 <p class="m-0 font-weight-normal">
27 {{producto.DetArt}} 27 {{producto.DetArt}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div class="col-auto"> 30 <div class="col-5">
31 <div class="btn-group float-left my-auto" role="group"> 31 <div class="btn-group float-left my-auto" role="group">
32 <button 32 <button
33 type="button" 33 type="button"
34 class="btn btn-light my-auto border" 34 class="btn btn-light my-auto border shadow"
35 (click)="sumarCantidad(producto, i)"> 35 (click)="sumarCantidad(producto, i)">
36 <i class="fa fa-plus" aria-hidden="true"></i> 36 <i class="fa fa-plus" aria-hidden="true"></i>
37 </button> 37 </button>
38 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5"> 38 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
39 <small 39 <small
40 [ngClass]="{'font-weight-bold': producto.cantidad > 0}"> 40 [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
41 {{producto.cantidad}} 41 {{producto.cantidad}}
42 </small> 42 </small>
43 </div> 43 </div>
44 <button 44 <button
45 type="button" 45 type="button"
46 class="btn btn-light my-auto border" 46 class="btn btn-light my-auto border shadow"
47 (click)="restarCantidad(producto, i)"> 47 (click)="restarCantidad(producto, i)">
48 <i class="fa fa-minus" aria-hidden="true"></i> 48 <i class="fa fa-minus" aria-hidden="true"></i>
49 </button> 49 </button>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="row mt-3 justify-content-end"> 59 <div class="row mt-3 justify-content-end">
60 <div class="col-auto"> 60 <div class="col-auto">
61 <button type="button" class="btn btn-sm btn-light shadow" (click)="hidePopover()"> 61 <button
62 type="button"
63 class="btn btn-sm btn-light shadow"
64 (click)="continuar()">
62 <span class="font-weight-bold pr-2">Continuar</span> 65 <span class="font-weight-bold pr-2">Continuar</span>
63 <i class="fa fa-check text-success" aria-hidden="true"></i> 66 <i class="fa fa-check text-success" aria-hidden="true"></i>
64 </button> 67 </button>
65 </div> 68 </div>
66 </div> 69 </div>
67 70
68 </div> 71 </div>
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ b695e77
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 6
6 @Component({ 7 @Component({
7 selector: 'app-popover-sinonimos', 8 selector: 'app-popover-sinonimos',
8 templateUrl: './popover-sinonimos.component.html', 9 templateUrl: './popover-sinonimos.component.html',
9 styleUrls: ['./popover-sinonimos.component.scss'] 10 styleUrls: ['./popover-sinonimos.component.scss']
10 }) 11 })
11 export class PopoverSinonimosComponent implements OnInit { 12 export class PopoverSinonimosComponent implements OnInit {
12 13
13 //Directiva del popover, para poder cerrarlo desde este componente 14 //Directiva del popover, para poder cerrarlo desde este componente
14 @Input() popover: PopoverDirective; 15 @Input() popover: PopoverDirective;
15 @Input() popoverContent: Sinonimo[]; 16 @Input() popoverContent: Sinonimo[];
16 @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>(); 17 @Output() productosPersonalizados = new EventEmitter<Producto[]>();
17 sinonimo: Sinonimo; 18 // sinonimo: Sinonimo;
18 19
19 private cantidadRestanteSinonimos: number[] = []; 20 private cantidadRestanteSinonimos: number[] = [];
20 21
21 constructor() { } 22 constructor(private productoService: ProductoService) { }
22 23
23 ngOnInit() { 24 ngOnInit() {
24 25
25 //Seteo en la variable a emitir el sinonimo que sea padre 26 //Seteo en la variable a emitir el sinonimo que sea padre
26 this.popoverContent.forEach(sinonimo => { 27 this.popoverContent.forEach(sinonimo => {
27 28
28 this.cantidadRestanteSinonimos.push(0); 29 this.cantidadRestanteSinonimos.push(0);
29 this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined; 30 // this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined;
31
30 sinonimo.productos.forEach(producto => { 32 sinonimo.productos.forEach(producto => {
31 33
32 producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0; 34 producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0;
33 }) 35 })
34 }) 36 })
35 } 37 }
36 38
37 hidePopover() { 39 continuar() {
38 40
39 this.sinonimoSeleccionado.emit(this.sinonimo); 41 //Si aún quedan articulos que agregar no deja continuar.
40 this.popover.hide(); 42 for (let i = 0; i < this.cantidadRestanteSinonimos.length; i++) {
41 } 43
44 if (this.cantidadRestanteSinonimos[i] > 0) return;
45 }
42 46
43 setSinonimo(sinonimo: Sinonimo) { 47 var productosAenviar: Producto[] = [];
44 48
45 this.sinonimo = sinonimo; 49 this.popoverContent.forEach(sinonimo => {
50
51 sinonimo.productos.forEach(producto => {
52
53 if (producto.cantidad > 0) {
54 producto.idSinonimo = sinonimo.ID_SIN;
55 productosAenviar.push(producto);
56 }
57 })
58
59 })
60
61 this.productosPersonalizados.emit(productosAenviar);
62 this.popover.hide();
46 } 63 }
47 64
48 sumarCantidad(producto: Producto, i: number) { 65 sumarCantidad(producto: Producto, i: number) {
49 66
50 if (this.cantidadRestanteSinonimos[i] === 0) return; 67 if (this.cantidadRestanteSinonimos[i] === 0) return;
51 producto.cantidad++; 68 producto.cantidad++;
52 this.cantidadRestanteSinonimos[i]--; 69 this.cantidadRestanteSinonimos[i]--;
53 } 70 }
54 71
55 restarCantidad(producto: Producto, i: number) { 72 restarCantidad(producto: Producto, i: number) {
56 73
57 if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return; 74 if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
58 if (producto.cantidad === 0) return; 75 if (producto.cantidad === 0) return;
59 producto.cantidad--; 76 producto.cantidad--;
60 this.cantidadRestanteSinonimos[i]++; 77 this.cantidadRestanteSinonimos[i]++;
61 } 78 }
62 79
63 } 80 }
64 81