Martin Macola / autoservicio

Browse Code »

Commit 1abd6a9f974396ee4203aa7e7ab00d3eb71be765

Authored by Marcelo Puebla 2019-08-08 12:37:04 -0300

1 parent 2bfe01da15

Exists in master

Agregado enum para filtro por categoria.

Showing 2 changed files with 34 additions and 8 deletions Show diff stats

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

Diff comments View file @ 1abd6a9

 <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="col-sm-2 p-1">
         <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">
+          <li
+            [ngClass]="{active: categoria == 1}"
+            (click)="categoria = 1"
+            class="list-group-item list-group-item-action text-center my-1 p-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">
+            [ngClass]="{active: categoria == 2}"
+            (click)="categoria = 2"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Todos
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 3}"
+            (click)="categoria = 3"
+            class="list-group-item list-group-item-action text-center 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">
+            [ngClass]="{active: categoria == 4}"
+            (click)="categoria = 4"
+            class="list-group-item list-group-item-action text-center 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">
+            [ngClass]="{active: categoria == 5}"
+            (click)="categoria = 5"
+            class="list-group-item list-group-item-action text-center 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">
+            [ngClass]="{active: categoria == 6}"
+            (click)="categoria = 6"
+            class="list-group-item list-group-item-action text-center 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">
+            [ngClass]="{active: categoria == 7}"
+            (click)="categoria = 7"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Tabaqueria
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div *ngIf="productos.length > 0" class="fade-in 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"
               [(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 align-items-start vh-70 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
             *ngFor="let producto of auxProductos">
             <div class="card-effect bg-white rounded-sm shadow border-0">
               <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto">
               <div class="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>
       <!-- SPINNER -->
       <div *ngIf="productos.length === 0 && showSpinner"  class="col-sm-10 align-self-center">
           <div class="spinner-border spinner-lg text-secondary" role="status"></div>
           <span class="text-secondary m-2 h5">Cargando información.</span>
       </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.ts

Diff comments View file @ 1abd6a9

 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 = '';
   showSpinner: boolean = true;
+  categoria: Categorias = Categorias.todos;
   constructor(private productoService: ProductoService) { }
   ngOnInit() {
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.auxProductos = this.productos = data;
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     console.log('');
     this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
   }
 }
+enum Categorias {
+  promosCombos = 1,
+  todos = 2,
+  bebidas = 3,
+  sandwicheria = 4,
+  panaderia = 5,
+  golosinas = 6,
+  tabaqueria = 7,
+}