Marcelo Puebla / configuracion-imagenes

Browse Code »

Commit 2cf61e38e642da4d99a38996e60caa81868a7a9b

Authored by Eric Fernandez 2019-09-03 12:08:20 -0300

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

 <app-header></app-header>
 <div class="container-fluid">
   <div class="row m-3">
     <div class="col">
       <p class="h2">Configuración de imágenes</p>
     </div>
   </div>
   <div class="row mx-3 search">
     <div class="col">
-      <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
+      <span
+        title="Buscar"
+        class="fa fa-search form-control-lg form-control-search pl-3"
+        (click)="search()"></span>
       <input
         type="text"
         class="form-control form-control-lg shadow-sm rounded-pill px-5"
         placeholder="Búsqueda productos"
         [(ngModel)]="searchTerm"
-        (ngModelChange)="filterItems()">
+        [disabled]="buscando"
+        (keyup.enter)="search()">
     </div>
   </div>
   <div class="row m-3 vh-60 overflow-scroll">
     <div class="col">
       <h5>Productos</h5>
       <table class="table table-striped table-hover table-borderless shadow">
         <thead>
           <tr class="bg-primary text-center text-white shadow-sm">
             <th>Nombre</th>
             <th colspan="2">Imagen</th>
           </tr>
         </thead>
         <tbody>
-          <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
+          <tr class="shadow-sm" *ngFor="let articulo of articulos">
             <td class="align-middle">
               <p class="m-0">{{articulo.DET_LAR}}</p>
               <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
               <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
               <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
             </td>
             <td>
               <img
                 *ngIf="articulo.imagenes.length == 0"
                 class="fade-in w-100 mx-auto img-fluid"
                 src="{{apiImagenes}}/imagenes/noImage.jpg">
               <carousel [interval]="false">
                 <slide *ngFor="let item of articulo.imagenes; let index = index">
                   <img
                     *ngIf="!item.fromGallery"
                     class="fade-in img-fluid w-100"
                     src="{{apiImagenes}}/imagenes/{{item.imagen}}">
                   <img
                     *ngIf="item.fromGallery"
                     class="fade-in img-fluid w-100"
                     src="{{item.base64}}">
                   <button
                     (click)="deleteImage(articulo.imagenes, index)"
                     type="button"
                     class="btn btn-lg btn-delete-image position-absolute">
                       <i class="fa fa-trash text-dark" aria-hidden="true"></i>
                   </button>
                 </slide>
               </carousel>
             </td>
             <td class="align-middle text-center">
               <div class="custom-file">
                 <input
                   type="file"
                   class="custom-file-input"
                   id="customFileLang"
                   accept="image/*"
                   (change)="onFileSelected($event, articulo)"
                   lang="es"
                   multiple>
                 <label class="custom-file-label text-left pr-5" for="customFileLang">
                   <small>Seleccionar archivo</small>
                 </label>
               </div>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
   <div class="row" *ngIf="paginationData">
     <div class="col">
       <pagination
         [rotate]="false"
         [(ngModel)]="paginationData.page"
         [totalItems]="paginationData.rowCount"
-        [maxSize]="paginationData.pageCount"
+        [maxSize]="10"
         [itemsPerPage]="paginationData.pageSize"
         (pageChanged)="pageChanged($event)"
         [boundaryLinks]="true"
         [disabled]="disabledPaginador"
         previousText="&lsaquo;"
         nextText="&rsaquo;"
         firstText="&laquo;"
         lastText="&raquo;"
       ></pagination>
     </div>
   </div>
 </div>

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

Diff comments View file @ 2cf61e3

 .search .form-control-search {
   position: absolute;
   z-index: 2;
   display: block;
   text-align: center;
-  pointer-events: none;
-  color: #aaa;
   line-height: inherit;
+  &:hover{
+    cursor: pointer;
+  }
 }
 .custom-file-input:lang(es) ~ .custom-file-label::after {
   content: "Elegir";
 }
 .btn-delete-image {
   top: 0;
   left: 88%;
   z-index: 1000;
   outline: none;
 }
 .btn:focus {
   color: gray;
   outline: 0;
   box-shadow: none;

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

Diff comments View file @ 2cf61e3

 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.imagenService.getAllWithPaginator()
+    this.search();
+  }
+  search() {
+    this.buscando = true;
+    this.imagenService.getAllWithPaginator(this.searchTerm)
       .subscribe((res) => {
         this.articulos = res.data;
         this.paginationData = res.pagination;
-        this.filterItems();
+        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() {
+  // filterItems() {
-    this.auxProductos = this.articulos.filter(x => {
+  //   this.auxProductos = this.articulos.filter(x => {
-      return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
+  //     return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
-        x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
+  //       x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
-        x.CodSec.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);
         }
       }, error => console.error(error));
   }
   pageChanged(event: any): void {
     this.disabledPaginador = true;
-    this.imagenService.getAllWithPaginator(event.page)
+    this.imagenService.getAllWithPaginator('', event.page)
       .subscribe((res) => {
         this.disabledPaginador = false;
         this.articulos = res.data;
         this.paginationData = res.pagination;
-        this.filterItems();
+        // this.filterItems();
       }, error => console.error(error));
   }
 }

src/app/services/imagenes.service.ts

Diff comments View file @ 2cf61e3

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { appSettings } from 'src/etc/AppSettings';
 @Injectable({
   providedIn: 'root'
 })
 export class ImagenesService {
   constructor(private http: HttpClient) { }
-  getAllWithPaginator(page: number = 1): Observable<any> {
+  getAllWithPaginator(search: string = '', page: number = 1): Observable<any> {
-    return this.http.get(`${appSettings.apiImagenes}/articulos/${page}`);
+    return this.http.post(`${appSettings.apiImagenes}/articulos`, {
+      page: page,
+      search: search
+    });
   }
   saveInBase(body): Observable<any> {
     return this.http.post(`${appSettings.apiImagenes}/imagenes/guardar`, body);
   }
   deleteImage(body): Observable<any> {
     return this.http.post(`${appSettings.apiImagenes}/imagen/borrar`, body);
   }
 }