Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit be382a8c066b5b409e474740de6f228da3cb3525

Authored by Eric Fernandez
1 parent 0b97774414
Exists in master and in 1 other branch validar_pve

filtro ordernar by

Showing 3 changed files with 20 additions and 4 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ be382a8
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 *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 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span> 63 <button
64 class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
65 [ngClass]="{'active': ordenandoByVendidos}"
66 (click)="ordenandoByVendidos = !ordenandoByVendidos; ordenar()"
67 >Más vendidos</button>
64 </div> 68 </div>
65 </div> 69 </div>
66 <!-- LISTA DE PRODUCTOS --> 70 <!-- LISTA DE PRODUCTOS -->
67 <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">
68 <div 72 <div
69 class="col-4 p-2" 73 class="col-4 p-2"
70 *ngFor="let producto of auxProductos"> 74 *ngFor="let producto of auxProductos">
71 <div 75 <div
72 class="card-effect bg-white rounded-sm shadow border-0" 76 class="card-effect bg-white rounded-sm shadow border-0"
73 (click)="elegirProducto(producto)"> 77 (click)="elegirProducto(producto)">
74 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 78 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
75 <div class="p-2"> 79 <div class="p-2">
76 <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>
77 <div class="row m-0"> 81 <div class="row m-0">
78 <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">
79 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 83 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
80 </div> 84 </div>
81 </div> 85 </div>
82 </div> 86 </div>
83 </div> 87 </div>
84 </div> 88 </div>
85 </div> 89 </div>
86 </div> 90 </div>
87 91
88 <!-- SPINNER --> 92 <!-- SPINNER -->
89 <div 93 <div
90 *ngIf="productos.length === 0 && showSpinner" 94 *ngIf="productos.length === 0 && showSpinner"
91 class="col-sm-10 p-0 align-self-center text-center"> 95 class="col-sm-10 p-0 align-self-center text-center">
92 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 96 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
93 <span class="text-secondary m-2 h5">Cargando información.</span> 97 <span class="text-secondary m-2 h5">Cargando información.</span>
94 </div> 98 </div>
95 99
96 </div> 100 </div>
97 101
98 </div> 102 </div>
99 103
100 </div> 104 </div>
101 105
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ be382a8
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 = 'todo';
21 private apiUrl: string = appSettings.apiUrl; 21 private apiUrl: string = appSettings.apiUrl;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 private blurFocus = new EventEmitter(); 23 private blurFocus = new EventEmitter();
24 private ordenandoByVendidos = true;
24 25
25 constructor( 26 constructor(
26 private productoService: ProductoService, 27 private productoService: ProductoService,
27 private router: Router) { } 28 private router: Router) { }
28 29
29 ngOnInit() { 30 ngOnInit() {
30 31
31 this.queMostrar = this.productoService.mostrar; 32 this.queMostrar = this.productoService.mostrar;
32 33
33 this.productoService.getCategorias() 34 this.productoService.getCategorias()
34 .subscribe((categorias: Categoria[]) => { 35 .subscribe((categorias: Categoria[]) => {
35 36
36 switch (this.queMostrar) { 37 switch (this.queMostrar) {
37 case 'todos': 38 case 'todos':
38 this.categorias = categorias; 39 this.categorias = categorias;
39 this.categoriaActive = 0; 40 this.categoriaActive = 0;
40 break; 41 break;
41 case 'promociones': 42 case 'promociones':
42 this.categorias = categorias; 43 this.categorias = categorias;
43 this.categoriaActive = 1; 44 this.categoriaActive = 1;
44 break; 45 break;
45 case 'ordenar': 46 case 'ordenar':
46 47
47 this.categorias = categorias.filter((categoria: Categoria) => { 48 this.categorias = categorias.filter((categoria: Categoria) => {
48 return categoria.ES_PEDIDO; 49 return categoria.ES_PEDIDO;
49 }); 50 });
50 51
51 this.categoriaActive = 0; 52 this.categoriaActive = 0;
52 53
53 break; 54 break;
54 default: 55 default:
55 break; 56 break;
56 } 57 }
57 58
58 }); 59 });
59 60
60 this.productoService.productoAcargar = undefined; 61 this.productoService.productoAcargar = undefined;
61 this.productoService.getAll() 62 this.productoService.getAll()
62 .subscribe((data: Producto[]) => { 63 .subscribe((data: Producto[]) => {
63 64
64 this.setProductosSinImagen(data); 65 this.setProductosSinImagen(data);
65 66
66 if (this.queMostrar == 'ordenar') { 67 if (this.queMostrar == 'ordenar') {
67 68
68 this.categorias.forEach((categoria: Categoria) => { 69 this.categorias.forEach((categoria: Categoria) => {
69 70
70 let tempProductos = data.filter((producto: Producto) => { 71 let tempProductos = data.filter((producto: Producto) => {
71 return producto.categoria_selfservice == categoria.id; 72 return producto.categoria_selfservice == categoria.id;
72 }); 73 });
73 74
74 this.productos = this.productos.concat(tempProductos); 75 this.productos = this.productos.concat(tempProductos);
75 76
76 }); 77 });
77 } else { 78 } else {
78 this.productos = data; 79 this.productos = data;
79 } 80 }
80 this.filterItems(); 81 this.filterItems();
82 this.ordenar();
81 }, (error) => { 83 }, (error) => {
82 this.showSpinner = false; 84 this.showSpinner = false;
83 console.error(error); 85 console.error(error);
84 }); 86 });
85 } 87 }
86 88
87 filterItems() { 89 filterItems() {
88 90
89 this.auxProductos = this.productos.filter(x => { 91 this.auxProductos = this.productos.filter(x => {
90 if (this.categoriaActive === 0) { 92 if (this.categoriaActive === 0) {
91 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()); 93 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
92 } 94 }
93 else { 95 else {
94 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) && 96 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
95 x.categoria_selfservice === this.categoriaActive; 97 x.categoria_selfservice === this.categoriaActive;
96 } 98 }
97 }); 99 });
98 100
99 } 101 }
100 102
101 agregarAlCarrito(producto: Producto) { 103 agregarAlCarrito(producto: Producto) {
102 104
103 producto.cantidad = 1; 105 producto.cantidad = 1;
104 this.productoService.productos.push(producto); 106 this.productoService.productos.push(producto);
105 } 107 }
106 108
107 lostBlur() { 109 ordenar() {
108 this.blurFocus.emit(); 110
111 if (this.ordenandoByVendidos) {
112
113 this.auxProductos.sort((a, b) => {
114 return b.cantidadVendida - a.cantidadVendida;
115 });
116 } else {
117 this.filterItems();
118 }
119
109 } 120 }
110 121
111 private elegirProducto(producto: Producto) { 122 private elegirProducto(producto: Producto) {
112 123
113 if (producto.PRO) { 124 if (producto.PRO) {
114 125
115 let imagenes = producto.imagenes; 126 let imagenes = producto.imagenes;
116 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 127 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
117 .subscribe(res => { 128 .subscribe(res => {
118 129
119 this.productoService.productoAcargar = res[0]; 130 this.productoService.productoAcargar = res[0];
120 this.productoService.productoAcargar.imagenes = imagenes; 131 this.productoService.productoAcargar.imagenes = imagenes;
121 this.router.navigate(['inicio']); 132 this.router.navigate(['inicio']);
122 }, 133 },
123 error => { console.error(error); } 134 error => { console.error(error); }
124 ); 135 );
125 } else { 136 } else {
126 137
127 this.productoService.productoAcargar = producto; 138 this.productoService.productoAcargar = producto;
128 this.router.navigate(['inicio']); 139 this.router.navigate(['inicio']);
129 } 140 }
130 141
131 } 142 }
132 143
133 private setProductosSinImagen(productos: Producto[]) { 144 private setProductosSinImagen(productos: Producto[]) {
134 145
135 productos.forEach((producto: Producto) => { 146 productos.forEach((producto: Producto) => {
136 producto.imagenes = producto.imagenes.length == 0 ? 147 producto.imagenes = producto.imagenes.length == 0 ?
137 [{ imagen: 'noImage.jpg' }] : producto.imagenes; 148 [{ imagen: 'noImage.jpg' }] : producto.imagenes;
138 }) 149 })
139 } 150 }
140 } 151 }
141 152
src/app/wrappers/producto.ts
Diff comments   View file @ be382a8
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 categoria_selfservice: number; 90 categoria_selfservice: number;
91 cantidad?: number; 91 cantidad?: number;
92 esPadre?: boolean; 92 esPadre?: boolean;
93 codigoBarra: string; 93 codigoBarra: string;
94 idSinonimo?: number; 94 idSinonimo?: number;
95 productos?: Producto[]; 95 productos?: Producto[];
96 tieneSinonimos?: boolean; 96 tieneSinonimos?: boolean;
97 imagenes: object[] 97 imagenes: object[],
98 cantidadVendida: number
98 } 99 }
99 100