Revision 57673
Added by Konstantinos Triantafyllou over 4 years ago
| indicators.component.ts | ||
|---|---|---|
| 1 |
import {ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
|
|
| 1 |
import {AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
|
|
| 2 | 2 |
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
|
| 3 | 3 |
import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
|
| 4 | 4 |
import {IndicatorUtils} from "../utils/indicator-utils";
|
| 5 |
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
|
|
| 5 |
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
|
|
| 6 | 6 |
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
| 7 | 7 |
import {StatisticsService} from "../utils/services/statistics.service";
|
| 8 | 8 |
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
| 9 | 9 |
import {DomSanitizer} from "@angular/platform-browser";
|
| 10 |
import {StakeholderService} from "../services/stakeholder.service";
|
|
| 11 |
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
|
|
| 10 | 12 |
|
| 13 |
declare var UIkit; |
|
| 14 |
|
|
| 11 | 15 |
@Component({
|
| 12 | 16 |
selector: 'indicators', |
| 13 | 17 |
templateUrl: './indicators.component.html' |
| ... | ... | |
| 15 | 19 |
export class IndicatorsComponent implements OnInit, OnChanges {
|
| 16 | 20 |
|
| 17 | 21 |
@Input() |
| 22 |
public properties: EnvProperties = null; |
|
| 23 |
@Input() |
|
| 18 | 24 |
public topicIndex: number = 0; |
| 19 | 25 |
@Input() |
| 20 | 26 |
public categoryIndex: number = 0; |
| ... | ... | |
| 29 | 35 |
* Editable indicator |
| 30 | 36 |
*/ |
| 31 | 37 |
public indicator: Indicator; |
| 38 |
public index: number; |
|
| 32 | 39 |
/** |
| 33 |
* All charts and numbers |
|
| 34 |
*/ |
|
| 35 |
public charts: Indicator[] = []; |
|
| 36 |
public numbers: Indicator[] = []; |
|
| 37 |
/** |
|
| 38 | 40 |
* Displayed chart and numbers base on Top filters |
| 39 | 41 |
*/ |
| 40 | 42 |
public displayCharts: Indicator[] = []; |
| ... | ... | |
| 55 | 57 |
@ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
|
| 56 | 58 |
|
| 57 | 59 |
constructor(private sideBarService: SideBarService, |
| 60 |
private stakeholderService: StakeholderService, |
|
| 58 | 61 |
private statisticsService: StatisticsService, |
| 59 | 62 |
private fb: FormBuilder, |
| 60 | 63 |
private sanitizer: DomSanitizer) {
|
| 61 | 64 |
} |
| 62 | 65 |
|
| 63 | 66 |
ngOnInit(): void {
|
| 67 |
if (document !== undefined) {
|
|
| 68 |
let callback = (list): void => {
|
|
| 69 |
let items: HTMLCollection = list.current.children; |
|
| 70 |
let reordered = []; |
|
| 71 |
let indicators = []; |
|
| 72 |
for (let i = 0; i < items.length; i++) {
|
|
| 73 |
if (items.item(i).id) {
|
|
| 74 |
reordered.push(+items.item(i).id); |
|
| 75 |
} |
|
| 76 |
} |
|
| 77 |
if(list.current.id === 'charts') {
|
|
| 78 |
reordered.forEach((id, index) => {
|
|
| 79 |
indicators[index] = HelperFunctions.copy(this.charts[id]); |
|
| 80 |
}); |
|
| 81 |
this.reorderIndicators('chart', indicators);
|
|
| 82 |
} else if(list.current.id === 'numbers') {
|
|
| 83 |
reordered.forEach((id, index) => {
|
|
| 84 |
indicators[index] = HelperFunctions.copy(this.numbers[id]); |
|
| 85 |
}); |
|
| 86 |
this.reorderIndicators('number', indicators);
|
|
| 87 |
} |
|
| 88 |
}; |
|
| 89 |
UIkit.util.on(document, 'moved', '#charts', callback); |
|
| 90 |
UIkit.util.on(document, 'moved', '#numbers', callback); |
|
| 91 |
} |
|
| 64 | 92 |
} |
| 65 | 93 |
|
| 66 | 94 |
ngOnChanges(changes: SimpleChanges): void {
|
| 67 | 95 |
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); |
|
| 96 |
this.filterCharts(); |
|
| 97 |
this.filterNumbers(); |
|
| 79 | 98 |
} |
| 80 | 99 |
} |
| 81 | 100 |
|
| ... | ... | |
| 91 | 110 |
this.grid = value; |
| 92 | 111 |
} |
| 93 | 112 |
|
| 113 |
filterCharts() {
|
|
| 114 |
this.displayCharts = this.filterChartType(this.filterPrivacy( |
|
| 115 |
this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.status), |
|
| 116 |
this.privacy), |
|
| 117 |
this.chartType |
|
| 118 |
); |
|
| 119 |
} |
|
| 120 |
|
|
| 121 |
filterNumbers() {
|
|
| 122 |
this.displayNumbers = this.filterPrivacy(this.filterStatus( |
|
| 123 |
this.filterByKeyword(this.numbers, this.keyword), |
|
| 124 |
this.status), |
|
| 125 |
this.privacy); |
|
| 126 |
} |
|
| 127 |
|
|
| 94 | 128 |
onChartTypeChange(value) {
|
| 95 | 129 |
this.displayCharts = this.filterChartType(this.charts, value); |
| 96 | 130 |
} |
| ... | ... | |
| 139 | 173 |
if (value === null || value === '') {
|
| 140 | 174 |
return indicators; |
| 141 | 175 |
} else {
|
| 142 |
return indicators.filter(indicator => indicator.name.includes(value) || indicator.description.includes(value)); |
|
| 176 |
return indicators.filter(indicator => (indicator.name && indicator.name.includes(value)) |
|
| 177 |
|| (indicator.description && indicator.description.includes(value))); |
|
| 143 | 178 |
} |
| 144 | 179 |
} |
| 145 | 180 |
|
| 181 |
get charts(): Indicator[] {
|
|
| 182 |
return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts; |
|
| 183 |
} |
|
| 184 |
|
|
| 185 |
set charts(indicators: Indicator[]) {
|
|
| 186 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = indicators; |
|
| 187 |
} |
|
| 188 |
|
|
| 189 |
get numbers(): Indicator[] {
|
|
| 190 |
return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers; |
|
| 191 |
} |
|
| 192 |
|
|
| 193 |
set numbers(indicators: Indicator[]) {
|
|
| 194 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = indicators; |
|
| 195 |
} |
|
| 196 |
|
|
| 146 | 197 |
get open(): boolean {
|
| 147 | 198 |
return this.sideBarService.open; |
| 148 | 199 |
} |
| 149 | 200 |
|
| 201 |
get canNumbersReorder(): boolean {
|
|
| 202 |
return this.displayNumbers.length === this.numbers.length; |
|
| 203 |
} |
|
| 204 |
|
|
| 205 |
get canChartsReorder(): boolean {
|
|
| 206 |
return this.displayCharts.length === this.charts.length; |
|
| 207 |
} |
|
| 208 |
|
|
| 150 | 209 |
get canEdit() {
|
| 151 | 210 |
return this.stakeholder && |
| 152 | 211 |
this.stakeholder.topics[this.topicIndex] && |
| ... | ... | |
| 158 | 217 |
return this.indicatorFb.get('urls') as FormArray;
|
| 159 | 218 |
} |
| 160 | 219 |
|
| 220 |
public get indicatorPaths(): FormArray {
|
|
| 221 |
return this.editIndicatorFb.get('indicatorPaths') as FormArray;
|
|
| 222 |
} |
|
| 223 |
|
|
| 224 |
public getParameters(index: number): FormArray {
|
|
| 225 |
return this.indicatorPaths.at(index).get('parameters') as FormArray;
|
|
| 226 |
} |
|
| 227 |
|
|
| 228 |
public getParameter(index: number, key: string): FormControl {
|
|
| 229 |
return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl; |
|
| 230 |
} |
|
| 231 |
|
|
| 161 | 232 |
private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
| 162 | 233 |
return this.sanitizer.bypassSecurityTrustResourceUrl( |
| 163 | 234 |
this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath))); |
| ... | ... | |
| 201 | 272 |
this.indicator.indicatorPaths.push( |
| 202 | 273 |
this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url)); |
| 203 | 274 |
}); |
| 204 |
let index = this.charts.push(this.indicator); |
|
| 205 |
this.editIndicatorOpen(index - 1); |
|
| 275 |
this.editIndicatorOpen(); |
|
| 206 | 276 |
} |
| 207 | 277 |
|
| 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 |
}); |
|
| 278 |
public editIndicatorOpen(index: number = -1) {
|
|
| 279 |
this.index = index; |
|
| 280 |
if (this.index !== -1) {
|
|
| 281 |
this.indicator = HelperFunctions.copy(this.charts[index]); |
|
| 282 |
} |
|
| 214 | 283 |
let indicatorPaths = this.fb.array([]); |
| 215 | 284 |
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
| 216 | 285 |
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 |
}); |
|
| 286 |
if (indicatorPath.parameters) {
|
|
| 287 |
Object.keys(indicatorPath.parameters).forEach(key => {
|
|
| 288 |
if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
|
|
| 289 |
if (this.indicatorUtils.parametersValidators.has(key)) {
|
|
| 290 |
parameters.push(this.fb.group({
|
|
| 291 |
key: this.fb.control(key), |
|
| 292 |
value: this.fb.control(indicatorPath.parameters[key], this.indicatorUtils.parametersValidators.get(key)) |
|
| 293 |
})); |
|
| 294 |
} else {
|
|
| 295 |
parameters.push(this.fb.group({
|
|
| 296 |
key: this.fb.control(key), |
|
| 297 |
value: this.fb.control(indicatorPath.parameters[key], Validators.required) |
|
| 298 |
})); |
|
| 299 |
} |
|
| 300 |
} |
|
| 301 |
}); |
|
| 302 |
} |
|
| 226 | 303 |
indicatorPaths.push(this.fb.group({
|
| 227 | 304 |
parameters: parameters |
| 228 | 305 |
})); |
| 229 | 306 |
}); |
| 230 | 307 |
this.editIndicatorFb = this.fb.group({
|
| 308 |
id: this.fb.control(this.indicator._id), |
|
| 231 | 309 |
name: this.fb.control(this.indicator.name, Validators.required), |
| 232 | 310 |
description: this.fb.control(this.indicator.description), |
| 233 | 311 |
isPublic: this.fb.control(this.indicator.isPublic), |
| ... | ... | |
| 235 | 313 |
indicatorPaths: indicatorPaths, |
| 236 | 314 |
width: this.fb.control(this.indicator.width, Validators.required), |
| 237 | 315 |
}); |
| 238 |
console.log(this.editIndicatorFb.value); |
|
| 239 |
this.editIndicatorModal.alertHeader = false; |
|
| 240 | 316 |
this.editIndicatorModal.cancelButtonText = 'Cancel'; |
| 241 | 317 |
this.editIndicatorModal.okButtonText = 'Save Changes'; |
| 242 | 318 |
this.editIndicatorModal.okButtonLeft = false; |
| 243 | 319 |
this.editIndicatorModal.alertMessage = false; |
| 244 | 320 |
this.editIndicatorModal.open(); |
| 321 |
setTimeout(() => {
|
|
| 322 |
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
|
| 323 |
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath) |
|
| 324 |
}); |
|
| 325 |
}, 500); |
|
| 245 | 326 |
} |
| 246 | 327 |
|
| 247 | 328 |
saveIndicator() {
|
| 329 |
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.editIndicatorFb.value, this.indicator.indicatorPaths); |
|
| 330 |
let path = [ |
|
| 331 |
this.stakeholder._id, |
|
| 332 |
this.stakeholder.topics[this.topicIndex]._id, |
|
| 333 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, |
|
| 334 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id |
|
| 335 |
]; |
|
| 336 |
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {
|
|
| 337 |
if (this.index !== -1) {
|
|
| 338 |
this.charts[this.index] = indicator; |
|
| 339 |
} else {
|
|
| 340 |
this.charts.push(indicator); |
|
| 341 |
} |
|
| 342 |
this.filterCharts(); |
|
| 343 |
this.stakeholderService.setStakeholder(this.stakeholder); |
|
| 344 |
}); |
|
| 345 |
} |
|
| 248 | 346 |
|
| 347 |
reorderIndicators(type: string, indicators: Indicator[]) {
|
|
| 348 |
let path = [ |
|
| 349 |
this.stakeholder._id, |
|
| 350 |
this.stakeholder.topics[this.topicIndex]._id, |
|
| 351 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, |
|
| 352 |
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id |
|
| 353 |
]; |
|
| 354 |
this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicators, type). |
|
| 355 |
subscribe(() => {
|
|
| 356 |
if(type === 'chart') {
|
|
| 357 |
this.charts = indicators; |
|
| 358 |
this.filterCharts(); |
|
| 359 |
} else {
|
|
| 360 |
this.numbers = indicators; |
|
| 361 |
this.filterNumbers(); |
|
| 362 |
} |
|
| 363 |
this.stakeholderService.setStakeholder(this.stakeholder); |
|
| 364 |
}); |
|
| 249 | 365 |
} |
| 250 | 366 |
|
| 251 |
focus(event: FocusEvent) {
|
|
| 252 |
event.srcElement.parentElement.className = event.srcElement.parentElement.className + ' md-input-focus'; |
|
| 367 |
refreshIndicator(index: number) {
|
|
| 368 |
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.editIndicatorFb.value, this.indicator.indicatorPaths); |
|
| 369 |
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
|
| 370 |
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath) |
|
| 371 |
}); |
|
| 372 |
this.indicatorPaths.at(index).markAsPristine({onlySelf: true});
|
|
| 253 | 373 |
} |
| 254 | 374 |
} |
Also available in: Unified diff
[Monitor Dashboard]: Complete indicator save and reorder.