Martin Macola / configuracion-imagenes

Download as
Browse Code »

Commit 2cf61e38e642da4d99a38996e60caa81868a7a9b

Authored by Eric Fernandez
1 parent a3885a7334
Exists in master

busqueda de artículos

Showing 4 changed files with 38 additions and 21 deletions   Show diff stats
src/app/components/abm-imagenes/abm-imagenes.component.html
Diff comments   View file @ 2cf61e3
... ... @@ -6,19 +6,23 @@
6 6 <p class="h2">Configuración de imágenes</p>
7 7 </div>
8 8 </div>
9   -
  9 +
10 10 <div class="row mx-3 search">
11 11 <div class="col">
12   - <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
  12 + <span
  13 + title="Buscar"
  14 + class="fa fa-search form-control-lg form-control-search pl-3"
  15 + (click)="search()"></span>
13 16 <input
14 17 type="text"
15 18 class="form-control form-control-lg shadow-sm rounded-pill px-5"
16 19 placeholder="Búsqueda productos"
17 20 [(ngModel)]="searchTerm"
18   - (ngModelChange)="filterItems()">
  21 + [disabled]="buscando"
  22 + (keyup.enter)="search()">
19 23 </div>
20 24 </div>
21   -
  25 +
22 26 <div class="row m-3 vh-60 overflow-scroll">
23 27 <div class="col">
24 28 <h5>Productos</h5>
... ... @@ -30,7 +34,7 @@
30 34 </tr>
31 35 </thead>
32 36 <tbody>
33   - <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
  37 + <tr class="shadow-sm" *ngFor="let articulo of articulos">
34 38 <td class="align-middle">
35 39 <p class="m-0">{{articulo.DET_LAR}}</p>
36 40 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
... ... @@ -88,7 +92,7 @@
88 92 [rotate]="false"
89 93 [(ngModel)]="paginationData.page"
90 94 [totalItems]="paginationData.rowCount"
91   - [maxSize]="paginationData.pageCount"
  95 + [maxSize]="10"
92 96 [itemsPerPage]="paginationData.pageSize"
93 97 (pageChanged)="pageChanged($event)"
94 98 [boundaryLinks]="true"
src/app/components/abm-imagenes/abm-imagenes.component.scss
Diff comments   View file @ 2cf61e3
... ... @@ -3,9 +3,10 @@
3 3 z-index: 2;
4 4 display: block;
5 5 text-align: center;
6   - pointer-events: none;
7   - color: #aaa;
8 6 line-height: inherit;
  7 + &:hover{
  8 + cursor: pointer;
  9 + }
9 10 }
10 11  
11 12 .custom-file-input:lang(es) ~ .custom-file-label::after {
src/app/components/abm-imagenes/abm-imagenes.component.ts
Diff comments   View file @ 2cf61e3
... ... @@ -18,18 +18,27 @@ export class AbmImagenesComponent implements OnInit {
18 18 private searchTerm: string = '';
19 19 private paginationData: any;
20 20 private disabledPaginador: boolean = false;
  21 + private buscando: boolean = false;
21 22  
22 23 constructor(private imagenService: ImagenesService, private http: HttpClient) { }
23 24  
24 25 ngOnInit() {
25 26  
26   - this.imagenService.getAllWithPaginator()
  27 + this.search();
  28 + }
  29 +
  30 + search() {
  31 +
  32 + this.buscando = true;
  33 +
  34 + this.imagenService.getAllWithPaginator(this.searchTerm)
27 35 .subscribe((res) => {
28 36  
29 37 this.articulos = res.data;
30 38 this.paginationData = res.pagination;
31   - this.filterItems();
  39 + this.buscando = false;
32 40 }, error => console.error(error));
  41 +
33 42 }
34 43  
35 44 onFileSelected(event, articulo: Producto) {
... ... @@ -60,14 +69,14 @@ export class AbmImagenesComponent implements OnInit {
60 69 })
61 70 }
62 71  
63   - filterItems() {
  72 + // filterItems() {
64 73  
65   - this.auxProductos = this.articulos.filter(x => {
66   - return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
67   - x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
68   - x.CodSec.toString().includes(this.searchTerm.toLowerCase());
69   - });
70   - }
  74 + // this.auxProductos = this.articulos.filter(x => {
  75 + // return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
  76 + // x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
  77 + // x.CodSec.toString().includes(this.searchTerm.toLowerCase());
  78 + // });
  79 + // }
71 80  
72 81 saveInBase(imagenAguardar) {
73 82  
... ... @@ -112,12 +121,12 @@ export class AbmImagenesComponent implements OnInit {
112 121  
113 122 pageChanged(event: any): void {
114 123 this.disabledPaginador = true;
115   - this.imagenService.getAllWithPaginator(event.page)
  124 + this.imagenService.getAllWithPaginator('', event.page)
116 125 .subscribe((res) => {
117 126 this.disabledPaginador = false;
118 127 this.articulos = res.data;
119 128 this.paginationData = res.pagination;
120   - this.filterItems();
  129 + // this.filterItems();
121 130 }, error => console.error(error));
122 131 }
123 132  
src/app/services/imagenes.service.ts
Diff comments   View file @ 2cf61e3
... ... @@ -10,9 +10,12 @@ export class ImagenesService {
10 10  
11 11 constructor(private http: HttpClient) { }
12 12  
13   - getAllWithPaginator(page: number = 1): Observable<any> {
  13 + getAllWithPaginator(search: string = '', page: number = 1): Observable<any> {
14 14  
15   - return this.http.get(`${appSettings.apiImagenes}/articulos/${page}`);
  15 + return this.http.post(`${appSettings.apiImagenes}/articulos`, {
  16 + page: page,
  17 + search: search
  18 + });
16 19 }
17 20  
18 21 saveInBase(body): Observable<any> {