Marcelo Puebla / configuracion-imagenes

Download as
Browse Code »

Commit c0aa841fc729ff7a540ff4335ccec6e86545631e

Authored by Marcelo Puebla
1 parent b3c2dc63ab
Exists in master

Cambio en variable api url

Showing 2 changed files with 8 additions and 9 deletions   Show diff stats
src/app/components/abm-imagenes/abm-imagenes.component.html
Diff comments   View file @ c0aa841
1 <p>abm-imagenes works!</p>
2 <app-header></app-header> 1 <app-header></app-header>
3 2
4 <div class="container-fluid"> 3 <div class="container-fluid">
5 <div class="row m-3"> 4 <div class="row m-3">
6 <div class="col"> 5 <div class="col">
7 <p class="h2">Configuración de imágenes</p> 6 <p class="h2">Configuración de imágenes</p>
8 </div> 7 </div>
9 </div> 8 </div>
10 9
11 <div class="row mx-3 search"> 10 <div class="row mx-3 search">
12 <div class="col"> 11 <div class="col">
13 <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>
14 <input 13 <input
15 type="text" 14 type="text"
16 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"
17 placeholder="Búsqueda productos" 16 placeholder="Búsqueda productos"
18 [(ngModel)]="searchTerm" 17 [(ngModel)]="searchTerm"
19 (ngModelChange)="filterItems()"> 18 (ngModelChange)="filterItems()">
20 </div> 19 </div>
21 </div> 20 </div>
22 21
23 <div class="row m-3 vh-60 overflow-scroll"> 22 <div class="row m-3 vh-60 overflow-scroll">
24 <div class="col"> 23 <div class="col">
25 <h5>Productos</h5> 24 <h5>Productos</h5>
26 <table class="table table-striped table-hover table-borderless shadow"> 25 <table class="table table-striped table-hover table-borderless shadow">
27 <thead> 26 <thead>
28 <tr class="bg-primary text-center text-white shadow-sm"> 27 <tr class="bg-primary text-center text-white shadow-sm">
29 <th>Nombre</th> 28 <th>Nombre</th>
30 <th colspan="2">Imagen</th> 29 <th colspan="2">Imagen</th>
31 </tr> 30 </tr>
32 </thead> 31 </thead>
33 <tbody> 32 <tbody>
34 <tr class="shadow-sm" *ngFor="let articulo of auxProductos"> 33 <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
35 <td class="align-middle"> 34 <td class="align-middle">
36 <p class="m-0">{{articulo.DET_LAR}}</p> 35 <p class="m-0">{{articulo.DET_LAR}}</p>
37 <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>
38 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p> 37 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
39 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p> 38 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
40 </td> 39 </td>
41 <td> 40 <td>
42 <img 41 <img
43 *ngIf="articulo.imagenes.length == 0" 42 *ngIf="articulo.imagenes.length == 0"
44 class="fade-in w-100 mx-auto img-fluid" 43 class="fade-in w-100 mx-auto img-fluid"
45 src="{{apiUrl}}/imagenes/noImage.jpg"> 44 src="{{apiImagenes}}/imagenes/noImage.jpg">
46 <carousel [interval]="false"> 45 <carousel [interval]="false">
47 <slide *ngFor="let item of articulo.imagenes; let index = index"> 46 <slide *ngFor="let item of articulo.imagenes; let index = index">
48 <img 47 <img
49 *ngIf="!item.fromGallery" 48 *ngIf="!item.fromGallery"
50 class="fade-in img-fluid w-100" 49 class="fade-in img-fluid w-100"
51 src="{{apiUrl}}/imagenes/{{item.imagen}}"> 50 src="{{apiImagenes}}/imagenes/{{item.imagen}}">
52 <img 51 <img
53 *ngIf="item.fromGallery" 52 *ngIf="item.fromGallery"
54 class="fade-in img-fluid w-100" 53 class="fade-in img-fluid w-100"
55 src="{{item.base64}}"> 54 src="{{item.base64}}">
56 <button 55 <button
57 (click)="deleteImage(articulo.imagenes, index)" 56 (click)="deleteImage(articulo.imagenes, index)"
58 type="button" 57 type="button"
59 class="btn btn-light btn-delete-image position-absolute close"> 58 class="btn btn-light btn-delete-image position-absolute close">
60 <span aria-hidden="true">&times;</span> 59 <span aria-hidden="true">&times;</span>
61 </button> 60 </button>
62 </slide> 61 </slide>
63 </carousel> 62 </carousel>
64 </td> 63 </td>
65 <td class="align-middle text-center"> 64 <td class="align-middle text-center">
66 <div class="custom-file"> 65 <div class="custom-file">
67 <input 66 <input
68 type="file" 67 type="file"
69 class="custom-file-input" 68 class="custom-file-input"
70 id="customFileLang" 69 id="customFileLang"
71 accept="image/*" 70 accept="image/*"
72 (change)="onFileSelected($event, articulo)" 71 (change)="onFileSelected($event, articulo)"
73 lang="es" 72 lang="es"
74 multiple> 73 multiple>
75 <label class="custom-file-label text-left pr-5" for="customFileLang"> 74 <label class="custom-file-label text-left pr-5" for="customFileLang">
76 <small>Seleccionar archivo</small> 75 <small>Seleccionar archivo</small>
77 </label> 76 </label>
78 </div> 77 </div>
79 </td> 78 </td>
80 </tr> 79 </tr>
81 </tbody> 80 </tbody>
82 </table> 81 </table>
83 </div> 82 </div>
84 </div> 83 </div>
85 84
86 <div class="row" *ngIf="paginationData"> 85 <div class="row" *ngIf="paginationData">
87 <div class="col"> 86 <div class="col">
88 <pagination 87 <pagination
89 [rotate]="false" 88 [rotate]="false"
90 [(ngModel)]="paginationData.page" 89 [(ngModel)]="paginationData.page"
91 [totalItems]="paginationData.rowCount" 90 [totalItems]="paginationData.rowCount"
92 [maxSize]="paginationData.pageCount" 91 [maxSize]="paginationData.pageCount"
93 [itemsPerPage]="paginationData.pageSize" 92 [itemsPerPage]="paginationData.pageSize"
94 (pageChanged)="pageChanged($event)" 93 (pageChanged)="pageChanged($event)"
95 [boundaryLinks]="true" 94 [boundaryLinks]="true"
96 [disabled]="disabledPaginador" 95 [disabled]="disabledPaginador"
97 previousText="&lsaquo;" 96 previousText="&lsaquo;"
98 nextText="&rsaquo;" 97 nextText="&rsaquo;"
99 firstText="&laquo;" 98 firstText="&laquo;"
100 lastText="&raquo;" 99 lastText="&raquo;"
101 ></pagination> 100 ></pagination>
102 </div> 101 </div>
103 </div> 102 </div>
104 103
105 </div> 104 </div>
106 105
src/app/components/abm-imagenes/abm-imagenes.component.ts
Diff comments   View file @ c0aa841
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { ImagenesService } from 'src/app/services/imagenes.service'; 3 import { ImagenesService } from 'src/app/services/imagenes.service';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { HttpClient } from '@angular/common/http'; 5 import { HttpClient } from '@angular/common/http';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-amb-imagenes', 8 selector: 'app-amb-imagenes',
9 templateUrl: './abm-imagenes.component.html', 9 templateUrl: './abm-imagenes.component.html',
10 styleUrls: ['./abm-imagenes.component.scss'] 10 styleUrls: ['./abm-imagenes.component.scss']
11 }) 11 })
12 12
13 export class AbmImagenesComponent implements OnInit { 13 export class AbmImagenesComponent implements OnInit {
14 14
15 apiUrl = appSettings.apiImagenes; 15 apiImagenes = appSettings.apiImagenes;
16 articulos: Producto[] = []; 16 articulos: Producto[] = [];
17 private auxProductos: Producto[] = []; 17 private auxProductos: Producto[] = [];
18 private searchTerm: string = ''; 18 private searchTerm: string = '';
19 private paginationData: any; 19 private paginationData: any;
20 private disabledPaginador: boolean = false; 20 private disabledPaginador: boolean = false;
21 21
22 constructor(private productoService: ImagenesService, private http: HttpClient) { } 22 constructor(private imagenService: ImagenesService, private http: HttpClient) { }
23 23
24 ngOnInit() { 24 ngOnInit() {
25 25
26 this.productoService.getAllWithPaginator() 26 this.imagenService.getAllWithPaginator()
27 .subscribe((res) => { 27 .subscribe((res) => {
28 28
29 this.articulos = res.data; 29 this.articulos = res.data;
30 this.paginationData = res.pagination; 30 this.paginationData = res.pagination;
31 this.filterItems(); 31 this.filterItems();
32 }, error => console.error(error)); 32 }, error => console.error(error));
33 } 33 }
34 34
35 onFileSelected(event, articulo: Producto) { 35 onFileSelected(event, articulo: Producto) {
36 36
37 let auxFiles: FileList = event.target.files; 37 let auxFiles: FileList = event.target.files;
38 Array.from(auxFiles).forEach(file => { 38 Array.from(auxFiles).forEach(file => {
39 39
40 this.onLoad(file) 40 this.onLoad(file)
41 .then(result => { 41 .then(result => {
42 // articulo.imagenes.push({ 42 // articulo.imagenes.push({
43 // name: file.name + articulo.CodArt + articulo.CodSec, 43 // name: file.name + articulo.CodArt + articulo.CodSec,
44 // fromGallery: true, 44 // fromGallery: true,
45 // imagen: result, 45 // imagen: result,
46 // id_articulo: articulo.id 46 // id_articulo: articulo.id
47 // }); 47 // });
48 let imagenAguardar = { 48 let imagenAguardar = {
49 imagen: { 49 imagen: {
50 name: `${articulo.CodSec}${articulo.CodArt}${file.name}`, 50 name: `${articulo.CodSec}${articulo.CodArt}${file.name}`,
51 base64: result, 51 base64: result,
52 codigo: articulo.CodArt, 52 codigo: articulo.CodArt,
53 sector: articulo.CodSec, 53 sector: articulo.CodSec,
54 id_articulo: articulo.id 54 id_articulo: articulo.id
55 }, 55 },
56 articulo: articulo 56 articulo: articulo
57 }; 57 };
58 this.saveInBase(imagenAguardar); 58 this.saveInBase(imagenAguardar);
59 }); 59 });
60 }) 60 })
61 } 61 }
62 62
63 filterItems() { 63 filterItems() {
64 64
65 this.auxProductos = this.articulos.filter(x => { 65 this.auxProductos = this.articulos.filter(x => {
66 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || 66 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
67 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || 67 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
68 x.CodSec.toString().includes(this.searchTerm.toLowerCase()); 68 x.CodSec.toString().includes(this.searchTerm.toLowerCase());
69 }); 69 });
70 } 70 }
71 71
72 saveInBase(imagenAguardar) { 72 saveInBase(imagenAguardar) {
73 73
74 this.productoService.saveInBase(imagenAguardar.imagen) 74 this.imagenService.saveInBase(imagenAguardar.imagen)
75 .subscribe(res => { 75 .subscribe(res => {
76 imagenAguardar.imagen['id'] = res[0]; 76 imagenAguardar.imagen['id'] = res[0];
77 imagenAguardar.imagen['fromGallery'] = true; 77 imagenAguardar.imagen['fromGallery'] = true;
78 imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen); 78 imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen);
79 }, error => console.error(error)); 79 }, error => console.error(error));
80 } 80 }
81 81
82 onLoad(file) { 82 onLoad(file) {
83 83
84 return new Promise((resolve, reject) => { 84 return new Promise((resolve, reject) => {
85 85
86 var fr = new FileReader(); 86 var fr = new FileReader();
87 87
88 fr.onload = function () { 88 fr.onload = function () {
89 89
90 resolve(fr.result); 90 resolve(fr.result);
91 }; 91 };
92 92
93 fr.readAsDataURL(file); 93 fr.readAsDataURL(file);
94 }); 94 });
95 95
96 } 96 }
97 97
98 deleteImage(imagenes, index: number) { 98 deleteImage(imagenes, index: number) {
99 99
100 if (!imagenes[index].name) { 100 if (!imagenes[index].name) {
101 imagenes[index].name = imagenes[index].imagen; 101 imagenes[index].name = imagenes[index].imagen;
102 } 102 }
103 103
104 this.productoService.deleteImage(imagenes[index]) 104 this.imagenService.deleteImage(imagenes[index])
105 .subscribe(res => { 105 .subscribe(res => {
106 106
107 if (res) { 107 if (res) {
108 imagenes.splice(index, 1); 108 imagenes.splice(index, 1);
109 } 109 }
110 }, error => console.error(error)); 110 }, error => console.error(error));
111 } 111 }
112 112
113 pageChanged(event: any): void { 113 pageChanged(event: any): void {
114 this.disabledPaginador = true; 114 this.disabledPaginador = true;
115 this.productoService.getAllWithPaginator(event.page) 115 this.imagenService.getAllWithPaginator(event.page)
116 .subscribe((res) => { 116 .subscribe((res) => {
117 this.disabledPaginador = false; 117 this.disabledPaginador = false;
118 this.articulos = res.data; 118 this.articulos = res.data;
119 this.paginationData = res.pagination; 119 this.paginationData = res.pagination;
120 this.filterItems(); 120 this.filterItems();
121 }, error => console.error(error)); 121 }, error => console.error(error));
122 } 122 }
123 123
124 } 124 }
125 125