Martin Macola / autoservicio

Commit 332c7a377b6cd04aa6e4b1c7e054cdd8f146adf1

Authored by Eric Fernandez 2019-08-21 10:38:11 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !35

Showing 3 changed files Show diff stats

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

Diff comments View file @ 332c7a3

1	import { Component, OnInit, ViewChild, HostListener } from '@angular/core';	1	import { Component, OnInit, ViewChild, HostListener } 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 { Router } from '@angular/router';	4	import { Router } from '@angular/router';
5	import { ProductoService } from 'src/app/services/producto.service';	5	import { ProductoService } from 'src/app/services/producto.service';
6	import { Producto } from 'src/app/wrappers/producto';	6	import { Producto } from 'src/app/wrappers/producto';
7	import { Sinonimo } from 'src/app/wrappers/sinonimo';	7	import { Sinonimo } from 'src/app/wrappers/sinonimo';
8		8
9	@Component({	9	@Component({
10	selector: 'app-inicio',	10	selector: 'app-inicio',
11	templateUrl: './inicio.component.html',	11	templateUrl: './inicio.component.html',
12	styleUrls: ['./inicio.component.scss']	12	styleUrls: ['./inicio.component.scss']
13	})	13	})
14	export class InicioComponent implements OnInit {	14	export class InicioComponent implements OnInit {
15		15
16	@HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {	16	@HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
17		17
18	if (e.keyCode == 13) {	18	if (e.keyCode == 13) {
19	this.buscarByCodigoBarras(this.busqueda);	19	this.buscarByCodigoBarras(this.busqueda);
20	this.busqueda = '';	20	this.busqueda = '';
21	} else {	21	} else {
22	this.busqueda += e.key;	22	this.busqueda += e.key;
23	}	23	}
24		24
25	};	25	};
26		26
27	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;	27	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
28	private tienePromo = false;	28	private tienePromo = false;
29	private productoEsPromo = false;	29	private productoEsPromo = false;
30	private busqueda: string = '';	30	private busqueda: string = '';
31		31
32	private productoAcargar: Producto;	32	private productoAcargar: Producto;
33	private promoAcargar: Producto;	33	private promoAcargar: Producto;
34		34
35	productos: Producto[] = [];	35	productos: Producto[] = [];
36	promociones: Producto[] = [];	36	promociones: Producto[] = [];
37	sinonimos: Sinonimo[] = [];	37	sinonimos: Sinonimo[] = [];
38	apiUrl: string = appSettings.apiUrl	38	apiUrl: string = appSettings.apiUrl
39		39
40	constructor(	40	constructor(
41	private router: Router,	41	private router: Router,
42	private productoService: ProductoService) { }	42	private productoService: ProductoService) { }
43		43
44	ngOnInit() {	44	ngOnInit() {
45		45
46	this.productoAcargar = this.productoService.productoAcargar;	46	this.productoAcargar = this.productoService.productoAcargar;
47	if (this.productoAcargar) {	47	if (this.productoAcargar) {
48	if (this.productoAcargar.PRO) {	48	if (this.productoAcargar.PRO) {
49	this.promociones.push(this.productoAcargar);	49	this.promociones.push(this.productoAcargar);
50	this.promoSeleccionada(this.productoAcargar);	50	this.promoSeleccionada(this.productoAcargar);
51	}	51	}
52	else	52	else
53	this.getPromociones();	53	this.getPromociones();
54	}	54	}
55	this.getProductos();	55	this.getProductos();
56	}	56	}
57		57
58	getPromociones() {	58	getPromociones() {
59		59
60	var sector = this.productoAcargar.CodSec;	60	var sector = this.productoAcargar.CodSec;
61	var codigo = this.productoAcargar.CodArt;	61	var codigo = this.productoAcargar.CodArt;
62	this.productoService.getPromociones(sector, codigo)	62	this.productoService.getPromociones(sector, codigo)
63	.subscribe((res: Producto[]) => {	63	.subscribe((res: Producto[]) => {
64		64
65	if (res.length === 0) {	65	if (res.length === 0) {
66	//Si no tiene promociones la cargará al carrito despues de un tiempo	66	//Si no tiene promociones la cargará al carrito despues de un tiempo
67	setTimeout(() => {	67	setTimeout(() => {
		68	this.productoAcargar.cantidad = 1;
68	this.productoService.productos.push(this.productoAcargar);	69	this.productoService.productos.push(this.productoAcargar);
69	this.productoAcargar = this.productoService.productoAcargar = undefined;	70	this.productoAcargar = this.productoService.productoAcargar = undefined;
70	}, 2000)	71	}, 2000)
71	} else {	72	} else {
72		73
73	this.promociones = res;	74	this.promociones = res;
74	this.popoverDirective.show();	75	this.popoverDirective.show();
75	}	76	}
76	}, error => { console.error(error); })	77	}, error => { console.error(error); })
77	}	78	}
78		79
79	showPopover() {	80	showPopover() {
80		81
81	this.popoverDirective.show();	82	this.popoverDirective.show();
82	}	83	}
83		84
84	getProductos() {	85	getProductos() {
85	this.productoService.getAll()	86	this.productoService.getAll()
86	.subscribe((productos: Producto[]) => {	87	.subscribe((productos: Producto[]) => {
87	this.productos = productos;	88	this.productos = productos;
88	});	89	});
89	}	90	}
90		91
91	irBusquedaProductos(verPromociones) {	92	irBusquedaProductos(verPromociones) {
92		93
93	this.productoService.verCategoriasProductos = verPromociones;	94	this.productoService.verCategoriasProductos = verPromociones;
94	this.router.navigate(['busqueda-productos']);	95	this.router.navigate(['busqueda-productos']);
95	}	96	}
96		97
97	confirmarProducto() {	98	confirmarProducto() {
98		99	this.promoAcargar.cantidad = 1;
99	this.productoService.productos.push(this.promoAcargar);	100	this.productoService.productos.push(this.promoAcargar);
100	this.promoAcargar = undefined;	101	this.promoAcargar = undefined;
101	this.productoAcargar = undefined;	102	this.productoAcargar = undefined;
102	this.promociones = [];	103	this.promociones = [];
103	this.popoverDirective.hide();	104	this.popoverDirective.hide();
104	}	105	}
105		106
106	deshacerCarga() {	107	deshacerCarga() {
107		108
108	if (this.sinonimos.length > 0) {	109	if (this.sinonimos.length > 0) {
109	this.sinonimos = [];	110	this.sinonimos = [];
110	this.popoverDirective.hide();	111	this.popoverDirective.hide();
111	}	112	}
112		113
113	if (this.promoAcargar) {	114	if (this.promoAcargar) {
114	this.promoAcargar = undefined;	115	this.promoAcargar = undefined;
115	if(this.productoAcargar.PRO){	116	if (this.productoAcargar.PRO) {
116	this.productoAcargar = undefined;	117	this.productoAcargar = undefined;
117	this.promociones = [];	118	this.promociones = [];
118	this.popoverDirective.hide();	119	this.popoverDirective.hide();
119	}else{	120	} else {
120	this.popoverDirective.show();	121	this.popoverDirective.show();
121	}	122	}
122	} else {	123	} else {
123	this.productoAcargar = undefined;	124	this.productoAcargar = undefined;
124	this.promociones = [];	125	this.promociones = [];
125	this.popoverDirective.hide();	126	this.popoverDirective.hide();
126	}	127	}
127	}	128	}
128		129
129	promoSeleccionada($event: Producto) {	130	promoSeleccionada($event: Producto) {
130		131
131	this.promoAcargar = $event;	132	this.promoAcargar = $event;
132	this.promoAcargar.tieneSinonimos = true;	133	this.promoAcargar.tieneSinonimos = true;
133	if (this.promoAcargar.tieneSinonimos) {	134	if (this.promoAcargar.tieneSinonimos) {
134	var sector = this.promoAcargar.CodSec;	135	var sector = this.promoAcargar.CodSec;
135	var codigo = this.promoAcargar.CodArt;	136	var codigo = this.promoAcargar.CodArt;
136	this.productoService.getPromocionSinonimos(sector, codigo)	137	this.productoService.getPromocionSinonimos(sector, codigo)
137	.subscribe((res: Sinonimo[]) => {	138	.subscribe((res: Sinonimo[]) => {
138		139
139	res.forEach(sinonimo => {	140	res.forEach(sinonimo => {
140		141
141	sinonimo.productos.forEach(productoSinonimo => {	142	sinonimo.productos.forEach(productoSinonimo => {
142		143
143	this.promoAcargar.productos.forEach(productoPromo => {	144	this.promoAcargar.productos.forEach(productoPromo => {
144		145
145	if (productoSinonimo.id === productoPromo.id) {	146	if (productoSinonimo.id === productoPromo.id) {
146	sinonimo.cantidad = productoPromo.cantidad;	147	sinonimo.cantidad = productoPromo.cantidad;
147	sinonimo.productoPadre = productoPromo.id;	148	sinonimo.productoPadre = productoPromo.id;
148	}	149	}
149	})	150	})
150	})	151	})
151	})	152	})
152		153
153	this.sinonimos = res;	154	this.sinonimos = res;
154	if (res.length > 0)	155	if (res.length > 0)
155	this.showPopover();	156	this.showPopover();
156	})	157	})
157	} else {	158	} else {
158	this.popoverDirective.hide();	159	this.popoverDirective.hide();
159	}	160	}
160	}	161	}
161		162
162	productosPersonalizados($event: Producto[]) {	163	productosPersonalizados($event: Producto[]) {
163		164
164	var productosPersonalizados = $event;	165	var productosPersonalizados = $event;
165		166
166	this.promoAcargar.productos.forEach(productoPromo => {	167	this.promoAcargar.productos.forEach(productoPromo => {
167		168
168	if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);	169	if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
169	})	170	})
170		171
171	this.promoAcargar.productos = productosPersonalizados;	172	this.promoAcargar.productos = productosPersonalizados;
172	}	173	}
173		174
174	buscarByCodigoBarras(busqueda) {	175	buscarByCodigoBarras(busqueda) {
175		176
176	let producto = this.productos.filter(producto => {	177	let producto = this.productos.filter(producto => {
177	return producto.codigoBarra == busqueda;	178	return producto.codigoBarra == busqueda;
178	});	179	});
179		180
180	if (producto.length) {	181	if (producto.length) {
181		182
182	this.productoAcargar = producto[0];	183	this.productoAcargar = producto[0];
183	this.getPromociones();	184	this.getPromociones();
184		185
185	} else {	186	} else {
186	alert('No se encuentra el producto');	187	alert('No se encuentra el producto');
187	}	188	}
188		189
189	}	190	}
190		191
191	}	192	}
192		193

