Martin Macola / autoservicio

Download as
Browse Code »

Commit afa8a33658684fdc044275502752915a4651acdd

Authored by Eric Fernandez
2 parents d302da0ddf 827453984b
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !13
Showing 4 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ afa8a33
... ... @@ -16,43 +16,58 @@
16 16 <div class="row m-4 disable-user-select">
17 17  
18 18 <!-- FILTROS -->
19   - <div class="col-sm-2">
  19 + <div class="col-sm-2 p-1">
20 20 <div class="text-center">
21 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
22 22 </div>
23 23 <ul class="list-group">
24   - <li class="list-group-item list-group-item-action my-1 py-2 h6">
  24 + <li
  25 + [ngClass]="{active: categoria == 1}"
  26 + (click)="categoria = 1"
  27 + class="list-group-item list-group-item-action text-center my-1 p-2 h6">
25 28 Combos y Promociones
26 29 </li>
27 30 <li
28   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
  31 + [ngClass]="{active: categoria == 2}"
  32 + (click)="categoria = 2"
  33 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
29 34 Todos
30 35 </li>
31 36 <li
32   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  37 + [ngClass]="{active: categoria == 3}"
  38 + (click)="categoria = 3"
  39 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
33 40 Bebidas
34 41 </li>
35 42 <li
36   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  43 + [ngClass]="{active: categoria == 4}"
  44 + (click)="categoria = 4"
  45 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
37 46 Sandwichería
38 47 </li>
39 48 <li
40   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  49 + [ngClass]="{active: categoria == 5}"
  50 + (click)="categoria = 5"
  51 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
41 52 Panaderia
42 53 </li>
43 54 <li
44   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  55 + [ngClass]="{active: categoria == 6}"
  56 + (click)="categoria = 6"
  57 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
45 58 Golosinas
46 59 </li>
47 60 <li
48   - class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  61 + [ngClass]="{active: categoria == 7}"
  62 + (click)="categoria = 7"
  63 + class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
49 64 Tabaqueria
50 65 </li>
51 66 </ul>
52 67 </div>
53 68  
54 69 <!-- SEARCH INPUT -->
55   - <div class="col-sm-10">
  70 + <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
56 71  
57 72 <div class="form-group row search">
58 73 <div class="col-sm-10">
... ... @@ -81,9 +96,9 @@
81 96 <div
82 97 class="col-4 p-2"
83 98 *ngFor="let producto of auxProductos">
84   - <div class="card card-effect bg-white rounded-sm shadow border-0">
85   - <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
86   - <div class="card-body p-2">
  99 + <div class="card-effect bg-white rounded-sm shadow border-0">
  100 + <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto">
  101 + <div class="p-2">
87 102 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
88 103 <div class="row justify-content-between m-0">
89 104 <div class="col-12 p-0">
... ... @@ -102,6 +117,12 @@
102 117 </div>
103 118 </div>
104 119  
  120 + <!-- SPINNER -->
  121 + <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
  122 + <div class="spinner-border spinner-lg text-secondary" role="status"></div>
  123 + <span class="text-secondary m-2 h5">Cargando información.</span>
  124 + </div>
  125 +
105 126 </div>
106 127  
107 128 </div>
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ afa8a33
... ... @@ -12,3 +12,8 @@
12 12 min-height: auto !important;
13 13 max-height: 70vh !important;
14 14 }
  15 +
  16 +.spinner-lg{
  17 + width: 3rem !important;
  18 + height: 3rem !important;
  19 +}
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ afa8a33
... ... @@ -12,6 +12,8 @@ export class BusquedaProductosComponent implements OnInit {
12 12 productos: Producto[] = [];
13 13 auxProductos: Producto[] = [];
14 14 searchTerm: string = '';
  15 + showSpinner: boolean = true;
  16 + categoria: Categorias = Categorias.todos;
15 17  
16 18 constructor(private productoService: ProductoService) { }
17 19  
... ... @@ -22,7 +24,7 @@ export class BusquedaProductosComponent implements OnInit {
22 24  
23 25 this.auxProductos = this.productos = data;
24 26 }, (error) => {
25   -
  27 + this.showSpinner = false;
26 28 console.error(error);
27 29 });
28 30 }
... ... @@ -33,3 +35,13 @@ export class BusquedaProductosComponent implements OnInit {
33 35 }
34 36  
35 37 }
  38 +
  39 +enum Categorias {
  40 + promosCombos = 1,
  41 + todos = 2,
  42 + bebidas = 3,
  43 + sandwicheria = 4,
  44 + panaderia = 5,
  45 + golosinas = 6,
  46 + tabaqueria = 7,
  47 +}
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ afa8a33
1   -@import "../../../node_modules/bootstrap/scss/functions";
  1 +@import "../../../node_modules/bootstrap/scss/functions";
2 2 @import "../../../node_modules/bootstrap/scss/variables";
3 3  
4 4 $theme-colors: (
5   - primary: red,
6   - light: white,
  5 + primary: #2872ae,
  6 + light: white
7 7 );
8 8  
  9 +.list-group-item.active {
  10 + background-color: #2872ae !important;
  11 + border-color: #2872ae !important;
  12 +}
  13 +
9 14 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";