103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnChanges, 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.scss']
|
|
})
|
|
export class CampaignNavigationComponent implements OnInit, OnChanges {
|
|
|
|
campaigns$: Observable<Campaign[]>;
|
|
|
|
@Input() selectedCampaignId;
|
|
|
|
@Input() isSmallLayout;
|
|
|
|
@Output() campaignSelect = new EventEmitter();
|
|
|
|
@Output() campaignEdit = new EventEmitter();
|
|
|
|
@Output() campaignDelete = new EventEmitter();
|
|
|
|
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
|
|
|
|
selectedCampaign;
|
|
|
|
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;
|
|
});
|
|
}
|
|
|
|
ngOnChanges() {
|
|
this.campaigns$.subscribe(campaigns => {
|
|
const campaignIdx = campaigns.findIndex(c => c._id === this.selectedCampaignId);
|
|
if (campaignIdx !== -1) {
|
|
this.selectedCampaign = campaigns[campaignIdx];
|
|
}
|
|
});
|
|
}
|
|
|
|
select(campaign) {
|
|
if (campaign && campaign._id) {
|
|
this.selectedCampaign = campaign;
|
|
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)
|
|
}
|
|
}
|