Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 229356bd3d5513efe343236fabed3d6ef4c28916

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

Agregada carousel para mostrar imagenes cargadas.

Showing 1 changed file with 50 additions and 12 deletions   Show diff stats
src/app/components/amb-imagenes/amb-imagenes.component.html
Diff comments   View file @ 229356b
1 <app-header></app-header> 1 <app-header></app-header>
2 2
3 <div class="container-fluid"> 3 <div class="container-fluid">
4 <div class="row m-3"> 4 <div class="row m-3">
5 <div class="col"> 5 <div class="col">
6 <p class="h2">Configuración imágenes</p> 6 <p class="h2">Configuración de imágenes</p>
7 </div> 7 </div>
8 </div> 8 </div>
9 9
10 <div class="row search"> 10 <div class="row mx-3 search">
11 <div class="col"> 11 <div class="col">
12 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 12 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
13 <input 13 <input
14 type="text" 14 type="text"
15 class="form-control form-control-lg shadow-sm rounded-pill px-5" 15 class="form-control form-control-lg shadow-sm rounded-pill px-5"
16 placeholder="Búsqueda productos" 16 placeholder="Búsqueda productos"
17 [(ngModel)]="searchTerm" 17 [(ngModel)]="searchTerm"
18 (ngModelChange)="filterItems()"> 18 (ngModelChange)="filterItems()"
19 (keyup.enter)="onEnter()">
19 </div> 20 </div>
20 </div> 21 </div>
21 22
22 <div class="row m-3 vh-70 overflow-scroll"> 23 <div class="row m-3 vh-70 overflow-scroll">
23 <div class="col"> 24 <div class="col">
24 <h5>Productos</h5> 25 <h5>Productos</h5>
25 <table class="table"> 26 <table class="table table-striped table-hover table-borderless shadow">
26 <thead> 27 <thead>
27 <tr class="text-center"> 28 <tr class="bg-primary text-center text-white shadow-sm">
28 <th>Nombre</th> 29 <th>Nombre</th>
29 <th>Descripción</th>
30 <th colspan="2">Imagen</th> 30 <th colspan="2">Imagen</th>
31 </tr> 31 </tr>
32 </thead> 32 </thead>
33 <tbody> 33 <tbody>
34 <tr *ngFor="let articulo of auxProductos"> 34 <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
35 <td>{{articulo.DET_LAR}}</td> 35 <td class="align-middle">
36 <td>{{articulo.DET_LAR}}</td> 36 <p class="m-0">{{articulo.DET_LAR}}</p>
37 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
38 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
39 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
40 </td>
37 <td> 41 <td>
38 <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}"> 42 <img
39 <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length"> 43 *ngIf="articulo.imagenes.length == 0"
44 class="fade-in w-100 mx-auto img-fluid"
45 src="{{apiUrl}}/imagenes/noImage.jpg">
46 <carousel [interval]="false">
47 <slide *ngFor="let item of articulo.imagenes; let index = index">
48 <img
49 *ngIf="!item.fromGallery"
50 class="fade-in img-fluid w-100"
51 src="{{apiUrl}}/imagenes/{{item.imagen}}">
52 <img
53 *ngIf="item.fromGallery"
54 class="fade-in img-fluid w-100"
55 src="{{item.imagen}}">
56 <button
57 (click)="deleteImage(articulo.imagenes, index)"
58 type="button"
59 class="btn btn-light btn-delete-image position-absolute close">
60 <span aria-hidden="true">&times;</span>
61 </button>
62 </slide>
63 </carousel>
64 </td>
65 <td class="align-middle text-center">
66 <div class="custom-file">
67 <input
68 type="file"
69 class="custom-file-input"
70 id="customFileLang"
71 accept="image/*"
72 (change)="onFileSelected($event, articulo)"
73 lang="es"
74 multiple>
75 <label class="custom-file-label text-left pr-5" for="customFileLang">
76 <small>Seleccionar archivo</small>
77 </label>
78 </div>
40 </td> 79 </td>
41 <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
42 </tr> 80 </tr>
43 </tbody> 81 </tbody>
44 </table> 82 </table>
45 </div> 83 </div>
46 </div> 84 </div>
47 85