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