Project

General

Profile

1
import {ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
2
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
3
import {Indicator, IndicatorPath, 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
import {DomSanitizer} from "@angular/platform-browser";
10

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

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

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

    
57
  constructor(private sideBarService: SideBarService,
58
              private statisticsService: StatisticsService,
59
              private fb: FormBuilder,
60
              private sanitizer: DomSanitizer) {
61
  }
62

    
63
  ngOnInit(): void {
64
  }
65

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
161
  private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
162
    return this.sanitizer.bypassSecurityTrustResourceUrl(
163
      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)));
164
  }
165

    
166
  public addUrl() {
167
    this.urls.push(this.fb.control('', [Validators.required,
168
      Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
169
        '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
170
        '[a-zA-Z0-9]+\.[^\s]{2,}')])
171
    );
172
  }
173

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

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

    
208
  public editIndicatorOpen(index: number) {
209
    this.indicator = HelperFunctions.copy(this.charts[index]);
210
    this.indicator.indicatorPaths.forEach(indicatorPath => {
211
      indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
212
      console.log(indicatorPath.safeResourceUrl);
213
    });
214
    let indicatorPaths = this.fb.array([]);
215
    this.indicator.indicatorPaths.forEach(indicatorPath => {
216
      let parameters = this.fb.array([]);
217
      indicatorPath.parameters.forEach((value, key) => {
218
        if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
219
          // TODO add Validators Map
220
          parameters.push(this.fb.group({
221
            key: this.fb.control(key),
222
            value: this.fb.control(value, Validators.required)
223
          }));
224
        }
225
      });
226
      indicatorPaths.push(this.fb.group({
227
        parameters: parameters
228
      }));
229
    });
230
    this.editIndicatorFb = this.fb.group({
231
      name: this.fb.control(this.indicator.name, Validators.required),
232
      description: this.fb.control(this.indicator.description),
233
      isPublic: this.fb.control(this.indicator.isPublic),
234
      isActive: this.fb.control(this.indicator.isActive),
235
      indicatorPaths: indicatorPaths,
236
      width: this.fb.control(this.indicator.width, Validators.required),
237
    });
238
    console.log(this.editIndicatorFb.value);
239
    this.editIndicatorModal.alertHeader = false;
240
    this.editIndicatorModal.cancelButtonText = 'Cancel';
241
    this.editIndicatorModal.okButtonText = 'Save Changes';
242
    this.editIndicatorModal.okButtonLeft = false;
243
    this.editIndicatorModal.alertMessage = false;
244
    this.editIndicatorModal.open();
245
  }
246

    
247
  saveIndicator() {
248

    
249
  }
250

    
251
  focus(event: FocusEvent) {
252
    event.srcElement.parentElement.className = event.srcElement.parentElement.className + ' md-input-focus';
253
  }
254
}
(2-2/6)