Martin Macola / configuracion-imagenes

Browse Code »

Commit 542c7962883e05d084e4473722889399ccee536e

Authored by Marcelo Puebla 2019-09-25 10:30:54 -0300

1 parent 8a64d48315

Exists in master

Agregada func para ordenar productos sin imagenes.

Showing 3 changed files with 21 additions and 18 deletions Show diff stats

src/app/components/abm-imagenes/abm-imagenes.component.html

Diff comments View file @ 542c796

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	12	<span
13	title="Buscar"	13	title="Buscar"
14	class="fa fa-search form-control-lg form-control-search pl-3"	14	class="fa fa-search form-control-lg form-control-search pl-3"
15	(click)="search()"></span>	15	(click)="search()"></span>
16	<input	16	<input
17	type="text"	17	type="text"
18	class="form-control form-control-lg shadow-sm rounded-pill px-5"	18	class="form-control form-control-lg shadow-sm rounded-pill px-5"
19	placeholder="Búsqueda productos"	19	placeholder="Búsqueda productos"
20	[(ngModel)]="searchTerm"	20	[(ngModel)]="searchTerm"
21	[disabled]="buscando"	21	[disabled]="buscando"
22	(keyup.enter)="search()">	22	(keyup.enter)="search()">
23	</div>	23	</div>
24	</div>	24	</div>
25		25
26	<div class="row m-3 vh-60 overflow-scroll">	26	<div class="row m-3 vh-60 overflow-scroll">
27	<div class="col">	27	<div class="col">
28	<h5>Productos</h5>	28	<h5>Productos</h5>
29	<table class="table table-striped table-hover table-borderless shadow">	29	<table class="table table-striped table-hover table-borderless shadow">
30	<thead>	30	<thead>
31	<tr class="bg-primary text-center text-white shadow-sm">	31	<tr class="bg-primary text-center text-white shadow-sm">
32	<th>Nombre</th>	32	<th>Nombre</th>
33	<th colspan="2">Imagen</th>	33	<th colspan="2">Imagen</th>
34	</tr>	34	</tr>
35	</thead>	35	</thead>
36	<tbody>	36	<tbody>
37	<tr class="shadow-sm" *ngFor="let articulo of articulos">	37	<tr class="shadow-sm" *ngFor="let articulo of articulos">
38	<td class="align-middle">	38	<td class="align-middle">
39	<p class="m-0">{{articulo.DET_LAR}}</p>	39	<p class="m-0">{{articulo.DET_LAR}}</p>
40	<p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>	40	<p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
41	<p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>	41	<p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
42	<p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>	42	<p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
43	</td>	43	</td>
44	<td>	44	<td class="text-center">
45	<img	45	<img
46	*ngIf="articulo.imagenes.length == 0"	46	*ngIf="articulo.imagenes.length == 0"
47	class="fade-in w-100 mx-auto img-fluid"	47	class="fade-in w-75"
48	src="{{apiImagenes}}/imagenes/noImage.jpg">	48	src="{{apiImagenes}}/imagenes/noImage.jpg">
49	<carousel [interval]="false">	49	<carousel [interval]="false">
50	<slide *ngFor="let item of articulo.imagenes; let index = index">	50	<slide *ngFor="let item of articulo.imagenes; let index = index">
51	<img	51	<img
52	*ngIf="!item.fromGallery"	52	*ngIf="!item.fromGallery"
53	class="fade-in img-fluid w-100"	53	class="fade-in w-75"
54	src="{{apiImagenes}}/imagenes/{{item.imagen}}">	54	src="{{apiImagenes}}/imagenes/{{item.imagen}}">
55	<img	55	<img
56	*ngIf="item.fromGallery"	56	*ngIf="item.fromGallery"
57	class="fade-in img-fluid w-100"	57	class="fade-in w-75"
58	src="{{item.base64}}">	58	src="{{item.base64}}">
59	<button	59	<button
60	(click)="deleteImage(articulo.imagenes, index)"	60	(click)="deleteImage(articulo.imagenes, index)"
61	type="button"	61	type="button"
62	class="btn btn-lg btn-delete-image position-absolute">	62	class="btn btn-lg btn-delete-image position-absolute">
63	<i class="fa fa-trash text-dark" aria-hidden="true"></i>	63	<i class="fa fa-trash text-dark" aria-hidden="true"></i>
64	</button>	64	</button>
65	</slide>	65	</slide>
66	</carousel>	66	</carousel>
67	</td>	67	</td>
68	<td class="align-middle text-center">	68	<td class="align-middle text-center">
69	<div class="custom-file">	69	<div class="custom-file">
70	<input	70	<input
71	type="file"	71	type="file"
72	class="custom-file-input"	72	class="custom-file-input"
73	id="customFileLang"	73	id="customFileLang"
74	accept="image/*"	74	accept="image/*"
75	(change)="onFileSelected($event, articulo)"	75	(change)="onFileSelected($event, articulo)"
76	lang="es"	76	lang="es"
77	multiple>	77	multiple>
78	<label class="custom-file-label text-left pr-5" for="customFileLang">	78	<label class="custom-file-label text-left pr-5" for="customFileLang">
79	<small>Seleccionar archivo</small>	79	<small>Seleccionar archivo</small>
80	</label>	80	</label>
81	</div>	81	</div>
82	</td>	82	</td>
83	</tr>	83	</tr>
84	</tbody>	84	</tbody>
85	</table>	85	</table>
86	</div>	86	</div>
87	</div>	87	</div>
88		88
89	<div class="row" *ngIf="paginationData">	89	<div class="row" *ngIf="paginationData">
90	<div class="col">	90	<div class="col">
91	<pagination	91	<pagination
92	[disabled]="true"	92	[disabled]="true"
93	[rotate]="false"	93	[rotate]="false"
94	[(ngModel)]="paginationData.page"	94	[(ngModel)]="paginationData.page"
95	[totalItems]="paginationData.rowCount"	95	[totalItems]="paginationData.rowCount"
96	[maxSize]="10"	96	[maxSize]="10"
97	[itemsPerPage]="paginationData.pageSize"	97	[itemsPerPage]="paginationData.pageSize"
98	(pageChanged)="pageChanged($event)"	98	(pageChanged)="pageChanged($event)"
99	[boundaryLinks]="true"	99	[boundaryLinks]="true"
100	[disabled]="disabledPaginador"	100	[disabled]="disabledPaginador"
101	previousText="&lsaquo;"	101	previousText="&lsaquo;"
102	nextText="&rsaquo;"	102	nextText="&rsaquo;"
103	firstText="«"	103	firstText="«"
104	lastText="»"	104	lastText="»"
105	></pagination>	105	></pagination>
106	</div>	106	</div>
107	</div>	107	</div>
108		108
109	</div>	109	</div>
110		110

