Commit cd84daae1920b98850d92afb75f992099b95524c
1 parent
0a9a4e91bf
Exists in
master
Agregada logica para manejar el paginador
Showing
1 changed file
with
18 additions
and
7 deletions
Show diff stats
src/app/components/amb-imagenes/amb-imagenes.component.ts
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 | 20 | ||
20 | constructor(private productoService: ProductoService, private http: HttpClient) { } | 21 | constructor(private productoService: ProductoService, private http: HttpClient) { } |
21 | 22 | ||
22 | ngOnInit() { | 23 | ngOnInit() { |
23 | 24 | ||
24 | this.productoService.getAll().subscribe((productos: Producto[]) => { | 25 | this.productoService.getAllWithPaginator() |
25 | this.articulos = productos; | 26 | .subscribe((res) => { |
26 | this.filterItems(); | ||
27 | }); | ||
28 | } | ||
29 | 27 | ||
30 | this.articulos = productos; | 28 | this.articulos = res.data; |
29 | this.paginationData = res.pagination; | ||
31 | this.filterItems(); | 30 | this.filterItems(); |
32 | }, error => console.error(error)); | 31 | }, error => console.error(error)); |
33 | } | 32 | } |
34 | 33 | ||
35 | onFileSelected(event, articulo: Producto) { | 34 | onFileSelected(event, articulo: Producto) { |
36 | 35 | ||
37 | let auxFiles: FileList = event.target.files; | 36 | let auxFiles: FileList = event.target.files; |
38 | Array.from(auxFiles).forEach(file => { | 37 | Array.from(auxFiles).forEach(file => { |
39 | 38 | ||
40 | this.onLoad(file) | 39 | this.onLoad(file) |
41 | .then(result => { | 40 | .then(result => { |
42 | 41 | ||
43 | articulo.imagenes.push({ | 42 | articulo.imagenes.push({ |
44 | name: file.name, | 43 | name: file.name, |
45 | fromGallery: true, | 44 | fromGallery: true, |
46 | imagen: result, | 45 | imagen: result, |
47 | id_articulo: articulo.id | 46 | id_articulo: articulo.id |
48 | }); | 47 | }); |
49 | 48 | ||
50 | this.saveInBase({ | 49 | this.saveInBase({ |
51 | name: file.name, | 50 | name: file.name, |
52 | base64: result, | 51 | base64: result, |
53 | codigo: articulo.CodArt, | 52 | codigo: articulo.CodArt, |
54 | sector: articulo.CodSec | 53 | sector: articulo.CodSec |
55 | }); | 54 | }); |
56 | }); | 55 | }); |
57 | }) | 56 | }) |
58 | } | 57 | } |
59 | 58 | ||
60 | filterItems() { | 59 | filterItems() { |
61 | 60 | ||
62 | this.auxProductos = this.articulos.filter(x => { | 61 | this.auxProductos = this.articulos.filter(x => { |
63 | return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) | 62 | return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || |
63 | x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || | ||
64 | x.CodSec.toString().includes(this.searchTerm.toLowerCase()); | ||
64 | }); | 65 | }); |
65 | } | 66 | } |
66 | 67 | ||
67 | 68 | ||
68 | saveInBase(img) { | 69 | saveInBase(img) { |
69 | 70 | ||
70 | this.productoService.saveInBase(img) | 71 | this.productoService.saveInBase(img) |
71 | .subscribe(data => { | 72 | .subscribe(data => { |
72 | 73 | ||
73 | }, error => console.error(error)); | 74 | }, error => console.error(error)); |
74 | } | 75 | } |
75 | 76 | ||
76 | onLoad(file) { | 77 | onLoad(file) { |
77 | 78 | ||
78 | return new Promise((resolve, reject) => { | 79 | return new Promise((resolve, reject) => { |
79 | 80 | ||
80 | var fr = new FileReader(); | 81 | var fr = new FileReader(); |
81 | 82 | ||
82 | fr.onload = function () { | 83 | fr.onload = function () { |
83 | 84 | ||
84 | resolve(fr.result); | 85 | resolve(fr.result); |
85 | }; | 86 | }; |
86 | 87 | ||
87 | fr.readAsDataURL(file); | 88 | fr.readAsDataURL(file); |
88 | }); | 89 | }); |
89 | 90 | ||
90 | } | 91 | } |
91 | 92 | ||
92 | deleteImage(imagenes, index: number) { | 93 | deleteImage(imagenes, index: number) { |
93 | 94 | ||
94 | if (!imagenes[index].name) { | 95 | if (!imagenes[index].name) { |
95 | imagenes[index].name = imagenes[index].imagen; | 96 | imagenes[index].name = imagenes[index].imagen; |
96 | } | 97 | } |
97 | 98 | ||
98 | this.productoService.deleteImage(imagenes[index]) | 99 | this.productoService.deleteImage(imagenes[index]) |
99 | .subscribe(res => { | 100 | .subscribe(res => { |
100 | 101 | ||
101 | if (res) { | 102 | if (res) { |
102 | imagenes.splice(index, 1); | 103 | imagenes.splice(index, 1); |
103 | } | 104 | } |
104 | }, error => console.error(error)); | 105 | }, error => console.error(error)); |
105 | } | 106 | } |
106 | 107 | ||
108 | pageChanged(event: any): void { | ||
109 | this.productoService.getAllWithPaginator(event.page) | ||
110 | .subscribe((res) => { | ||
111 | |||
112 | this.articulos = res.data; | ||
113 | this.paginationData = res.pagination; | ||
114 | this.filterItems(); | ||
115 | }, error => console.error(error)); | ||
116 | } |