Martin Macola / autoservicio

Download as
Browse Code »

Commit 11b22496b53a18eb4bef25e7a5ca6e0f5d8d59cf

Authored by Marcelo Puebla
1 parent c3031ecc9e
Exists in master

Arreglo para mostrar el nombre de seccion correspondiente.

Showing 2 changed files with 18 additions and 14 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 11b2249
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 {{title}}
9 <i class="fa fa-search"></i> 9 <i *ngIf="title === 'Búsqueda'" 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 *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> 17 <div *ngIf="queMostrar != 'promociones'" 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 [ngClass]="{active: categoriaActive == 0}" 23 [ngClass]="{active: categoriaActive == 0}"
24 (click)="categoriaActive = 0; filterItems()" 24 (click)="categoriaActive = 0; filterItems()"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Todos 26 Todos
27 </li> 27 </li>
28 <li 28 <li
29 *ngFor="let categoria of categorias" 29 *ngFor="let categoria of categorias"
30 [ngClass]="{active: categoriaActive == categoria.id}" 30 [ngClass]="{active: categoriaActive == categoria.id}"
31 (click)="categoriaActive = categoria.id; filterItems()" 31 (click)="categoriaActive = categoria.id; filterItems()"
32 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 32 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
33 {{categoria.detalle}} 33 {{categoria.detalle}}
34 </li> 34 </li>
35 </ul> 35 </ul>
36 </div> 36 </div>
37 37
38 <!-- SEARCH INPUT --> 38 <!-- SEARCH INPUT -->
39 <div *ngIf="productos.length > 0" class="fade-in col"> 39 <div *ngIf="productos.length > 0" class="fade-in col">
40 40
41 <div class="row search"> 41 <div class="row search">
42 <div class="col-sm-10"> 42 <div class="col-sm-10">
43 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 43 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
44 <input 44 <input
45 [matKeyboard]="'spanish'" 45 [matKeyboard]="'spanish'"
46 type="text" 46 type="text"
47 class="form-control form-control-lg shadow-sm rounded-pill px-5" 47 class="form-control form-control-lg shadow-sm rounded-pill px-5"
48 placeholder="Búsqueda productos" 48 placeholder="Búsqueda productos"
49 [(ngModel)]="searchTerm" 49 [(ngModel)]="searchTerm"
50 (ngModelChange)="filterItems()"> 50 (ngModelChange)="filterItems()">
51 </div> 51 </div>
52 <!-- BOTON VOLVER --> 52 <!-- BOTON VOLVER -->
53 <div class="col-sm-2"> 53 <div class="col-sm-2">
54 <button 54 <button
55 type="button" 55 type="button"
56 class="btn btn-light btn-lg shadow-sm" 56 class="btn btn-light btn-lg shadow-sm"
57 [routerLink]="['/inicio']"> 57 [routerLink]="['/inicio']">
58 <span class="font-weight-normal h6 pr-2">Volver</span> 58 <span class="font-weight-normal h6 pr-2">Volver</span>
59 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 59 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
60 </button> 60 </button>
61 </div> 61 </div>
62 <div class="col-sm-12 my-2 h5"> 62 <div class="col-sm-12 my-2 h5">
63 <button 63 <button
64 class="btn btn-outline-primary badge badge-light px-2 shadow-sm" 64 class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
65 [ngClass]="{'active': ordenandoByVendidos}" 65 [ngClass]="{'active': ordenandoByVendidos}"
66 (click)="ordenandoByVendidos = !ordenandoByVendidos; ordenar()" 66 (click)="ordenandoByVendidos = !ordenandoByVendidos; ordenar()"
67 >Más vendidos</button> 67 >Más vendidos</button>
68 </div> 68 </div>
69 </div> 69 </div>
70 <!-- LISTA DE PRODUCTOS --> 70 <!-- LISTA DE PRODUCTOS -->
71 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 71 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
72 <div 72 <div
73 class="col-4 p-2" 73 class="col-4 p-2"
74 *ngFor="let producto of auxProductos"> 74 *ngFor="let producto of auxProductos">
75 <div 75 <div
76 class="card-effect bg-white rounded-sm shadow border-0" 76 class="card-effect bg-white rounded-sm shadow border-0"
77 (click)="elegirProducto(producto)"> 77 (click)="elegirProducto(producto)">
78 <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 78 <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
79 <div class="p-2"> 79 <div class="p-2">
80 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> 80 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
81 <div class="row m-0"> 81 <div class="row m-0">
82 <div class="col-12 my-auto pt-2 pr-2 p-0"> 82 <div class="col-12 my-auto pt-2 pr-2 p-0">
83 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 83 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 91
92 <!-- SPINNER --> 92 <!-- SPINNER -->
93 <div 93 <div
94 *ngIf="productos.length === 0 && showSpinner" 94 *ngIf="productos.length === 0 && showSpinner"
95 class="col-sm-10 p-0 align-self-center text-center"> 95 class="col-sm-10 p-0 align-self-center text-center">
96 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 96 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
97 <span class="text-secondary m-2 h5">Cargando información.</span> 97 <span class="text-secondary m-2 h5">Cargando información.</span>
98 </div> 98 </div>
99 99
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 11b2249
1 import { Component, OnInit, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, EventEmitter } 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 queMostrar: string = 'todo'; 20 private queMostrar: string = 'todos';
21 private apiImagenes: string = appSettings.apiImagenes; 21 private apiImagenes: string = appSettings.apiImagenes;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 private blurFocus = new EventEmitter(); 23 private blurFocus = new EventEmitter();
24 private ordenandoByVendidos = true; 24 private ordenandoByVendidos = true;
25 private title: string = 'Búsqueda'
25 26
26 constructor( 27 constructor(
27 private productoService: ProductoService, 28 private productoService: ProductoService,
28 private router: Router) { } 29 private router: Router) { }
29 30
30 ngOnInit() { 31 ngOnInit() {
31 32
32 this.queMostrar = this.productoService.mostrar; 33 this.queMostrar = this.productoService.mostrar;
33 34
34 this.productoService.getCategorias() 35 this.productoService.getCategorias()
35 .subscribe((categorias: Categoria[]) => { 36 .subscribe((categorias: Categoria[]) => {
36 37
37 switch (this.queMostrar) { 38 switch (this.queMostrar) {
38 case 'todos': 39 case 'todos':
39 this.categorias = categorias; 40 this.categorias = categorias;
40 this.categoriaActive = 0; 41 this.categoriaActive = 0;
42 this.title = 'Búsqueda';
41 break; 43 break;
42 case 'promociones': 44 case 'promociones':
43 this.categorias = categorias; 45 this.categorias = categorias;
44 this.categoriaActive = 1; 46 this.categoriaActive = 1;
45 break; 47 this.title = 'Promociones';
46 case 'ordenar': 48 break;
47 49 case 'ordenar':
48 this.categorias = categorias.filter((categoria: Categoria) => { 50
49 return categoria.ES_PEDIDO; 51 this.categorias = categorias.filter((categoria: Categoria) => {
50 }); 52 return categoria.ES_PEDIDO;
51 53 });
52 this.categoriaActive = 0; 54
55 this.categoriaActive = 0;
56 this.title = 'Ordenar';
53 57
54 break; 58 break;
55 default: 59 default:
56 break; 60 break;
57 } 61 }
58 62
59 }); 63 });
60 64
61 this.productoService.productoAcargar = undefined; 65 this.productoService.productoAcargar = undefined;
62 this.productoService.getAll() 66 this.productoService.getAll()
63 .subscribe((data: Producto[]) => { 67 .subscribe((data: Producto[]) => {
64 68
65 this.setProductosSinImagen(data); 69 this.setProductosSinImagen(data);
66 70
67 if (this.queMostrar == 'ordenar') { 71 if (this.queMostrar == 'ordenar') {
68 72
69 this.categorias.forEach((categoria: Categoria) => { 73 this.categorias.forEach((categoria: Categoria) => {
70 74
71 let tempProductos = data.filter((producto: Producto) => { 75 let tempProductos = data.filter((producto: Producto) => {
72 return producto.categoria_selfservice == categoria.id; 76 return producto.categoria_selfservice == categoria.id;
73 }); 77 });
74 78
75 this.productos = this.productos.concat(tempProductos); 79 this.productos = this.productos.concat(tempProductos);
76 80
77 }); 81 });
78 } else { 82 } else {
79 this.productos = data; 83 this.productos = data;
80 } 84 }
81 this.filterItems(); 85 this.filterItems();
82 this.ordenar(); 86 this.ordenar();
83 }, (error) => { 87 }, (error) => {
84 this.showSpinner = false; 88 this.showSpinner = false;
85 console.error(error); 89 console.error(error);
86 }); 90 });
87 } 91 }
88 92
89 filterItems() { 93 filterItems() {
90 94
91 this.auxProductos = this.productos.filter(x => { 95 this.auxProductos = this.productos.filter(x => {
92 if (this.categoriaActive === 0) { 96 if (this.categoriaActive === 0) {
93 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()); 97 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
94 } 98 }
95 else { 99 else {
96 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) && 100 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
97 x.categoria_selfservice === this.categoriaActive; 101 x.categoria_selfservice === this.categoriaActive;
98 } 102 }
99 }); 103 });
100 104
101 } 105 }
102 106
103 agregarAlCarrito(producto: Producto) { 107 agregarAlCarrito(producto: Producto) {
104 108
105 producto.cantidad = 1; 109 producto.cantidad = 1;
106 this.productoService.productos.push(producto); 110 this.productoService.productos.push(producto);
107 } 111 }
108 112
109 ordenar() { 113 ordenar() {
110 114
111 if (this.ordenandoByVendidos) { 115 if (this.ordenandoByVendidos) {
112 116
113 this.auxProductos.sort((a, b) => { 117 this.auxProductos.sort((a, b) => {
114 return b.cantidadVendida - a.cantidadVendida; 118 return b.cantidadVendida - a.cantidadVendida;
115 }); 119 });
116 } else { 120 } else {
117 this.filterItems(); 121 this.filterItems();
118 } 122 }
119 123
120 } 124 }
121 125
122 private elegirProducto(producto: Producto) { 126 private elegirProducto(producto: Producto) {
123 127
124 if (producto.PRO) { 128 if (producto.PRO) {
125 129
126 let imagenes = producto.imagenes; 130 let imagenes = producto.imagenes;
127 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 131 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
128 .subscribe(res => { 132 .subscribe(res => {
129 133
130 this.productoService.productoAcargar = res[0]; 134 this.productoService.productoAcargar = res[0];
131 this.productoService.productoAcargar.imagenes = imagenes; 135 this.productoService.productoAcargar.imagenes = imagenes;
132 this.router.navigate(['inicio']); 136 this.router.navigate(['inicio']);
133 }, 137 },
134 error => { console.error(error); } 138 error => { console.error(error); }
135 ); 139 );
136 } else { 140 } else {
137 141
138 this.productoService.productoAcargar = producto; 142 this.productoService.productoAcargar = producto;
139 this.router.navigate(['inicio']); 143 this.router.navigate(['inicio']);
140 } 144 }
141 145
142 } 146 }
143 147
144 private setProductosSinImagen(productos: Producto[]) { 148 private setProductosSinImagen(productos: Producto[]) {
145 149
146 productos.forEach((producto: Producto) => { 150 productos.forEach((producto: Producto) => {
147 producto.imagenes = producto.imagenes.length == 0 ? 151 producto.imagenes = producto.imagenes.length == 0 ?
148 [{ imagen: 'noImage.jpg' }] : producto.imagenes; 152 [{ imagen: 'noImage.jpg' }] : producto.imagenes;
149 }) 153 })
150 } 154 }
151 } 155 }
152 156