Martin Macola / autoservicio

Commit 3ba3722646fd9f0d7180189e890e1b707e3ba0df

Authored by Eric Fernandez 2019-08-21 15:30:19 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !41

Showing 2 changed files Show diff stats

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 3ba3722

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)="aumentarCantidad(producto)">	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)="restarCantidad(producto)">	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="producto.tieneSinonimos"
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(producto, i)">	55	(click)="personalizarPromo(producto, i)">
56	<i class="fa fa-refresh text-purple" aria-hidden="true"></i>	56	<i class="fa fa-refresh text-purple" 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(producto, 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	77	<p
78	class="h4 border-bottom border-secondary text-secondary pb-2">	78	class="h4 border-bottom border-secondary text-secondary pb-2">
79	({{getCantidadProductos()}}) artículos	79	({{getCantidadProductos()}}) artículos
80	</p>	80	</p>
81	<p class="h3 text-secondary">Total</p>	81	<p class="h3 text-secondary">Total</p>
82	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>	82	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>
83	</div>	83	</div>
84	<div class="col-12">	84	<div class="col-12">
85	<button	85	<button
86	*ngIf="cantTotal > 0"	86	*ngIf="cantTotal > 0"
87	type="button"	87	type="button"
88	class="btn btn-block btn-light btn-lg shadow mb-2 p-1"	88	class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89	routerLink="/confirmacion-carrito">	89	routerLink="/confirmacion-carrito">
90	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>	90	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>
91	<i class="fa fa-check text-success" aria-hidden="true"></i>	91	<i class="fa fa-check text-success" aria-hidden="true"></i>
92	</button>	92	</button>
93	<button	93	<button
94	type="button"	94	type="button"
95	class="btn btn-block btn-light shadow btn-sm shadow"	95	class="btn btn-block btn-light shadow btn-sm shadow"
96	[routerLink]="['/cancelar-compra']">	96	[routerLink]="['/cancelar-compra']">
97	<span class="pr-1">Cancelar</span>	97	<span class="pr-1">Cancelar</span>
98	<i class="fa fa-times text-danger" aria-hidden="true"></i>	98	<i class="fa fa-times text-danger" aria-hidden="true"></i>
99	</button>	99	</button>
100	</div>	100	</div>
101	</div>	101	</div>
102	</div>	102	</div>
103	</div>	103	</div>
104		104

src/app/components/sidebar/sidebar.component.ts

Diff comments View file @ 3ba3722

 import { Component, OnInit } from '@angular/core';
 import { Producto } from 'src/app/wrappers/producto';
 import { appSettings } from 'src/etc/AppSettings';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Router } from '@angular/router';
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent implements OnInit {
   private cantTotal: number = 0;
   private cantMin: number = 1;
   private cantMax: number = 50;
   private total: number = 0;
   private apiUrl: string = appSettings.apiUrl;
   public productosCarrito: Producto[] = [];
   constructor(
     private productoService: ProductoService,
     private router: Router) {
     this.router.routeReuseStrategy.shouldReuseRoute = function () {
       return false;
     }
   }
   ngOnInit() {
     this.productosCarrito = this.productoService.productos;
   }
   getCantidadProductos() {
     setTimeout(() => {
       var cantTotalAux = 0;
       this.productosCarrito.forEach(producto => {
         cantTotalAux += producto.cantidad;
       }, 250);
       this.cantTotal = cantTotalAux;
     })
     return this.cantTotal;
   }
   getTotal() {
     var subTotal = 0;
     for (let i = 0; i < this.productosCarrito.length; i++) {
       subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
     }
     return this.total = subTotal;
   }
   aumentarCantidad(producto: Producto) {
     if (producto.cantidad < this.cantMax) {
       producto.cantidad++;
       this.cantTotal++
     }
   }
   restarCantidad(producto: Producto) {
     if (producto.cantidad > this.cantMin) {
       producto.cantidad--;
       this.cantTotal--;
     }
   }
   deleteProducto(producto: Producto, index: number) {
     this.cantTotal -= producto.cantidad;
     this.total -= producto.PreVen * producto.cantidad;
     this.productosCarrito.reverse().splice(index, 1);
     return;
   }
-  esPersonalizable(producto: Producto) {
-    var esPersonalizable: boolean = false;
-    if (producto.tieneSinonimos)
-      esPersonalizable = true;
-    return esPersonalizable;
-  }
   personalizarPromo(producto: Producto, index) {
     this.productoService.productoAcargar = producto;
     this.deleteProducto(producto, index);
     this.router.navigate(['inicio']);
   }
 }