Martin Macola / autoservicio

Download as
Browse Code »

Commit 3a8323a55e20d50332130b714dbd5da3d82f82b7

Authored by Eric Fernandez
1 parent f74633474c
Exists in master

fix imagen remplaza

Showing 2 changed files with 3 additions and 1 deletions   Show diff stats
src/app/components/amb-imagenes/amb-imagenes.component.html
Diff comments   View file @ 3a8323a
1 <app-header></app-header> 1 <app-header></app-header>
2 2
3 <h1>Configuración imágenes</h1> 3 <h1>Configuración imágenes</h1>
4 <br> 4 <br>
5 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 5 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
6 <input 6 <input
7 type="text" 7 type="text"
8 class="form-control form-control-lg shadow-sm rounded-pill px-5" 8 class="form-control form-control-lg shadow-sm rounded-pill px-5"
9 placeholder="Búsqueda productos" 9 placeholder="Búsqueda productos"
10 [(ngModel)]="searchTerm" 10 [(ngModel)]="searchTerm"
11 (ngModelChange)="filterItems()"> 11 (ngModelChange)="filterItems()">
12 12
13 <div class="row px-5"> 13 <div class="row px-5">
14 <h5>Productos</h5> 14 <h5>Productos</h5>
15 <table class="table"> 15 <table class="table">
16 <thead> 16 <thead>
17 <tr> 17 <tr>
18 <th>Nombre</th> 18 <th>Nombre</th>
19 <th>Descripción</th> 19 <th>Descripción</th>
20 <th>Imagen</th> 20 <th>Imagen</th>
21 <th></th> 21 <th></th>
22 </tr> 22 </tr>
23 </thead> 23 </thead>
24 <tbody> 24 <tbody>
25 <tr *ngFor="let articulo of auxProductos"> 25 <tr *ngFor="let articulo of auxProductos">
26 <td>{{articulo.DetArt}}</td> 26 <td>{{articulo.DetArt}}</td>
27 <td>{{articulo.DET_LAR}}</td> 27 <td>{{articulo.DET_LAR}}</td>
28 <td> 28 <td>
29 <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}"> 29 <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
30 <img id="{{articulo.CodSec + articulo.CodArt}}" *ngIf="!articulo.imagenes.length"> 30 <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
31 </td> 31 </td>
32 <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td> 32 <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
33 </tr> 33 </tr>
34 </tbody> 34 </tbody>
35 </table> 35 </table>
36 </div> 36 </div>
37 37
src/app/components/amb-imagenes/amb-imagenes.component.ts
Diff comments   View file @ 3a8323a
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 { ProductoService } from 'src/app/services/producto.service'; 3 import { ProductoService } from 'src/app/services/producto.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: './amb-imagenes.component.html', 9 templateUrl: './amb-imagenes.component.html',
10 styleUrls: ['./amb-imagenes.component.scss'] 10 styleUrls: ['./amb-imagenes.component.scss']
11 }) 11 })
12 12
13 export class AmbImagenesComponent implements OnInit { 13 export class AmbImagenesComponent implements OnInit {
14 14
15 apiUrl = appSettings.apiUrl; 15 apiUrl = appSettings.apiUrl;
16 articulos: Producto[] = []; 16 articulos: Producto[] = [];
17 private auxProductos: Producto[] = []; 17 private auxProductos: Producto[] = [];
18 private searchTerm: string = ''; 18 private searchTerm: string = '';
19 19
20 constructor(private productoService: ProductoService, private http: HttpClient) {} 20 constructor(private productoService: ProductoService, private http: HttpClient) {}
21 21
22 ngOnInit() { 22 ngOnInit() {
23 23
24 this.productoService.getAll().subscribe((productos: Producto[]) => { 24 this.productoService.getAll().subscribe((productos: Producto[]) => {
25 this.articulos = productos; 25 this.articulos = productos;
26 this.filterItems(); 26 this.filterItems();
27 }); 27 });
28 } 28 }
29 29
30 onFileSelected(event, articulo) { 30 onFileSelected(event, articulo) {
31 31
32 let file: File = event.target.files[0]; 32 let file: File = event.target.files[0];
33 33
34 this.onLoad(file) 34 this.onLoad(file)
35 .then(result => { 35 .then(result => {
36 36
37 articulo.imagenes = [];
38
37 document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result; 39 document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result;
38 40
39 this.saveInBase({ 41 this.saveInBase({
40 name: file.name, 42 name: file.name,
41 base64: result, 43 base64: result,
42 codigo: articulo.CodArt, 44 codigo: articulo.CodArt,
43 sector: articulo.CodSec 45 sector: articulo.CodSec
44 }); 46 });
45 }); 47 });
46 } 48 }
47 49
48 filterItems() { 50 filterItems() {
49 51
50 this.auxProductos = this.articulos.filter(x => { 52 this.auxProductos = this.articulos.filter(x => {
51 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 53 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
52 }); 54 });
53 } 55 }
54 56
55 57
56 saveInBase(img) { 58 saveInBase(img) {
57 59
58 this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img) 60 this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img)
59 .subscribe(data => { 61 .subscribe(data => {
60 console.log(data); 62 console.log(data);
61 }); 63 });
62 } 64 }
63 65
64 onLoad(file) { 66 onLoad(file) {
65 67
66 return new Promise((resolve, reject) => { 68 return new Promise((resolve, reject) => {
67 69
68 var fr = new FileReader(); 70 var fr = new FileReader();
69 71
70 fr.onload = function() { 72 fr.onload = function() {
71 73
72 resolve(fr.result); 74 resolve(fr.result);
73 }; 75 };
74 76
75 fr.readAsDataURL(file); 77 fr.readAsDataURL(file);
76 }); 78 });
77 79
78 } 80 }
79 } 81 }
80 82