Commit 8424afdf2037c7124e6746df985a745d6ee6a6e7
1 parent
d92feb42f9
Exists in
master
Agregado filtro de busqueda de productos.
Showing
3 changed files
with
16 additions
and
6 deletions
Show diff stats
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
src/app/components/busqueda-productos/busqueda-productos.component.ts
... | ... | @@ -10,6 +10,8 @@ import { Producto } from 'src/app/wrappers/producto'; |
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 | } |