src/app/components/master/master.component.html

Diff comments View file @ 332c7a3

 <div class="row m-0 fade-in">
   <div class="col-10 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <router-outlet></router-outlet>
   </div>
   <!-- SIDEBAR -->
-  <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient"></app-sidebar>
+  <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2">
+  </app-sidebar>
 </div>

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

Diff comments View file @ 332c7a3

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	<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">
4	Mi compra	5	Mi compra
5	<i class="fa fa-shopping-cart" aria-hidden="true"></i>	6	<i class="fa fa-shopping-cart" aria-hidden="true"></i>
6	</p>	7	</p>
7		8
8	<div class="overflow-auto overflow-scroll mb-2 w-100">	9	<div class="overflow-auto overflow-scroll mb-2 w-100">
9	<!-- PRODUCTOS CARRITO -->	10	<!-- PRODUCTOS CARRITO -->
10	<div	11	<div
11	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"
12	*ngFor="let producto of productosCarrito.slice().reverse(); let i = index">	13	*ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
13	<!-- <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}}"> -->
14	<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">
15	<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">
16	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>	17	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
17	<p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>	18	<p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
18	</div>	19	</div>
19	<div class="col-12 pr-1 text-right h6 my-auto ">	20	<div class="col-12 pr-1 text-right h6 my-auto ">
20	<p class="m-0">{{producto.PreVen \| currency}}</p>	21	<p class="m-0">{{producto.PreVen \| currency}}</p>
21	</div>	22	</div>
22	</div>	23	</div>
23	<div class="row m-0 p-0">	24
24	<div class="col-6 px-2 my-2">	25	<!-- BOTONES -->
		26	<div class="row m-0 d-flex justify-content-between">
		27	<!-- SUMAR - RESTAR CANTIDAD -->
		28	<div class="col-auto px-1 my-2">
