Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 70bcbf059f1e1b80bca44a662fc22a9ad64cdaa6

Authored by Marcelo Puebla
1 parent d7e374dfdd
Exists in master and in 1 other branch validar_pve

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
Diff comments   View file @ 70bcbf0
1 1 <div class="row m-0 fade-in">
2   - <div class="col-10 p-0">
3   - <!-- TOP HEADER -->
4   - <app-header></app-header>
5   -
6   - <!-- NOMBRE DE SECCION -->
7   - <div class="row m-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>
10   - </div>
  2 + <div class="col-10 p-0">
  3 + <!-- TOP HEADER -->
  4 + <app-header></app-header>
  5 +
  6 + <!-- NOMBRE DE SECCION -->
  7 + <div class="row m-0">
  8 + <div class="col-12 p-0">
  9 + <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p>
11 10 </div>
12   -
13   - <div class="row m-4 d-flex align-items-center">
14   -
  11 + </div>
  12 +
  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 43 </div>
16   -
17 44 </div>
18   -
19   - <!-- SIDEBAR -->
20   - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
21   - </div>
22 45 \ No newline at end of file
  46 +
  47 + </div>
  48 +
  49 + <!-- SIDEBAR -->
  50 + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
  51 +</div>
23 52 \ No newline at end of file
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ 70bcbf0
... ... @@ -0,0 +1,13 @@
  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 +}
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 70bcbf0
1 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 5 @Component({
4 6 selector: 'app-busqueda-productos',
... ... @@ -7,9 +9,20 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
7 9 })
8 10 export class BusquedaProductosComponent implements OnInit {
9 11  
10   - constructor() { }
  12 + productos: Producto[] = [];
  13 +
  14 + constructor(private productoService: ProductoService) { }
11 15  
12 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 }