Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 089381c5a5b687b6b9c15f98c44bdacdca157969

Authored by Marcelo Puebla
1 parent 271a79f1ee
Exists in master and in 1 other branch validar_pve

Arreglo en delete de imagenes

Showing 2 changed files with 24 additions and 20 deletions   Show diff stats
src/app/components/amb-imagenes/amb-imagenes.component.html
Diff comments   View file @ 089381c
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="{{apiUrl}}/imagenes/noImage.jpg"> 44 src="{{apiUrl}}/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="{{apiUrl}}/imagenes/{{item.imagen}}"> 50 src="{{apiUrl}}/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.imagen}}"> 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-light btn-delete-image position-absolute close">
59 <span aria-hidden="true">&times;</span> 59 <span aria-hidden="true">&times;</span>
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 previousText="&lsaquo;" 95 previousText="&lsaquo;"
96 nextText="&rsaquo;" 96 nextText="&rsaquo;"
97 firstText="&laquo;" 97 firstText="&laquo;"
98 lastText="&raquo;" 98 lastText="&raquo;"
99 ></pagination> 99 ></pagination>
100 </div> 100 </div>
101 </div> 101 </div>
102 102
103 </div> 103 </div>
104 104
src/app/components/amb-imagenes/amb-imagenes.component.ts
Diff comments   View file @ 089381c
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 private paginationData: any; 19 private paginationData: any;
20 20
21 constructor(private productoService: ProductoService, private http: HttpClient) { } 21 constructor(private productoService: ProductoService, private http: HttpClient) { }
22 22
23 ngOnInit() { 23 ngOnInit() {
24 24
25 this.productoService.getAllWithPaginator() 25 this.productoService.getAllWithPaginator()
26 .subscribe((res) => { 26 .subscribe((res) => {
27 27
28 this.articulos = res.data; 28 this.articulos = res.data;
29 this.paginationData = res.pagination; 29 this.paginationData = res.pagination;
30 this.filterItems(); 30 this.filterItems();
31 }, error => console.error(error)); 31 }, error => console.error(error));
32 } 32 }
33 33
34 onFileSelected(event, articulo: Producto) { 34 onFileSelected(event, articulo: Producto) {
35 35
36 let auxFiles: FileList = event.target.files; 36 let auxFiles: FileList = event.target.files;
37 Array.from(auxFiles).forEach(file => { 37 Array.from(auxFiles).forEach(file => {
38 38
39 this.onLoad(file) 39 this.onLoad(file)
40 .then(result => { 40 .then(result => {
41 41 // articulo.imagenes.push({
42 articulo.imagenes.push({ 42 // name: file.name + articulo.CodArt + articulo.CodSec,
43 name: file.name, 43 // fromGallery: true,
44 fromGallery: true, 44 // imagen: result,
45 imagen: result, 45 // id_articulo: articulo.id
46 id_articulo: articulo.id 46 // });
47 }); 47 let imagenAguardar = {
48 48 imagen: {
49 this.saveInBase({ 49 name: `${articulo.CodSec}${articulo.CodArt}${file.name}`,
50 name: file.name, 50 base64: result,
51 base64: result, 51 codigo: articulo.CodArt,
52 codigo: articulo.CodArt, 52 sector: articulo.CodSec,
53 sector: articulo.CodSec 53 id_articulo: articulo.id
54 }); 54 },
55 articulo: articulo
56 };
57 this.saveInBase(imagenAguardar);
55 }); 58 });
56 }) 59 })
57 } 60 }
58 61
59 filterItems() { 62 filterItems() {
60 63
61 this.auxProductos = this.articulos.filter(x => { 64 this.auxProductos = this.articulos.filter(x => {
62 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || 65 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
63 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || 66 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
64 x.CodSec.toString().includes(this.searchTerm.toLowerCase()); 67 x.CodSec.toString().includes(this.searchTerm.toLowerCase());
65 }); 68 });
66 } 69 }
67 70
71 saveInBase(imagenAguardar) {
68 72
69 saveInBase(img) { 73 this.productoService.saveInBase(imagenAguardar.imagen)
70 74 .subscribe(res => {
71 this.productoService.saveInBase(img) 75 imagenAguardar.imagen['id'] = res[0];
72 .subscribe(data => { 76 imagenAguardar.imagen['fromGallery'] = true;
73 77 imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen);
74 }, error => console.error(error)); 78 }, error => console.error(error));
75 } 79 }
76 80
77 onLoad(file) { 81 onLoad(file) {
78 82
79 return new Promise((resolve, reject) => { 83 return new Promise((resolve, reject) => {
80 84
81 var fr = new FileReader(); 85 var fr = new FileReader();
82 86
83 fr.onload = function () { 87 fr.onload = function () {
84 88
85 resolve(fr.result); 89 resolve(fr.result);
86 }; 90 };
87 91
88 fr.readAsDataURL(file); 92 fr.readAsDataURL(file);
89 }); 93 });
90 94
91 } 95 }
92 96
93 deleteImage(imagenes, index: number) { 97 deleteImage(imagenes, index: number) {
94 98
95 if (!imagenes[index].name) { 99 if (!imagenes[index].name) {
96 imagenes[index].name = imagenes[index].imagen; 100 imagenes[index].name = imagenes[index].imagen;
97 } 101 }
98 102
99 this.productoService.deleteImage(imagenes[index]) 103 this.productoService.deleteImage(imagenes[index])
100 .subscribe(res => { 104 .subscribe(res => {
101 105
102 if (res) { 106 if (res) {
103 imagenes.splice(index, 1); 107 imagenes.splice(index, 1);
104 } 108 }
105 }, error => console.error(error)); 109 }, error => console.error(error));
106 } 110 }
107 111
108 pageChanged(event: any): void { 112 pageChanged(event: any): void {
109 this.productoService.getAllWithPaginator(event.page) 113 this.productoService.getAllWithPaginator(event.page)
110 .subscribe((res) => { 114 .subscribe((res) => {
111 115
112 this.articulos = res.data; 116 this.articulos = res.data;
113 this.paginationData = res.pagination; 117 this.paginationData = res.pagination;
114 this.filterItems(); 118 this.filterItems();
115 }, error => console.error(error)); 119 }, error => console.error(error));
116 } 120 }
117 121
118 } 122 }
119 123