Martin Macola / autoservicio

Download as
Browse Code »

Commit f8485d30eec9215fd601a983a699e073a35470b0

Authored by Eric Fernandez
2 parents 88149dfd0f b363e367e7
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

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