Project

General

Profile

1
import {
2
  AfterViewInit,
3
  ChangeDetectorRef,
4
  Component,
5
  Input,
6
  OnChanges,
7
  OnDestroy,
8
  OnInit,
9
  SimpleChanges,
10
  ViewChild
11
} from "@angular/core";
12
import {
13
  Indicator,
14
  IndicatorPath, IndicatorSize,
15
  IndicatorType,
16
  Section,
17
  Stakeholder,
18
  Visibility
19
} from "../openaireLibrary/monitor/entities/stakeholder";
20
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
21
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
22
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
23
import {StatisticsService} from "../utils/services/statistics.service";
24
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
25
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
26
import {Reorder, StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
27
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
28
import {Subscriber} from "rxjs";
29
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
30
import {Router} from "@angular/router";
31
import {Session} from "../openaireLibrary/login/utils/helper.class";
32
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
33
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
34

    
35
declare var UIkit;
36

    
37
@Component({
38
  selector: 'indicators',
39
  templateUrl: './indicators.component.html',
40
  styleUrls: ['indicators.component.css']
41
})
42
export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
43
  
44
  @Input()
45
  public properties: EnvProperties = null;
46
  @Input()
47
  public topicIndex: number = 0;
48
  @Input()
49
  public categoryIndex: number = 0;
50
  @Input()
51
  public subcategoryIndex: number = 0;
52
  public stakeholder: Stakeholder = null;
53
  public user = null;
54
  public preview: string;
55
  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
56
  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
57
  public numberIndicatorFb: FormGroup;
58
  public chartIndicatorFb: FormGroup;
59
  public chartSections: FormArray;
60
  public numberSections: FormArray;
61
  /**
62
   * Editable indicator
63
   */
64
  public section: Section;
65
  public indicator: Indicator;
66
  public index: number = -1;
67
  /**
68
   * Displayed chart and numbers base on Top filters
69
   */
70
  public displayCharts: Section[] = [];
71
  public displayNumbers: Section[] = [];
72
  /**
73
   * Top filters
74
   */
75
  @Input()
76
  public filters: FormGroup;
77
  public editing: boolean = false;
78
  /** Safe Urls*/
79
  public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
80
  public numberResults: Map<string, number> = new Map<string, number>();
81
  private subscriptions: any[] = [];
82
  private urlSubscriptions: any[] = [];
83
  @ViewChild('editChartModal') editChartModal: AlertModal;
84
  @ViewChild('editNumberModal') editNumberModal: AlertModal;
85
  @ViewChild('deleteModal') deleteModal: AlertModal;
86
  //@ViewChild('deleteAllModal') deleteAllModal: AlertModal;
87
  //@ViewChild('deleteAndDisconnectModal') deleteAndDisconnectModal: AlertModal;
88
  //@ViewChild('deleteChartSectionModal') deleteChartSectionModal: AlertModal;
89
  //@ViewChild('deleteNumberSectionModal') deleteNumberSectionModal: AlertModal;
90
  @ViewChild('deleteSectionModal') deleteSectionModal: AlertModal;
91
  public sectionTypeToDelete: string;
92
  public sectionChildrenActionOnDelete: string;
93
  public indicatorChildrenActionOnDelete: string;
94
  private firstLoad: boolean = true;
95
  
96
  urlParameterizedMessage = null;
97
  
98
  constructor(private layoutService: LayoutService,
99
              private stakeholderService: StakeholderService,
100
              private statisticsService: StatisticsService,
101
              private userManagementService: UserManagementService,
102
              private fb: FormBuilder,
103
              private router: Router,
104
              private cdr: ChangeDetectorRef,
105
              private sanitizer: DomSanitizer) {
106
  }
107
  
108
  ngOnInit(): void {
109
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
110
      this.user = user;
111
    }));
112
    this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
113
      this.stakeholder = stakeholder;
114
      if (this.stakeholder) {
115
        this.buildFilters();
116
        this.buildSections();
117
        if(this.firstLoad) {
118
          this.filterCharts();
119
          this.filterNumbers();
120
          this.firstLoad = false;
121
        }
122
        this.setPreview();
123
      }
124
    }));
125
  }
126
  
127
  ngOnDestroy(): void {
128
    this.subscriptions.forEach(value => {
129
      if (value instanceof Subscriber) {
130
        value.unsubscribe();
131
      } else if (value instanceof Function) {
132
        value();
133
      }
134
    });
135
    this.urlSubscriptions.forEach(value => {
136
      if (value instanceof Subscriber) {
137
        value.unsubscribe();
138
      }
139
    });
140
  }
141
  
142
  ngAfterViewInit(): void {
143
    this.initReorder();
144
  }
145
  
146
  ngOnChanges(changes: SimpleChanges): void {
147
    if (this.canEdit) {
148
      if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) {
149
        this.buildFilters();
150
        this.initReorder();
151
      }
152
      this.filterCharts();
153
      this.filterNumbers();
154
    }
155
    this.setPreview();
156
  }
157
  
158
  setNumberIndicators() {
159
    this.numberResults.clear();
160
    let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
161
    this.numbers.forEach((section, i) => {
162
      section.indicators.forEach((number, j) => {
163
        let url = this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0]);
164
        const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
165
        const indexes = urls.get(pair) ? urls.get(pair) : [];
166
        indexes.push([i, j]);
167
        urls.set(pair, indexes);
168
      });
169
    });
