Commit 20f8d11fa4bc8773d4db28c02757df32c47a4745

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

Achicada altura.

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-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 m-0 py-1 bg-gray text-muted text-center"> 7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">
8 {{title}} 8 {{title}}
9 <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i> 9 <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="container-fluid"> 14 <div class="container-fluid">
15 <div class="row m-2 disable-user-select"> 15 <div class="row m-2 disable-user-select">
16 16
17 <!-- FILTROS --> 17 <!-- FILTROS -->
18 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> 18 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
19 <div class="text-center"> 19 <div class="text-center">
20 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 20 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
21 </div> 21 </div>
22 <ul class="list-group"> 22 <ul class="list-group">
23 <li 23 <li
24 [ngClass]="{active: categoriaActive == 0}" 24 [ngClass]="{active: categoriaActive == 0}"
25 (click)="categoriaActive = 0; filterItems()" 25 (click)="categoriaActive = 0; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 Todos 27 Todos
28 </li> 28 </li>
29 <li 29 <li
30 *ngFor="let categoria of categorias" 30 *ngFor="let categoria of categorias"
31 [ngClass]="{active: categoriaActive == categoria.id}" 31 [ngClass]="{active: categoriaActive == categoria.id}"
32 (click)="categoriaActive = categoria.id; filterItems()" 32 (click)="categoriaActive = categoria.id; filterItems()"
33 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 33 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
34 {{categoria.detalle}} 34 {{categoria.detalle}}
35 </li> 35 </li>
36 </ul> 36 </ul>
37 </div> 37 </div>
38 38
39 <!-- SEARCH INPUT --> 39 <!-- SEARCH INPUT -->
40 <div *ngIf="productos.length > 0" class="fade-in col p-0"> 40 <div *ngIf="productos.length > 0" class="fade-in col p-0">
41 41
42 <div class="row m-0 search"> 42 <div class="row m-0 search">
43 <!-- BOTON VOLVER --> 43 <!-- BOTON VOLVER -->
44 <div class="col-sm-auto p-2"> 44 <div class="col-sm-auto p-2">
45 <button 45 <button
46 type="button" 46 type="button"
47 class="btn btn-light btn-lg shadow-sm" 47 class="btn btn-light btn-lg shadow-sm"
48 [routerLink]="['/inicio']"> 48 [routerLink]="['/inicio']">
49 <span class="font-weight-normal h6 pr-2">Volver</span> 49 <span class="font-weight-normal h6 pr-2">Volver</span>
50 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 50 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
51 </button> 51 </button>
52 </div> 52 </div>
53 <div class="col-sm-10 p-2"> 53 <div class="col-sm-10 p-2">
54 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 54 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
55 <input 55 <input
56 [matKeyboard]="'spanish'" 56 [matKeyboard]="'spanish'"
57 type="text" 57 type="text"
58 class="form-control form-control-lg shadow-sm rounded-pill px-5" 58 class="form-control form-control-lg shadow-sm rounded-pill px-5"
59 placeholder="Búsqueda productos" 59 placeholder="Búsqueda productos"
60 [(ngModel)]="searchTerm" 60 [(ngModel)]="searchTerm"
61 (ngModelChange)="filterItems()"> 61 (ngModelChange)="filterItems()">
62 </div> 62 </div>
63 <div class="col-sm-12 m-0 p-2 h5"> 63 <div class="col-sm-12 m-0 p-2 h5">
64 <button 64 <button
65 class="btn btn-outline-primary badge badge-light px-2 shadow-sm" 65 class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
66 [ngClass]="{'active': ordenandoByVendidos}" 66 [ngClass]="{'active': ordenandoByVendidos}"
67 (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()" 67 (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
68 >Más vendidos</button> 68 >Más vendidos</button>
69 </div> 69 </div>
70 </div> 70 </div>
71 <!-- LISTA DE PRODUCTOS --> 71 <!-- LISTA DE PRODUCTOS -->
72 <div class="row m-0 align-items-start vh-70 overflow-scroll disable-user-select"> 72 <div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select">
73 <div 73 <div
74 class="col-4 col-lg-3 p-2" 74 class="col-4 col-lg-3 p-2"
75 *ngFor="let producto of auxProductos"> 75 *ngFor="let producto of auxProductos">
76 <div 76 <div
77 class="card-effect bg-white rounded-sm shadow border-0" 77 class="card-effect bg-white rounded-sm shadow border-0"
78 (click)="elegirProducto(producto)"> 78 (click)="elegirProducto(producto)">
79 <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 79 <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
80 <div class="p-2"> 80 <div class="p-2">
81 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> 81 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
82 <div class="row m-0"> 82 <div class="row m-0">
83 <div class="col-12 my-auto pt-2 pr-2 p-0"> 83 <div class="col-12 my-auto pt-2 pr-2 p-0">
84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 92
93 <!-- SPINNER --> 93 <!-- SPINNER -->
94 <div 94 <div
95 *ngIf="productos.length === 0 && showSpinner" 95 *ngIf="productos.length === 0 && showSpinner"
96 class="col-sm-10 p-0 align-self-center text-center"> 96 class="col-sm-10 p-0 align-self-center text-center">
97 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 97 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
98 <span class="text-secondary m-2 h5">Cargando información.</span> 98 <span class="text-secondary m-2 h5">Cargando información.</span>
99 </div> 99 </div>
100 100
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
106 </div> 106 </div>
107 107