Martin Macola / autoservicio

Download as
Browse Code ยป

Commit c619abbde92d5f48b94406be6c8fa18496b89e92

Authored by Marcelo Puebla
1 parent 7c1dd88367
Exists in master

Cambiada logica para manejar el total en el carrito/sidebar.

Showing 2 changed files with 40 additions and 63 deletions   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ c619abb
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 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-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> --> 14 <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> -->
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
19 </div> 19 </div>
20 <div class="col-12 pr-1 text-right h6 my-auto "> 20 <div class="col-12 pr-1 text-right h6 my-auto ">
21 <p class="m-0">{{producto.PreVen | currency}}</p> 21 <p class="m-0">{{producto.PreVen | currency}}</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <!-- BOTONES --> 25 <!-- BOTONES -->
26 <div class="row m-0 d-flex justify-content-between"> 26 <div class="row m-0 d-flex justify-content-between">
27 27
28 <!-- SUMAR - RESTAR CANTIDAD --> 28 <!-- SUMAR - RESTAR CANTIDAD -->
29 <div class="col-auto px-1 my-2"> 29 <div class="col-auto px-1 my-2">
30 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 30 <div class="btn-group-sm btn-group float-left my-auto" role="group">
31 <button 31 <button
32 type="button" 32 type="button"
33 class="btn btn-light btn-sm my-auto border shadow" 33 class="btn btn-light btn-sm my-auto border shadow"
34 (click)="aumentarContador(i)"> 34 (click)="aumentarCantidad(producto)">
35 <i class="fa fa-plus" aria-hidden="true"></i> 35 <i class="fa fa-plus" aria-hidden="true"></i>
36 </button> 36 </button>
37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
38 <small>{{producto.cantidad}}</small> 38 <small>{{producto.cantidad}}</small>
39 </div> 39 </div>
40 <button 40 <button
41 type="button" 41 type="button"
42 class="btn btn-light btn-sm my-auto border shadow" 42 class="btn btn-light btn-sm my-auto border shadow"
43 (click)="decrementarContador(i)"> 43 (click)="restarCantidad(producto)">
44 <i class="fa fa-minus" aria-hidden="true"></i> 44 <i class="fa fa-minus" aria-hidden="true"></i>
45 </button> 45 </button>
46 </div> 46 </div>
47 </div> 47 </div>
48 48
49 <!-- PERSONALIZAR --> 49 <!-- PERSONALIZAR -->
50 <div class="col-auto px-1 my-2"> 50 <div class="col-auto px-1 my-2">
51 <button 51 <button
52 *ngIf="esPersonalizable(producto)" 52 *ngIf="esPersonalizable(producto)"
53 type="button" 53 type="button"
54 class="btn btn-light btn-sm my-auto float-left border shadow" 54 class="btn btn-light btn-sm my-auto float-left border shadow"
55 (click)="personalizarPromo"> 55 (click)="personalizarPromo">
56 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 56 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
57 </button> 57 </button>
58 </div> 58 </div>
59 59
60 <!-- BORRAR --> 60 <!-- BORRAR -->
61 <div class="col-auto px-1 my-2"> 61 <div class="col-auto px-1 my-2">
62 <button 62 <button
63 type="button" 63 type="button"
64 class="btn btn-secondary btn-sm my-auto shadow" 64 class="btn btn-secondary btn-sm my-auto shadow"
65 (click)="deleteProducto(i)"> 65 (click)="deleteProducto(producto, i)">
66 <i class="fa fa-trash" aria-hidden="true"></i> 66 <i class="fa fa-trash" aria-hidden="true"></i>
67 </button> 67 </button>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- TOTAL --> 73 <!-- TOTAL -->
74 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 74 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
75 <div class="card-body row"> 75 <div class="card-body row">
76 <div class="col-12"> 76 <div class="col-12">
77 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p> 77 <p
78 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p> 78 class="h4 border-bottom border-secondary text-secondary pb-2">
79 ({{getCantidadProductos()}}) items
80 </p>
79 <p class="h3 text-secondary">Total</p> 81 <p class="h3 text-secondary">Total</p>
80 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
81 </div> 83 </div>
82 <div class="col-12"> 84 <div class="col-12">
83 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito"> 85 <button
86 *ngIf="cantTotal > 0"
87 type="button"
88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89 routerLink="/confirmacion-carrito">
84 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
85 <i class="fa fa-check text-success" aria-hidden="true"></i> 91 <i class="fa fa-check text-success" aria-hidden="true"></i>
86 </button> 92 </button>
87 <button 93 <button
88 type="button" 94 type="button"
89 class="btn btn-block btn-light shadow btn-sm shadow" 95 class="btn btn-block btn-light shadow btn-sm shadow"
90 [routerLink]="['/cancelar-compra']"> 96 [routerLink]="['/cancelar-compra']">
91 <span class="pr-1">Cancelar</span> 97 <span class="pr-1">Cancelar</span>
92 <i class="fa fa-times text-danger" aria-hidden="true"></i> 98 <i class="fa fa-times text-danger" aria-hidden="true"></i>
93 </button> 99 </button>
94 </div> 100 </div>
95 </div> 101 </div>
96 </div> 102 </div>
97 </div> 103 </div>
98 104
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ c619abb
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 5
6
7 @Component({ 6 @Component({
8 selector: 'app-sidebar', 7 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 8 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 9 styleUrls: ['./sidebar.component.scss'],
11 }) 10 })
12 export class SidebarComponent implements OnInit { 11 export class SidebarComponent implements OnInit {
13 12
14 private cont: number = 1; 13 private cantTotal: number = 0;
15 private min: number = 1; 14 private cantMin: number = 1;
16 private max: number = 50; 15 private cantMax: number = 50;
17 private total: number = 0; 16 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 17 private apiUrl: string = appSettings.apiUrl;
19 18
20 public productosCarrito: Producto[] = []; 19 public productosCarrito: Producto[] = [];
21 20
22 constructor(private productoService: ProductoService) { 21 constructor(private productoService: ProductoService) { }
23
24 this.productosCarrito = this.productoService.productos;
25 }
26 22
27 ngOnInit() { 23 ngOnInit() {
28 24
25 this.productosCarrito = this.productoService.productos;
29 } 26 }
30 27
31 getCantidadProductos() { 28 getCantidadProductos() {
32 29
33 for (let i = 0; i < this.productosCarrito.length; i++) { 30 setTimeout(() => {
34 this.productosCarrito[i].cantidad = 1 31 var cantTotalAux = 0;
35 this.cont++; 32 this.productosCarrito.forEach(producto => {
36 } 33
37 return this.cont; 34 cantTotalAux += producto.cantidad;
35 }, 250);
36 this.cantTotal = cantTotalAux;
37 })
38 return this.cantTotal;
38 } 39 }
39 40
40 getTotal() { 41 getTotal() {
41 42
42 let subTotal = 0; 43 var subTotal = 0;
43 for (let i = 0; i < this.productosCarrito.length; i++) { 44 for (let i = 0; i < this.productosCarrito.length; i++) {
44 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 45 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
45 } 46 }
46 return this.total = subTotal; 47 return this.total = subTotal;
47 } 48 }
48 49
49 public aumentarContador(index) { 50 aumentarCantidad(producto: Producto) {
50
51 this.cont++;
52 for (let i = 0; i < this.productosCarrito.length; i++) {
53 if (i === index) {
54 this.total = this.total + this.productosCarrito[i].PreVen;
55 return (this.productosCarrito[i].cantidad === this.max) ?
56 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
57
58 }
59 }
60 }
61
62 decrementarContador(index) {
63 51
64 for (let i = 0; i < this.productosCarrito.length; i++) { 52 if (producto.cantidad < this.cantMax) {
65 if (i === index && this.productosCarrito[i].cantidad > this.min) { 53 producto.cantidad++;
66 this.productosCarrito[i].cantidad--; 54 this.cantTotal++
67 this.cont--;
68 break;
69 }
70 } 55 }
71
72 this.getTotal()
73 } 56 }
74 57
75 setCantidadItems() { 58 restarCantidad(producto: Producto) {
76 59
77 this.cont = 0; 60 if (producto.cantidad > this.cantMin) {
78 for (let i = 0; i < this.productosCarrito.length; i++) { 61 producto.cantidad--;
79 this.cont += this.productosCarrito[i].cantidad; 62 this.cantTotal--;
80 }
81 }
82
83 deleteProducto(index: number) {
84
85 for (let i = 0; i < this.productosCarrito.length; i++) {
86 if (i === index) {
87 this.cont -= this.productosCarrito[i].cantidad;
88 //Elimina del total el PreVen de todo el item
89 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
90 this.productosCarrito.reverse().splice(i, 1);
91 return;
92 }
93 } 63 }
94 } 64 }
95 65
96 cleanCarrito() { 66 deleteProducto(producto: Producto, index: number) {
97 67
98 this.productoService.productos = this.productosCarrito = []; 68 this.cantTotal -= producto.cantidad;
99 this.total = 0; 69 this.total -= producto.PreVen * producto.cantidad;
100 this.cont = 0; 70 this.productosCarrito.reverse().splice(index, 1);
71 return;
101 } 72 }
102 73
103 esPersonalizable(producto: Producto) { 74 esPersonalizable(producto: Producto) {
104 75
105 var esPersonalizable: boolean = false; 76 var esPersonalizable: boolean = false;
106 if (producto.tieneSinonimos) 77 if (producto.tieneSinonimos)
107 esPersonalizable = true; 78 esPersonalizable = true;