170
    urls.forEach((indexes, pair) => {
171
      pair = JSON.parse(pair);
172
      this.subscriptions.push(this.statisticsService.getNumbers(this.statisticsService.getSourceType(pair[0]), pair[1]).subscribe(response => {
173
        indexes.forEach(([i, j]) => {
174
          let result = JSON.parse(JSON.stringify(response));
175
          this.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
176
            if (result) {
177
              result = result[jsonPath];
178
            }
179
          });
180
          if (typeof result === 'string' || typeof result === 'number') {
181
            result = Number(result);
182
            if (result === Number.NaN) {
183
              result = 0;
184
            }
185
          } else {
186
            result = 0;
187
          }
188
          this.numberResults.set(i + '-' + j, result);
189
        });
190
      }));
191
    });
192
  }
193
  
194
  setPreview() {
195
    if (this.stakeholder) {
196
      this.preview = '/' + this.stakeholder.alias;
197
      if (this.stakeholder.topics[this.topicIndex]) {
198
        this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias;
199
        if (this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]) {
200
          this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias;
201
          if (this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
202
            this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
203
          }
204
        }
205
      }
206
    }
207
  }
208
  
209
  initReorder() {
210
    this.subscriptions.forEach(value => {
211
      if (value instanceof Function) {
212
        value();
213
      }
214
    });
215
    if (document !== undefined) {
216
      let callback = (list, type: IndicatorType, action: 'moved' | 'added' | 'removed'): void => {
217
        let items: HTMLCollection = list.current.children;
218
        let reordered = [];
219
        for (let i = 0; i < items.length; i++) {
220
          if (items.item(i).id) {
221
            reordered.push(items.item(i).id);
222
          }
223
        }
224
        let reorder: Reorder = {
225
          action: action,
226
          target: list.detail[1].id,
227
          ids: reordered
228
        }
229
        this.reorderIndicators(list.current.id.toString().split('-')[1], type, reorder);
230
      };
231
      this.numbers.forEach((section) => {
232
        this.subscriptions.push(UIkit.util.on(document, 'moved', '#number-' + section._id, (list): void => {
233
          callback(list, "number", 'moved');
234
        }));
235
        this.subscriptions.push(UIkit.util.on(document, 'added', '#number-' + section._id, (list): void => {
236
          callback(list, "number", 'added');
237
        }));
238
        this.subscriptions.push(UIkit.util.on(document, 'removed', '#number-' + section._id, (list): void => {
239
          callback(list, "number", 'removed');
240
        }));
241
      });
242
      this.charts.forEach((section) => {
243
        this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart-' + section._id, (list): void => {
244
          callback(list, "chart", 'moved');
245
        }));
246
        this.subscriptions.push(UIkit.util.on(document, 'added', '#chart-' + section._id, (list): void => {
247
          callback(list, "chart", 'added');
248
        }));
249
        this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => {
250
          callback(list, "chart", 'removed');
251
        }));
252
      });
253
    }
254
  }
255
  
256
  hide(element: any) {
257
    UIkit.dropdown(element).hide();
258
  }
259
  
260
  private buildFilters() {
261
    this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe(value => {
262
      this.onChartTypeChange(value);
263
    }));
264
    
265
    this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => {
266
      this.onStatusChange(value);
267
    }));
268
    this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => {
269
      this.onKeywordChange(value);
270
    }));
271
  }
272
  
273
  private buildSections() {
274
    this.numberSections = this.fb.array([]);
275
    this.numbers.forEach(section => {
276
      this.numberSections.push(this.fb.group({
277
        _id: this.fb.control(section._id),
278
        title: this.fb.control(section.title),
279
        creationDate: this.fb.control(section.creationDate),
280
        stakeholderAlias: this.fb.control(section.stakeholderAlias),
281
        defaultId: this.fb.control(section.defaultId),
282
        type: this.fb.control(section.type),
283
        indicators: this.fb.control(section.indicators)
284
      }));
285
    });
286
    this.chartSections = this.fb.array([]);
287
    this.charts.forEach(section => {
288
      this.chartSections.push(this.fb.group({
289
        _id: this.fb.control(section._id),
290
        title: this.fb.control(section.title),
291
        creationDate: this.fb.control(section.creationDate),
292
        stakeholderAlias: this.fb.control(section.stakeholderAlias),
293
        defaultId: this.fb.control(section.defaultId),
294
        type: this.fb.control(section.type),
295
        indicators: this.fb.control(section.indicators)
296
      }));
297
    });
298
  }
299
  
300
  filterCharts() {
301
    this.displayCharts = this.filterChartType(
302
      this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
303
        this.filters.value.status),
304
      this.filters.value.chartType
305
    );
306
    this.displayCharts.forEach(section => {
307
      section.indicators.forEach(indicator => {
308
        indicator.indicatorPaths.forEach(indicatorPath => {
309
          let url = this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath);
310
          if (!this.safeUrls.get('url')) {
311
            indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
312
            this.safeUrls.set(url, indicatorPath.safeResourceUrl);
313
          }
314
        });
315
      })
316
    });