25	<div class="btn-group-sm btn-group float-left my-auto" role="group">	29	<div class="btn-group-sm btn-group float-left my-auto" role="group">
26	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">	30	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
27	<i class="fa fa-plus" aria-hidden="true"></i>	31	<i class="fa fa-plus" aria-hidden="true"></i>
28	</button>	32	</button>
29	<div class="bg-white border border-white px-3 my-auto text-dark h5">	33	<div class="bg-white border border-white px-3 my-auto text-dark h5">
30	<small>{{producto.cantidad}}</small>	34	<small>{{producto.cantidad}}</small>
31	</div>	35	</div>
32	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">	36	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
33	<i class="fa fa-minus" aria-hidden="true"></i>	37	<i class="fa fa-minus" aria-hidden="true"></i>
34	</button>	38	</button>
35	</div>	39	</div>
36	</div>	40	</div>
37	<div class="col-6 px-2 my-2">	41	<!-- PERSONALIZAR -->
38	<div class="btn-group-sm btn-group float-right my-auto" role="group">	42	<div class="col-auto px-1 my-2">
39	<button	43	<button
40	*ngIf="esPersonalizable(producto)"	44	*ngIf="esPersonalizable(producto)"
41	type="button"	45	type="button"
42	class="btn btn-light btn-sm my-auto float-left border mr-2"	46	class="btn btn-light btn-sm my-auto float-left border"
43	(click)="personalizarPromo">	47	(click)="personalizarPromo">
44	<i class="fa fa-hand-o-up" aria-hidden="true"></i>	48	<i class="fa fa-hand-o-up" aria-hidden="true"></i>
45	</button>	49	</button>
46	<button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">	50	</div>
47	<i class="fa fa-times" aria-hidden="true"></i>	51	<!-- BORRAR -->
48	</button>	52	<div class="col-auto px-1 my-2">
49	</div>	53	<button type="button" class="btn btn-secondary btn-sm my-auto" (click)="deleteProducto(i)">
		54	<i class="fa fa-times" aria-hidden="true"></i>
		55	</button>
