Mauricio Cattafi / autoservicio

Browse Code »

Commit 8424afdf2037c7124e6746df985a745d6ee6a6e7

Authored by Marcelo Puebla 2019-08-08 11:05:59 -0300

1 parent d92feb42f9

Exists in master and in 1 other branch

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

Diff comments View file @ 8424afd

 <div class="row m-0 fade-in">
   <div class="col-10 p-0">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-light text-muted text-center">
           Búsqueda
           <i class="fa fa-search"></i>
         </p>
       </div>
     </div>
     <div class="row m-4 disable-user-select">
       <!-- FILTROS -->
       <div class="col-sm-2">
         <div class="text-center">
           <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
         </div>
         <ul class="list-group">
           <li class="list-group-item list-group-item-action my-1 py-2 h6">
             Combos y Promociones
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
             Todos
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Bebidas
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Sandwichería
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Panaderia
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Golosinas
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Tabaqueria
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div class="col-sm-10">
         <div class="form-group row search">
           <div class="col-sm-10">
             <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
             <input
               type="text"
               class="form-control form-control-lg shadow-sm rounded-pill px-5"
-              placeholder="Búsqueda productos">
+              placeholder="Búsqueda productos"
+              [(ngModel)]="searchTerm"
+              (ngModelChange)="filterItems()">
           </div>
           <!-- BOTON VOLVER -->
           <div class="col-sm-2">
             <button
               type="button"
               class="btn btn-light btn-lg shadow-sm"
               [routerLink]="['/inicio']">
               <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
         </div>
         <!-- LISTA DE PRODUCTOS -->
-        <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
+        <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
-            *ngFor="let producto of productos">
+            *ngFor="let producto of auxProductos">
             <div class="card card-effect bg-white rounded-sm shadow border-0">
               <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
               <div class="card-body p-2">
                 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
                 <div class="row justify-content-between m-0">
                   <div class="col-12 p-0">
                     <div class="text-left">
                       <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
                       <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
                     </div>
                   </div>
                   <div class="col-12 my-auto pt-2 pr-2 p-0">
                       <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
 </div>

src/app/components/busqueda-productos/busqueda-productos.component.scss

Diff comments View file @ 8424afd

 .search .form-control-search {
   position: absolute;
   z-index: 2;
   display: block;
   text-align: center;
   pointer-events: none;
   color: #aaa;
   line-height: inherit;
 }
-.vh-50 {
+.vh-70 {
-  height: 70vh !important;
+  min-height: auto !important;
+  max-height: 70vh !important;
 }

src/app/components/busqueda-productos/busqueda-productos.component.ts

Diff comments View file @ 8424afd

 import { Component, OnInit } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 @Component({
   selector: 'app-busqueda-productos',
   templateUrl: './busqueda-productos.component.html',
   styleUrls: ['./busqueda-productos.component.scss']
 })
 export class BusquedaProductosComponent implements OnInit {
   productos: Producto[] = [];
+  auxProductos: Producto[] = [];
+  searchTerm: string = '';
   constructor(private productoService: ProductoService) { }
   ngOnInit() {
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
-        this.productos = data;
+        this.auxProductos = this.productos = data;
       }, (error) => {
         console.error(error);
       });
   }
+  filterItems() {
+    console.log('');
+    this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
+  }
 }