Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 12a90405f89a454ceb81e4b2e0b13e2b35f24323

Authored by Marcelo Puebla
1 parent f52b8fb0ee
Exists in master and in 1 other branch validar_pve

Arreglo para agregar(push) y borrar productos del carrito.

Showing 3 changed files with 3 additions and 3 deletions   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 12a9040
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"> 12 *ngFor="let producto of productosCarrito; let i = index">
13 <div class="col p-0 my-1 bg-white border-0 rounded-sm"> 13 <div class="col p-0 my-1 bg-white border-0 rounded-sm">
14 <div class="row m-0"> 14 <div class="row m-0">
15 <div class="col-6 pl-1 pr-0 my-auto"> 15 <div class="col-6 pl-1 pr-0 my-auto">
16 <img 16 <img
17 class="w-100 float-left rounded-sm shadow" 17 class="w-100 float-left rounded-sm shadow"
18 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"> 18 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
19 </div> 19 </div>
20 <div class="col-6 px-1"> 20 <div class="col-6 px-1">
21 <!-- BOTONES --> 21 <!-- BOTONES -->
22 <div class="row m-0 d-flex justify-content-between"> 22 <div class="row m-0 d-flex justify-content-between">
23 23
24 <!-- SUMAR - RESTAR CANTIDAD --> 24 <!-- SUMAR - RESTAR CANTIDAD -->
25 <div class="col p-1"> 25 <div class="col p-1">
26 <div class="btn-group-sm btn-group float-left" role="group"> 26 <div class="btn-group-sm btn-group float-left" role="group">
27 <button 27 <button
28 type="button" 28 type="button"
29 class="btn btn-light btn-sm border shadow" 29 class="btn btn-light btn-sm border shadow"
30 (click)="aumentarCantidad(producto)"> 30 (click)="aumentarCantidad(producto)">
31 <i class="fa fa-plus" aria-hidden="true"></i> 31 <i class="fa fa-plus" aria-hidden="true"></i>
32 </button> 32 </button>
33 <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow"> 33 <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
34 <small>{{producto.cantidad}}</small> 34 <small>{{producto.cantidad}}</small>
35 </div> 35 </div>
36 <button 36 <button
37 type="button" 37 type="button"
38 class="btn btn-light btn-sm border shadow" 38 class="btn btn-light btn-sm border shadow"
39 (click)="restarCantidad(producto)"> 39 (click)="restarCantidad(producto)">
40 <i class="fa fa-minus" aria-hidden="true"></i> 40 <i class="fa fa-minus" aria-hidden="true"></i>
41 </button> 41 </button>
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <!-- PERSONALIZAR --> 45 <!-- PERSONALIZAR -->
46 <div class="col p-1"> 46 <div class="col p-1">
47 <button 47 <button
48 *ngIf="producto.tieneSinonimos" 48 *ngIf="producto.tieneSinonimos"
49 type="button" 49 type="button"
50 class="btn btn-light btn-sm float-left border shadow" 50 class="btn btn-light btn-sm float-left border shadow"
51 (click)="personalizarPromo(producto, i)"> 51 (click)="personalizarPromo(producto, i)">
52 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 52 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
53 </button> 53 </button>
54 </div> 54 </div>
55 55
56 <!-- BORRAR --> 56 <!-- BORRAR -->
57 <div class="col p-1"> 57 <div class="col p-1">
58 <button 58 <button
59 type="button" 59 type="button"
60 class="btn btn-secondary btn-sm float-right shadow" 60 class="btn btn-secondary btn-sm float-right shadow"
61 (click)="deleteProducto(producto, i)"> 61 (click)="deleteProducto(producto, i)">
62 <i class="fa fa-trash" aria-hidden="true"></i> 62 <i class="fa fa-trash" aria-hidden="true"></i>
63 </button> 63 </button>
64 </div> 64 </div>
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 <div class="row m-0 shadow rounded-sm"> 68 <div class="row m-0 shadow rounded-sm">
69 <div class="col px-2"> 69 <div class="col px-2">
70 <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p> 70 <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
71 <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p> 71 <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 77
78 <!-- TOTAL --> 78 <!-- TOTAL -->
79 <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0"> 79 <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
80 <div class="card-body p-2 pt-3 row m-0"> 80 <div class="card-body p-2 pt-3 row m-0">
81 <div class="col-12 p-0"> 81 <div class="col-12 p-0">
82 <p 82 <p
83 class="h4 border-bottom border-secondary text-secondary pb-2"> 83 class="h4 border-bottom border-secondary text-secondary pb-2">
84 ({{getCantidadProductos()}}) artículos 84 ({{getCantidadProductos()}}) artículos
85 </p> 85 </p>
86 <p class="h4 text-secondary">Total</p> 86 <p class="h4 text-secondary">Total</p>
87 <p class="h2 font-weight-bold">{{getTotal() | currency}}</p> 87 <p class="h2 font-weight-bold">{{getTotal() | currency}}</p>
88 </div> 88 </div>
89 <div class="col-12 p-0"> 89 <div class="col-12 p-0">
90 <button 90 <button
91 *ngIf="getCantidadProductos() > 0" 91 *ngIf="getCantidadProductos() > 0"
92 type="button" 92 type="button"
93 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 93 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
94 routerLink="/confirmacion-carrito"> 94 routerLink="/confirmacion-carrito">
95 <span class="font-weight-bold pr-1">Pagar</span> 95 <span class="font-weight-bold pr-1">Pagar</span>
96 <i class="fa fa-check text-success" aria-hidden="true"></i> 96 <i class="fa fa-check text-success" aria-hidden="true"></i>
97 </button> 97 </button>
98 <button 98 <button
99 type="button" 99 type="button"
100 class="btn btn-block btn-light shadow btn-sm shadow" 100 class="btn btn-block btn-light shadow btn-sm shadow"
101 [routerLink]="['/cancelar-compra']"> 101 [routerLink]="['/cancelar-compra']">
102 <span class="pr-1">Cancelar</span> 102 <span class="pr-1">Cancelar</span>
103 <i class="fa fa-times text-danger" aria-hidden="true"></i> 103 <i class="fa fa-times text-danger" aria-hidden="true"></i>
104 </button> 104 </button>
105 </div> 105 </div>
106 </div> 106 </div>
107 </div> 107 </div>
108 </div> 108 </div>
109 109
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 12a9040
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cantTotal: number = 0; 14 private cantTotal: number = 0;
15 private cantMin: number = 1; 15 private cantMin: number = 1;
16 private cantMax: number = 50; 16 private cantMax: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiImagenes: string = appSettings.apiImagenes; 18 private apiImagenes: string = appSettings.apiImagenes;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor( 22 constructor(
23 private productoService: ProductoService, 23 private productoService: ProductoService,
24 private router: Router) { 24 private router: Router) {
25 this.router.routeReuseStrategy.shouldReuseRoute = function () { 25 this.router.routeReuseStrategy.shouldReuseRoute = function () {
26 return false; 26 return false;
27 } 27 }
28 } 28 }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.productosCarrito = this.productoService.productos; 32 this.productosCarrito = this.productoService.productos;
33 } 33 }
34 34
35 getCantidadProductos() { 35 getCantidadProductos() {
36 36
37 var cantTotalAux = 0; 37 var cantTotalAux = 0;
38 this.productosCarrito.forEach(producto => { 38 this.productosCarrito.forEach(producto => {
39 39
40 cantTotalAux += producto.cantidad; 40 cantTotalAux += producto.cantidad;
41 }); 41 });
42 this.cantTotal = cantTotalAux; 42 this.cantTotal = cantTotalAux;
43 43
44 return this.cantTotal; 44 return this.cantTotal;
45 } 45 }
46 46
47 getTotal() { 47 getTotal() {
48 48
49 var subTotal = 0; 49 var subTotal = 0;
50 for (let i = 0; i < this.productosCarrito.length; i++) { 50 for (let i = 0; i < this.productosCarrito.length; i++) {
51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
52 } 52 }
53 return this.total = subTotal; 53 return this.total = subTotal;
54 } 54 }
55 55
56 aumentarCantidad(producto: Producto) { 56 aumentarCantidad(producto: Producto) {
57 57
58 if (producto.cantidad < this.cantMax) { 58 if (producto.cantidad < this.cantMax) {
59 producto.cantidad++; 59 producto.cantidad++;
60 this.cantTotal++ 60 this.cantTotal++
61 } 61 }
62 } 62 }
63 63
64 restarCantidad(producto: Producto) { 64 restarCantidad(producto: Producto) {
65 65
66 if (producto.cantidad > this.cantMin) { 66 if (producto.cantidad > this.cantMin) {
67 producto.cantidad--; 67 producto.cantidad--;
68 this.cantTotal--; 68 this.cantTotal--;
69 } 69 }
70 } 70 }
71 71
72 deleteProducto(producto: Producto, index: number) { 72 deleteProducto(producto: Producto, index: number) {
73 73
74 this.cantTotal -= producto.cantidad; 74 this.cantTotal -= producto.cantidad;
75 this.total -= producto.PreVen * producto.cantidad; 75 this.total -= producto.PreVen * producto.cantidad;
76 this.productosCarrito.reverse().splice(index, 1); 76 this.productosCarrito.splice(index, 1);
77 return; 77 return;
78 } 78 }
79 79
80 personalizarPromo(producto: Producto, index) { 80 personalizarPromo(producto: Producto, index) {
81 81
82 this.productoService.productoAcargar = producto; 82 this.productoService.productoAcargar = producto;
83 this.productoService.esPromoPersonalizada = true; 83 this.productoService.esPromoPersonalizada = true;
84 this.deleteProducto(producto, index); 84 this.deleteProducto(producto, index);
85 this.router.navigate(['inicio']); 85 this.router.navigate(['inicio']);
86 } 86 }
87 87
88 } 88 }
89 89
src/app/services/producto.service.ts
Diff comments   View file @ 12a9040
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 promoAcargar: Producto; 14 promoAcargar: Producto;
15 mostrar: string; 15 mostrar: string;
16 esPromoPersonalizada: boolean = false; 16 esPromoPersonalizada: boolean = false;
17 17
18 constructor(private http: HttpClient) { } 18 constructor(private http: HttpClient) { }
19 19
20 getProductoById(id): Observable<any> { 20 getProductoById(id): Observable<any> {
21 21
22 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); 22 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`);
23 } 23 }
24 24
25 getAll(): Observable<any> { 25 getAll(): Observable<any> {
26 26
27 return this.http.get(`${appSettings.apiUrl}/articulos/`); 27 return this.http.get(`${appSettings.apiUrl}/articulos/`);
28 } 28 }
29 29
30 getAllWithPaginator(page: number = 1): Observable<any> { 30 getAllWithPaginator(page: number = 1): Observable<any> {
31 31
32 return this.http.get(`${appSettings.apiUrl}/articulos/${page}`); 32 return this.http.get(`${appSettings.apiUrl}/articulos/${page}`);
33 } 33 }
34 34
35 setProductos(producto: Producto) { 35 setProductos(producto: Producto) {
36 36
37 for (let i = 0; i < this.productos.length; i++) { 37 for (let i = 0; i < this.productos.length; i++) {
38 38
39 if (this.productos[i].id === producto.id) { 39 if (this.productos[i].id === producto.id) {
40 40
41 if (producto.PRO) { 41 if (producto.PRO) {
42 if (this.promosIdenticas(this.productos[i], producto)) { 42 if (this.promosIdenticas(this.productos[i], producto)) {
43 this.productos[i].cantidad++; 43 this.productos[i].cantidad++;
44 return; 44 return;
45 } else { 45 } else {
46 break; 46 break;
47 } 47 }
48 } 48 }
49 this.productos[i].cantidad++; 49 this.productos[i].cantidad++;
50 return; 50 return;
51 } 51 }
52 } 52 }
53 53
54 this.productos.push(producto); 54 this.productos.unshift(producto);
55 } 55 }
56 56
57 getPromocionByCodigos(sector, codigo): Observable<any> { 57 getPromocionByCodigos(sector, codigo): Observable<any> {
58 58
59 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`; 59 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`;
60 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`; 60 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
61 return this.http.get(url); 61 return this.http.get(url);
62 } 62 }
63 63
64 getPromociones(sector, codigo): Observable<any> { 64 getPromociones(sector, codigo): Observable<any> {
65 65
66 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 66 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
67 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 67 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
68 return this.http.get(url); 68 return this.http.get(url);
69 } 69 }
70 70
71 getPromocionSinonimos(sector, codigo): Observable<any> { 71 getPromocionSinonimos(sector, codigo): Observable<any> {
72 72
73 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`; 73 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`;
74 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 74 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
75 return this.http.get(url); 75 return this.http.get(url);
76 } 76 }
77 77
78 getCategorias() { 78 getCategorias() {
79 return this.http.get(`${appSettings.apiUrl}/categorias`); 79 return this.http.get(`${appSettings.apiUrl}/categorias`);
80 } 80 }
81 81
82 pagar(medioPago: string) { 82 pagar(medioPago: string) {
83 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${medioPago}`, { 83 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${medioPago}`, {
84 productos: this.productos 84 productos: this.productos
85 }); 85 });
86 } 86 }
87 87
88 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) { 88 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {
89 89
90 var sonIdenticas = true; 90 var sonIdenticas = true;
91 var productosPromoCarrito = promoEnCarrito.productos; 91 var productosPromoCarrito = promoEnCarrito.productos;
92 var productosPromoAcargar = promo.productos; 92 var productosPromoAcargar = promo.productos;
93 93
94 if (productosPromoCarrito.length !== productosPromoAcargar.length) { 94 if (productosPromoCarrito.length !== productosPromoAcargar.length) {
95 return false; 95 return false;
96 } 96 }
97 97
98 for (let i = 0; i < productosPromoCarrito.length; i++) { 98 for (let i = 0; i < productosPromoCarrito.length; i++) {
99 99
100 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) { 100 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {
101 return false; 101 return false;
102 } 102 }
103 } 103 }
104 104
105 return sonIdenticas; 105 return sonIdenticas;
106 } 106 }
107 107
108 } 108 }
109 109