317
    this.buildSections();
318
  }
319
  
320
  filterNumbers() {
321
    this.displayNumbers = this.filterStatus(
322
      this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
323
      this.filters.value.status);
324
    this.buildSections();
325
    this.setNumberIndicators();
326
  }
327
  
328
  onChartTypeChange(value) {
329
    this.displayCharts = this.filterChartType(HelperFunctions.copy(this.charts), value);
330
  }
331
  
332
  
333
  onStatusChange(value) {
334
    this.displayCharts = this.filterStatus(HelperFunctions.copy(this.charts), value);
335
    this.displayNumbers = this.filterStatus(HelperFunctions.copy(this.numbers), value);
336
  }
337
  
338
  onKeywordChange(value) {
339
    this.displayCharts = this.filterByKeyword(HelperFunctions.copy(this.charts), value);
340
    this.displayNumbers = this.filterByKeyword(HelperFunctions.copy(this.numbers), value);
341
  }
342
  
343
  private filterChartType(sections: Section[], value): Section[] {
344
    if (value !== 'all') {
345
      sections.forEach(section =>
346
        section.indicators = section.indicators.filter(indicator =>
347
          indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0));
348
    }
349
    return sections;
350
  }
351
  
352
  
353
  private filterStatus(sections: Section[], value): Section[] {
354
    if (value !== 'all') {
355
      sections.forEach(section =>
356
        section.indicators = section.indicators.filter(indicator => indicator.visibility === value));
357
    }
358
    return sections;
359
  }
360
  
361
  private filterByKeyword(sections: Section[], value): Section[] {
362
    if (value !== null && value !== '') {
363
      sections.forEach(section =>
364
        section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))
365
          || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))
366
          || (indicator.additionalDescription && indicator.additionalDescription.toLowerCase().includes(value.toLowerCase()))
367
          || indicator.indicatorPaths.filter(indicatorPath => (indicatorPath.parameters && indicatorPath.parameters.title &&
368
            indicatorPath.parameters.title.includes(value.toLowerCase()))).length > 0));
369
    }
370
    return sections;
371
  }
372
  
373
  get charts(): Section[] {
374
    if (this.stakeholder.topics[this.topicIndex] &&
375
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
376
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
377
      return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
378
    } else {
379
      return [];
380
    }
381
  }
382
  
383
  set charts(sections: Section[]) {
384
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = sections;
385
  }
386
  
387
  get numbers(): Section[] {
388
    if (this.stakeholder.topics[this.topicIndex] &&
389
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
390
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
391
      return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;
392
    } else {
393
      return [];
394
    }
395
  }
396
  
397
  set numbers(sections: Section[]) {
398
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = sections;
399
  }
400
  
401
  get open(): boolean {
402
    return this.layoutService.open;
403
  }
404
  
405
  get canReorder(): boolean {
406
    return this.filters.value.chartType === 'all' &&
407
      this.filters.value.status === 'all' && this.filters.value.keyword === '' && !this.editing;
408
  }
409
  
410
  get canEdit() {
411
    return this.stakeholder &&
412
      this.stakeholder.topics[this.topicIndex] &&
413
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
414
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
415
  }
416
  
417
  public get numberIndicatorPaths(): FormArray {
418
    return this.numberIndicatorFb.get('indicatorPaths') as FormArray;
419
  }
420
  
421
  public get chartIndicatorPaths(): FormArray {
422
    return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
423
  }
424
  
425
  public getNumberClassBySize(size: IndicatorSize) {
426
    if (size === 'small') {
427
      return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
428
    } else if (size === 'medium') {
429
      return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
430
    } else {
431
      return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
432
    }
433
  }
434
  
435
  public getChartClassBySize(size: IndicatorSize) {
436
    if (size === 'small') {
437
      return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
438
    } else if (size === 'medium') {
439
      return 'uk-width-1-2@l uk-width-1-1';
440
    } else {
441
      return 'uk-width-1-1';
442
    }
443
  }
444
  
445
  public addJsonPath(index: number) {
446
    if (index == 0 && this.getJsonPath(index).getRawValue()[index].indexOf(",") != -1) {
447
      //if in the first path there are more than one paths comma separated, split them and autogenerate the forms
448
      let paths = this.getJsonPath(index).getRawValue()[index].split(",");
449
      for (let i = 0; i < paths.length; i++) {
450
        if (i != 0) {
451
          this.getJsonPath(index).push(this.fb.control('', Validators.required));
452
        }
453
      }
454
      this.getJsonPath(index).setValue(paths)
455
    } else {
456
      this.getJsonPath(index).push(this.fb.control('', Validators.required));
457
    }
458
  }
459
  
460
  public removeJsonPath(i: number, j: number) {
461
    if (this.getJsonPath(i).enabled) {
462
      this.getJsonPath(i).removeAt(j);
463
    }
464
  }
465
  
466
  public validateJsonPath(index: number, dirty: boolean = false) {
467
    let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index);
468
    if (this.indicator.defaultId === null) {
469
      this.getJsonPath(index).disable();
470
    }
471
    indicatorPath.get('result').setErrors({validating: true});
