Mauricio Cattafi / autoservicio

Browse Code »

Commit 7e604dd701068fe8cc7f7b726a927e70d1080406

Authored by Marcelo Puebla 2019-08-15 11:14:19 -0300

1 parent dd6738d0d6

Exists in master and in 1 other branch

Borradas banderas.

Showing 2 changed files with 25 additions and 17 deletions Show diff stats

src/app/components/inicio/inicio.component.html

Diff comments View file @ 7e604dd

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-3 d-flex align-items-start disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-7">
                 <p class="h3 card-title">Promociones</p>
               </div>
               <div class="col-5 p-0">
                 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-5">
                 <p class="h3 card-title">Ordenar Pedido</p>
               </div>
               <div class="col-7 p-0">
                 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img
             class="card-img-bottom d-block w-100 mx-auto rounded"
             src="{{apiUrl}}/imagenes/cafe.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
         <!-- CARGAR PRODUCTOS -->
         <ng-template #popTemplate>
           <app-popover-promos
-            *ngIf="productoAcargar && !productoEsPromo"
+            *ngIf="promociones.length > 0 && sinonimos.length === 0"
             [popover]="popoverDirective"
             [popoverContent]="promociones"
             (promoSeleccionada)="promoSeleccionada($event)"
             class="text-white rounded-sm border-0">
           </app-popover-promos>
           <app-popover-sinonimos
-            *ngIf="promoAcargar && productoEsPromo"
+            *ngIf="sinonimos.length > 0"
             [popover]="popoverDirective"
             [popoverContent]="sinonimos"
