Commit d302da0ddfe10dd10b6bfc05b6b0e61475987e42
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !12
Showing
5 changed files
Show diff stats
src/app/app.module.ts
| ... | ... | @@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'; |
| 3 | 3 | import { NgModule } from '@angular/core'; |
| 4 | 4 | import { AppRoutingModule } from './app-routing.module'; |
| 5 | 5 | import { HttpClientModule } from '@angular/common/http'; |
| 6 | +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | |
| 6 | 7 | //#endregion |
| 7 | 8 | |
| 8 | 9 | //#region COMPONENTS |
| ... | ... | @@ -30,7 +31,10 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/ |
| 30 | 31 | imports: [ |
| 31 | 32 | BrowserModule, |
| 32 | 33 | AppRoutingModule, |
| 33 | - HttpClientModule | |
| 34 | + HttpClientModule, | |
| 35 | + FormsModule, | |
| 36 | + ReactiveFormsModule, | |
| 37 | + ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }) | |
| 34 | 38 | ], |
| 35 | 39 | providers: [], |
| 36 | 40 | bootstrap: [AppComponent] |
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 | } |