carrito.component.ts 2.4 KB
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
import { Location } from '@angular/common';
import { ArticuloService } from 'src/app/services/articulo/articulo.service';
import { APP_SETTINGS } from 'src/etc/AppSettings';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { IArticulo } from 'src/app/interfaces/IArticulo';
import { Router } from '@angular/router';
import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';

@Component({
  selector: 'app-carrito',
  templateUrl: './carrito.component.html',
  styleUrls: ['./carrito.component.scss'],
  animations: [
    trigger('EnterLeave', [
      state('flyIn', style({ transform: 'translateX(0)' })),
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('1s ease-in')
      ]),
      transition(':leave', [
        animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
      ])
    ])
  ]
})
export class CarritoComponent implements OnInit, OnDestroy {
  urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
  maxCantidad = 50;
  modalRef: BsModalRef;

  constructor(
    public articuloService: ArticuloService,
    private location: Location,
    private router: Router,
    private inactiveScreen: InactiveScreenService,
  ) { }

  ngOnInit() {
    if (!this.articuloService.carrito.length) {
      this.router.navigate(['']);
      return;
    }
    this.mediaPantallaP()
  }

  ngOnDestroy() {
    if (this.modalRef) this.modalRef.hide();
  }

  deleteArticulo(index: number) {
    this.articuloService.carrito.splice(index, 1);
    this.articuloService.calcularTotal();
  }

  substractCant(articulo: IArticulo) {
    if (articulo.cantidad === 1) return;
    articulo.cantidad--;
    this.articuloService.calcularTotal();
  }

  addCant(articulo: IArticulo) {
    if (articulo.cantidad >= this.maxCantidad) return;
    articulo.cantidad++;
    this.articuloService.calcularTotal();
  }

  goBack() {
    this.location.back();
  }

  @HostListener('document:click', ['$event'])
  eventListener(event: Event) {
    clearTimeout(this.inactiveScreen.timerReposo);
    this.inactiveScreen.startTimeOutInactividad();
  }

  mediaPantallaP() {
    if ($('body').hasClass('media-pantalla')) {
      $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
    }
  }
}