Martin Macola / autoservicio

Commit d302da0ddfe10dd10b6bfc05b6b0e61475987e42

Authored by Eric Fernandez 2019-08-08 11:08:28 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !12

Showing 5 changed files Show diff stats

src/app/app.module.ts

Diff comments View file @ d302da0

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

Diff comments View file @ d302da0

 <div class="row m-0 fade-in">
   <div class="col-10 p-0">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-light text-muted text-center">
           Búsqueda
           <i class="fa fa-search"></i>
         </p>
       </div>
     </div>
     <div class="row m-4 disable-user-select">
       <!-- FILTROS -->
       <div class="col-sm-2">
         <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 class="list-group-item list-group-item-action my-1 py-2 h6">
             Combos y Promociones
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
             Todos
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Bebidas
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Sandwichería
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Panaderia
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Golosinas
           </li>
           <li
             class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
             Tabaqueria
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div class="col-sm-10">
         <div class="form-group 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">
+              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">Volver&nbsp;&nbsp;</span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
         </div>
         <!-- LISTA DE PRODUCTOS -->
-        <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
+        <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
-            *ngFor="let producto of productos">
+            *ngFor="let producto of auxProductos">
             <div class="card card-effect bg-white rounded-sm shadow border-0">
               <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
               <div class="card-body 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>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
 </div>

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

Diff comments View file @ d302da0

 .search .form-control-search {
   position: absolute;
   z-index: 2;
   display: block;
   text-align: center;
   pointer-events: none;
   color: #aaa;
   line-height: inherit;
 }
-.vh-50 {
+.vh-70 {
-  height: 70vh !important;
+  min-height: auto !important;
+  max-height: 70vh !important;
 }

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

Diff comments View file @ d302da0

 import { Component, OnInit } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 @Component({
   selector: 'app-busqueda-productos',
   templateUrl: './busqueda-productos.component.html',
   styleUrls: ['./busqueda-productos.component.scss']
 })
 export class BusquedaProductosComponent implements OnInit {
   productos: Producto[] = [];
+  auxProductos: Producto[] = [];
+  searchTerm: string = '';
   constructor(private productoService: ProductoService) { }
   ngOnInit() {
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
-        this.productos = data;
+        this.auxProductos = this.productos = data;
       }, (error) => {
         console.error(error);
       });
   }
+  filterItems() {
+    console.log('');
+    this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
+  }
 }

src/styles.scss

Diff comments View file @ d302da0

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