472
    this.subscriptions.push(this.statisticsService.getNumbers(null, indicatorPath.get('url').value).subscribe(response => {
473
      let result = JSON.parse(JSON.stringify(response));
474
      this.getJsonPath(index).controls.forEach(jsonPath => {
475
        if (result) {
476
          result = result[jsonPath.value];
477
        }
478
      });
479
      setTimeout(() => {
480
        if (this.indicator.defaultId === null) {
481
          this.getJsonPath(index).enable();
482
          if (dirty) {
483
            this.getJsonPath(index).markAsDirty();
484
          }
485
        }
486
        indicatorPath.get('result').setErrors(null);
487
        if (typeof result === 'string' || typeof result === 'number') {
488
          result = Number(result);
489
          if (result !== Number.NaN) {
490
            indicatorPath.get('result').setValue(result);
491
          } else {
492
            indicatorPath.get('result').setValue(0);
493
          }
494
        } else {
495
          indicatorPath.get('result').setValue(0);
496
        }
497
      }, 500);
498
    }, error => {
499
      setTimeout(() => {
500
        if (this.indicator.defaultId === null) {
501
          this.getJsonPath(index).enable();
502
          if (dirty) {
503
            this.getJsonPath(index).markAsDirty();
504
          }
505
        }
506
        indicatorPath.get('result').setErrors(null);
507
        indicatorPath.get('result').setValue(0);
508
      }, 500);
509
    }));
510
  }
511
  
512
  public getJsonPath(index: number): FormArray {
513
    return this.numberIndicatorPaths.at(index).get('jsonPath') as FormArray;
514
  }
515
  
516
  public getCurrentJsonPath(index: number): string[] {
517
    return this.section.indicators[this.index].indicatorPaths[index].jsonPath;
518
  }
519
  
520
  public getParameters(index: number): FormArray {
521
    return this.chartIndicatorPaths.at(index).get('parameters') as FormArray;
522
  }
523
  
524
  public getParameter(index: number, key: string): FormControl {
525
    return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl;
526
  }
527
  
528
  private getSecureUrlByStakeHolder(indicatorPath: IndicatorPath) {
529
    return this.sanitizer.bypassSecurityTrustResourceUrl(
530
      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)));
531
  }
532
  
533
  private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
534
    return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath));
535
  }
536
  
537
  public addNumberIndicatorPath(url: string = '', parameters: FormArray = new FormArray([]), source: string = 'stats-tool', jsonPath: FormArray = new FormArray([])) {
538
    if (jsonPath.length === 0) {
539
      jsonPath.push(this.fb.control('', Validators.required));
540
    }
541
    this.numberIndicatorPaths.push(this.fb.group({
542
        url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
543
        jsonPath: jsonPath,
544
        result: this.fb.control(0, Validators.required),
545
        // parameters: parameters,
546
        source: this.fb.control(source, Validators.required)
547
      }
548
    ));
549
    let index = this.numberIndicatorPaths.length - 1;
550
    if (this.numberIndicatorPaths.at(index).get('url').valid) {
551
      this.validateJsonPath(index);
552
    }
553
    if (this.indicator.defaultId === null) {
554
      this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
555
          this.numberIndicatorPaths.at(index).get('result').setValue(null);
556
          if (this.numberIndicatorPaths.at(index).get('url').valid) {
557
            let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.statisticsService.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.statisticsService.numberSources.get(this.statisticsService.getNumberSource(value)));
558
            if ((indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_name") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") == -1)
559
              || (!indicatorPath.chartObject && indicatorPath.url.indexOf("index_id") == -1 && indicatorPath.url.indexOf("index_name") == -1 && (indicatorPath.url).indexOf("index_shortName") == -1)) {
560
              // default profile
561
              if (this.stakeholder.defaultId == null) {
562
                this.urlParameterizedMessage = "This indicator couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly."
563
              } else {
564
                this.urlParameterizedMessage = "This indicator couldn't be generated properly. Please make sure chart data is for the current stakeholder."
565
              }
566
            } else {
567
              this.urlParameterizedMessage = null;
568
            }
569
            if (this.indicator.indicatorPaths[index]) {
570
              this.indicator.indicatorPaths[index] = indicatorPath;
571
            } else {
572
              this.indicator.indicatorPaths.push(indicatorPath);
573
            }
574
            if (indicatorPath.source) {
575
              this.numberIndicatorPaths.at(index).get('source').setValue(indicatorPath.source);
576
            }
577
            if (indicatorPath.jsonPath.length > 1 && this.getJsonPath(index).length == 1) {
578
              let paths = indicatorPath.jsonPath;
579
              for (let i = 0; i < paths.length; i++) {
580
                if (i == this.getJsonPath(index).length) {
581
                  this.getJsonPath(index).push(this.fb.control('', Validators.required));
582
                }
583
              }
584
              this.getJsonPath(index).setValue(paths)
585
            }
586
          } else {
587
            this.urlParameterizedMessage = null;
588
          }
589
        })
590
      );
591
      
592
      this.subscriptions.push(this.numberIndicatorPaths.at(index).get('jsonPath').valueChanges.subscribe(value => {
593
          if (this.indicator.indicatorPaths[index]) {
594
            this.indicator.indicatorPaths[index].jsonPath = value;
595
          }
596
          this.numberIndicatorPaths.at(index).get('result').setValue(null);
597
        })
598
      );
