Project

General

Profile

« Previous | Next » 

Revision 57959

Added by Konstantinos Triantafyllou over 4 years ago

[Monitor Dashboard | Trunk]: Change default -> dedaultId. Add section on stakeholder model. Change reorderto be suitable for sections. Create types for stakeholder fixed values.

View differences:

indicators.component.ts
1 1 
import {AfterViewInit, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";
2 
import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
2 
import {Indicator, IndicatorPath, IndicatorType, Section, Stakeholder} from "../utils/entities/stakeholder";
3 3 
import {IndicatorUtils} from "../utils/indicator-utils";
4 4 
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
5 5 
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
......
35 35 
  /**
36 36 
   * Editable indicator
37 37 
   */
38 
  public section: Section;
38 39 
  public indicator: Indicator;
39 40 
  public index: number = -1;
40 41 
  /**
41 42 
   * Displayed chart and numbers base on Top filters
42 43 
   */
43 
  public displayCharts: Indicator[] = [];
44 
  public displayNumbers: Indicator[] = [];
44 
  public displayCharts: Section[] = [];
45 
  public displayNumbers: Section[] = [];
45 46 
  /**
46 47 
   * Top filters
47 48 
   */
......
82 83
83 84 
  ngAfterViewInit(): void {
84 85 
    if (document !== undefined) {
85 
      let callback = (list): void => {
86 
      let callback = (list, type: IndicatorType): void => {
86 87 
        let items: HTMLCollection = list.current.children;
87 88 
        let reordered = [];
88 89 
        for (let i = 0; i < items.length; i++) {
......
90 91 
            reordered.push(items.item(i).id);
91 92 
          }
92 93 
        }
93 
        this.reorderIndicators(list.current.id, reordered);
94 
        this.reorderIndicators(list.current.id.toString().split('-')[1], type, reordered);
94 95 
      };
95 
      this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback));
96 
      this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback));
96 
      this.numbers.forEach((section) => {
97 
        this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart' + section._id, (list): void => {
98 
          callback(list, "number");
99 
        }));
100 
        this.subscriptions.push(UIkit.util.on(document, 'added', '#chart' + section._id, (list): void => {
101 
          callback(list, "number");
102 
        }));
103 
        this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart' + section._id, (list): void => {
104 
          callback(list, "number");
105 
        }));
106 
      });
107 
      this.charts.forEach((section) => {
108 
        this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart-' + section._id, (list): void => {
109 
          callback(list, "chart");
110 
        }));
111 
        this.subscriptions.push(UIkit.util.on(document, 'added', '#chart-' + section._id, (list): void => {
112 
          callback(list, "chart");
113 
        }));
114 
        this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => {
115 
          callback(list, "chart");
116 
        }));
117 
      });
97 118 
    }
98 119 
  }
99 120
......
175 196 
    this.displayNumbers = this.filterByKeyword(this.numbers, value);
176 197 
  }
177 198
178 
  private filterChartType(indicators: Indicator[], value): Indicator[] {
199 
  private filterChartType(sections: Section[], value): Section[] {
179 200 
    if (value === 'all') {
180 
      return indicators;
201 
      return sections;
181 202 
    } else {
182 
      return indicators.filter(indicator =>
183 
        indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0);
203 
      return sections.filter(section =>
204 
        section.indicators = section.indicators.filter(indicator =>
205 
          indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0));
184 206 
    }
185 207 
  }
186 208
187 
  private filterPrivacy(indicators: Indicator[], value): Indicator[] {
209 
  private filterPrivacy(sections: Section[], value): Section[] {
188 210 
    if (value === 'all') {
189 
      return indicators;
211 
      return sections;
190 212 
    } else {
191 
      return indicators.filter(indicator => indicator.isPublic === value);
213 
      return sections.filter(section =>
214 
        section.indicators = section.indicators.filter(indicator => indicator.isPublic === value));
192 215 
    }
193 216 
  }
194 217
195 
  private filterStatus(indicators: Indicator[], value): Indicator[] {
218 
  private filterStatus(sections: Section[], value): Section[] {
196 219 
    if (value === 'all') {
197 
      return indicators;
220 
      return sections;
198 221 
    } else {
199 
      return indicators.filter(indicator => indicator.isActive === value);
222 
      return sections.filter(section =>
223 
        section.indicators = section.indicators.filter(indicator => indicator.isActive === value));
200 224 
    }
201 225 
  }
202 226
203 
  private filterByKeyword(indicators: Indicator[], value): Indicator[] {
227 
  private filterByKeyword(sections: Section[], value): Section[] {
204 228 
    if (value === null || value === '') {
205 
      return indicators;
229 
      return sections;
206 230 
    } else {
207 
      return indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))
208 
        || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase())));
231 
      return sections.filter(section =>
232 
        section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))
