Project

General

Profile

1
import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
2
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
3
import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
4
import {IndicatorUtils} from "../utils/indicator-utils";
5
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
6
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
7
import {StatisticsService} from "../utils/services/statistics.service";
8
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
9

    
10
@Component({
11
  selector: 'indicators',
12
  templateUrl: './indicators.component.html'
13
})
14
export class IndicatorsComponent implements OnInit, OnChanges {
15

    
16
  @Input()
17
  public topicIndex: number = 0;
18
  @Input()
19
  public categoryIndex: number = 0;
20
  @Input()
21
  public subcategoryIndex: number = 0;
22
  @Input()
23
  public stakeholder: Stakeholder = null;
24
  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
25
  public indicatorFb: FormGroup;
26
  public editIndicatorFb: FormGroup;
27
  /**
28
   * Editable indicator
29
   */
30
  public indicator: Indicator;
31
  /**
32
   * All charts and numbers
33
   */
34
  public charts: Indicator[] = [];
35
  public numbers: Indicator[] = [];
36
  /**
37
   * Displayed chart and numbers base on Top filters
38
   */
39
  public displayCharts: Indicator[] = [];
40
  public displayNumbers: Indicator[] = [];
41
  /**
42
   * Top filters
43
   */
44
  public chartType: string = 'all';
45
  public privacy: string = 'all';
46
  public status: string = 'all';
47
  public keyword: string = null;
48
  /**
49
   * Grid or List View
50
   */
51
  public grid: boolean = true;
52

    
53
  @ViewChild('createIndicatorModal') createIndicatorModal: AlertModal;
54
  @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
55

    
56
  constructor(private sideBarService: SideBarService,
57
              private statisticsService: StatisticsService,
58
              private fb: FormBuilder) {
59
  }
60

    
61
  ngOnInit(): void {
62
  }
63

    
64
  ngOnChanges(changes: SimpleChanges): void {
65
    if (this.canEdit) {
66
      this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
67
      console.log(this.charts);
68
      this.displayCharts = this.filterChartType(this.filterPrivacy(
69
        this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.status),
70
        this.privacy),
71
        this.chartType
72
      );
73
      this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;
74
      this.displayNumbers = this.filterPrivacy(this.filterStatus(
75
        this.filterByKeyword(this.numbers, this.keyword),
76
        this.status),
77
        this.privacy);
78
    }
79
  }
80

    
81
  public toggleOpen(event = null) {
82
    if (!event) {
83
      this.sideBarService.setOpen(!this.open);
84
    } else if (event && event['value'] === true) {
85
      this.sideBarService.setOpen(false);
86
    }
87
  }
88

    
89
  public changeGrid(value) {
90
    this.grid = value;
91
  }
92

    
93
  onChartTypeChange(value) {
94
    this.displayCharts = this.filterChartType(this.charts, value);
95
  }
96

    
97
  onPrivacyChange(value) {
98
    this.displayCharts = this.filterPrivacy(this.charts, value);
99
    this.displayNumbers = this.filterPrivacy(this.numbers, value);
100
  }
101

    
102
  onStatusChange(value) {
103
    this.displayCharts = this.filterStatus(this.charts, value);
104
    this.displayNumbers = this.filterStatus(this.numbers, value);
105
  }
106

    
107
  onKeywordChange(value) {
108
    this.displayCharts = this.filterByKeyword(this.charts, value);
109
    this.displayNumbers = this.filterByKeyword(this.numbers, value);
110
  }
111

    
112
  private filterChartType(indicators: Indicator[], value): Indicator[] {
113
    if (value === 'all') {
114
      return indicators;
115
    } else {
116
      return indicators.filter(indicator =>
117
        indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0);
118
    }
119
  }
120

    
121
  private filterPrivacy(indicators: Indicator[], value): Indicator[] {
122
    if (value === 'all') {
123
      return indicators;
124
    } else {
125
      return indicators.filter(indicator => indicator.isPublic === (value === 'public'));
126
    }
127
  }
