Commit 70bcbf059f1e1b80bca44a662fc22a9ad64cdaa6
1 parent
d7e374dfdd
Exists in
master
and in
1 other branch
Agregada grilla de productos.
Showing
3 changed files
with
73 additions
and
18 deletions
Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
| 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 font-weight-light text-center"><small>Búsqueda</small></p> | 9 | <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p> |
| 10 | </div> | ||
| 11 | </div> | 10 | </div> |
| 12 | 11 | </div> | |
| 13 | <div class="row m-4 d-flex align-items-center"> | 12 | |
| 14 | 13 | <div class="row m-4 d-flex align-items-center"> | |
| 14 | |||
| 15 | <div class="col-sm-7"> | ||
| 16 | <!-- SEARCH INPUT --> | ||
| 17 | <div class="form-group search"> | ||
| 18 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | ||
| 19 | <input | ||
| 20 | type="text" | ||
| 21 | class="form-control form-control-lg rounded-pill px-5" | ||
| 22 | placeholder="Búsqueda productos"> | ||
| 23 | </div> | ||
| 24 | |||
| 25 | <div class="row pr-3 vh-50 overflow-scroll"> | ||
| 26 | <div | ||
| 27 | class="col-4 p-2" | ||
| 28 | *ngFor="let producto of productos"> | ||
| 29 | <div class="card card-effect bg-white rounded-sm shadow border-0"> | ||
| 30 | <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> | ||
| 31 | <div class="card-body"> | ||
| 32 | <p class="h5 text-left m-0">{{producto.variable}}</p> | ||
| 33 | <div class="text-left"> | ||
| 34 | <p class="m-0"><small>ASDASDSADASDSA</small></p> | ||
| 35 | <p class="m-0"><small>COD. 1222</small></p> | ||
| 36 | </div> | ||
| 37 | </div> | ||
| 38 | </div> | ||
| 39 | |||
| 40 | </div> | ||
| 41 | </div> | ||
| 42 | |||
| 15 | </div> | 43 | </div> |
| 16 | |||
| 17 | </div> | 44 | </div> |
| 18 | |||
| 19 | <!-- SIDEBAR --> | ||
| 20 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | ||
| 21 | </div> |
src/app/components/busqueda-productos/busqueda-productos.component.scss
| 1 | .search .form-control-search { | ||
| 2 | position: absolute; | ||
| 3 | z-index: 2; | ||
| 4 | display: block; | ||
| 5 | text-align: center; | ||
| 6 | pointer-events: none; | ||
| 7 | color: #aaa; | ||
| 8 | line-height: inherit; | ||
| 9 | } | ||
| 10 | |||
| 11 | .vh-50 { | ||
| 12 | height: 70vh !important; | ||
| 13 | } | ||
| 14 |
src/app/components/busqueda-productos/busqueda-productos.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
| 2 | import { ProductoService } from 'src/app/services/producto.service'; | ||
| 3 | import { Producto } from 'src/app/wrappers/producto'; | ||
| 2 | 4 | ||
| 3 | @Component({ | 5 | @Component({ |
| 4 | selector: 'app-busqueda-productos', | 6 | selector: 'app-busqueda-productos', |
| 5 | templateUrl: './busqueda-productos.component.html', | 7 | templateUrl: './busqueda-productos.component.html', |
| 6 | styleUrls: ['./busqueda-productos.component.scss'] | 8 | styleUrls: ['./busqueda-productos.component.scss'] |
| 7 | }) | 9 | }) |
| 8 | export class BusquedaProductosComponent implements OnInit { | 10 | export class BusquedaProductosComponent implements OnInit { |
| 9 | 11 | ||
| 10 | constructor() { } | 12 | productos: Producto[] = []; |
| 13 | |||
| 14 | constructor(private productoService: ProductoService) { } | ||
| 11 | 15 | ||
| 12 | ngOnInit() { | 16 | ngOnInit() { |
| 17 | |||
| 18 | this.productoService.getAll() | ||
| 19 | .subscribe((data: Producto[]) => { | ||
| 20 | |||
| 21 | this.productos = data; | ||
| 22 | }, (error) => { | ||
| 23 | |||
| 24 | console.error(error); | ||
| 25 | }); | ||
| 13 | } | 26 | } |
| 14 | 27 | ||
| 15 | } | 28 | } |
| 16 | 29 |