Mauricio Cattafi / autoservicio

Browse Code »

Commit b98fa43e302d27092b73e3da6018b5237cd58566

Authored by Marcelo Puebla 2019-08-22 15:14:26 -0300

1 parent 42f74088a6

Exists in master and in 1 other branch

Agregado filtro Todos.

Showing 2 changed files with 13 additions and 4 deletions Show diff stats

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

Diff comments View file @ b98fa43

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center">
           Búsqueda
           <i class="fa fa-search"></i>
         </p>
       </div>
     </div>
     <div class="row m-3 disable-user-select">
       <!-- FILTROS -->
       <div *ngIf="verCategorias" 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
+            [ngClass]="{active: categoriaActive == 0}"
+            (click)="categoriaActive = 0; filterItems()"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6">
+            Todos
+          </li>
+          <li
             *ngFor="let categoria of categorias"
             [ngClass]="{active: categoriaActive == categoria.id}"
             (click)="categoriaActive = categoria.id; filterItems()"
             class="list-group-item list-group-item-action text-center my-1 p-2 h6">
             {{categoria.detalle}}
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div *ngIf="productos.length > 0" class="fade-in col">
         <div class="row search">
           <div class="col-sm-10">
             <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
             <input
               [matKeyboard]="'spanish'"
               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 pr-2">Volver</span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
           <div class="col-sm-12 my-2">
             <span class="badge badge-light px-2">Más vendidos</span>
           </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"
               (click)="elegirProducto(producto)">
               <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 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.DET_LAR}}</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 p-0 align-self-center text-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>
 </div>

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

Diff comments View file @ b98fa43

 import { Component, OnInit, EventEmitter } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { Categoria } from 'src/app/wrappers/categoria';
 import { appSettings } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
 @Component({
   selector: 'app-busqueda-productos',
   templateUrl: './busqueda-productos.component.html',
   styleUrls: ['./busqueda-productos.component.scss']
 })
 export class BusquedaProductosComponent implements OnInit {
   private productos: Producto[] = [];
   private auxProductos: Producto[] = [];
   private searchTerm: string = '';
   private categoriaActive: number = null;
   private showSpinner: boolean = true;
   private verCategorias: boolean = true;
   private apiUrl: string = appSettings.apiUrl;
   private categorias: Categoria[] = [];
   private blurFocus = new EventEmitter();
   constructor(
     private productoService: ProductoService,
     private router: Router) { }
   ngOnInit() {
     this.verCategorias = this.productoService.verCategoriasProductos;
     this.productoService.getCategorias()
       .subscribe((categorias: Categoria[]) => {
         this.categorias = categorias;
-        this.categoriaActive = this.verCategorias ? 1 : categorias[0].id;
+        this.categoriaActive = this.verCategorias ? 0 : categorias[0].id;
       });
     this.productoService.productoAcargar = undefined;
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.productos = data;
         this.filterItems();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     this.auxProductos = this.productos.filter(x => {
-      return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
+      if (this.categoriaActive === 0)
-        x.categoria_selfservice == this.categoriaActive;
+        return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
+      else
+        return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
+          x.categoria_selfservice === this.categoriaActive;
     });
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
   }
   lostBlur() {
     this.blurFocus.emit();
   }
   private elegirProducto(producto: Producto) {
     if (producto.PRO) {
       let imagenes = producto.imagenes;
       this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
         .subscribe(res => {
           this.productoService.productoAcargar = res[0];
           this.productoService.productoAcargar.imagenes = imagenes;
           this.router.navigate(['inicio']);
         },
           error => { console.error(error); }
         );
-    }else {
+    } else {
       this.productoService.productoAcargar = producto;
       this.router.navigate(['inicio']);
     }
   }
 }