599
      this.subscriptions.push(this.numberIndicatorPaths.at(index).get('source').valueChanges.subscribe(value => {
600
          if (this.indicator.indicatorPaths[index]) {
601
            this.indicator.indicatorPaths[index].source = value;
602
          }
603
        })
604
      );
605
    } else {
606
      this.numberIndicatorPaths.at(index).get('url').disable();
607
      this.numberIndicatorPaths.at(index).get('jsonPath').disable();
608
      this.numberIndicatorPaths.at(index).get('source').disable();
609
    }
610
  }
611
  
612
  public addChartIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type: string = null) {
613
    this.chartIndicatorPaths.push(this.fb.group({
614
        url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
615
        parameters: parameters,
616
        type: this.fb.control(type)
617
      }
618
    ));
619
    let index = this.chartIndicatorPaths.length - 1;
620
    if (disableUrl) {
621
      this.chartIndicatorPaths.at(index).get('url').disable();
622
    } else {
623
      this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
624
        if (this.chartIndicatorPaths.at(index).get('url').valid) {
625
          let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder);
626
          if (indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_name") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") == -1) {
627
            // default profile
628
            if (this.stakeholder.defaultId == null) {
629
              this.urlParameterizedMessage = "This chart couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly."
630
            } else {
631
              this.urlParameterizedMessage = "This chart couldn't be generated properly. Please make sure chart data is for the current stakeholder."
632
            }
633
          } else {
634
            this.urlParameterizedMessage = null;
635
          }
636
          (this.chartIndicatorPaths.at(index) as FormGroup).get('type').setValue(indicatorPath.type);
637
          let parameters = this.getParametersAsFormArray(indicatorPath);
638
          (this.chartIndicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
639
          if (!this.indicator.indicatorPaths[index]) {
640
            this.indicator.indicatorPaths[index] = indicatorPath;
641
            this.indicator.indicatorPaths[index].safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
642
          } else {
643
            indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl;
644
            this.indicator.indicatorPaths[index] = indicatorPath;
645
          }
646
        } else {
647
          this.urlParameterizedMessage = null;
648
        }
649
      }));
650
    }
651
  }
652
  
653
  private getJsonPathAsFormArray(indicatorPath: IndicatorPath): FormArray {
654
    let jsonPath = this.fb.array([]);
655
    if (indicatorPath.jsonPath) {
656
      indicatorPath.jsonPath.forEach(path => {
657
        jsonPath.push(this.fb.control(path, Validators.required));
658
      });
659
    }
660
    return jsonPath;
661
  }
662
  
663
  private getParametersAsFormArray(indicatorPath: IndicatorPath): FormArray {
664
    let parameters = this.fb.array([]);
665
    if (indicatorPath.parameters) {
666
      Object.keys(indicatorPath.parameters).forEach(key => {
667
        if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
668
          if (this.indicatorUtils.parametersValidators.has(key)) {
669
            parameters.push(this.fb.group({
670
              key: this.fb.control(key),
671
              value: this.fb.control(indicatorPath.parameters[key], this.indicatorUtils.parametersValidators.get(key))
672
            }));
673
          } else {
674
            parameters.push(this.fb.group({
675
              key: this.fb.control(key),
676
              value: this.fb.control(indicatorPath.parameters[key])
677
            }));
678
          }
679
        }
680
      });
681
    }
682
    return parameters;
683
  }
684
  
685
  public editNumberIndicatorOpen(section: Section, id = null) {
686
    this.urlParameterizedMessage = null;
687
    this.section = section;
688
    this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
689
    if (this.index !== -1) {
690
      this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
691
      this.numberIndicatorFb = this.fb.group({
692
        _id: this.fb.control(this.indicator._id),
693
        name: this.fb.control(this.indicator.name, Validators.required),
694
        description: this.fb.control(this.indicator.description),
695
        creationDate: this.fb.control(this.indicator.creationDate),
696
        additionalDescription: this.fb.control(this.indicator.additionalDescription),
697
        visibility: this.fb.control(this.indicator.visibility),
698
        indicatorPaths: this.fb.array([], Validators.required),
699
        type: this.fb.control(this.indicator.type),
700
        width: this.fb.control(this.indicator.width),
701
        height: this.fb.control(this.indicator.height),
702
        defaultId: this.fb.control(this.indicator.defaultId)
703
      });
704
      this.indicator.indicatorPaths.forEach(indicatorPath => {
705
        this.addNumberIndicatorPath(this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)), indicatorPath.parameters, indicatorPath.source, this.getJsonPathAsFormArray(indicatorPath));
706
      });
707
    } else {
708
      this.indicator = new Indicator('', '', '', 'number', 'small', 'small', "PUBLIC", []);
709
      this.numberIndicatorFb = this.fb.group({
710
        _id: this.fb.control(this.indicator._id),
711
        name: this.fb.control(this.indicator.name, Validators.required),
712
        description: this.fb.control(this.indicator.description),
713
        additionalDescription: this.fb.control(this.indicator.additionalDescription),
714
        visibility: this.fb.control(this.indicator.visibility),
715
        indicatorPaths: this.fb.array([], Validators.required),
716
        type: this.fb.control(this.indicator.type),
717
        width: this.fb.control(this.indicator.width),
718
        height: this.fb.control(this.indicator.height),
719
        defaultId: this.fb.control(this.indicator.defaultId)
720
      });
721
      this.addNumberIndicatorPath();
722
    }