128

    
129
  private filterStatus(indicators: Indicator[], value): Indicator[] {
130
    if (value === 'all') {
131
      return indicators;
132
    } else {
133
      return indicators.filter(indicator => indicator.isActive === (value === 'active'));
134
    }
135
  }
136

    
137
  private filterByKeyword(indicators: Indicator[], value): Indicator[] {
138
    if (value === null || value === '') {
139
      return indicators;
140
    } else {
141
      return indicators.filter(indicator => indicator.name.includes(value) || indicator.description.includes(value));
142
    }
143
  }
144

    
145
  get open(): boolean {
146
    return this.sideBarService.open;
147
  }
148

    
149
  get canEdit() {
150
    return this.stakeholder &&
151
      this.stakeholder.topics[this.topicIndex] &&
152
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
153
      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
154
  }
155

    
156
  public get urls(): FormArray {
157
    return this.indicatorFb.get('urls') as FormArray;
158
  }
159

    
160
  public addUrl() {
161
    this.urls.push(this.fb.control('', [Validators.required,
162
      Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
163
        '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
164
        '[a-zA-Z0-9]+\.[^\s]{2,}')])
165
    );
166
  }
167

    
168
  public createIndicatorOpen() {
169
    this.indicatorFb = this.fb.group({
170
      name: this.fb.control('', Validators.required),
171
      description: this.fb.control(''),
172
      width: this.fb.control('small', Validators.required),
173
      urls: this.fb.array([]),
174
    });
175
    this.addUrl();
176
    this.createIndicatorModal.alertTitle = 'Create a new chart Indicator';
177
    this.createIndicatorModal.cancelButtonText = 'Cancel';
178
    this.createIndicatorModal.okButtonText = 'Create';
179
    this.createIndicatorModal.okButtonLeft = false;
180
    this.createIndicatorModal.alertMessage = false;
181
    this.createIndicatorModal.open();
182
  }
183

    
184
  public createIndicator() {
185
    this.indicator = new Indicator(
186
      this.indicatorFb.value.name,
187
      this.indicatorFb.value.description,
188
      'chart',
189
      this.indicatorFb.value.width,
190
      false,
191
      false,
192
      []
193
    );
194
    this.indicatorFb.value.urls.forEach(url => {
195
      this.indicator.indicatorPaths.push(
196
        this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url));
197
    });
198
    let index = this.charts.push(this.indicator);
199
    this.editIndicatorOpen(index -1);
200
  }
201

    
202
  public editIndicatorOpen(index: number) {
203
    this.indicator = HelperFunctions.copy(this.charts[index]);
204
      let indicatorPaths = this.fb.array([]);
205
    this.indicator.indicatorPaths.forEach(indicatorPath => {
206
      indicatorPaths.push(this.fb.group({
207
        parameters: this.fb.array([])
208
      }));
209
    });
210
    this.editIndicatorFb = this.fb.group({
211
      name: this.fb.control(this.indicator.name, Validators.required),
212
      description: this.fb.control(this.indicator.description),
213
      isPublic: this.fb.control(this.indicator.isPublic),
214
      isActive: this.fb.control(this.indicator.isActive),
215
      indicatorPaths: indicatorPaths,
216
      width: this.fb.control(this.indicator.width, Validators.required),
217
    });
218
    console.log(this.editIndicatorFb.value);
219
    /*this.editIndicatorModal.alertTitle = this.indicator.name;
220
    this.editIndicatorModal.cancelButtonText = 'Cancel';
221
    this.editIndicatorModal.okButtonText = 'Save Changes';
222
    this.editIndicatorModal.okButtonLeft = false;
223
    this.editIndicatorModal.alertMessage = false;
224
    this.editIndicatorModal.open();*/
225
  }
226

    
227
  saveIndicator() {
228

    
229
  }
230
}
(2-2/6)