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

import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnInit,
  Output,
  ViewChild
} from '@angular/core';
import {Campaign} from '../../../models/model-interfaces';
import {LoginService} from '../../../services/app-user-service/login-service';
import {Observable} from 'rxjs';
import {CampaignService} from '../../../services/logs/campaign.service';

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

  campaigns$: Observable<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,
              private campaignService: CampaignService) {
    this.campaigns$ = campaignService.campaigns$;
  }

  ngOnInit() {
    this.campaigns$.subscribe(campaigns => {
      this.isRightScrollVisible = 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)
  }
}