723
    if (this.indicator.defaultId) {
724
      setTimeout(() => {
725
        this.numberIndicatorFb.get('description').disable();
726
      }, 0);
727
    }
728
    this.editNumberModal.cancelButtonText = 'Cancel';
729
    this.editNumberModal.okButtonLeft = false;
730
    this.editNumberModal.alertMessage = false;
731
    if (this.index === -1) {
732
      this.editNumberModal.alertTitle = 'Create a new number indicator';
733
      this.editNumberModal.okButtonText = 'Save';
734
    } else {
735
      this.editNumberModal.alertTitle = 'Edit number indicator\'s information';
736
      this.editNumberModal.okButtonText = 'Save Changes';
737
    }
738
    this.editNumberModal.open();
739
  }
740
  
741
  public editChartIndicatorOpen(section: Section, id = null) {
742
    this.urlParameterizedMessage = null;
743
    this.urlSubscriptions.forEach(value => {
744
      if (value instanceof Subscriber) {
745
        value.unsubscribe();
746
      }
747
    });
748
    this.section = section;
749
    this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
750
    if (this.index !== -1) {
751
      this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
752
      this.chartIndicatorFb = this.fb.group({
753
        _id: this.fb.control(this.indicator._id),
754
        name: this.fb.control(this.indicator.name),
755
        creationDate: this.fb.control(this.indicator.creationDate),
756
        description: this.fb.control(this.indicator.description),
757
        additionalDescription: this.fb.control(this.indicator.additionalDescription),
758
        visibility: this.fb.control(this.indicator.visibility),
759
        indicatorPaths: this.fb.array([]),
760
        width: this.fb.control(this.indicator.width),
761
        height: this.fb.control(this.indicator.height),
762
        defaultId: this.fb.control(this.indicator.defaultId)
763
      });
764
      this.indicator.indicatorPaths.forEach(indicatorPath => {
765
        this.addChartIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
766
          this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null, indicatorPath.type);
767
        indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
768
      });
769
    } else {
770
      this.indicator = new Indicator('', '', '', 'chart', 'medium', 'medium', "PUBLIC", []);
771
      this.chartIndicatorFb = this.fb.group({
772
        _id: this.fb.control(this.indicator._id),
773
        name: this.fb.control(this.indicator.name),
774
        description: this.fb.control(this.indicator.description),
775
        additionalDescription: this.fb.control(this.indicator.additionalDescription),
776
        visibility: this.fb.control(this.indicator.visibility),
777
        indicatorPaths: this.fb.array([]),
778
        width: this.fb.control(this.indicator.width, Validators.required),
779
        height: this.fb.control(this.indicator.height, Validators.required),
780
        defaultId: this.fb.control(this.indicator.defaultId)
781
      });
782
      this.addChartIndicatorPath();
783
    }
784
    if (this.indicator.defaultId) {
785
      setTimeout(() => {
786
        this.chartIndicatorFb.get('description').disable();
787
      }, 0);
788
    }
789
    this.editChartModal.cancelButtonText = 'Cancel';
790
    this.editChartModal.okButtonLeft = false;
791
    this.editChartModal.alertMessage = false;
792
    if (this.index === -1) {
793
      this.editChartModal.alertTitle = 'Create a new chart indicator';
794
      this.editChartModal.okButtonText = 'Save';
795
    } else {
796
      this.editChartModal.alertTitle = 'Edit chart indicator\'s information';
797
      this.editChartModal.okButtonText = 'Save Changes';
798
    }
799
    this.editChartModal.open();
800
  }
801
  
802
  saveIndicator() {
803
    this.editing = true;
804
    if (this.indicator.type === 'chart') {
805
      this.chartIndicatorFb.get('description').enable();
806
      this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths, this.indicator.type, true);
807
      this.section = this.charts.find(section => section._id === this.section._id);
808
    } else {
809
      this.numberIndicatorFb.get('description').enable();
810
      this.indicator = this.indicatorUtils.generateIndicatorByForm(this.numberIndicatorFb.value, this.indicator.indicatorPaths, this.indicator.type, false);
811
      this.section = this.numbers.find(section => section._id === this.section._id);
812
    }
813
    let path = [
814
      this.stakeholder._id,
815
      this.stakeholder.topics[this.topicIndex]._id,
816
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
817
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
818
      this.section._id
819
    ];
820
    this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {
821
      if (this.index !== -1) {
822
        this.section.indicators[this.index] = indicator;
823
      } else {
824
        this.section.indicators.push(indicator);
825
      }
826
      if (this.indicator.type === "chart") {
827
        this.filterCharts();
828
        this.chartIndicatorFb = null;
829
      } else {
830
        this.filterNumbers();
831
        this.numberIndicatorFb = null;
832
      }
833
      UIkit.notification('Indicator has been <b>successfully saved</b>', {
834
        status: 'success',
835
        timeout: 6000,
836
        pos: 'bottom-right'
837
      });
838
      this.editing = false;
839
    }, error => {
840
      this.chartIndicatorFb = null;
841
      UIkit.notification(error.error.message, {
842
        status: 'danger',
843
        timeout: 6000,
844
        pos: 'bottom-right'
845
      });
846
      this.editing = false;
847
    }));
