Martin Macola / autoservicio

Download as
Browse Code »

Commit df5ac1b54a3d10c59ddc5e4d95930df68302f126

Authored by =
2 parents 280cecb5bc afa8a33658
Exists in master

Cambios en scss

Showing 6 changed files   Show diff stats
src/app/app.module.ts
Diff comments   View file @ df5ac1b
... ... @@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
3 3 import { NgModule } from '@angular/core';
4 4 import { AppRoutingModule } from './app-routing.module';
5 5 import { HttpClientModule } from '@angular/common/http';
  6 +import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6 7 //#endregion
7 8  
8 9 //#region COMPONENTS
... ... @@ -30,7 +31,10 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/
30 31 imports: [
31 32 BrowserModule,
32 33 AppRoutingModule,
33   - HttpClientModule
  34 + HttpClientModule,
  35 + FormsModule,
  36 + ReactiveFormsModule,
  37 + ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
34 38 ],
35 39 providers: [],
36 40 bootstrap: [AppComponent]
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ df5ac1b
... ... @@ -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">
... ... @@ -60,7 +75,9 @@
60 75 <input
61 76 type="text"
62 77 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63   - placeholder="Búsqueda productos">
  78 + placeholder="Búsqueda productos"
  79 + [(ngModel)]="searchTerm"
  80 + (ngModelChange)="filterItems()">
64 81 </div>
65 82 <!-- BOTON VOLVER -->
66 83 <div class="col-sm-2">
... ... @@ -75,13 +92,13 @@
75 92 </div>
76 93  
77 94 <!-- LISTA DE PRODUCTOS -->
78   - <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
  95 + <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
79 96 <div
80 97 class="col-4 p-2"
81   - *ngFor="let producto of productos">
82   - <div class="card card-effect bg-white rounded-sm shadow border-0">
83   - <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
84   - <div class="card-body p-2">
  98 + *ngFor="let producto of auxProductos">
  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">
85 102 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
86 103 <div class="row justify-content-between m-0">
87 104 <div class="col-12 p-0">
... ... @@ -100,6 +117,12 @@
100 117 </div>
101 118 </div>
102 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 +
103 126 </div>
104 127  
105 128 </div>
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ df5ac1b
... ... @@ -8,6 +8,12 @@
8 8 line-height: inherit;
9 9 }
10 10  
11   -.vh-50 {
12   - height: 70vh !important;
  11 +.vh-70 {
  12 + min-height: auto !important;
  13 + max-height: 70vh !important;
  14 +}
  15 +
  16 +.spinner-lg{
  17 + width: 3rem !important;
  18 + height: 3rem !important;
13 19 }
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ df5ac1b
... ... @@ -10,6 +10,10 @@ import { Producto } from &#39;src/app/wrappers/producto&#39;;
10 10 export class BusquedaProductosComponent implements OnInit {
11 11  
12 12 productos: Producto[] = [];
  13 + auxProductos: Producto[] = [];
  14 + searchTerm: string = '';
  15 + showSpinner: boolean = true;
  16 + categoria: Categorias = Categorias.todos;
13 17  
14 18 constructor(private productoService: ProductoService) { }
15 19  
... ... @@ -18,11 +22,26 @@ export class BusquedaProductosComponent implements OnInit {
18 22 this.productoService.getAll()
19 23 .subscribe((data: Producto[]) => {
20 24  
21   - this.productos = data;
  25 + this.auxProductos = this.productos = data;
22 26 }, (error) => {
23   -
  27 + this.showSpinner = false;
24 28 console.error(error);
25 29 });
26 30 }
27 31  
  32 + filterItems() {
  33 + console.log('');
  34 + this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
  35 + }
  36 +
  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,
28 47 }
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ df5ac1b
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";
... ... @@ -45,7 +45,7 @@ body {
45 45 }
46 46  
47 47 .overflow-scroll {
48   - overflow-y: scroll !important;
  48 + overflow-y: auto !important;
49 49 overflow-x: hidden !important;
50 50 &::-webkit-scrollbar {
51 51 width: 0.5em;