D-Net

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

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

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

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

  selector: 'indicators',

  templateUrl: './indicators.component.html'

})

  @Input()

  @Input()

  @Input()

  public categoryIndex: number = 0;

  @Input()

  public subcategoryIndex: number = 0;

  @Input()

  public stakeholder: Stakeholder = null;

  public indicatorUtils: IndicatorUtils = new IndicatorUtils();

   */

  public indicator: Indicator;

   */

  public displayNumbers: Indicator[] = [];

   * Top filters

   */

  public all: Option = {

    value: 'all',

    label: 'All'

  };

   * Grid or List View

   */

              private sanitizer: DomSanitizer) {

  }

  ngOnDestroy(): void {

    this.subscriptions.forEach(value => {

      if (value instanceof Subscriber) {

        value.unsubscribe();

      } else if(value instanceof Function){

        value();

      }

    });

  }

  ngAfterViewInit(): void {

      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) {

        }

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

  ngOnChanges(changes: SimpleChanges): void {

        this.buildFilters();

      }

      this.filterNumbers();

  }

    if (!event) {

  }

  public changeGrid(value) {

    this.grid = value;

  }

    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);

    }));

  }

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

        this.filters.value.status),

      this.filters.value.privacy),

      this.filters.value.chartType

  }

  filterNumbers() {

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

      this.filters.value.status),

      this.filters.value.privacy);

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

  }

  onPrivacyChange(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);

  }

      return indicators;

    } else {

      return indicators.filter(indicator =>

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

    }

  }

      return indicators;

    } else {

  }

      return indicators;

    } else {

  }

      return indicators;

    } else {

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

  }

    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;

  }

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

  }

  get canChartsReorder(): boolean {

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

  }

    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];

  }

    return this.indicatorFb.get('urls') 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;

  }

    return this.sanitizer.bypassSecurityTrustResourceUrl(

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

  }

    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() {

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

      isActive: this.fb.control(false),

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

    });

    this.addUrl();

    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.isPublic,

    );

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

      this.indicator.indicatorPaths.push(

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

    });

    this.index = this.charts.findIndex(value => value._id === id);

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

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

        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)

              }));

            }

          }

        });

      }

    });

      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),

    });

      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() {

      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();

    }

      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

    ];

      if (type === 'chart') {

        this.filterCharts();

      } else {

        this.numbers = indicators;

        this.filterNumbers();

      }

      this.stakeholderService.setStakeholder(this.stakeholder);

    });

      indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)

    });

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

    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);

    });

  }