Martin Macola / configuracion-imagenes

Download as
Browse Code »

Commit 5c8c22e781bc43ea32c997d4acbcfa791641ec92

Authored by Marcelo Puebla
1 parent 9cd5c7d901
Exists in master

Arreglo en vistas

Showing 3 changed files with 14 additions and 6 deletions   Show diff stats
src/app/components/abm-imagenes/abm-imagenes.component.html
Diff comments   View file @ 5c8c22e
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 de 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 mx-3 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 </div> 19 </div>
20 </div> 20 </div>
21 21
22 <div class="row m-3 vh-60 overflow-scroll"> 22 <div class="row m-3 vh-60 overflow-scroll">
23 <div class="col"> 23 <div class="col">
24 <h5>Productos</h5> 24 <h5>Productos</h5>
25 <table class="table table-striped table-hover table-borderless shadow"> 25 <table class="table table-striped table-hover table-borderless shadow">
26 <thead> 26 <thead>
27 <tr class="bg-primary text-center text-white shadow-sm"> 27 <tr class="bg-primary text-center text-white shadow-sm">
28 <th>Nombre</th> 28 <th>Nombre</th>
29 <th colspan="2">Imagen</th> 29 <th colspan="2">Imagen</th>
30 </tr> 30 </tr>
31 </thead> 31 </thead>
32 <tbody> 32 <tbody>
33 <tr class="shadow-sm" *ngFor="let articulo of auxProductos"> 33 <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
34 <td class="align-middle"> 34 <td class="align-middle">
35 <p class="m-0">{{articulo.DET_LAR}}</p> 35 <p class="m-0">{{articulo.DET_LAR}}</p>
36 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p> 36 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
37 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p> 37 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
38 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p> 38 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
39 </td> 39 </td>
40 <td> 40 <td>
41 <img 41 <img
42 *ngIf="articulo.imagenes.length == 0" 42 *ngIf="articulo.imagenes.length == 0"
43 class="fade-in w-100 mx-auto img-fluid" 43 class="fade-in w-100 mx-auto img-fluid"
44 src="{{apiImagenes}}/imagenes/noImage.jpg"> 44 src="{{apiImagenes}}/imagenes/noImage.jpg">
45 <carousel [interval]="false"> 45 <carousel [interval]="false">
46 <slide *ngFor="let item of articulo.imagenes; let index = index"> 46 <slide *ngFor="let item of articulo.imagenes; let index = index">
47 <img 47 <img
48 *ngIf="!item.fromGallery" 48 *ngIf="!item.fromGallery"
49 class="fade-in img-fluid w-100" 49 class="fade-in img-fluid w-100"
50 src="{{apiImagenes}}/imagenes/{{item.imagen}}"> 50 src="{{apiImagenes}}/imagenes/{{item.imagen}}">
51 <img 51 <img
52 *ngIf="item.fromGallery" 52 *ngIf="item.fromGallery"
53 class="fade-in img-fluid w-100" 53 class="fade-in img-fluid w-100"
54 src="{{item.base64}}"> 54 src="{{item.base64}}">
55 <button 55 <button
56 (click)="deleteImage(articulo.imagenes, index)" 56 (click)="deleteImage(articulo.imagenes, index)"
57 type="button" 57 type="button"
58 class="btn btn-light btn-delete-image position-absolute close"> 58 class="btn btn-lg btn-delete-image position-absolute">
59 <span aria-hidden="true">&times;</span> 59 <i class="fa fa-trash text-dark" aria-hidden="true"></i>
60 </button> 60 </button>
61 </slide> 61 </slide>
62 </carousel> 62 </carousel>
63 </td> 63 </td>
64 <td class="align-middle text-center"> 64 <td class="align-middle text-center">
65 <div class="custom-file"> 65 <div class="custom-file">
66 <input 66 <input
67 type="file" 67 type="file"
68 class="custom-file-input" 68 class="custom-file-input"
69 id="customFileLang" 69 id="customFileLang"
70 accept="image/*" 70 accept="image/*"
71 (change)="onFileSelected($event, articulo)" 71 (change)="onFileSelected($event, articulo)"
72 lang="es" 72 lang="es"
73 multiple> 73 multiple>
74 <label class="custom-file-label text-left pr-5" for="customFileLang"> 74 <label class="custom-file-label text-left pr-5" for="customFileLang">
75 <small>Seleccionar archivo</small> 75 <small>Seleccionar archivo</small>
76 </label> 76 </label>
77 </div> 77 </div>
78 </td> 78 </td>
79 </tr> 79 </tr>
80 </tbody> 80 </tbody>
81 </table> 81 </table>
82 </div> 82 </div>
83 </div> 83 </div>
84 84
85 <div class="row" *ngIf="paginationData"> 85 <div class="row" *ngIf="paginationData">
86 <div class="col"> 86 <div class="col">
87 <pagination 87 <pagination
88 [rotate]="false" 88 [rotate]="false"
89 [(ngModel)]="paginationData.page" 89 [(ngModel)]="paginationData.page"
90 [totalItems]="paginationData.rowCount" 90 [totalItems]="paginationData.rowCount"
91 [maxSize]="paginationData.pageCount" 91 [maxSize]="paginationData.pageCount"
92 [itemsPerPage]="paginationData.pageSize" 92 [itemsPerPage]="paginationData.pageSize"
93 (pageChanged)="pageChanged($event)" 93 (pageChanged)="pageChanged($event)"
94 [boundaryLinks]="true" 94 [boundaryLinks]="true"
95 [disabled]="disabledPaginador" 95 [disabled]="disabledPaginador"
96 previousText="&lsaquo;" 96 previousText="&lsaquo;"
97 nextText="&rsaquo;" 97 nextText="&rsaquo;"
98 firstText="&laquo;" 98 firstText="&laquo;"
99 lastText="&raquo;" 99 lastText="&raquo;"
100 ></pagination> 100 ></pagination>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
src/app/components/abm-imagenes/abm-imagenes.component.scss
Diff comments   View file @ 5c8c22e
1 .search .form-control-search { 1 .search .form-control-search {
2 position: absolute; 2 position: absolute;
3 z-index: 2; 3 z-index: 2;
4 display: block; 4 display: block;
5 text-align: center; 5 text-align: center;
6 pointer-events: none; 6 pointer-events: none;
7 color: #aaa; 7 color: #aaa;
8 line-height: inherit; 8 line-height: inherit;
9 } 9 }
10 10
11 .custom-file-input:lang(es) ~ .custom-file-label::after { 11 .custom-file-input:lang(es) ~ .custom-file-label::after {
12 content: "Elegir"; 12 content: "Elegir";
13 } 13 }
14 14
15 .btn-delete-image { 15 .btn-delete-image {
16 top: 0; 16 top: 0;
17 left: 95%; 17 left: 88%;
18 z-index: 1000;
19 outline: none;
20 }
21
22 .btn:focus {
23 color: gray;
24 outline: 0;
25 box-shadow: none;
18 } 26 }
19 27
src/app/components/header/header.component.html
Diff comments   View file @ 5c8c22e
1 <div class="row m-0 bg-light p-4 justify-content-between"> 1 <div class="row m-0 bg-light p-4 justify-content-between">
2 <div class="col-6"> 2 <!-- <div class="col-6">
3 <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png"> 3 <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png">
4 </div> 4 </div> -->
5 <div class="col-6"> 5 <div class="col-6 offset-6">
6 <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png"> 6 <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png">
7 </div> 7 </div>
8 </div> 8 </div>
9 9