50	</div>	56	</div>
51	</div>	57	</div>
52	</div>	58	</div>
53	</div>	59	</div>
54		60
55	<!-- TOTAL -->	61	<!-- TOTAL -->
56	<div class="card rounded-top-sm mt-auto blue-gradient border-0">	62	<div class="card rounded-top-sm mt-auto blue-gradient border-0">
57	<div class="card-body row">	63	<div class="card-body row">
58	<div class="col-12">	64	<div class="col-12">
59	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>	65	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
60	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>	66	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
61	<p class="h3 text-secondary">Total</p>	67	<p class="h3 text-secondary">Total</p>
62	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>	68	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>
63	</div>	69	</div>
64	<div class="col-12">	70	<div class="col-12">
65	<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">	71	<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
66	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>	72	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>
67	<i class="fa fa-check text-success" aria-hidden="true"></i>	73	<i class="fa fa-check text-success" aria-hidden="true"></i>
68	</button>	74	</button>
69	<button	75	<button
70	type="button"	76	type="button"
71	class="btn btn-block btn-light shadow btn-sm shadow"	77	class="btn btn-block btn-light shadow btn-sm shadow"
72	[routerLink]="['/cancelar-compra']">	78	[routerLink]="['/cancelar-compra']">
73	<span class="pr-1">Cancelar</span>	79	<span class="pr-1">Cancelar</span>
74	<i class="fa fa-times text-danger" aria-hidden="true"></i>	80	<i class="fa fa-times text-danger" aria-hidden="true"></i>
75	</button>	81	</button>
76	</div>	82	</div>
77	</div>	83	</div>
78	</div>	84	</div>
79	</div>	85	</div>
80		86