Martin Macola / autoservicio

Commit 82667f75feb854354c7c92e756d54dfe65a49885

Authored by Eric Fernandez 2019-08-21 12:09:49 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !36

Showing 4 changed files Show diff stats

src/app/components/inicio/inicio.component.ts

Diff comments View file @ 82667f7

 import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
 import { PopoverDirective } from 'ngx-bootstrap';
 import { appSettings } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { Sinonimo } from 'src/app/wrappers/sinonimo';
 @Component({
   selector: 'app-inicio',
   templateUrl: './inicio.component.html',
   styleUrls: ['./inicio.component.scss']
 })
 export class InicioComponent implements OnInit {
   @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
     if (e.keyCode == 13) {
       this.buscarByCodigoBarras(this.busqueda);
       this.busqueda = '';
     } else {
       this.busqueda += e.key;
     }
   };
   @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
   private tienePromo = false;
   private productoEsPromo = false;
   private busqueda: string = '';
   private productoAcargar: Producto;
   private promoAcargar: Producto;
   productos: Producto[] = [];
   promociones: Producto[] = [];
   sinonimos: Sinonimo[] = [];
   apiUrl: string = appSettings.apiUrl
   constructor(
     private router: Router,
     private productoService: ProductoService) { }
   ngOnInit() {
     this.productoAcargar = this.productoService.productoAcargar;
     if (this.productoAcargar) {
       if (this.productoAcargar.PRO) {
         this.promociones.push(this.productoAcargar);
         this.promoSeleccionada(this.productoAcargar);
       }
       else
         this.getPromociones();
     }
     this.getProductos();
   }
   getPromociones() {
     var sector = this.productoAcargar.CodSec;
     var codigo = this.productoAcargar.CodArt;
     this.productoService.getPromociones(sector, codigo)
       .subscribe((res: Producto[]) => {
         if (res.length === 0) {
           //Si no tiene promociones la cargará al carrito despues de un tiempo
           setTimeout(() => {
             this.productoAcargar.cantidad = 1;
             this.productoService.productos.push(this.productoAcargar);
             this.productoAcargar = this.productoService.productoAcargar = undefined;
           }, 2000)
         } else {
           this.promociones = res;
           this.popoverDirective.show();
         }
       }, error => { console.error(error); })
   }
   showPopover() {
     this.popoverDirective.show();
   }
   getProductos() {
     this.productoService.getAll()
       .subscribe((productos: Producto[]) => {
         this.productos = productos;
       });
   }
   irBusquedaProductos(verPromociones) {
     this.productoService.verCategoriasProductos = verPromociones;
     this.router.navigate(['busqueda-productos']);
   }
   confirmarProducto() {
     this.promoAcargar.cantidad = 1;
     this.productoService.productos.push(this.promoAcargar);
-    this.promoAcargar = undefined;
+    this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
-    this.productoAcargar = undefined;
     this.promociones = [];
     this.popoverDirective.hide();
   }
   deshacerCarga() {
     if (this.sinonimos.length > 0) {
       this.sinonimos = [];
       this.popoverDirective.hide();
     }
     if (this.promoAcargar) {
       this.promoAcargar = undefined;
       if (this.productoAcargar.PRO) {
         this.productoAcargar = undefined;
         this.promociones = [];
         this.popoverDirective.hide();
       } else {
         this.popoverDirective.show();
       }
     } else {
       this.productoAcargar = undefined;
       this.promociones = [];
       this.popoverDirective.hide();
     }
   }
   promoSeleccionada($event: Producto) {
     this.promoAcargar = $event;
     this.promoAcargar.tieneSinonimos = true;
     if (this.promoAcargar.tieneSinonimos) {
       var sector = this.promoAcargar.CodSec;
       var codigo = this.promoAcargar.CodArt;
       this.productoService.getPromocionSinonimos(sector, codigo)
         .subscribe((res: Sinonimo[]) => {
           res.forEach(sinonimo => {
             sinonimo.productos.forEach(productoSinonimo => {
               this.promoAcargar.productos.forEach(productoPromo => {
                 if (productoSinonimo.id === productoPromo.id) {
                   sinonimo.cantidad = productoPromo.cantidad;
                   sinonimo.productoPadre = productoPromo.id;
                 }
               })
             })
           })
           this.sinonimos = res;
           if (res.length > 0)
             this.showPopover();
+          else
+            this.popoverDirective.hide();
         })
     } else {
       this.popoverDirective.hide();
     }
   }
   productosPersonalizados($event: Producto[]) {
     var productosPersonalizados = $event;
     this.promoAcargar.productos.forEach(productoPromo => {
       if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
     })
     this.promoAcargar.productos = productosPersonalizados;
+    this.confirmarProducto();
   }
   buscarByCodigoBarras(busqueda) {
     let producto = this.productos.filter(producto => {
       return producto.codigoBarra == busqueda;
     });
     if (producto.length) {
       this.productoAcargar = producto[0];
       this.getPromociones();
     } else {
       alert('No se encuentra el producto');
     }
   }
 }

src/app/components/popover-sinonimos/popover-sinonimos.component.ts

