Martin Macola / autoservicio

Download as
Browse Code »

Commit ccc4d9fa3f1e1d86b49a4c7d30ecacfde90dc1c9

Authored by Marcelo Puebla
1 parent 9fc6482d75
Exists in master

Ocultar spinner si ocurre un error.

Showing 2 changed files with 3 additions and 2 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ ccc4d9f
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center"> 9 <p class="h5 py-1 bg-light text-muted text-center">
10 Búsqueda 10 Búsqueda
11 <i class="fa fa-search"></i> 11 <i class="fa fa-search"></i>
12 </p> 12 </p>
13 </div> 13 </div>
14 </div> 14 </div>
15 15
16 <div class="row m-4 disable-user-select"> 16 <div class="row m-4 disable-user-select">
17 17
18 <!-- FILTROS --> 18 <!-- FILTROS -->
19 <div class="col-sm-2"> 19 <div class="col-sm-2">
20 <div class="text-center"> 20 <div class="text-center">
21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
22 </div> 22 </div>
23 <ul class="list-group"> 23 <ul class="list-group">
24 <li class="list-group-item list-group-item-action my-1 py-2 h6"> 24 <li class="list-group-item list-group-item-action my-1 py-2 h6">
25 Combos y Promociones 25 Combos y Promociones
26 </li> 26 </li>
27 <li 27 <li
28 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold"> 28 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
29 Todos 29 Todos
30 </li> 30 </li>
31 <li 31 <li
32 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm"> 32 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
33 Bebidas 33 Bebidas
34 </li> 34 </li>
35 <li 35 <li
36 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm"> 36 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
37 Sandwichería 37 Sandwichería
38 </li> 38 </li>
39 <li 39 <li
40 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm"> 40 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
41 Panaderia 41 Panaderia
42 </li> 42 </li>
43 <li 43 <li
44 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm"> 44 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
45 Golosinas 45 Golosinas
46 </li> 46 </li>
47 <li 47 <li
48 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm"> 48 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
49 Tabaqueria 49 Tabaqueria
50 </li> 50 </li>
51 </ul> 51 </ul>
52 </div> 52 </div>
53 53
54 <!-- SEARCH INPUT --> 54 <!-- SEARCH INPUT -->
55 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 55 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
56 56
57 <div class="form-group row search"> 57 <div class="form-group row search">
58 <div class="col-sm-10"> 58 <div class="col-sm-10">
59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
60 <input 60 <input
61 type="text" 61 type="text"
62 class="form-control form-control-lg shadow-sm rounded-pill px-5" 62 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63 placeholder="Búsqueda productos" 63 placeholder="Búsqueda productos"
64 [(ngModel)]="searchTerm" 64 [(ngModel)]="searchTerm"
65 (ngModelChange)="filterItems()"> 65 (ngModelChange)="filterItems()">
66 </div> 66 </div>
67 <!-- BOTON VOLVER --> 67 <!-- BOTON VOLVER -->
68 <div class="col-sm-2"> 68 <div class="col-sm-2">
69 <button 69 <button
70 type="button" 70 type="button"
71 class="btn btn-light btn-lg shadow-sm" 71 class="btn btn-light btn-lg shadow-sm"
72 [routerLink]="['/inicio']"> 72 [routerLink]="['/inicio']">
73 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span> 73 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
74 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 74 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
75 </button> 75 </button>
76 </div> 76 </div>
77 </div> 77 </div>
78 78
79 <!-- LISTA DE PRODUCTOS --> 79 <!-- LISTA DE PRODUCTOS -->
80 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 80 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
81 <div 81 <div
82 class="col-4 p-2" 82 class="col-4 p-2"
83 *ngFor="let producto of auxProductos"> 83 *ngFor="let producto of auxProductos">
84 <div class="card-effect bg-white rounded-sm shadow border-0"> 84 <div class="card-effect bg-white rounded-sm shadow border-0">
85 <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto"> 85 <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto">
86 <div class="p-2"> 86 <div class="p-2">
87 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 87 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
88 <div class="row justify-content-between m-0"> 88 <div class="row justify-content-between m-0">
89 <div class="col-12 p-0"> 89 <div class="col-12 p-0">
90 <div class="text-left"> 90 <div class="text-left">
91 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 91 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
92 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 92 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
93 </div> 93 </div>
94 </div> 94 </div>
95 <div class="col-12 my-auto pt-2 pr-2 p-0"> 95 <div class="col-12 my-auto pt-2 pr-2 p-0">
96 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 96 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
97 </div> 97 </div>
98 </div> 98 </div>
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
105 <!-- SPINNER --> 105 <!-- SPINNER -->
106 <div *ngIf="productos.length === 0" class="col-sm-10 align-self-center"> 106 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
107 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 107 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
108 <span class="text-secondary m-2 h5">Cargando información.</span> 108 <span class="text-secondary m-2 h5">Cargando información.</span>
109 </div> 109 </div>
110 110
111 </div> 111 </div>
112 112
113 </div> 113 </div>
114 114
115 <!-- SIDEBAR --> 115 <!-- SIDEBAR -->
116 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 116 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
117 </div> 117 </div>
118 118
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ ccc4d9f
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-busqueda-productos', 6 selector: 'app-busqueda-productos',
7 templateUrl: './busqueda-productos.component.html', 7 templateUrl: './busqueda-productos.component.html',
8 styleUrls: ['./busqueda-productos.component.scss'] 8 styleUrls: ['./busqueda-productos.component.scss']
9 }) 9 })
10 export class BusquedaProductosComponent implements OnInit { 10 export class BusquedaProductosComponent implements OnInit {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 auxProductos: Producto[] = []; 13 auxProductos: Producto[] = [];
14 searchTerm: string = ''; 14 searchTerm: string = '';
15 showSpinner: boolean = true;
15 16
16 constructor(private productoService: ProductoService) { } 17 constructor(private productoService: ProductoService) { }
17 18
18 ngOnInit() { 19 ngOnInit() {
19 20
20 this.productoService.getAll() 21 this.productoService.getAll()
21 .subscribe((data: Producto[]) => { 22 .subscribe((data: Producto[]) => {
22 23
23 this.auxProductos = this.productos = data; 24 this.auxProductos = this.productos = data;
24 }, (error) => { 25 }, (error) => {
25 26 this.showSpinner = false;
26 console.error(error); 27 console.error(error);
27 }); 28 });
28 } 29 }
29 30
30 filterItems() { 31 filterItems() {
31 console.log(''); 32 console.log('');
32 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); 33 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
33 } 34 }
34 35
35 } 36 }
36 37