Martin Macola / autoservicio

Download as
Browse Code »

Commit 06f1222784b3f03b82a61979a5f13ba192800ea3

Authored by Marcelo Puebla
2 parents 3960d7b593 8f882ada04
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request !80
Showing 2 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 06f1222
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 {{title}} 8 {{title}}
9 <i *ngIf="title === 'Búsqueda'" 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; filterItems()"
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 @ 06f1222
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 = 'todos'; 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 private title: string = 'Búsqueda'
26 26
27 constructor( 27 constructor(
28 private productoService: ProductoService, 28 private productoService: ProductoService,
29 private router: Router) { } 29 private router: Router) { }
30 30
31 ngOnInit() { 31 ngOnInit() {
32 32
33 this.queMostrar = this.productoService.mostrar; 33 this.queMostrar = this.productoService.mostrar;
34 34
35 this.productoService.getCategorias() 35 this.productoService.getCategorias()
36 .subscribe((categorias: Categoria[]) => { 36 .subscribe((categorias: Categoria[]) => {
37 37
38 switch (this.queMostrar) { 38 switch (this.queMostrar) {
39 case 'todos': 39 case 'todos':
40 this.categorias = categorias; 40 this.categorias = categorias;
41 this.categoriaActive = 0; 41 this.categoriaActive = 0;
42 this.title = 'Búsqueda'; 42 this.title = 'Búsqueda';
43 break; 43 break;
44 case 'promociones': 44 case 'promociones':
45 this.categorias = categorias; 45 this.categorias = categorias;
46 this.categoriaActive = 1; 46 this.categoriaActive = 1;
47 this.title = 'Promociones'; 47 this.title = 'Promociones';
48 break; 48 break;
49 case 'ordenar': 49 case 'ordenar':
50 this.categorias = categorias.filter((categoria: Categoria) => { 50 this.categorias = categorias.filter((categoria: Categoria) => {
51 return categoria.ES_PEDIDO; 51 return categoria.ES_PEDIDO;
52 }); 52 });
53 this.categoriaActive = 0; 53 this.categoriaActive = 0;
54 this.title = 'Ordenar'; 54 this.title = 'Ordenar';
55 break; 55 break;
56 default: 56 default:
57 this.categorias = categorias; 57 this.categorias = categorias;
58 this.categoriaActive = 0; 58 this.categoriaActive = 0;
59 this.title = 'Búsqueda'; 59 this.title = 'Búsqueda';
60 break; 60 break;
61 } 61 }
62 }); 62 });
63 63
64 this.productoService.productoAcargar = undefined; 64 this.productoService.productoAcargar = undefined;
65 this.productoService.getAll() 65 this.productoService.getAll()
66 .subscribe((data: Producto[]) => { 66 .subscribe((data: Producto[]) => {
67 67
68 this.setProductosSinImagen(data); 68 this.setProductosSinImagen(data);
69 69
70 if (this.queMostrar == 'ordenar') { 70 if (this.queMostrar == 'ordenar') {
71 71
72 this.categorias.forEach((categoria: Categoria) => { 72 this.categorias.forEach((categoria: Categoria) => {
73 73
74 let tempProductos = data.filter((producto: Producto) => { 74 let tempProductos = data.filter((producto: Producto) => {
75 return producto.categoria_selfservice == categoria.id; 75 return producto.categoria_selfservice == categoria.id;
76 }); 76 });
77 77
78 this.productos = this.productos.concat(tempProductos); 78 this.productos = this.productos.concat(tempProductos);
79 79
80 }); 80 });
81 } else { 81 } else {
82 this.productos = data; 82 this.productos = data;
83 } 83 }
84 this.filterItems(); 84 this.filterItems();
85 this.ordenar();
86 }, (error) => { 85 }, (error) => {
87 this.showSpinner = false; 86 this.showSpinner = false;
88 console.error(error); 87 console.error(error);
89 }); 88 });
90 } 89 }
91 90
92 filterItems() { 91 filterItems() {
93 92
94 this.auxProductos = this.productos.filter(x => { 93 this.auxProductos = this.productos.filter(x => {
95 if (this.categoriaActive === 0) { 94 if (this.categoriaActive === 0) {
96 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()); 95 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
97 } 96 }
98 else { 97 else {
99 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) && 98 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
100 x.categoria_selfservice === this.categoriaActive; 99 x.categoria_selfservice === this.categoriaActive;
101 } 100 }
102 }); 101 });
103 102
103 this.ordenar();
104
104 } 105 }
105 106
106 agregarAlCarrito(producto: Producto) { 107 agregarAlCarrito(producto: Producto) {
107 108
108 producto.cantidad = 1; 109 producto.cantidad = 1;
109 this.productoService.productos.push(producto); 110 this.productoService.productos.push(producto);
110 } 111 }
111 112
112 ordenar() { 113 ordenar() {
113 114
114 if (this.ordenandoByVendidos) { 115 if (this.ordenandoByVendidos) {
115 116
116 this.auxProductos.sort((a, b) => { 117 this.auxProductos.sort((a, b) => {
117 return b.cantidadVendida - a.cantidadVendida; 118 return b.cantidadVendida - a.cantidadVendida;
118 }); 119 });
119 } else {
120 this.filterItems();
121 } 120 }
122 121
123 } 122 }
124 123
125 private elegirProducto(producto: Producto) { 124 private elegirProducto(producto: Producto) {
126 125
127 if (producto.PRO) { 126 if (producto.PRO) {
128 127
129 let imagenes = producto.imagenes; 128 let imagenes = producto.imagenes;
130 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 129 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
131 .subscribe(res => { 130 .subscribe(res => {
132 131
133 this.productoService.productoAcargar = res[0]; 132 this.productoService.productoAcargar = res[0];
134 this.productoService.productoAcargar.imagenes = imagenes; 133 this.productoService.productoAcargar.imagenes = imagenes;
135 this.router.navigate(['inicio']); 134 this.router.navigate(['inicio']);
136 }, 135 },
137 error => { console.error(error); } 136 error => { console.error(error); }
138 ); 137 );
139 } else { 138 } else {
140 139
141 this.productoService.productoAcargar = producto; 140 this.productoService.productoAcargar = producto;
142 this.router.navigate(['inicio']); 141 this.router.navigate(['inicio']);
143 } 142 }
144 143
145 } 144 }
146 145
147 private setProductosSinImagen(productos: Producto[]) { 146 private setProductosSinImagen(productos: Producto[]) {
148 147
149 productos.forEach((producto: Producto) => { 148 productos.forEach((producto: Producto) => {
150 producto.imagenes = producto.imagenes.length == 0 ? 149 producto.imagenes = producto.imagenes.length == 0 ?
151 [{ imagen: 'noImage.jpg' }] : producto.imagenes; 150 [{ imagen: 'noImage.jpg' }] : producto.imagenes;
152 }) 151 })
153 } 152 }