Mauricio Cattafi / autoservicio

Browse Code »

Commit 67f80d2cf5b3af9c6e91cb90a69988da1c78b10d

Authored by Marcelo Puebla 2019-08-13 17:07:12 -0300

1 parent b9c5ea1261

Exists in master and in 1 other branch

Arreglo de imagen y agregada logica para cargar producto.

Showing 2 changed files with 19 additions and 5 deletions Show diff stats

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

Diff comments View file @ 67f80d2

 <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-4 disable-user-select">
       <!-- FILTROS -->
       <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
             [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
             [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
             [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
             [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
             [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
             [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
             [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 pr-2">Volver</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="row align-items-start vh-60 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)="mostrarBotonCargar(producto)">
-              <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
+              <img src="{{apiUrl}}/imagenes/cafe.jpg" 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.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 *ngIf="producto.showCargarProducto" class="row mt-2">
                   <div class="col-sm-12">
-                    <div class="btn btn-block btn-outline-primary shadow">Cargar Producto</div>
+                    <button
+                      type="button"
+                      class="btn btn-block btn-outline-primary shadow"
+                      (click)="elegirProducto(producto)">
+                      Cargar Producto
+                    </button>
                   </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>
 </div>

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

Diff comments View file @ 67f80d2

 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 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 showSpinner: boolean = true;
   private categoria: Categorias = Categorias.todos;
   private apiUrl: string = appSettings.apiUrl;
   private showBtnCargarProducto: boolean = false;
-  constructor(private productoService: ProductoService) { }
+  constructor(
+    private productoService: ProductoService,
+    private router: Router) { }
   ngOnInit() {
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.auxProductos = this.productos = data;
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     this.auxProductos = this.productos.filter(x => {
       return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
     });
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
   }
-  mostrarBotonCargar(producto: Producto) {
+  private mostrarBotonCargar(producto: Producto) {
     for (let i = 0; i < this.auxProductos.length; i++) {
       if (this.auxProductos[i].id !== producto.id)
         this.auxProductos[i].showCargarProducto = false;
       else if (producto.showCargarProducto) return;
     }
     producto.showCargarProducto = !producto.showCargarProducto
   }
+  private elegirProducto(producto: Producto) {
+    this.productoService.productoAcargar = producto;
+    this.router.navigate(['inicio']);
+  }
 }
 enum Categorias {
   promosCombos = 1,
   todos = 2,
   bebidas = 3,
   sandwicheria = 4,
   panaderia = 5,
   golosinas = 6,
   tabaqueria = 7,
 }