Commit b695e77f11fd45d9cf23e911ee6ab1e47bb8cb0d
1 parent
0b89cb8931
Exists in
master
and in
1 other branch
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
... | ... | @@ -29,13 +29,16 @@ |
29 | 29 | <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> |
30 | 30 | <div class="carousel-inner"> |
31 | 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 | 33 | </div> |
34 | 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 | 36 | </div> |
37 | 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 | 42 | </div> |
40 | 43 | </div> |
41 | 44 | </div> |
... | ... | @@ -75,7 +78,7 @@ |
75 | 78 | *ngIf="sinonimos.length > 0" |
76 | 79 | [popover]="popoverDirective" |
77 | 80 | [popoverContent]="sinonimos" |
78 | - (sinonimoSeleccionado)="sinonimoSeleccionado($event)" | |
81 | + (productosPersonalizados)="productosPersonalizados($event)" | |
79 | 82 | class="text-white rounded-sm border-0"> |
80 | 83 | </app-popover-sinonimos> |
81 | 84 | </ng-template> |
... | ... | @@ -126,16 +129,16 @@ |
126 | 129 | |
127 | 130 | <!-- PROMO A CARGAR --> |
128 | 131 | <div class="fade-in m-0" *ngIf="promoAcargar"> |
129 | - <img | |
132 | + <!-- <img | |
130 | 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 | 136 | <div class="row justify-content-between m-3"> |
134 | 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 | 139 | </div> |
137 | 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 | 142 | </div> |
140 | 143 | </div> |
141 | 144 | </div> |
... | ... | @@ -154,14 +157,17 @@ |
154 | 157 | <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> |
155 | 158 | </button> |
156 | 159 | <button |
157 | - *ngIf="!promoAcargar" | |
160 | + *ngIf="!promoAcargar || sinonimos.length == 0" | |
158 | 161 | type="button" |
159 | 162 | class="btn btn-primary btn-block shadow-sm" |
160 | 163 | (click)="pop.show()"> |
161 | 164 | <span class="pr-2">Mostrar promociones</span> |
162 | 165 | <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> |
163 | 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 | 171 | <span class="pr-2 font-weight-bold">Confirmar</span> |
166 | 172 | <i class="fa fa-check text-success" aria-hidden="true"></i> |
167 | 173 | </button> |
src/app/components/inicio/inicio.component.ts
1 | -import { Component, OnInit, ViewChild } from '@angular/core'; | |
1 | +import { Component, OnInit, ViewChild, HostListener } from '@angular/core'; | |
2 | 2 | import { PopoverDirective } from 'ngx-bootstrap'; |
3 | 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 | 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 | 7 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; |
9 | -import { HostListener } from '@angular/core'; | |
10 | 8 | |
11 | 9 | @Component({ |
12 | 10 | selector: 'app-inicio', |
... | ... | @@ -27,15 +25,15 @@ export class InicioComponent implements OnInit { |
27 | 25 | }; |
28 | 26 | |
29 | 27 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; |
30 | - private productoAcargar: Producto; | |
31 | - private productos: Producto[]; | |
32 | - private promoAcargar: Promocion; | |
33 | 28 | private tienePromo = false; |
34 | 29 | private productoEsPromo = false; |
35 | 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 | 37 | sinonimos: Sinonimo[] = []; |
40 | 38 | apiUrl: string = appSettings.apiUrl |
41 | 39 | |
... | ... | @@ -46,30 +44,36 @@ export class InicioComponent implements OnInit { |
46 | 44 | ngOnInit() { |
47 | 45 | |
48 | 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 | 55 | this.getProductos(); |
51 | 56 | } |
52 | 57 | |
53 | 58 | getPromociones() { |
54 | - if (this.productoAcargar) { | |
55 | - var sector = this.productoAcargar.CodSec; | |
56 | - var codigo = this.productoAcargar.CodArt; | |
57 | - this.productoService.getPromocion(sector, codigo) | |
58 | - .subscribe((res: Promocion[]) => { | |
59 | - | |
60 | - if (res.length === 0) { | |
61 | - //Si no tiene promociones la cargará al carrito despues de un tiempo | |
62 | - setTimeout(() => { | |
63 | - this.productoService.productos.push(this.productoAcargar); | |
64 | - this.productoAcargar = this.productoService.productoAcargar = undefined; | |
65 | - }, 2000) | |
66 | - } else { | |
67 | - | |
68 | - this.promociones = res; | |
69 | - this.popoverDirective.show(); | |
70 | - } | |
71 | - }, error => { console.error(error); }) | |
72 | - } | |
59 | + | |
60 | + var sector = this.productoAcargar.CodSec; | |
61 | + var codigo = this.productoAcargar.CodArt; | |
62 | + this.productoService.getPromociones(sector, codigo) | |
63 | + .subscribe((res: Producto[]) => { | |
64 | + | |
65 | + if (res.length === 0) { | |
66 | + //Si no tiene promociones la cargará al carrito despues de un tiempo | |
67 | + setTimeout(() => { | |
68 | + this.productoService.productos.push(this.productoAcargar); | |
69 | + this.productoAcargar = this.productoService.productoAcargar = undefined; | |
70 | + }, 2000) | |
71 | + } else { | |
72 | + | |
73 | + this.promociones = res; | |
74 | + this.popoverDirective.show(); | |
75 | + } | |
76 | + }, error => { console.error(error); }) | |
73 | 77 | } |
74 | 78 | |
75 | 79 | showPopover() { |
... | ... | @@ -84,23 +88,37 @@ export class InicioComponent implements OnInit { |
84 | 88 | }); |
85 | 89 | } |
86 | 90 | |
87 | - private irBusquedaProductos(verPromociones) { | |
91 | + irBusquedaProductos(verPromociones) { | |
88 | 92 | |
89 | 93 | this.productoService.verCategoriasProductos = verPromociones; |
90 | 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 | 106 | deshacerCarga() { |
94 | 107 | |
95 | - if (this.sinonimoAcargar || this.sinonimos.length > 0) { | |
108 | + if (this.sinonimos.length > 0) { | |
96 | 109 | this.sinonimos = []; |
97 | - this.sinonimoAcargar = undefined; | |
98 | 110 | this.popoverDirective.hide(); |
99 | 111 | } |
100 | 112 | |
101 | 113 | if (this.promoAcargar) { |
102 | 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 | 122 | } else { |
105 | 123 | this.productoAcargar = undefined; |
106 | 124 | this.promociones = []; |
... | ... | @@ -108,37 +126,49 @@ export class InicioComponent implements OnInit { |
108 | 126 | } |
109 | 127 | } |
110 | 128 | |
111 | - promoSeleccionada($event: Promocion) { | |
129 | + promoSeleccionada($event: Producto) { | |
112 | 130 | |
113 | 131 | this.promoAcargar = $event; |
114 | - this.popoverDirective.hide(); | |
115 | - if (this.promoAcargar.sinonimos) { | |
116 | - var sector = this.promoAcargar.sector; | |
117 | - var codigo = this.promoAcargar.codigo; | |
132 | + this.promoAcargar.tieneSinonimos = true; | |
133 | + if (this.promoAcargar.tieneSinonimos) { | |
134 | + var sector = this.promoAcargar.CodSec; | |
135 | + var codigo = this.promoAcargar.CodArt; | |
118 | 136 | this.productoService.getPromocionSinonimos(sector, codigo) |
119 | 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) { | |
126 | - resSinonimo.cantidad = productoPromo.cantidad; | |
127 | - resSinonimo.productoPadre = productoPromo.id; | |
128 | - } | |
129 | - }); | |
143 | + this.promoAcargar.productos.forEach(productoPromo => { | |
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 | 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); | |
141 | - this.sinonimoAcargar = $event; | |
171 | + this.promoAcargar.productos = productosPersonalizados; | |
142 | 172 | } |
143 | 173 | |
144 | 174 | buscarByCodigoBarras(busqueda) { |
src/app/components/popover-promos/popover-promos.component.html
... | ... | @@ -19,12 +19,12 @@ |
19 | 19 | <div class="row justify-content-between"> |
20 | 20 | <div class="col-12 text-left"> |
21 | 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 | 23 | </p> |
24 | 24 | </div> |
25 | 25 | <div class="col-12 text-right mt-2"> |
26 | 26 | <p class="h4 font-weight-bold mb-0"> |
27 | - {{calcularPrecioDePromo(promo) | currency}} | |
27 | + {{promo.PreVen | currency}} | |
28 | 28 | </p> |
29 | 29 | </div> |
30 | 30 | </div> |
src/app/components/popover-promos/popover-promos.component.ts
1 | 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; |
2 | 2 | import { PopoverDirective } from 'ngx-bootstrap/popover'; |
3 | -import { Promocion } from 'src/app/wrappers/promocion'; | |
4 | 3 | import { Producto } from 'src/app/wrappers/producto'; |
5 | 4 | |
6 | 5 | @Component({ |
... | ... | @@ -11,8 +10,8 @@ import { Producto } from 'src/app/wrappers/producto'; |
11 | 10 | export class PopoverPromosComponent implements OnInit { |
12 | 11 | |
13 | 12 | @Input() popover: PopoverDirective; |
14 | - @Input() popoverContent: Promocion[]; | |
15 | - @Output() promoSeleccionada = new EventEmitter<Promocion>(); | |
13 | + @Input() popoverContent: Producto[]; | |
14 | + @Output() promoSeleccionada = new EventEmitter<Producto>(); | |
16 | 15 | |
17 | 16 | constructor() { } |
18 | 17 | |
... | ... | @@ -23,18 +22,18 @@ export class PopoverPromosComponent implements OnInit { |
23 | 22 | this.popover.hide(); |
24 | 23 | } |
25 | 24 | |
26 | - seleccionarPromo(promo: Promocion) { | |
25 | + seleccionarPromo(promo: Producto) { | |
27 | 26 | |
28 | 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 | 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 | } |
src/app/components/popover-sinonimos/popover-sinonimos.component.html
... | ... | @@ -22,16 +22,16 @@ |
22 | 22 | </div> |
23 | 23 | |
24 | 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 | 26 | <p class="m-0 font-weight-normal"> |
27 | 27 | {{producto.DetArt}} |
28 | 28 | </p> |
29 | 29 | </div> |
30 | - <div class="col-auto"> | |
30 | + <div class="col-5"> | |
31 | 31 | <div class="btn-group float-left my-auto" role="group"> |
32 | 32 | <button |
33 | 33 | type="button" |
34 | - class="btn btn-light my-auto border" | |
34 | + class="btn btn-light my-auto border shadow" | |
35 | 35 | (click)="sumarCantidad(producto, i)"> |
36 | 36 | <i class="fa fa-plus" aria-hidden="true"></i> |
37 | 37 | </button> |
... | ... | @@ -43,7 +43,7 @@ |
43 | 43 | </div> |
44 | 44 | <button |
45 | 45 | type="button" |
46 | - class="btn btn-light my-auto border" | |
46 | + class="btn btn-light my-auto border shadow" | |
47 | 47 | (click)="restarCantidad(producto, i)"> |
48 | 48 | <i class="fa fa-minus" aria-hidden="true"></i> |
49 | 49 | </button> |
... | ... | @@ -58,7 +58,10 @@ |
58 | 58 | |
59 | 59 | <div class="row mt-3 justify-content-end"> |
60 | 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 | 65 | <span class="font-weight-bold pr-2">Continuar</span> |
63 | 66 | <i class="fa fa-check text-success" aria-hidden="true"></i> |
64 | 67 | </button> |
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
... | ... | @@ -2,6 +2,7 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; |
2 | 2 | import { PopoverDirective } from 'ngx-bootstrap'; |
3 | 3 | import { Producto } from 'src/app/wrappers/producto'; |
4 | 4 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; |
5 | +import { ProductoService } from 'src/app/services/producto.service'; | |
5 | 6 | |
6 | 7 | @Component({ |
7 | 8 | selector: 'app-popover-sinonimos', |
... | ... | @@ -13,12 +14,12 @@ export class PopoverSinonimosComponent implements OnInit { |
13 | 14 | //Directiva del popover, para poder cerrarlo desde este componente |
14 | 15 | @Input() popover: PopoverDirective; |
15 | 16 | @Input() popoverContent: Sinonimo[]; |
16 | - @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>(); | |
17 | - sinonimo: Sinonimo; | |
17 | + @Output() productosPersonalizados = new EventEmitter<Producto[]>(); | |
18 | + // sinonimo: Sinonimo; | |
18 | 19 | |
19 | 20 | private cantidadRestanteSinonimos: number[] = []; |
20 | 21 | |
21 | - constructor() { } | |
22 | + constructor(private productoService: ProductoService) { } | |
22 | 23 | |
23 | 24 | ngOnInit() { |
24 | 25 | |
... | ... | @@ -26,7 +27,8 @@ export class PopoverSinonimosComponent implements OnInit { |
26 | 27 | this.popoverContent.forEach(sinonimo => { |
27 | 28 | |
28 | 29 | this.cantidadRestanteSinonimos.push(0); |
29 | - this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined; | |
30 | + // this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined; | |
31 | + | |
30 | 32 | sinonimo.productos.forEach(producto => { |
31 | 33 | |
32 | 34 | producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0; |
... | ... | @@ -34,15 +36,30 @@ export class PopoverSinonimosComponent implements OnInit { |
34 | 36 | }) |
35 | 37 | } |
36 | 38 | |
37 | - hidePopover() { | |
39 | + continuar() { | |
38 | 40 | |
39 | - this.sinonimoSeleccionado.emit(this.sinonimo); | |
40 | - this.popover.hide(); | |
41 | - } | |
41 | + //Si aún quedan articulos que agregar no deja continuar. | |
42 | + for (let i = 0; i < this.cantidadRestanteSinonimos.length; i++) { | |
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 | 65 | sumarCantidad(producto: Producto, i: number) { |