Mauricio Cattafi / autoservicio

Browse Code »

Commit ae020369cd2976b564e21f4a7e2a6c925c9dc315

Authored by Marcelo Puebla 2019-08-20 09:50:59 -0300

1 parent f09b30280b

Exists in master and in 1 other branch

Quitado scroll de body, quitado boton de cargar producto en busqueda de productos.

Showing 3 changed files with 6 additions and 23 deletions Show diff stats

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

Diff comments View file @ ae02036

 <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
             *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="form-group row search">
+        <div class="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 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)="mostrarBotonCargar(producto)">
+              (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.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 fade-bottom">
-                  <div class="col-sm-12">
-                    <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 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>

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

Diff comments View file @ ae02036

 import { Component, OnInit } 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 showBtnCargarProducto: boolean = false;
   private categorias: Categoria[] = [];
   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.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()) &&
         x.categoria_selfservice == this.categoriaActive;
     });
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(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']);
   }
 }

src/styles.scss

Diff comments View file @ ae02036

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
   font-family: bahnschrift;
+  overflow: hidden !important;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
     width: 1em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
   background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .bg-primary-gradient-horizontal {
   background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
 }
 .rounded-bottom-right {
   border-bottom-right-radius: 10rem;
   &:before {
     border-radius: 0 40px 40px 0;
     background-color: #fff;
   }
 }
 .rounded-top-left {
   border-top-left-radius: 10rem;
 }
 .bg-gray {
   background-color: #cccccc;
 }