233 
          || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))));
209 234 
    }
210 235 
  }
211 236
212 
  get charts(): Indicator[] {
237 
  get charts(): Section[] {
213 238 
    return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
214 239 
  }
215 240
216 
  set charts(indicators: Indicator[]) {
217 
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = indicators;
241 
  set charts(sections: Section[]) {
242 
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = sections;
218 243 
  }
219 244
220 
  get numbers(): Indicator[] {
245 
  get numbers(): Section[] {
221 246 
    return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;
222 247 
  }
223 248
224 
  set numbers(indicators: Indicator[]) {
225 
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = indicators;
249 
  set numbers(sections: Section[]) {
250 
    this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = sections;
226 251 
  }
227 252
228 253 
  get open(): boolean {
229 254 
    return this.layoutService.open;
230 255 
  }
231 256
232 
  get canNumbersReorder(): boolean {
233 
    return this.displayNumbers.length === this.numbers.length && this.grid;
257 
  get canReorder(): boolean {
258 
    return this.filters.value.chartType === 'all' && this.filters.value.privacy === 'all' &&
259 
      this.filters.value.status === 'all' && this.filters.value.keyword === '' && this.grid;
234 260 
  }
235 261
236 
  get canChartsReorder(): boolean {
237 
    return this.displayCharts.length === this.charts.length && this.grid;
238 
  }
239
240 262 
  get canEdit() {
241 263 
    return this.stakeholder &&
242 264 
      this.stakeholder.topics[this.topicIndex] &&
......
277 299 
    let index = this.indicatorPaths.length - 1;
278 300 
    this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
279 301 
        if (this.indicatorPaths.at(index).get('url').valid) {
280 
          let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, 'bar',this.stakeholder);
302 
          let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, 'bar', this.stakeholder);
281 303 
          let parameters = this.getParametersAsFormArray(indicatorPath);
282 304 
          (this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
283 305 
          if (!this.indicator.indicatorPaths[index]) {
......
314 336 
    return parameters;
315 337 
  }
316 338
317 
  public editChartIndicatorOpen(id = null) {
339 
  public editChartIndicatorOpen(section: Section, id = null) {
318 340 
    this.urlSubscriptions.forEach(value => {
319 341 
      if (value instanceof Subscriber) {
320 342 
        value.unsubscribe();
321 343 
      }
322 344 
    });
323 
    this.index = (id) ? this.charts.findIndex(value => value._id === id) : -1;
324 
    console.log(this.index);
345 
    this.section = section;
346 
    this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
325 347 
    if (this.index !== -1) {
326 
      this.indicator = HelperFunctions.copy(this.charts[this.index]);
348 
      this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
327 349 
      this.indicatorFb = this.fb.group({
328 350 
        id: this.fb.control(this.indicator._id),
329 351 
        name: this.fb.control(this.indicator.name/*, Validators.required*/),
......
371 393 
      this.stakeholder._id,
372 394 
      this.stakeholder.topics[this.topicIndex]._id,
373 395 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
374 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
396 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
397 
      this.section._id
375 398 
    ];
376 399 
    this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {
377 400 
      if (this.index !== -1) {
378 
        this.charts[this.index] = indicator;
401 
        this.section.indicators[this.index] = indicator;
379 402 
      } else {
380 
        this.charts.push(indicator);
403 
        this.section.indicators.push(indicator);
381 404 
      }
382 405 
      this.filterCharts();
383 
      this.stakeholderService.setStakeholder(this.stakeholder);
384 406 
      this.indicatorFb = null;
385 407 
    }, error => {
386 408 
      this.indicatorFb = null;
387 409 
    });
388 410 
  }
389 411
390 
  reorderIndicators(type: string, indicatorIds: string[]) {
412 
  reorderIndicators(sectionId: string, type: IndicatorType, indicatorIds: string[]) {
391 413 
    let path = [
392 414 
      this.stakeholder._id,
393 415 
      this.stakeholder.topics[this.topicIndex]._id,
394 416 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
395 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
417 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
418 
      sectionId
396 419 
    ];
397 420 
    this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicatorIds, type).subscribe(indicators => {
398 421 
      if (type === 'chart') {
399 
        this.charts = indicators;
422 
        this.charts.find(section => section._id === sectionId).indicators = indicators;
400 423 
        this.filterCharts();
401 424 
      } else {
402 
        this.numbers = indicators;
425 
        this.numbers.find(section => section._id === sectionId).indicators = indicators;
403 426 
        this.filterNumbers();
404 427 
      }
405 
      this.stakeholderService.setStakeholder(this.stakeholder);
406 428 
    });
407 429 
  }
408 430
409 431 
  hasDifference(index: number): boolean {
410 432 
    let hasDifference = false;
411 433 
    this.indicatorPaths.at(index).value.parameters.forEach((parameter) => {
412 
      if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
434 
      if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
413 435 
        hasDifference = true;
414 436 
        return;
415 437 
      }
......
425 447 
    });
426 448 
  }
427 449
428 
  deleteIndicatorOpen(id: string, type: string = 'chart') {
429 
    if (type === 'chart') {
430 
      this.indicator = this.charts.find(value => value._id == id);
431 
    } else {
432 
      this.indicator = this.numbers.find(value => value._id == id);
433 
    }
450 
  deleteIndicatorOpen(section: Section, indicatorId: string, type: string = 'chart') {
451 
    this.section = section;
452 
    this.indicator = section.indicators.find(value => value._id == indicatorId);
434 453 
    this.deleteModal.alertTitle = 'Delete indicator';
435 454 
    this.deleteModal.cancelButtonText = 'No';
436 455 
    this.deleteModal.okButtonText = 'Yes';
......
443 462 
      this.stakeholder.topics[this.topicIndex]._id,
444 463 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
445 464 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
465 
      this.section._id,
446 466 
      this.indicator._id
447 467 
    ];
448 468 
    this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => {
449 469 
      if (this.indicator.type === 'chart') {
450 
        this.charts.splice(this.index, 1);
470 
        this.charts.find(section => section._id === this.section._id).indicators.splice(this.index, 1);
451 471 
      } else {
452 
        this.numbers.splice(this.index, 1);
472 
        this.numbers.find(section => section._id === this.section._id).indicators.splice(this.index, 1);
453 473 
      }
454 
      this.stakeholderService.setStakeholder(this.stakeholder);
455 474 
    });
456 475 
  }
457 476
458 
  toggleIndicatorStatus(indicator: Indicator) {
477 
  toggleIndicatorStatus(sectionId: string, indicator: Indicator) {
459 478 
    let path = [
460 479 
      this.stakeholder._id,
461 480 
      this.stakeholder.topics[this.topicIndex]._id,
462 481 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
463 482 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
483 
      sectionId,
464 484 
      indicator._id
465 485 
    ];
466 486 
    this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => {
467 487 
      indicator.isActive = isActive;
468 
      this.stakeholderService.setStakeholder(this.stakeholder);
469 488 
    });
470 489 
  }
471 490
472 
  toggleIndicatorAccess(indicator: Indicator) {
491 
  toggleIndicatorAccess(sectionId: string, indicator: Indicator) {
473 492 
    let path = [
474 493 
      this.stakeholder._id,
475 494 
      this.stakeholder.topics[this.topicIndex]._id,
476 495 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
477 496 
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
497 
      sectionId,
478 498 
      indicator._id
479 499 
    ];
480 500 
    this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => {
481 501 
      indicator.isPublic = isPublic;
482 
      this.stakeholderService.setStakeholder(this.stakeholder);
483 502 
    });
484 503 
  }
485 504 
}

Also available in: Unified diff