Diff comments View file @ 82667f7

 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { PopoverDirective } from 'ngx-bootstrap';
 import { Producto } from 'src/app/wrappers/producto';
 import { Sinonimo } from 'src/app/wrappers/sinonimo';
 import { ProductoService } from 'src/app/services/producto.service';
 @Component({
   selector: 'app-popover-sinonimos',
   templateUrl: './popover-sinonimos.component.html',
   styleUrls: ['./popover-sinonimos.component.scss']
 })
 export class PopoverSinonimosComponent implements OnInit {
   //Directiva del popover, para poder cerrarlo desde este componente
   @Input() popover: PopoverDirective;
   @Input() popoverContent: Sinonimo[];
   @Output() productosPersonalizados = new EventEmitter<Producto[]>();
   // sinonimo: Sinonimo;
   private cantidadRestanteSinonimos: number[] = [];
   constructor(private productoService: ProductoService) { }
   ngOnInit() {
-    //Seteo en la variable a emitir el sinonimo que sea padre
     this.popoverContent.forEach(sinonimo => {
       this.cantidadRestanteSinonimos.push(0);
-      // this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined;
-      sinonimo.productos.forEach(producto => {
+      sinonimo.productos.forEach((producto, index) => {
+        if (producto.id === sinonimo.productoPadre) {
+          sinonimo.productos.splice(index, 1);
+          sinonimo.productos.splice(0, 0, producto);
+          producto.cantidad = sinonimo.cantidad;
+        } else {
+          producto.cantidad = 0;
+        }
-        producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0;
       })
     })
   }
   continuar() {
     //Si aún quedan articulos que agregar no deja continuar.
     for (let i = 0; i < this.cantidadRestanteSinonimos.length; i++) {
       if (this.cantidadRestanteSinonimos[i] > 0) return;
     }
     var productosAenviar: Producto[] = [];
     this.popoverContent.forEach(sinonimo => {
       sinonimo.productos.forEach(producto => {
         if (producto.cantidad > 0) {
           producto.idSinonimo = sinonimo.ID_SIN;
           productosAenviar.push(producto);
         }
       })
     })
     this.productosPersonalizados.emit(productosAenviar);
     this.popover.hide();
   }
   sumarCantidad(producto: Producto, i: number) {
     if (this.cantidadRestanteSinonimos[i] === 0) return;
     producto.cantidad++;
     this.cantidadRestanteSinonimos[i]--;
   }
   restarCantidad(producto: Producto, i: number) {
     if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
     if (producto.cantidad === 0) return;
     producto.cantidad--;
     this.cantidadRestanteSinonimos[i]++;
   }

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

Diff comments View file @ 82667f7

 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
   <!-- ENCABEZADO -->
   <p class="h4 border-bottom border-white text-white mt-4 pb-2">
     Mi compra
     <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   </p>
   <div class="overflow-auto overflow-scroll mb-2 w-100">
     <!-- PRODUCTOS CARRITO -->
     <div
       class="slide-in-bl my-2 bg-white border-0 rounded-sm"
       *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
       <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> -->
       <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
         <div class="col-12 p-0 pt-2 text-left my-auto">
           <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
           <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
         </div>
         <div class="col-12 pr-1 text-right h6 my-auto ">
           <p class="m-0">{{producto.PreVen | currency}}</p>
         </div>
       </div>
       <!-- BOTONES -->
       <div class="row m-0 d-flex justify-content-between">
         <!-- SUMAR - RESTAR CANTIDAD -->
         <div class="col-auto px-1 my-2">
           <div class="btn-group-sm btn-group float-left my-auto" role="group">
-            <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
+            <button
+              type="button"
+              class="btn btn-light btn-sm my-auto border shadow"
+              (click)="aumentarCantidad(producto)">
               <i class="fa fa-plus" aria-hidden="true"></i>
             </button>
-            <div class="bg-white border border-white px-3 my-auto text-dark h5">
+            <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
               <small>{{producto.cantidad}}</small>
             </div>
-            <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
+            <button
+              type="button"
+              class="btn btn-light btn-sm my-auto border shadow"
+              (click)="restarCantidad(producto)">
               <i class="fa fa-minus" aria-hidden="true"></i>
             </button>
           </div>
         </div>
         <!-- PERSONALIZAR -->
         <div class="col-auto px-1 my-2">
           <button
             *ngIf="esPersonalizable(producto)"
             type="button"
-            class="btn btn-light btn-sm my-auto float-left border"
+            class="btn btn-light btn-sm my-auto float-left border shadow"
             (click)="personalizarPromo">
             <i class="fa fa-hand-o-up" aria-hidden="true"></i>
           </button>
         </div>
         <!-- BORRAR -->
         <div class="col-auto px-1 my-2">
-          <button type="button" class="btn btn-secondary btn-sm my-auto" (click)="deleteProducto(i)">
+          <button
-            <i class="fa fa-times" aria-hidden="true"></i>
+            type="button"
+            class="btn btn-secondary btn-sm my-auto shadow"
+            (click)="deleteProducto(producto, i)">
+            <i class="fa fa-trash" aria-hidden="true"></i>
           </button>
         </div>
       </div>
     </div>
   </div>
   <!-- TOTAL -->
   <div class="card rounded-top-sm mt-auto blue-gradient border-0">
     <div class="card-body row">
       <div class="col-12">
-        <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
+        <p
-        <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
+          class="h4 border-bottom border-secondary text-secondary pb-2">
+          ({{getCantidadProductos()}}) items
+        </p>
         <p class="h3 text-secondary">Total</p>
         <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
       </div>
       <div class="col-12">
-        <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
+        <button
+          *ngIf="cantTotal > 0"
+          type="button"
+          class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
+          routerLink="/confirmacion-carrito">
           <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
           <i class="fa fa-check text-success" aria-hidden="true"></i>
         </button>
         <button
           type="button"
           class="btn btn-block btn-light shadow btn-sm shadow"
           [routerLink]="['/cancelar-compra']">
           <span class="pr-1">Cancelar</span>
           <i class="fa fa-times text-danger" aria-hidden="true"></i>
         </button>
       </div>
     </div>
   </div>
 </div>

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

Diff comments View file @ 82667f7

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;