opt-cc/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild} from '@angular/core';
import {Campaign} from '../../../models/model-interfaces';
import {LoginService} from '../../../services/app-user-service/login-service';

@Component({
  selector: 'campaign-navigation',
  templateUrl: './campaign-navigation.component.html',
  styleUrls: ['./campaign-navigation.component.css']
})
export class CampaignNavigationComponent implements OnChanges {

  @Input() campaigns: Campaign[];

  @Input() selectedCampaignId;

  @Output() campaignSelect = new EventEmitter();

  @Output() campaignEdit = new EventEmitter();

  @Output() campaignDelete = new EventEmitter();

  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;

  isLeftScrollVisible = false;

  isRightScrollVisible = true;

  repeater;

  constructor(public loginService: LoginService) {
  }

  ngOnChanges(changes: SimpleChanges) {
    if (!changes.selectedCampaignId) {
      this.isRightScrollVisible = this.campaigns.length > 4;
    }
  }

  select(campaign) {
    if (campaign && campaign._id) {
      this.selectedCampaignId = campaign._id;
      this.campaignSelect.emit(campaign);
    }
  }

  edit(campaign) {
    this.campaignEdit.emit(campaign);
  }

  delete(campaign) {
    this.campaignDelete.emit(campaign);
  }

  public scrollList(scrollValue: number): void {
    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;

    this.panel.nativeElement.scrollLeft += scrollValue;

    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;

    if (scrollValue < 0) {
      this.isRightScrollVisible = true;
    }

    if (updatedScrollLeftValue > 0) {
      if (prevScrollLeftValue === updatedScrollLeftValue) {
        this.isRightScrollVisible = false;
        this.clearRepeater();
      }
      this.isLeftScrollVisible = true;
    } else {
      this.isLeftScrollVisible = false;
      this.clearRepeater();
    }
  }

  setRepeater(value: number) {
    this.repeater = setInterval(() => this.scrollList(value), 20);
  }

  clearRepeater() {
    clearInterval(this.repeater)
  }
}