src/app/components/abm-imagenes/abm-imagenes.component.scss

Diff comments View file @ 542c796

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	line-height: inherit;	6	line-height: inherit;
7	&:hover{	7	&:hover{
8	cursor: pointer;	8	cursor: pointer;
9	}	9	}
10	}	10	}
11		11
12	.custom-file-input:lang(es) ~ .custom-file-label::after {	12	.custom-file-input:lang(es) ~ .custom-file-label::after {
13	content: "Elegir";	13	content: "Elegir";
14	}	14	}
15		15
16	.btn-delete-image {	16	.btn-delete-image {
17	top: 0;	17	top: 0;
18	left: 88%;	18	left: 76%;
19	z-index: 1000;	19	z-index: 1000;
20	outline: none;	20	outline: none;
21	}	21	}
22		22
23	.btn:focus {	23	.btn:focus {
24	color: gray;	24	color: gray;
25	outline: 0;	25	outline: 0;
26	box-shadow: none;	26	box-shadow: none;
27	}	27	}
28		28

src/app/components/abm-imagenes/abm-imagenes.component.ts

Diff comments View file @ 542c796

 import { Component, OnInit } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { ImagenesService } from 'src/app/services/imagenes.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { HttpClient } from '@angular/common/http';
 @Component({
   selector: 'app-amb-imagenes',
   templateUrl: './abm-imagenes.component.html',
   styleUrls: ['./abm-imagenes.component.scss']
 })
 export class AbmImagenesComponent implements OnInit {
   apiImagenes = appSettings.apiImagenes;
   articulos: Producto[] = [];
   private auxProductos: Producto[] = [];
   private searchTerm: string = '';
   private paginationData: any;
   private disabledPaginador: boolean = false;
   private buscando: boolean = false;
   constructor(private imagenService: ImagenesService, private http: HttpClient) { }
   ngOnInit() {
     this.search();
   }
   search() {
     this.buscando = true;
     this.imagenService.getAllWithPaginator(this.searchTerm)
-      .subscribe((res) => {
+      .subscribe((res: any) => {
-        this.articulos = res.data;
+        this.articulos = this.sortImages(res.data);
         this.paginationData = res.pagination;
         this.buscando = false;
       }, error => console.error(error));
   }
   onFileSelected(event, articulo: Producto) {
     let auxFiles: FileList = event.target.files;
     Array.from(auxFiles).forEach(file => {
       this.onLoad(file)
         .then(result => {
           // articulo.imagenes.push({
           //   name: file.name + articulo.CodArt + articulo.CodSec,
           //   fromGallery: true,
           //   imagen: result,
           //   id_articulo: articulo.id
           // });
           let imagenAguardar = {
             imagen: {
               name: `${articulo.CodSec}${articulo.CodArt}${file.name}`,
               base64: result,
               codigo: articulo.CodArt,
               sector: articulo.CodSec,
               id_articulo: articulo.id
             },
             articulo: articulo
           };
           this.saveInBase(imagenAguardar);
         });
     })
   }
-  // filterItems() {
-  //   this.auxProductos = this.articulos.filter(x => {
-  //     return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
-  //       x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
-  //       x.CodSec.toString().includes(this.searchTerm.toLowerCase());
-  //   });
-  // }
   saveInBase(imagenAguardar) {
     this.imagenService.saveInBase(imagenAguardar.imagen)
       .subscribe(res => {
         imagenAguardar.imagen['id'] = res[0];
         imagenAguardar.imagen['fromGallery'] = true;
         imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen);
       }, error => console.error(error));
   }
   onLoad(file) {
     return new Promise((resolve, reject) => {
       var fr = new FileReader();
       fr.onload = function () {
         resolve(fr.result);
       };
       fr.readAsDataURL(file);
     });
   }
   deleteImage(imagenes, index: number) {
     if (!imagenes[index].name) {
       imagenes[index].name = imagenes[index].imagen;
     }
     this.imagenService.deleteImage(imagenes[index])
       .subscribe(res => {
         if (res) {
           imagenes.splice(index, 1);
+          this.sortImages(this.articulos);
         }
       }, error => console.error(error));
   }
   pageChanged(event: any): void {
     this.disabledPaginador = true;
     this.imagenService.getAllWithPaginator('', event.page)
       .subscribe((res) => {
         this.disabledPaginador = false;
-        this.articulos = res.data;
+        this.articulos = this.sortImages(res.data);
         this.paginationData = res.pagination;
-        // this.filterItems();
       }, error => console.error(error));
   }
+  sortImages(productos: Producto[]) {
+    productos.reverse().forEach((producto, i) => {