+            (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
             class="text-white rounded-sm border-0">
           </app-popover-sinonimos>
         </ng-template>
         <div
           placement="left"
           triggers=""
           [popover]="popTemplate"
           class="w-100"
           #pop="bs-popover">
           <div class="card bg-white border-0 shadow rounded mb-auto">
             <div class="card-body text-left px-4 py-3">
               <div class="row">
                 <div class="col-6">
                   <p class="h3 card-title">Cargar Productos</p>
                 </div>
                 <div class="col-6 p-0">
                   <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
                 </div>
               </div>
               <p class="h5 card-text text-muted font-weight-light">
                 Coloque el código de<br>
                 barras o QR frente al scanner.
               </p>
             </div>
             <div class="row m-4">
               <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
                 <!-- IMAGEN DE ESCANER -->
                 <img
                   *ngIf="!productoAcargar"
                   class="card-img-top d-block w-100 mx-auto rounded-sm"
                   src="{{apiUrl}}/imagenes/escanner.jpg">
                 <!-- PRODUCTO A CARGAR -->
-                <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
+                <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
                     src="{{apiUrl}}/imagenes/testImg3.jpg">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
                     </div>
                     <div class="col-12 text-right mt-2">
                       <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
                 <!-- PROMO A CARGAR -->
-                <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
+                <div class="fade-in m-0" *ngIf="promoAcargar">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
                     src="{{apiUrl}}/imagenes/testImg3.jpg">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
                     </div>
                     <div class="col-12 text-right mt-2 align-self-end">
-                      <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
+                      <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- BOTONES DE CARGAR PRODUCTOS-->
               <div
                 class="col-5 pr-0"
-                *ngIf="productoAcargar && tienePromo">
+                *ngIf="promociones.length > 0">
                   <button
-                    *ngIf="productoEsPromo && promoAcargar.sinonimos"
+                    *ngIf="sinonimos.length > 0"
                     type="button"
                     class="btn btn-light btn-block shadow-sm"
                     (click)="pop.show()">
                     <span class="pr-2">Personalizar</span>
                     <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
                   </button>
                   <button
-                    *ngIf="!productoEsPromo"
+                    *ngIf="!promoAcargar"
                     type="button"
                     class="btn btn-primary btn-block shadow-sm"
                     (click)="pop.show()">
                     <span class="pr-2">Mostrar promociones</span>
                     <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
                   </button>
                   <button type="button" class="btn btn-light btn-block shadow-sm my-3">
                     <span class="pr-2 font-weight-bold">Confirmar</span>
                     <i class="fa fa-check text-success" aria-hidden="true"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-light btn-block shadow-sm"
                     (click)="deshacerCarga()">
                     <span class="pr-2">Deshacer</span>
                     <i class="fa fa-undo text-warning" aria-hidden="true"></i>
                   </button>
               </div>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-6">
                 <p class="h3 card-title">Buscar Productos</p>
                 <p class="h5 card-text text-muted font-weight-light">
                   Busque aquí los productos<br>
                   que no tienen código </p>
               </div>
               <div class="col-6 p-0">
                 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

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

Diff comments View file @ 7e604dd

1	import { Component, OnInit, ViewChild } from '@angular/core';	1	import { Component, OnInit, ViewChild } from '@angular/core';
2	import { PopoverDirective } from 'ngx-bootstrap';	2	import { PopoverDirective } from 'ngx-bootstrap';
3	import { appSettings } from 'src/etc/AppSettings';	3	import { appSettings } from 'src/etc/AppSettings';
4	import { Producto } from 'src/app/wrappers/producto';	4	import { Producto } from 'src/app/wrappers/producto';
5	import { ProductoService } from 'src/app/services/producto.service';	5	import { ProductoService } from 'src/app/services/producto.service';
6	import { Router } from '@angular/router';	6	import { Router } from '@angular/router';
7	import { Promocion } from 'src/app/wrappers/promocion';	7	import { Promocion } from 'src/app/wrappers/promocion';
8	import { Sinonimo } from 'src/app/wrappers/sinonimo';	8	import { Sinonimo } from 'src/app/wrappers/sinonimo';
9		9
10		10
11	@Component({	11	@Component({
12	selector: 'app-inicio',	12	selector: 'app-inicio',
13	templateUrl: './inicio.component.html',	13	templateUrl: './inicio.component.html',
14	styleUrls: ['./inicio.component.scss']	14	styleUrls: ['./inicio.component.scss']
15	})	15	})
16	export class InicioComponent implements OnInit {	16	export class InicioComponent implements OnInit {
17		17
18	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;	18	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
19	private productoAcargar: Producto;	19	private productoAcargar: Producto;
20	private promoAcargar: Promocion;	20	private promoAcargar: Promocion;
21	private tienePromo = false;	21	private sinonimoAcargar: Sinonimo;
22	private productoEsPromo = false;
23		22
24	promociones: Promocion[] = [];	23	promociones: Promocion[] = [];
25	sinonimos: Sinonimo[] = [];	24	sinonimos: Sinonimo[] = [];
26	apiUrl: string = appSettings.apiUrl	25	apiUrl: string = appSettings.apiUrl
27		26
28	constructor(	27	constructor(
29	private router: Router,	28	private router: Router,
30	private productoService: ProductoService) { }	29	private productoService: ProductoService) { }
31		30
32	ngOnInit() {	31	ngOnInit() {
33		32
34	this.productoAcargar = this.productoService.productoAcargar;	33	this.productoAcargar = this.productoService.productoAcargar;
35	if (this.productoAcargar) {	34	if (this.productoAcargar) {
36	var sector = this.productoAcargar.CodSec;	35	var sector = this.productoAcargar.CodSec;
37	var codigo = this.productoAcargar.CodArt;	36	var codigo = this.productoAcargar.CodArt;
38	this.productoService.getPromocion(sector, codigo)	37	this.productoService.getPromocion(sector, codigo)
39	.subscribe((res: Promocion[]) => {	38	.subscribe((res: Promocion[]) => {
40		39
41	if (res.length === 0) {	40	if (res.length === 0) {
42	//Si no tiene promociones la cargará al carrito despues de un tiempo	41	//Si no tiene promociones la cargará al carrito despues de un tiempo
43	setTimeout(() => {	42	setTimeout(() => {
44	this.productoService.productos.push(this.productoAcargar);	43	this.productoService.productos.push(this.productoAcargar);
45	this.productoAcargar = undefined;	44	this.productoAcargar = undefined;
46	this.tienePromo = false;
47	}, 2000)	45	}, 2000)
48	} else {	46	} else {
49		47
50	this.promociones = res;	48	this.promociones = res;
51	this.tienePromo = true;
52	this.popoverDirective.show();	49	this.popoverDirective.show();
53	}	50	}
54	}, error => { console.error(error); })	51	}, error => { console.error(error); })
55	}	52	}
56	}	53	}
57		54
58	showPopover() {	55	showPopover() {
59		56
60	this.popoverDirective.show();	57	this.popoverDirective.show();
61	}	58	}
62		59
63	private goPage(pageUrl) {	60	private goPage(pageUrl) {
64		61
65	this.router.navigate([pageUrl]);	62	this.router.navigate([pageUrl]);
66	}	63	}
67		64
68	deshacerCarga() {	65	deshacerCarga() {
69	if (this.productoEsPromo) {	66
		67	if (this.sinonimoAcargar \|\| this.sinonimos.length > 0) {
		68	this.sinonimos = [];
		69	this.sinonimoAcargar = undefined;
		70	this.popoverDirective.hide();
		71	}
		72
		73	if (this.promoAcargar) {
70	this.promoAcargar = undefined;	74	this.promoAcargar = undefined;
71	this.productoEsPromo = false;
72	this.popoverDirective.show();	75	this.popoverDirective.show();
73	} else {	76	} else {
74	this.productoAcargar = undefined;	77	this.productoAcargar = undefined;
75	this.tienePromo = false;	78	this.promociones = [];
76	this.popoverDirective.hide();	79	this.popoverDirective.hide();
77	}	80	}
78	}	81	}
79		82
80	promoSeleccionada($event: Promocion) {	83	promoSeleccionada($event: Promocion) {
81		84
82	this.productoEsPromo = true;
83	this.promoAcargar = $event;	85	this.promoAcargar = $event;
84	this.popoverDirective.hide();	86	this.popoverDirective.hide();
85	if (this.promoAcargar.sinonimos) {	87	if (this.promoAcargar.sinonimos) {
86	var sector = this.promoAcargar.sector;	88	var sector = this.promoAcargar.sector;
87	var codigo = this.promoAcargar.codigo;	89	var codigo = this.promoAcargar.codigo;
88	this.productoService.getPromocionSinonimos(sector, codigo)	90	this.productoService.getPromocionSinonimos(sector, codigo)
89	.subscribe((res : Sinonimo[]) => {	91	.subscribe((res: Sinonimo[]) => {
90		92
91	this.sinonimos = res;	93	this.sinonimos = res;
92	this.showPopover();	94	this.showPopover();
93	})	95	})
94	}	96	}
95	}	97	}
96		98
		99	sinonimoSeleccionado($event: Sinonimo) {
		100