Martin Macola / autoservicio

Download as
Browse Code »

Commit 5b2721a0bd0cb56ce992ce62f74afe0a22665a1d

Authored by Marcelo Puebla
1 parent 390d36d7f6
Exists in master

Logica para no mostrar los filtros de categoria.

Showing 5 changed files with 16 additions and 8 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 5b2721a
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div class="col-sm-2 p-1"> 17 <div *ngIf="verCategorias" class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 *ngFor="let categoria of categorias" 23 *ngFor="let categoria of categorias"
24 [ngClass]="{active: categoriaActive == categoria.id}" 24 [ngClass]="{active: categoriaActive == categoria.id}"
25 (click)="categoriaActive = categoria.id; filterItems()" 25 (click)="categoriaActive = categoria.id; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 {{categoria.detalle}} 27 {{categoria.detalle}}
28 </li> 28 </li>
29 </ul> 29 </ul>
30 </div> 30 </div>
31 31
32 <!-- SEARCH INPUT --> 32 <!-- SEARCH INPUT -->
33 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 33 <div *ngIf="productos.length > 0" class="fade-in col">
34 34
35 <div class="form-group row search"> 35 <div class="form-group row search">
36 <div class="col-sm-10"> 36 <div class="col-sm-10">
37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
38 <input 38 <input
39 type="text" 39 type="text"
40 class="form-control form-control-lg shadow-sm rounded-pill px-5" 40 class="form-control form-control-lg shadow-sm rounded-pill px-5"
41 placeholder="Búsqueda productos" 41 placeholder="Búsqueda productos"
42 [(ngModel)]="searchTerm" 42 [(ngModel)]="searchTerm"
43 (ngModelChange)="filterItems()"> 43 (ngModelChange)="filterItems()">
44 </div> 44 </div>
45 <!-- BOTON VOLVER --> 45 <!-- BOTON VOLVER -->
46 <div class="col-sm-2"> 46 <div class="col-sm-2">
47 <button 47 <button
48 type="button" 48 type="button"
49 class="btn btn-light btn-lg shadow-sm" 49 class="btn btn-light btn-lg shadow-sm"
50 [routerLink]="['/inicio']"> 50 [routerLink]="['/inicio']">
51 <span class="font-weight-normal h6 pr-2">Volver</span> 51 <span class="font-weight-normal h6 pr-2">Volver</span>
52 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 52 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
53 </button> 53 </button>
54 </div> 54 </div>
55 </div> 55 </div>
56 <!-- LISTA DE PRODUCTOS --> 56 <!-- LISTA DE PRODUCTOS -->
57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
58 <div 58 <div
59 class="col-4 p-2" 59 class="col-4 p-2"
60 *ngFor="let producto of auxProductos"> 60 *ngFor="let producto of auxProductos">
61 <div 61 <div
62 class="card-effect bg-white rounded-sm shadow border-0" 62 class="card-effect bg-white rounded-sm shadow border-0"
63 (click)="mostrarBotonCargar(producto)"> 63 (click)="mostrarBotonCargar(producto)">
64 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> 64 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
65 <div class="p-2"> 65 <div class="p-2">
66 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 66 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
67 <div class="row justify-content-between m-0"> 67 <div class="row justify-content-between m-0">
68 <div class="col-12 p-0"> 68 <div class="col-12 p-0">
69 <div class="text-left"> 69 <div class="text-left">
70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="col-12 my-auto pt-2 pr-2 p-0"> 74 <div class="col-12 my-auto pt-2 pr-2 p-0">
75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom"> 78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom">
79 <div class="col-sm-12"> 79 <div class="col-sm-12">
80 <button 80 <button
81 type="button" 81 type="button"
82 class="btn btn-block btn-outline-primary shadow" 82 class="btn btn-block btn-outline-primary shadow"
83 (click)="elegirProducto(producto)"> 83 (click)="elegirProducto(producto)">
84 Cargar Producto 84 Cargar Producto
85 </button> 85 </button>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <!-- SPINNER --> 94 <!-- SPINNER -->
95 <div 95 <div
96 *ngIf="productos.length === 0 && showSpinner" 96 *ngIf="productos.length === 0 && showSpinner"
97 class="col-sm-10 p-0 align-self-center text-center"> 97 class="col-sm-10 p-0 align-self-center text-center">
98 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 98 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
99 <span class="text-secondary m-2 h5">Cargando información.</span> 99 <span class="text-secondary m-2 h5">Cargando información.</span>
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
106 </div> 106 </div>
107 107
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 5b2721a
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Categoria } from 'src/app/wrappers/categoria'; 4 import { Categoria } from 'src/app/wrappers/categoria';
5 import { appSettings } from 'src/etc/AppSettings'; 5 import { appSettings } from 'src/etc/AppSettings';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-busqueda-productos', 9 selector: 'app-busqueda-productos',
10 templateUrl: './busqueda-productos.component.html', 10 templateUrl: './busqueda-productos.component.html',
11 styleUrls: ['./busqueda-productos.component.scss'] 11 styleUrls: ['./busqueda-productos.component.scss']
12 }) 12 })
13 export class BusquedaProductosComponent implements OnInit { 13 export class BusquedaProductosComponent implements OnInit {
14 14
15 private productos: Producto[] = []; 15 private productos: Producto[] = [];
16 private auxProductos: Producto[] = []; 16 private auxProductos: Producto[] = [];
17 private searchTerm: string = ''; 17 private searchTerm: string = '';
18 private categoriaActive: number = null; 18 private categoriaActive: number = null;
19 private showSpinner: boolean = true; 19 private showSpinner: boolean = true;
20 private verCategorias: boolean = true;
20 private apiUrl: string = appSettings.apiUrl; 21 private apiUrl: string = appSettings.apiUrl;
21 private showBtnCargarProducto: boolean = false; 22 private showBtnCargarProducto: boolean = false;
22 private categorias: Categoria[] = []; 23 private categorias: Categoria[] = [];
23 24
24 constructor( 25 constructor(
25 private productoService: ProductoService, 26 private productoService: ProductoService,
26 private router: Router) { } 27 private router: Router) { }
27 28
28 ngOnInit() { 29 ngOnInit() {
29 30
31 this.verCategorias = this.productoService.verCategoriasProductos;
32
30 this.productoService.getCategorias() 33 this.productoService.getCategorias()
31 .subscribe((categorias: Categoria[]) => { 34 .subscribe((categorias: Categoria[]) => {
32 this.categorias = categorias; 35 this.categorias = categorias;
33 this.categoriaActive = categorias[0].id; 36 this.categoriaActive = this.verCategorias ? 1 : categorias[0].id;
34 }); 37 });
35 38
36 this.productoService.productoAcargar = undefined; 39 this.productoService.productoAcargar = undefined;
37 this.productoService.getAll() 40 this.productoService.getAll()
38 .subscribe((data: Producto[]) => { 41 .subscribe((data: Producto[]) => {
39 42
40 this.auxProductos = this.productos = data; 43 this.productos = data;
44 this.filterItems();
41 }, (error) => { 45 }, (error) => {
42 this.showSpinner = false; 46 this.showSpinner = false;
43 console.error(error); 47 console.error(error);
44 }); 48 });
45 } 49 }
46 50
47 filterItems() { 51 filterItems() {
48 52
49 this.auxProductos = this.productos.filter(x => { 53 this.auxProductos = this.productos.filter(x => {
50 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 54 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
51 x.categoria_selfservice == this.categoriaActive; 55 x.categoria_selfservice == this.categoriaActive;
52 }); 56 });
53 } 57 }
54 58
55 agregarAlCarrito(producto: Producto) { 59 agregarAlCarrito(producto: Producto) {
56 60
57 producto.cantidad = 1; 61 producto.cantidad = 1;
58 this.productoService.productos.push(producto); 62 this.productoService.productos.push(producto);
59 } 63 }
60 64
61 private mostrarBotonCargar(producto: Producto) { 65 private mostrarBotonCargar(producto: Producto) {
62 66
63 for (let i = 0; i < this.auxProductos.length; i++) { 67 for (let i = 0; i < this.auxProductos.length; i++) {
64 if (this.auxProductos[i].id !== producto.id) 68 if (this.auxProductos[i].id !== producto.id)
65 this.auxProductos[i].showCargarProducto = false; 69 this.auxProductos[i].showCargarProducto = false;
66 else if (producto.showCargarProducto) return; 70 else if (producto.showCargarProducto) return;
67 } 71 }
68 producto.showCargarProducto = !producto.showCargarProducto 72 producto.showCargarProducto = !producto.showCargarProducto
69 } 73 }
70 74
71 private elegirProducto(producto: Producto) { 75 private elegirProducto(producto: Producto) {
72 76
73 this.productoService.productoAcargar = producto; 77 this.productoService.productoAcargar = producto;
74 this.router.navigate(['inicio']); 78 this.router.navigate(['inicio']);
75 } 79 }
76 } 80 }
77 81
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 5b2721a
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto"> 15 <div
16 (click)="irBusquedaProductos(false)"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
16 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
17 <div class="row"> 19 <div class="row">
18 <div class="col-7"> 20 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
20 </div> 22 </div>
21 <div class="col-5 p-0"> 23 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 25 </div>
24 </div> 26 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 28 </div>
27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
28 <div class="carousel-inner"> 30 <div class="carousel-inner">
29 <div class="carousel-item active"> 31 <div class="carousel-item active">
30 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
31 </div> 33 </div>
32 <div class="carousel-item"> 34 <div class="carousel-item">
33 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
34 </div> 36 </div>
35 <div class="carousel-item"> 37 <div class="carousel-item">
36 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
37 </div> 39 </div>
38 </div> 40 </div>
39 </div> 41 </div>
40 </div> 42 </div>
41 43
42 <!-- ORDENAR --> 44 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left px-4 py-3"> 46 <div class="card-body text-left px-4 py-3">
45 <div class="row"> 47 <div class="row">
46 <div class="col-5"> 48 <div class="col-5">
47 <p class="h3 card-title">Ordenar Pedido</p> 49 <p class="h3 card-title">Ordenar Pedido</p>
48 </div> 50 </div>
49 <div class="col-7 p-0"> 51 <div class="col-7 p-0">
50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
51 </div> 53 </div>
52 </div> 54 </div>
53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
54 </div> 56 </div>
55 <img 57 <img
56 class="card-img-bottom d-block w-100 mx-auto rounded" 58 class="card-img-bottom d-block w-100 mx-auto rounded"
57 src="{{apiUrl}}/imagenes/cafe.jpg"> 59 src="{{apiUrl}}/imagenes/cafe.jpg">
58 </div> 60 </div>
59 </div> 61 </div>
60 62
61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
62 64
63 <!-- CARGAR PRODUCTOS --> 65 <!-- CARGAR PRODUCTOS -->
64 <ng-template #popTemplate> 66 <ng-template #popTemplate>
65 <app-popover-promos 67 <app-popover-promos
66 *ngIf="promociones.length > 0 && sinonimos.length === 0" 68 *ngIf="promociones.length > 0 && sinonimos.length === 0"
67 [popover]="popoverDirective" 69 [popover]="popoverDirective"
68 [popoverContent]="promociones" 70 [popoverContent]="promociones"
69 (promoSeleccionada)="promoSeleccionada($event)" 71 (promoSeleccionada)="promoSeleccionada($event)"
70 class="text-white rounded-sm border-0"> 72 class="text-white rounded-sm border-0">
71 </app-popover-promos> 73 </app-popover-promos>
72 <app-popover-sinonimos 74 <app-popover-sinonimos
73 *ngIf="sinonimos.length > 0" 75 *ngIf="sinonimos.length > 0"
74 [popover]="popoverDirective" 76 [popover]="popoverDirective"
75 [popoverContent]="sinonimos" 77 [popoverContent]="sinonimos"
76 (sinonimoSeleccionado)="sinonimoSeleccionado($event)" 78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
77 class="text-white rounded-sm border-0"> 79 class="text-white rounded-sm border-0">
78 </app-popover-sinonimos> 80 </app-popover-sinonimos>
79 </ng-template> 81 </ng-template>
80 <div 82 <div
81 placement="left" 83 placement="left"
82 triggers="" 84 triggers=""
83 [popover]="popTemplate" 85 [popover]="popTemplate"
84 class="w-100" 86 class="w-100"
85 #pop="bs-popover"> 87 #pop="bs-popover">
86 <div class="card bg-white border-0 shadow rounded mb-auto"> 88 <div class="card bg-white border-0 shadow rounded mb-auto">
87 <div class="card-body text-left px-4 py-3"> 89 <div class="card-body text-left px-4 py-3">
88 <div class="row"> 90 <div class="row">
89 <div class="col-6"> 91 <div class="col-6">
90 <p class="h3 card-title">Cargar Productos</p> 92 <p class="h3 card-title">Cargar Productos</p>
91 </div> 93 </div>
92 <div class="col-6 p-0"> 94 <div class="col-6 p-0">
93 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
94 </div> 96 </div>
95 </div> 97 </div>
96 <p class="h5 card-text text-muted font-weight-light"> 98 <p class="h5 card-text text-muted font-weight-light">
97 Coloque el código de<br> 99 Coloque el código de<br>
98 barras o QR frente al scanner. 100 barras o QR frente al scanner.
99 </p> 101 </p>
100 </div> 102 </div>
101 <div class="row m-4"> 103 <div class="row m-4">
102 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
103 <!-- IMAGEN DE ESCANER --> 105 <!-- IMAGEN DE ESCANER -->
104 <img 106 <img
105 *ngIf="!productoAcargar" 107 *ngIf="!productoAcargar"
106 class="card-img-top d-block w-100 mx-auto rounded-sm" 108 class="card-img-top d-block w-100 mx-auto rounded-sm"
107 src="{{apiUrl}}/imagenes/escanner.jpg"> 109 src="{{apiUrl}}/imagenes/escanner.jpg">
108 110
109 <!-- PRODUCTO A CARGAR --> 111 <!-- PRODUCTO A CARGAR -->
110 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
111 <img 113 <img
112 class="card-img-top d-block w-75 mx-auto rounded-sm" 114 class="card-img-top d-block w-75 mx-auto rounded-sm"
113 src="{{apiUrl}}/imagenes/testImg.jpg"> 115 src="{{apiUrl}}/imagenes/testImg.jpg">
114 116
115 <div class="row justify-content-between m-3"> 117 <div class="row justify-content-between m-3">
116 <div class="col-12 text-left px-1"> 118 <div class="col-12 text-left px-1">
117 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
118 </div> 120 </div>
119 <div class="col-12 text-right mt-2"> 121 <div class="col-12 text-right mt-2">
120 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
121 </div> 123 </div>
122 </div> 124 </div>
123 </div> 125 </div>
124 126
125 <!-- PROMO A CARGAR --> 127 <!-- PROMO A CARGAR -->
126 <div class="fade-in m-0" *ngIf="promoAcargar"> 128 <div class="fade-in m-0" *ngIf="promoAcargar">
127 <img 129 <img
128 class="card-img-top d-block w-100 mx-auto rounded-sm" 130 class="card-img-top d-block w-100 mx-auto rounded-sm"
129 src="{{apiUrl}}/imagenes/testImg.jpg"> 131 src="{{apiUrl}}/imagenes/testImg.jpg">
130 132
131 <div class="row justify-content-between m-3"> 133 <div class="row justify-content-between m-3">
132 <div class="col-12 text-left px-1"> 134 <div class="col-12 text-left px-1">
133 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
134 </div> 136 </div>
135 <div class="col-12 text-right mt-2 align-self-end"> 137 <div class="col-12 text-right mt-2 align-self-end">
136 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p> 138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
137 </div> 139 </div>
138 </div> 140 </div>
139 </div> 141 </div>
140 142
141 </div> 143 </div>
142 <!-- BOTONES DE CARGAR PRODUCTOS--> 144 <!-- BOTONES DE CARGAR PRODUCTOS-->
143 <div 145 <div
144 class="col-5 pr-0" 146 class="col-5 pr-0"
145 *ngIf="promociones.length > 0"> 147 *ngIf="promociones.length > 0">
146 <button 148 <button
147 *ngIf="sinonimos.length > 0" 149 *ngIf="sinonimos.length > 0"
148 type="button" 150 type="button"
149 class="btn btn-light btn-block shadow-sm" 151 class="btn btn-light btn-block shadow-sm"
150 (click)="pop.show()"> 152 (click)="pop.show()">
151 <span class="pr-2">Personalizar</span> 153 <span class="pr-2">Personalizar</span>
152 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
153 </button> 155 </button>
154 <button 156 <button
155 *ngIf="!promoAcargar" 157 *ngIf="!promoAcargar"
156 type="button" 158 type="button"
157 class="btn btn-primary btn-block shadow-sm" 159 class="btn btn-primary btn-block shadow-sm"
158 (click)="pop.show()"> 160 (click)="pop.show()">
159 <span class="pr-2">Mostrar promociones</span> 161 <span class="pr-2">Mostrar promociones</span>
160 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
161 </button> 163 </button>
162 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 164 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
163 <span class="pr-2 font-weight-bold">Confirmar</span> 165 <span class="pr-2 font-weight-bold">Confirmar</span>
164 <i class="fa fa-check text-success" aria-hidden="true"></i> 166 <i class="fa fa-check text-success" aria-hidden="true"></i>
165 </button> 167 </button>
166 <button 168 <button
167 type="button" 169 type="button"
168 class="btn btn-light btn-block shadow-sm" 170 class="btn btn-light btn-block shadow-sm"
169 (click)="deshacerCarga()"> 171 (click)="deshacerCarga()">
170 <span class="pr-2">Deshacer</span> 172 <span class="pr-2">Deshacer</span>
171 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 173 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
172 </button> 174 </button>
173 </div> 175 </div>
174 </div> 176 </div>
175 </div> 177 </div>
176 </div> 178 </div>
177 179
178 <!-- BUSCAR PRODUCTOS --> 180 <!-- BUSCAR PRODUCTOS -->
179 <div (click)="goPage('busqueda-productos')" 181 <div (click)="irBusquedaProductos(true)"
180 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
181 <div class="card-body text-left px-4 py-3"> 183 <div class="card-body text-left px-4 py-3">
182 <div class="row"> 184 <div class="row">
183 <div class="col-6"> 185 <div class="col-6">
184 <p class="h3 card-title">Buscar Productos</p> 186 <p class="h3 card-title">Buscar Productos</p>
185 <p class="h5 card-text text-muted font-weight-light"> 187 <p class="h5 card-text text-muted font-weight-light">
186 Busque aquí los productos<br> 188 Busque aquí los productos<br>
187 que no tienen código </p> 189 que no tienen código </p>
188 </div> 190 </div>
189 <div class="col-6 p-0"> 191 <div class="col-6 p-0">
190 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
191 </div> 193 </div>
192 </div> 194 </div>
193 195
194 </div> 196 </div>
195 </div> 197 </div>
196 198
197 </div> 199 </div>
198 200
199 </div> 201 </div>
200 202
201 </div> 203 </div>
202 </div> 204 </div>
203 205
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 5b2721a
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 import { HostListener } from '@angular/core'; 9 import { HostListener } from '@angular/core';
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 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
19 19
20 if (e.keyCode == 13) { 20 if (e.keyCode == 13) {
21 this.buscarByCodigoBarras(this.busqueda); 21 this.buscarByCodigoBarras(this.busqueda);
22 this.busqueda = ''; 22 this.busqueda = '';
23 } else { 23 } else {
24 this.busqueda += e.key; 24 this.busqueda += e.key;
25 } 25 }
26 26
27 }; 27 };
28 28
29 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 29 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
30 private productoAcargar: Producto; 30 private productoAcargar: Producto;
31 private productos: Producto[]; 31 private productos: Producto[];
32 private promoAcargar: Promocion; 32 private promoAcargar: Promocion;
33 private tienePromo = false; 33 private tienePromo = false;
34 private productoEsPromo = false; 34 private productoEsPromo = false;
35 private busqueda: string = ''; 35 private busqueda: string = '';
36 private sinonimoAcargar: Sinonimo; 36 private sinonimoAcargar: Sinonimo;
37 37
38 promociones: Promocion[] = []; 38 promociones: Promocion[] = [];
39 sinonimos: Sinonimo[] = []; 39 sinonimos: Sinonimo[] = [];
40 apiUrl: string = appSettings.apiUrl 40 apiUrl: string = appSettings.apiUrl
41 41
42 constructor( 42 constructor(
43 private router: Router, 43 private router: Router,
44 private productoService: ProductoService) { } 44 private productoService: ProductoService) { }
45 45
46 ngOnInit() { 46 ngOnInit() {
47 47
48 this.productoAcargar = this.productoService.productoAcargar; 48 this.productoAcargar = this.productoService.productoAcargar;
49 this.getPromociones(); 49 this.getPromociones();
50 this.getProductos(); 50 this.getProductos();
51 } 51 }
52 52
53 getPromociones() { 53 getPromociones() {
54 if (this.productoAcargar) { 54 if (this.productoAcargar) {
55 var sector = this.productoAcargar.CodSec; 55 var sector = this.productoAcargar.CodSec;
56 var codigo = this.productoAcargar.CodArt; 56 var codigo = this.productoAcargar.CodArt;
57 this.productoService.getPromocion(sector, codigo) 57 this.productoService.getPromocion(sector, codigo)
58 .subscribe((res: Promocion[]) => { 58 .subscribe((res: Promocion[]) => {
59 59
60 if (res.length === 0) { 60 if (res.length === 0) {
61 //Si no tiene promociones la cargará al carrito despues de un tiempo 61 //Si no tiene promociones la cargará al carrito despues de un tiempo
62 setTimeout(() => { 62 setTimeout(() => {
63 this.productoService.productos.push(this.productoAcargar); 63 this.productoService.productos.push(this.productoAcargar);
64 this.productoAcargar = undefined; 64 this.productoAcargar = undefined;
65 }, 2000) 65 }, 2000)
66 } else { 66 } else {
67 67
68 this.promociones = res; 68 this.promociones = res;
69 this.popoverDirective.show(); 69 this.popoverDirective.show();
70 } 70 }
71 }, error => { console.error(error); }) 71 }, error => { console.error(error); })
72 } 72 }
73 } 73 }
74 74
75 showPopover() { 75 showPopover() {
76 76
77 this.popoverDirective.show(); 77 this.popoverDirective.show();
78 } 78 }
79 79
80 getProductos() { 80 getProductos() {
81 this.productoService.getAll() 81 this.productoService.getAll()
82 .subscribe((productos: Producto[]) => { 82 .subscribe((productos: Producto[]) => {
83 this.productos = productos; 83 this.productos = productos;
84 }); 84 });
85 } 85 }
86 86
87 private goPage(pageUrl) { 87 private irBusquedaProductos(verPromociones) {
88 88
89 this.router.navigate([pageUrl]); 89 this.productoService.verCategoriasProductos = verPromociones;
90 this.router.navigate(['busqueda-productos']);
90 } 91 }
91 92
92 deshacerCarga() { 93 deshacerCarga() {
93 94
94 if (this.sinonimoAcargar || this.sinonimos.length > 0) { 95 if (this.sinonimoAcargar || this.sinonimos.length > 0) {
95 this.sinonimos = []; 96 this.sinonimos = [];
96 this.sinonimoAcargar = undefined; 97 this.sinonimoAcargar = undefined;
97 this.popoverDirective.hide(); 98 this.popoverDirective.hide();
98 } 99 }
99 100
100 if (this.promoAcargar) { 101 if (this.promoAcargar) {
101 this.promoAcargar = undefined; 102 this.promoAcargar = undefined;
102 this.popoverDirective.show(); 103 this.popoverDirective.show();
103 } else { 104 } else {
104 this.productoAcargar = undefined; 105 this.productoAcargar = undefined;
105 this.promociones = []; 106 this.promociones = [];
106 this.popoverDirective.hide(); 107 this.popoverDirective.hide();
107 } 108 }
108 } 109 }
109 110
110 promoSeleccionada($event: Promocion) { 111 promoSeleccionada($event: Promocion) {
111 112
112 this.promoAcargar = $event; 113 this.promoAcargar = $event;
113 this.popoverDirective.hide(); 114 this.popoverDirective.hide();
114 if (this.promoAcargar.sinonimos) { 115 if (this.promoAcargar.sinonimos) {
115 var sector = this.promoAcargar.sector; 116 var sector = this.promoAcargar.sector;
116 var codigo = this.promoAcargar.codigo; 117 var codigo = this.promoAcargar.codigo;
117 this.productoService.getPromocionSinonimos(sector, codigo) 118 this.productoService.getPromocionSinonimos(sector, codigo)
118 .subscribe((res: Sinonimo[]) => { 119 .subscribe((res: Sinonimo[]) => {
119 res.forEach(resSinonimo => { 120 res.forEach(resSinonimo => {
120 resSinonimo.productos.forEach(productoSinonimo => { 121 resSinonimo.productos.forEach(productoSinonimo => {
121 this.promoAcargar.productos.forEach(productoPromo => { 122 this.promoAcargar.productos.forEach(productoPromo => {
122 if (productoPromo.id === productoSinonimo.id) { 123 if (productoPromo.id === productoSinonimo.id) {
123 productoSinonimo.esPadre = true; 124 productoSinonimo.esPadre = true;
124 } 125 }
125 }); 126 });
126 127
127 }) 128 })
128 }) 129 })
129 this.sinonimos = res; 130 this.sinonimos = res;
130 this.showPopover(); 131 this.showPopover();
131 }) 132 })
132 } 133 }
133 } 134 }
134 135
135 sinonimoSeleccionado($event: Sinonimo) { 136 sinonimoSeleccionado($event: Sinonimo) {
136 137
137 console.log($event); 138 console.log($event);
138 this.sinonimoAcargar = $event; 139 this.sinonimoAcargar = $event;
139 } 140 }
140 141
141 buscarByCodigoBarras(busqueda) { 142 buscarByCodigoBarras(busqueda) {
142 143
143 let producto = this.productos.filter(producto => { 144 let producto = this.productos.filter(producto => {
144 return producto.codigoBarra == busqueda; 145 return producto.codigoBarra == busqueda;
145 }); 146 });
146 147
147 if (producto.length) { 148 if (producto.length) {
148 149
149 this.productoAcargar = producto[0]; 150 this.productoAcargar = producto[0];
150 this.getPromociones(); 151 this.getPromociones();
151 152
152 } else { 153 } else {
153 alert('No se encuentra el producto'); 154 alert('No se encuentra el producto');
154 } 155 }
155 156
156 } 157 }
157 158
158 } 159 }
159 160
src/app/services/producto.service.ts
Diff comments   View file @ 5b2721a
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 verCategoriasProductos: boolean = true;
14 15
15 constructor(private http: HttpClient) { } 16 constructor(private http: HttpClient) { }
16 17
17 getAll(): Observable<any> { 18 getAll(): Observable<any> {
18 19
19 return this.http.get(`${appSettings.apiUrl}/articulos`); 20 return this.http.get(`${appSettings.apiUrl}/articulos`);
20 } 21 }
21 22
22 setProductos(producto: Producto) { 23 setProductos(producto: Producto) {
23 24
24 this.productos.push(producto); 25 this.productos.push(producto);
25 } 26 }
26 27
27 getPromocion(sector, codigo): Observable<any> { 28 getPromocion(sector, codigo): Observable<any> {
28 29
29 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 30 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
30 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 31 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
31 return this.http.get(url); 32 return this.http.get(url);
32 } 33 }
33 34
34 getPromocionSinonimos(sector, codigo): Observable<any> { 35 getPromocionSinonimos(sector, codigo): Observable<any> {
35 36
36 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 37 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
37 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 38 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
38 return this.http.get(url); 39 return this.http.get(url);
39 } 40 }
40 41
41 updateImages(body): Observable<any> { 42 updateImages(body): Observable<any> {
42 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); 43 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
43 } 44 }
44 45
45 getCategorias() { 46 getCategorias() {
46 return this.http.get(`${appSettings.apiUrl}/categorias`); 47 return this.http.get(`${appSettings.apiUrl}/categorias`);
47 } 48 }
48 49
49 } 50 }
50 51