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
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6 //#endregion 7 //#endregion
7 8
8 //#region COMPONENTS 9 //#region COMPONENTS
9 import { AppComponent } from './app.component'; 10 import { AppComponent } from './app.component';
10 import { HeaderComponent } from './components/header/header.component'; 11 import { HeaderComponent } from './components/header/header.component';
11 import { SidebarComponent } from './components/sidebar/sidebar.component'; 12 import { SidebarComponent } from './components/sidebar/sidebar.component';
12 import { CarouselComponent } from './components/carousel/carousel.component'; 13 import { CarouselComponent } from './components/carousel/carousel.component';
13 import { HomeComponent } from './components/home/home.component'; 14 import { HomeComponent } from './components/home/home.component';
14 import { InicioComponent } from './components/inicio/inicio.component'; 15 import { InicioComponent } from './components/inicio/inicio.component';
15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
16 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 17 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
17 //#endregion 18 //#endregion
18 19
19 @NgModule({ 20 @NgModule({
20 declarations: [ 21 declarations: [
21 AppComponent, 22 AppComponent,
22 HeaderComponent, 23 HeaderComponent,
23 SidebarComponent, 24 SidebarComponent,
24 CarouselComponent, 25 CarouselComponent,
25 HomeComponent, 26 HomeComponent,
26 InicioComponent, 27 InicioComponent,
27 BusquedaProductosComponent, 28 BusquedaProductosComponent,
28 ConfirmacionCarritoComponent 29 ConfirmacionCarritoComponent
29 ], 30 ],
30 imports: [ 31 imports: [
31 BrowserModule, 32 BrowserModule,
32 AppRoutingModule, 33 AppRoutingModule,
33 HttpClientModule 34 HttpClientModule,
35 FormsModule,
36 ReactiveFormsModule,
37 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
34 ], 38 ],
35 providers: [], 39 providers: [],
36 bootstrap: [AppComponent] 40 bootstrap: [AppComponent]
37 }) 41 })
38 export class AppModule { } 42 export class AppModule { }
39 43
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ df5ac1b
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 p-1">
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
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 Combos y Promociones 28 Combos y Promociones
26 </li> 29 </li>
27 <li 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 Todos 34 Todos
30 </li> 35 </li>
31 <li 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 Bebidas 40 Bebidas
34 </li> 41 </li>
35 <li 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 Sandwichería 46 Sandwichería
38 </li> 47 </li>
39 <li 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 Panaderia 52 Panaderia
42 </li> 53 </li>
43 <li 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 Golosinas 58 Golosinas
46 </li> 59 </li>
47 <li 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 Tabaqueria 64 Tabaqueria
50 </li> 65 </li>
51 </ul> 66 </ul>
52 </div> 67 </div>
53 68
54 <!-- SEARCH INPUT --> 69 <!-- SEARCH INPUT -->
55 <div class="col-sm-10"> 70 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
56 71
57 <div class="form-group row search"> 72 <div class="form-group row search">
58 <div class="col-sm-10"> 73 <div class="col-sm-10">
59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 74 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
60 <input 75 <input
61 type="text" 76 type="text"
62 class="form-control form-control-lg shadow-sm rounded-pill px-5" 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 </div> 81 </div>
65 <!-- BOTON VOLVER --> 82 <!-- BOTON VOLVER -->
66 <div class="col-sm-2"> 83 <div class="col-sm-2">
67 <button 84 <button
68 type="button" 85 type="button"
69 class="btn btn-light btn-lg shadow-sm" 86 class="btn btn-light btn-lg shadow-sm"
70 [routerLink]="['/inicio']"> 87 [routerLink]="['/inicio']">
71 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span> 88 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
72 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 89 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
73 </button> 90 </button>
74 </div> 91 </div>
75 </div> 92 </div>
76 93
77 <!-- LISTA DE PRODUCTOS --> 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 <div 96 <div
80 class="col-4 p-2" 97 class="col-4 p-2"
81 *ngFor="let producto of productos"> 98 *ngFor="let producto of auxProductos">
82 <div class="card card-effect bg-white rounded-sm shadow border-0"> 99 <div class="card-effect bg-white rounded-sm shadow border-0">
83 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 100 <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto">
84 <div class="card-body p-2"> 101 <div class="p-2">
85 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 102 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
86 <div class="row justify-content-between m-0"> 103 <div class="row justify-content-between m-0">
87 <div class="col-12 p-0"> 104 <div class="col-12 p-0">
88 <div class="text-left"> 105 <div class="text-left">
89 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 106 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
90 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 107 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
91 </div> 108 </div>
92 </div> 109 </div>
93 <div class="col-12 my-auto pt-2 pr-2 p-0"> 110 <div class="col-12 my-auto pt-2 pr-2 p-0">
94 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 111 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
95 </div> 112 </div>
96 </div> 113 </div>
97 </div> 114 </div>
98 </div> 115 </div>
99 </div> 116 </div>
100 </div> 117 </div>
101 </div> 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 </div> 126 </div>
104 127
105 </div> 128 </div>
106 129
107 <!-- SIDEBAR --> 130 <!-- SIDEBAR -->
108 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 131 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
109 </div> 132 </div>
110 133
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ df5ac1b
1 .search .form-control-search { 1 .search .form-control-search {
2 position: absolute; 2 position: absolute;
3 z-index: 2; 3 z-index: 2;
4 display: block; 4 display: block;
5 text-align: center; 5 text-align: center;
6 pointer-events: none; 6 pointer-events: none;
7 color: #aaa; 7 color: #aaa;
8 line-height: inherit; 8 line-height: inherit;
9 } 9 }
10 10
11 .vh-50 { 11 .vh-70 {
12 height: 70vh !important; 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 }
14 20
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ df5ac1b
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[] = [];
14 searchTerm: string = '';
15 showSpinner: boolean = true;
16 categoria: Categorias = Categorias.todos;
13 17
14 constructor(private productoService: ProductoService) { } 18 constructor(private productoService: ProductoService) { }
15 19
16 ngOnInit() { 20 ngOnInit() {
17 21
18 this.productoService.getAll() 22 this.productoService.getAll()
19 .subscribe((data: Producto[]) => { 23 .subscribe((data: Producto[]) => {
20 24
21 this.productos = data; 25 this.auxProductos = this.productos = data;
22 }, (error) => { 26 }, (error) => {
23 27 this.showSpinner = false;
24 console.error(error); 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 }
29 48
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 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 3
4 $theme-colors: ( 4 $theme-colors: (
5 primary: red, 5 primary: #2872ae,
6 light: white, 6 light: white
7 ); 7 );
8 8
9 .popover{
10 background-color: #2872AE !important;
11 color: white !important;
12 }
13
9 .popover{ 14 .list-group-item.active {
10 background-color: #2872AE !important; 15 background-color: #2872ae !important;
11 color: white !important; 16 border-color: #2872ae !important;
12 } 17 }
13 18
14 @import "../../../node_modules/bootstrap/scss/bootstrap.scss"; 19 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
15 20
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 3
4 html, 4 html,
5 body { 5 body {
6 background-color: rgb(245, 245, 245); 6 background-color: rgb(245, 245, 245);
7 overflow: hidden; 7 overflow: hidden;
8 } 8 }
9 9
10 .blur { 10 .blur {
11 filter: blur(10px); 11 filter: blur(10px);
12 -webkit-filter: blur(10px); 12 -webkit-filter: blur(10px);
13 } 13 }
14 14
15 .disable-user-select { 15 .disable-user-select {
16 -webkit-user-select: none; 16 -webkit-user-select: none;
17 -moz-user-select: none; 17 -moz-user-select: none;
18 -ms-user-select: none; 18 -ms-user-select: none;
19 user-select: none; 19 user-select: none;
20 } 20 }
21 21
22 .blue-gradient { 22 .blue-gradient {
23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); 23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252));
24 } 24 }
25 25
26 .rounded { 26 .rounded {
27 border-radius: 1.5rem !important; 27 border-radius: 1.5rem !important;
28 } 28 }
29 29
30 .rounded-sm { 30 .rounded-sm {
31 border-radius: 0.75rem !important; 31 border-radius: 0.75rem !important;
32 } 32 }
33 33
34 .card-effect { 34 .card-effect {
35 &:active, 35 &:active,
36 img { 36 img {
37 background-color: #c9c9c9b3 !important; 37 background-color: #c9c9c9b3 !important;
38 transition: background-color 0.5s; 38 transition: background-color 0.5s;
39 } 39 }
40 &:focus, 40 &:focus,
41 img { 41 img {
42 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
43 transition: background-color 0.5s; 43 transition: background-color 0.5s;
44 } 44 }
45 } 45 }
46 46
47 .overflow-scroll { 47 .overflow-scroll {
48 overflow-y: scroll !important; 48 overflow-y: auto !important;
49 overflow-x: hidden !important; 49 overflow-x: hidden !important;
50 &::-webkit-scrollbar { 50 &::-webkit-scrollbar {
51 width: 0.5em; 51 width: 0.5em;
52 } 52 }
53 &::-webkit-scrollbar-track { 53 &::-webkit-scrollbar-track {
54 border-radius: 10px; 54 border-radius: 10px;
55 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 55 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
56 } 56 }
57 &::-webkit-scrollbar-thumb { 57 &::-webkit-scrollbar-thumb {
58 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 58 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
59 outline: 1px solid slategrey; 59 outline: 1px solid slategrey;
60 border-radius: 10px; 60 border-radius: 10px;
61 height: 12px; 61 height: 12px;
62 &:active { 62 &:active {
63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
64 } 64 }
65 } 65 }
66 &::-webkit-scrollbar-corner { 66 &::-webkit-scrollbar-corner {
67 border-radius: 10px; 67 border-radius: 10px;
68 } 68 }
69 } 69 }
70 70