seleccion-articulos.component.ts 4.66 KB
import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ArticuloService } from 'src/app/services/articulo/articulo.service';
import { IArticulo } from 'src/app/interfaces/IArticulo';
import { APP_SETTINGS } from 'src/etc/AppSettings';
import { ICategoria } from 'src/app/interfaces/ICategoria';
import { CategoriaService } from 'src/app/services/categoria/categoria.service';

@Component({
  selector: 'app-seleccion-articulos',
  templateUrl: './seleccion-articulos.component.html',
  styleUrls: ['./seleccion-articulos.component.scss']
})
export class SeleccionArticulosComponent implements OnInit {
  showSpinner = true;
  timeoutHandler: any;
  urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
  articulos: IArticulo[] = [];
  auxArticulos: IArticulo[] = [];
  showQuantity = 100;
  queMostrar = 'todos';
  categoriaActive: number = null;
  categorias: ICategoria[] = [];
  searchTerm = '';
  ordenandoByVendidos = true;
  allActive = true;
  modalRef: BsModalRef;
  total: number = 0;
  mpActive:boolean = false;
  constructor(
    public articuloService: ArticuloService,
    private categoriaService: CategoriaService,
  ) { }


  ngOnInit() {
    this.getCategorias();
    this.mediaPantalla();
  }

  getCategorias() {
    this.categoriaService.getCategorias()
      .subscribe((categorias: ICategoria[]) => {
        switch (this.queMostrar) {
          case 'todos':
            this.categorias = categorias;
            this.categoriaActive = 0;
            break;
          case 'promociones':
            this.categorias = categorias;
            this.categoriaActive = 19;
            break;
          case 'ordenar':
            this.categorias = categorias.filter((categoria: ICategoria) => {
              return categoria.ES_PEDIDO;
            });
            this.categoriaActive = 4;
            break;
          default:
            this.categorias = categorias;
            this.categoriaActive = 0;
            break;
        }
        !localStorage.getItem('articulos') ?
          this.getProductos() :
          this.setProductos();
      });
  }

  getProductos() {
    this.articuloService.getAll()
      .subscribe((result: IArticulo[]) => {
        this.articuloService.setArticulosSinImagen(result);
        if (this.queMostrar === 'ordenar') {
          this.categorias.forEach((categoria: ICategoria) => {
            const tempArticulos = result.filter((articulo: IArticulo) => {
              return articulo.categoria_selfservice === categoria.id;
            });
            result = tempArticulos;
          });
        }
        localStorage.setItem('articulos', JSON.stringify(result));
        this.setProductos();
      }, (error) => {
        this.showSpinner = false;
        console.error(error);
      });
  }

  setProductos() {
    this.articulos = JSON.parse(localStorage.getItem('articulos'));
    this.filterItems();
  }

  filterItems() {
    if (this.categoriaActive === 0) {
      this.auxArticulos = this.articulos;
      return;
    }
    this.auxArticulos = this.articulos.filter(x => {
      return x.categoria_selfservice === this.categoriaActive;
    });
    this.ordenar();
  }

  ordenar() {
    if (this.ordenandoByVendidos) {
      this.auxArticulos.sort((a, b) => {
        return b.cantidadVendida - a.cantidadVendida;
      });
    }
  }

  selectCategoria(index: number, idCategoria?: number) {
    if (this.categoriaActive === idCategoria) return;
    this.categoriaActive = idCategoria;
    this.allActive = idCategoria === 0 ? true : false;
    this.categorias.forEach((categoria, i) => {
      categoria.selected = index === i ? true : false;
    });
    this.filterItems();
  }

  elegirArticulo(articulo: IArticulo) {
    this.articuloService.getById(articulo.id)
      .subscribe((res: IArticulo) => {
        res.cantidad = 1;
        this.articuloService.setArticulo(res);
      }, err => console.error(err));
  }

  increaseShow() {
    this.showQuantity += 100;
  }

  mouseup() {
    if (!this.timeoutHandler) return;
    clearInterval(this.timeoutHandler);
  }

  scrollY(el: HTMLElement, value) {
    el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
    this.timeoutHandler = setInterval(() => {
      el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
    }, 500);
  }

  scrollX(el: HTMLElement, value) {
    el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
    this.timeoutHandler = setInterval(() => {
      el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
    }, 500);
  }

  mediaPantalla(){
    if ($("body").hasClass("lash")) {
      $(".catContent,#content,#headerPub,#headerPad,.cat-btn,#boxCarrito").addClass("lash");
      this.mpActive=true;
    }
  }

}