848
  }
849
  
850
  reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) {
851
    this.editing = true;
852
    let path = [
853
      this.stakeholder._id,
854
      this.stakeholder.topics[this.topicIndex]._id,
855
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
856
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
857
      sectionId
858
    ];
859
    this.subscriptions.push(this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, reorder, type).subscribe(indicators => {
860
      if (type === 'chart') {
861
        this.charts.find(section => section._id === sectionId).indicators = indicators;
862
        this.filterCharts();
863
      } else {
864
        this.numbers.find(section => section._id === sectionId).indicators = indicators;
865
        this.filterNumbers();
866
      }
867
      this.editing = false;
868
    }));
869
  }
870
  
871
  hasDifference(index: number): boolean {
872
    let hasDifference = false;
873
    this.chartIndicatorPaths.at(index).value.parameters.forEach((parameter) => {
874
      if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
875
        hasDifference = true;
876
        return;
877
      }
878
    });
879
    return hasDifference || this.indicator.indicatorPaths[index].safeResourceUrl.toString() !==
880
      this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString();
881
  }
882
  
883
  public get isAdministrator(): boolean {
884
    return Session.isPortalAdministrator(this.user);
885
  }
886
  
887
  public get isCurator(): boolean {
888
    return this.isAdministrator || Session.isMonitorCurator(this.user);
889
  }
890
  
891
  refreshIndicator() {
892
    this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths, 'chart', true);
893
    this.indicator.indicatorPaths.forEach(indicatorPath => {
894
      indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
895
    });
896
  }
897
  
898
  deleteIndicatorOpen(section: Section, indicatorId: string, type: string, childrenAction: string = null) {
899
    this.indicatorChildrenActionOnDelete = null;
900
    if (childrenAction == "delete") {
901
      this.indicatorChildrenActionOnDelete = childrenAction;
902
    } else if (childrenAction == "disconnect") {
903
      this.indicatorChildrenActionOnDelete = childrenAction;
904
    }
905
    
906
    this.section = section;
907
    if (type === 'chart') {
908
      this.index = this.charts.find(value => value._id == section._id).indicators.findIndex(value => value._id == indicatorId);
909
    } else {
910
      this.index = this.numbers.find(value => value._id == section._id).indicators.findIndex(value => value._id == indicatorId);
911
    }
912
    this.indicator = section.indicators.find(value => value._id == indicatorId);
913
    this.deleteModal.alertTitle = 'Delete indicator';
914
    this.deleteModal.cancelButtonText = 'No';
915
    this.deleteModal.okButtonText = 'Yes';
916
    this.deleteModal.open();
917
  }
918
  
919
  deleteIndicator() {
920
    this.editing = true;
921
    let path = [
922
      this.stakeholder._id,
923
      this.stakeholder.topics[this.topicIndex]._id,
924
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
925
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
926
      this.section._id,
927
      this.indicator._id
928
    ];
929
    this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.indicatorChildrenActionOnDelete).subscribe(() => {
930
      if (this.indicator.type === 'chart') {
931
        this.charts.find(section => section._id === this.section._id).indicators.splice(this.index, 1);
932
        this.filterCharts();
933
      } else {
934
        this.numbers.find(section => section._id === this.section._id).indicators.splice(this.index, 1);
935
        this.filterNumbers();
936
      }
937
      UIkit.notification('Indicator has been <b>successfully deleted</b>', {
938
        status: 'success',
939
        timeout: 6000,
940
        pos: 'bottom-right'
941
      });
942
      this.editing = false;
943
    }, error => {
944
      UIkit.notification(error.error.message, {
945
        status: 'danger',
946
        timeout: 6000,
947
        pos: 'bottom-right'
948
      });
949
      this.editing = false;
950
    }));
951
  }
952
  
953
  changeIndicatorStatus(sectionId: string, indicator: Indicator, visibility: Visibility) {
954
    this.editing = true;
955
    let path = [
956
      this.stakeholder._id,
957
      this.stakeholder.topics[this.topicIndex]._id,
958
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
959
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
960
      sectionId,
961
      indicator._id
962
    ];
963
    this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => {
964
      indicator.visibility = visibility;
965
      UIkit.notification('Indicator has been <b>successfully changed</b> to ' + indicator.visibility.toLowerCase(), {
966
        status: 'success',
967
        timeout: 6000,
968
        pos: 'bottom-right'
969
      });
970
      this.editing = false;
971
    }, error => {
972
      UIkit.notification('An error has been occurred. Try again later', {
973
        status: 'danger',
974
        timeout: 6000,
975
        pos: 'bottom-right'
976
      });
977
      this.editing = false;
978
    }));
979
  }
980
  
