D-Net

import {AfterViewInit, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";

import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";

import {IndicatorUtils, Option} from "../utils/indicator-utils";

import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";

import {AlertModal} from "../openaireLibrary/utils/modal/alert";

import {StatisticsService} from "../utils/services/statistics.service";

import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";

import {DomSanitizer} from "@angular/platform-browser";

import {StakeholderService} from "../services/stakeholder.service";

import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";

import {Subscriber} from "rxjs";

import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";

declare var UIkit;

@Component({

  selector: 'indicators',

  templateUrl: './indicators.component.html'

})

export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {

  @Input()

  public properties: EnvProperties = null;

  @Input()

  public topicIndex: number = 0;

  @Input()

  public categoryIndex: number = 0;

  @Input()

  public subcategoryIndex: number = 0;

  @Input()

  public stakeholder: Stakeholder = null;

  public indicatorUtils: IndicatorUtils = new IndicatorUtils();

  public indicatorFb: FormGroup;

  /**

   * Editable indicator

   */

  public indicator: Indicator;

  public index: number;

  /**

   * Displayed chart and numbers base on Top filters

   */

  public displayCharts: Indicator[] = [];

  public displayNumbers: Indicator[] = [];

  /**

   * Top filters

   */

  public filters: FormGroup;

  public all: Option = {

    value: 'all',

    label: 'All'

  };

  /**

   * Grid or List View

   */

  public grid: boolean = true;

  private subscriptions: any[] = [];

  @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;

  @ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal;

  constructor(private layoutService: LayoutService,

              private stakeholderService: StakeholderService,

              private statisticsService: StatisticsService,

              private fb: FormBuilder,

              private sanitizer: DomSanitizer) {

  }

  ngOnInit(): void {

    this.buildFilters();

  }

  ngOnDestroy(): void {

    this.subscriptions.forEach(value => {

      if (value instanceof Subscriber) {

        value.unsubscribe();

      } else if(value instanceof Function){

        value();

      }

    });

  }

  ngAfterViewInit(): void {

    if (document !== undefined) {

      let callback = (list): void => {

        let items: HTMLCollection = list.current.children;

        let reordered = [];

        for (let i = 0; i < items.length; i++) {

          if (items.item(i).id) {

            reordered.push(items.item(i).id);

          }

        }

        this.reorderIndicators(list.current.id , reordered);

      };

      this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback));

      this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback));

    }

  }

  ngOnChanges(changes: SimpleChanges): void {

    if (this.canEdit) {

      this.buildFilters();

      this.filterCharts();

      this.filterNumbers();

    }

  }

  public toggleOpen(event = null) {

    if (!event) {

      this.layoutService.setOpen(!this.open);

    } else if (event && event['value'] === true) {

      this.layoutService.setOpen(false);

    }

  }

  public changeGrid(value) {

    this.grid = value;

  }

  private buildFilters() {

    this.filters = this.fb.group({

      chartType: this.fb.control('all'),

      privacy: this.fb.control('all'),

      status: this.fb.control('all'),

      keyword: this.fb.control('')

    });

    this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe( value => {

      this.onChartTypeChange(value);

    }));

    this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe( value => {

      this.onPrivacyChange(value);

    }));

    this.subscriptions.push(this.filters.get('status').valueChanges.subscribe( value => {

      this.onStatusChange(value);

    }));

    this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe( value => {

      this.onKeywordChange(value);

    }));

  }

  filterCharts() {

    this.displayCharts = this.filterChartType(this.filterPrivacy(

      this.filterStatus(this.filterByKeyword(this.charts, this.filters.value.keyword),

        this.filters.value.status),

      this.filters.value.privacy),

      this.filters.value.chartType

    );

  }

  filterNumbers() {

    this.displayNumbers = this.filterPrivacy(this.filterStatus(

      this.filterByKeyword(this.numbers, this.filters.value.keyword),

      this.filters.value.status),

      this.filters.value.privacy);

  }

  onChartTypeChange(value) {

    this.displayCharts = this.filterChartType(this.charts, value);

  }

  onPrivacyChange(value) {

    console.log(value);

    this.displayCharts = this.filterPrivacy(this.charts, value);

    this.displayNumbers = this.filterPrivacy(this.numbers, value);

  }

  onStatusChange(value) {

    this.displayCharts = this.filterStatus(this.charts, value);

    this.displayNumbers = this.filterStatus(this.numbers, value);

  }

  onKeywordChange(value) {

    this.displayCharts = this.filterByKeyword(this.charts, value);

    this.displayNumbers = this.filterByKeyword(this.numbers, value);

  }

  private filterChartType(indicators: Indicator[], value): Indicator[] {

    if (value === 'all') {

      return indicators;

    } else {

      return indicators.filter(indicator =>

        indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0);

    }

  }

  private filterPrivacy(indicators: Indicator[], value): Indicator[] {

    if (value === 'all') {

      return indicators;

    } else {

      return indicators.filter(indicator => indicator.isPublic === value);

    }

  }

  private filterStatus(indicators: Indicator[], value): Indicator[] {

    if (value === 'all') {

      return indicators;

    } else {

      return indicators.filter(indicator => indicator.isActive === value);

    }

  }

  private filterByKeyword(indicators: Indicator[], value): Indicator[] {

    if (value === null || value === '') {

      return indicators;

    } else {

      return indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))

        || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase())));

    }

  }

  get charts(): Indicator[] {

    return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;

  }

  set charts(indicators: Indicator[]) {

    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = indicators;

  }

  get numbers(): Indicator[] {

    return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;

  }

  set numbers(indicators: Indicator[]) {

    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = indicators;

  }

  get open(): boolean {

    return this.layoutService.open;

  }

  get canNumbersReorder(): boolean {

    return this.displayNumbers.length === this.numbers.length;

  }

  get canChartsReorder(): boolean {

    return this.displayCharts.length === this.charts.length;

  }

  get canEdit() {

    return this.stakeholder &&

      this.stakeholder.topics[this.topicIndex] &&

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];

  }

  public get urls(): FormArray {

    return this.indicatorFb.get('urls') as FormArray;

  }

  public get indicatorPaths(): FormArray {

    return this.indicatorFb.get('indicatorPaths') as FormArray;

  }

  public getParameters(index: number): FormArray {

    return this.indicatorPaths.at(index).get('parameters') as FormArray;

  }

  public getParameter(index: number, key: string): FormControl {

    return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl;

  }

  private getUrlByStakeHolder(indicatorPath: IndicatorPath) {

    return this.sanitizer.bypassSecurityTrustResourceUrl(

      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)));

  }

  public addUrl() {

    this.urls.push(this.fb.control('', [Validators.required,

      Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +

        '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +

        '[a-zA-Z0-9]+\.[^\s]{2,}')])

    );

  }

  public createIndicatorOpen() {

    this.indicator = null;

    this.indicatorFb = this.fb.group({

      id: this.fb.control(null),

      name: this.fb.control('', Validators.required),

      description: this.fb.control(''),

      isPublic: this.fb.control(false),

      isActive: this.fb.control(false),

      urls: this.fb.array([]),

      width: this.fb.control('small', Validators.required),

    });

    this.addUrl();

    this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';

    this.editIndicatorModal.cancelButtonText = 'Cancel';

    this.editIndicatorModal.okButtonText = 'Create';

    this.editIndicatorModal.okButtonLeft = false;

    this.editIndicatorModal.alertMessage = false;

    this.editIndicatorModal.stayOpen = true;

    this.editIndicatorModal.open();

  }

  public createIndicator() {

    this.indicator = new Indicator(

      this.indicatorFb.value.name,

      this.indicatorFb.value.description,

      'chart',

      this.indicatorFb.value.width,

      this.indicatorFb.value.isActive,

      this.indicatorFb.value.isPublic,

      []

    );

    this.indicatorFb.value.urls.forEach(url => {

      this.indicator.indicatorPaths.push(

        this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url));

    });

    this.editIndicatorOpen();

  }

  public editIndicatorOpen(index: number = -1) {

    this.index = index;

    if (this.index !== -1) {

      this.indicator = HelperFunctions.copy(this.charts[index]);

    }

    let indicatorPaths = this.fb.array([]);

    this.indicator.indicatorPaths.forEach(indicatorPath => {

      let parameters = this.fb.array([]);

      if (indicatorPath.parameters) {

        Object.keys(indicatorPath.parameters).forEach(key => {

          if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {

            if (this.indicatorUtils.parametersValidators.has(key)) {

              parameters.push(this.fb.group({

                key: this.fb.control(key),

                value: this.fb.control(indicatorPath.parameters[key], this.indicatorUtils.parametersValidators.get(key))

              }));

            } else {

              parameters.push(this.fb.group({

                key: this.fb.control(key),

                value: this.fb.control(indicatorPath.parameters[key], Validators.required)

              }));

            }

          }

        });

      }

      indicatorPaths.push(this.fb.group({

        parameters: parameters

      }));

    });

    this.indicatorFb = this.fb.group({

      id: this.fb.control(this.indicator._id),

      name: this.fb.control(this.indicator.name, Validators.required),

      description: this.fb.control(this.indicator.description),

      isPublic: this.fb.control(this.indicator.isPublic),

      isActive: this.fb.control(this.indicator.isActive),

      indicatorPaths: indicatorPaths,

      width: this.fb.control(this.indicator.width, Validators.required),

    });

    if(index === -1) {

      this.editIndicatorModal.okButtonText = 'Save';

      this.editIndicatorModal.stayOpen = false;

    } else {

      this.editIndicatorModal.cancelButtonText = 'Cancel';

      this.editIndicatorModal.okButtonText = 'Save Changes';

      this.editIndicatorModal.okButtonLeft = false;

      this.editIndicatorModal.alertMessage = false;

      this.editIndicatorModal.open();

    }

    this.indicator.indicatorPaths.forEach(indicatorPath => {

      indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)

    });

  }

  saveIndicator() {

    if(this.indicator) {

      this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);

      let path = [

        this.stakeholder._id,

        this.stakeholder.topics[this.topicIndex]._id,

        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,

        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id

      ];

      this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {

        if (this.index !== -1) {

          this.charts[this.index] = indicator;

        } else {

          this.charts.push(indicator);

        }

        this.filterCharts();

        this.stakeholderService.setStakeholder(this.stakeholder);

        this.indicatorFb = null;

      }, error => {

        this.indicatorFb = null;

      });

    } else {

      this.createIndicator();

    }

  }

  reorderIndicators(type: string, indicatorIds: string[]) {

    let path = [

      this.stakeholder._id,

      this.stakeholder.topics[this.topicIndex]._id,

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id

    ];

    this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicatorIds, type).subscribe(indicators => {

      if (type === 'chart') {

        this.charts = indicators;

        this.filterCharts();

      } else {

        this.numbers = indicators;

        this.filterNumbers();

      }

      this.stakeholderService.setStakeholder(this.stakeholder);

    });

  }

  refreshIndicator(index: number) {

    this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);

    this.indicator.indicatorPaths.forEach(indicatorPath => {

      indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)

    });

    this.indicatorPaths.at(index).markAsPristine({onlySelf: true});

  }

  deleteIndicatorOpen(index: number, type: string = 'chart') {

    this.index = index;

    if(type === 'chart') {

      this.indicator = this.charts[index];

    } else {

      this.indicator = this.numbers[index];

    }

    this.deleteIndicatorModal.alertTitle = 'Delete ' + this.indicator.name;

    this.deleteIndicatorModal.cancelButtonText = 'No';

    this.deleteIndicatorModal.okButtonText = 'Yes';

    this.deleteIndicatorModal.message = 'This indicator will permanently be deleted. Are you sure you want to proceed?';

    this.deleteIndicatorModal.open();

  }

  deleteIndicator() {

    let path = [

      this.stakeholder._id,

      this.stakeholder.topics[this.topicIndex]._id,

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,

      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,

      this.indicator._id

    ];

    this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe( () => {

      if(this.indicator.type === 'chart') {

        this.charts.splice(this.index, 1);

      } else {

        this.numbers.splice(this.index, 1);

      }

      this.stakeholderService.setStakeholder(this.stakeholder);

    });

  }

}