Commit 8424afdf2037c7124e6746df985a745d6ee6a6e7

Authored by Marcelo Puebla
1 parent d92feb42f9
Exists in master and in 1 other branch validar_pve

Agregado filtro de busqueda de productos.

src/app/components/busqueda-productos/busqueda-productos.component.html
... ... @@ -60,7 +60,9 @@
60 60 <input
61 61 type="text"
62 62 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63   - placeholder="Búsqueda productos">
  63 + placeholder="Búsqueda productos"
  64 + [(ngModel)]="searchTerm"
  65 + (ngModelChange)="filterItems()">
64 66 </div>
65 67 <!-- BOTON VOLVER -->
66 68 <div class="col-sm-2">
... ... @@ -75,10 +77,10 @@
75 77 </div>
76 78  
77 79 <!-- LISTA DE PRODUCTOS -->
78   - <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
  80 + <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
79 81 <div
80 82 class="col-4 p-2"
81   - *ngFor="let producto of productos">
  83 + *ngFor="let producto of auxProductos">
82 84 <div class="card card-effect bg-white rounded-sm shadow border-0">
83 85 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
84 86 <div class="card-body p-2">
src/app/components/busqueda-productos/busqueda-productos.component.scss
... ... @@ -8,6 +8,7 @@
8 8 line-height: inherit;
9 9 }
10 10  
11   -.vh-50 {
12   - height: 70vh !important;
  11 +.vh-70 {
  12 + min-height: auto !important;
  13 + max-height: 70vh !important;
13 14 }
src/app/components/busqueda-productos/busqueda-productos.component.ts
... ... @@ -10,6 +10,8 @@ import { Producto } from &#39;src/app/wrappers/producto&#39;;
10 10 export class BusquedaProductosComponent implements OnInit {
11 11  
12 12 productos: Producto[] = [];
  13 + auxProductos: Producto[] = [];
  14 + searchTerm: string = '';
13 15  
14 16 constructor(private productoService: ProductoService) { }
15 17  
... ... @@ -18,11 +20,16 @@ export class BusquedaProductosComponent implements OnInit {
18 20 this.productoService.getAll()
19 21 .subscribe((data: Producto[]) => {
20 22  
21   - this.productos = data;
  23 + this.auxProductos = this.productos = data;
22 24 }, (error) => {
23 25  
24 26 console.error(error);
25 27 });
26 28 }
27 29  
  30 + filterItems() {
  31 + console.log('');
  32 + this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
  33 + }
  34 +
28 35 }