abm-imagenes.component.ts 3.3 KB
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 {

  apiUrl = appSettings.apiImagenes;
  articulos: Producto[] = [];
  private auxProductos: Producto[] = [];
  private searchTerm: string = '';
  private paginationData: any;
  private disabledPaginador: boolean = false;

  constructor(private productoService: ImagenesService, private http: HttpClient) { }

  ngOnInit() {

    this.productoService.getAllWithPaginator()
      .subscribe((res) => {

        this.articulos = res.data;
        this.paginationData = res.pagination;
        this.filterItems();
      }, 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.productoService.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.productoService.deleteImage(imagenes[index])
      .subscribe(res => {

        if (res) {
          imagenes.splice(index, 1);
        }
      }, error => console.error(error));
  }

  pageChanged(event: any): void {
    this.disabledPaginador = true;
    this.productoService.getAllWithPaginator(event.page)
      .subscribe((res) => {
        this.disabledPaginador = false;
        this.articulos = res.data;
        this.paginationData = res.pagination;
        this.filterItems();
      }, error => console.error(error));
  }

}