981
  saveSection(section: Section, index: number, type: IndicatorType = "chart") {
982
    this.editing = true;
983
    let path = [
984
      this.stakeholder._id,
985
      this.stakeholder.topics[this.topicIndex]._id,
986
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
987
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
988
    ];
989
    this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, section, path, index).subscribe(section => {
990
      if (type === 'chart') {
991
        this.charts[index] = section;
992
        this.filterCharts();
993
      } else {
994
        this.numbers[index] = section;
995
        this.filterNumbers();
996
      }
997
      this.initReorder();
998
      UIkit.notification('Section has been <b>successfully saved</b>', {
999
        status: 'success',
1000
        timeout: 6000,
1001
        pos: 'bottom-right'
1002
      });
1003
      this.editing = false;
1004
    }, error => {
1005
      UIkit.notification(error.error.message, {
1006
        status: 'danger',
1007
        timeout: 6000,
1008
        pos: 'bottom-right'
1009
      });
1010
      this.editing = false;
1011
    }));
1012
  }
1013
  
1014
  createSection(index = -1, type: IndicatorType = 'chart') {
1015
    this.editing = true;
1016
    this.section = new Section(type, null, null, this.stakeholder.alias);
1017
    let path = [
1018
      this.stakeholder._id,
1019
      this.stakeholder.topics[this.topicIndex]._id,
1020
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
1021
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
1022
    ];
1023
    this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, this.section, path, index).subscribe(section => {
1024
      if (type === 'chart') {
1025
        if (index !== -1) {
1026
          this.charts.splice(index, 0, section);
1027
        } else {
1028
          this.charts.push(section);
1029
        }
1030
        this.filterCharts();
1031
      } else {
1032
        if (index !== -1) {
1033
          this.numbers.splice(index, 0, section);
1034
        } else {
1035
          this.numbers.push(section);
1036
        }
1037
        this.filterNumbers();
1038
      }
1039
      this.initReorder();
1040
      UIkit.notification('Section has been <b>successfully created</b>', {
1041
        status: 'success',
1042
        timeout: 6000,
1043
        pos: 'bottom-right'
1044
      });
1045
      this.editing = false;
1046
    }, error => {
1047
      UIkit.notification(error.error.message, {
1048
        status: 'danger',
1049
        timeout: 6000,
1050
        pos: 'bottom-right'
1051
      });
1052
      this.editing = false;
1053
    }));
1054
  }
1055
  
1056
  // deleteNumberSectionOpen(section: Section, index: number) {
1057
  //   this.section = section;
1058
  //   this.index = index;
1059
  //   this.deleteNumberSectionModal.alertTitle = 'Delete Section';
1060
  //   this.deleteNumberSectionModal.cancelButtonText = 'No';
1061
  //   this.deleteNumberSectionModal.okButtonText = 'Yes';
1062
  //   this.deleteNumberSectionModal.open();
1063
  // }
1064
  //
1065
  // deleteChartSectionOpen(section: Section, index: number) {
1066
  //   this.section = section;
1067
  //   this.index = index;
1068
  //   this.deleteChartSectionModal.alertTitle = 'Delete Section';
1069
  //   this.deleteChartSectionModal.cancelButtonText = 'No';
1070
  //   this.deleteChartSectionModal.okButtonText = 'Yes';
1071
  //   this.deleteChartSectionModal.open();
1072
  // }
1073
  
1074
  deleteSectionOpen(section: Section, index: number, type: IndicatorType, childrenAction: string = null) {
1075
    if (!this.editing && !section.defaultId) {
1076
      this.sectionTypeToDelete = type;
1077
      this.sectionChildrenActionOnDelete = null;
1078
      if (childrenAction == "delete") {
1079
        this.sectionChildrenActionOnDelete = childrenAction;
1080
      } else if (childrenAction == "disconnect") {
1081
        this.sectionChildrenActionOnDelete = childrenAction;
1082
      }
1083
      
1084
      this.section = section;
1085
      this.index = index;
1086
      this.deleteSectionModal.alertTitle = 'Delete Section';
1087
      this.deleteSectionModal.cancelButtonText = 'No';
1088
      this.deleteSectionModal.okButtonText = 'Yes';
1089
      this.deleteSectionModal.open();
1090
    }
1091
  }
1092
  
1093
  deleteSection() {
1094
    this.editing = true;
1095
    let path = [
1096
      this.stakeholder._id,
1097
      this.stakeholder.topics[this.topicIndex]._id,
1098
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
1099
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
1100
      this.section._id
1101
    ];
1102
    this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.sectionChildrenActionOnDelete).subscribe(() => {
1103
      if (this.sectionTypeToDelete === "chart") {
1104
        this.charts.splice(this.index, 1);
1105
        this.filterCharts();
1106
      } else {
1107
        this.numbers.splice(this.index, 1);
1108
        this.filterNumbers();
1109
      }
1110
      this.initReorder();
1111
      UIkit.notification('Section has been <b>successfully deleted</b>', {
1112
        status: 'success',
1113
        timeout: 6000,
1114
        pos: 'bottom-right'
1115
      });
1116
      this.editing = false;
1117
    }, error => {
1118
      UIkit.notification(error.error.message, {
1119
        status: 'danger',
1120
        timeout: 6000,
1121
        pos: 'bottom-right'
1122
      });
1123
      this.editing = false;
1124
    }));
1125
  }
1126
}
(3-3/7)