diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ebd61a9..dcf83ad 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,5 @@ import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core'; -import { - ActivatedRoute, - NavigationEnd, - NavigationError, - NavigationStart, - RouteConfigLoadEnd, - Router -} from '@angular/router'; - +import {ActivatedRoute, Router} from '@angular/router'; import {EnvProperties} from './openaireLibrary/utils/properties/env-properties'; import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service'; import {Session, User} from './openaireLibrary/login/utils/helper.class'; @@ -103,14 +95,14 @@ export class AppComponent implements OnInit, OnDestroy { } - buildMenu() { - if (Session.isPortalAdministrator(this.user)) { - this.userMenuItems.push(new MenuItem("", "Manage helptexts", - ((this.properties.environment == "beta") ? "https://beta.admin.connect.openaire.eu" : "https://admin.explore.openaire.eu") + "/dashboard?communityId=openaire", "", true, [], [], {})) + buildMenu() { + if (Session.isPortalAdministrator(this.user)) { + this.userMenuItems.push(new MenuItem("", "Manage helptexts", + ((this.properties.environment == "beta") ? "https://beta.admin.connect.openaire.eu" : "https://admin.explore.openaire.eu") + "/dashboard?communityId=openaire", "", true, [], [], {})) + } + if (this.user) { + this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {})); + } } - if(this.user) { - this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {})); - } - } } diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html index ca03a4d..6996059 100644 --- a/src/app/topic/indicators.component.html +++ b/src/app/topic/indicators.component.html @@ -204,7 +204,7 @@
-
+
-
-
-
+
-
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts index 87bf037..ddeef8c 100644 --- a/src/app/topic/indicators.component.ts +++ b/src/app/topic/indicators.component.ts @@ -14,477 +14,463 @@ import {LayoutService} from "../library/sharedComponents/sidebar/layout.service" declare var UIkit; @Component({ - selector: 'indicators', - templateUrl: './indicators.component.html' + selector: 'indicators', + templateUrl: './indicators.component.html' }) export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { - @Input() - public properties: EnvProperties = null; - @Input() - public topicIndex: number = 0; - @Input() - public categoryIndex: number = 0; - @Input() - public subcategoryIndex: number = 0; - @Input() - public stakeholder: Stakeholder = null; - public indicatorUtils: IndicatorUtils = new IndicatorUtils(); - public indicatorFb: FormGroup; - /** - * Editable indicator - */ - public indicator: Indicator; - public index: number; - /** - * Displayed chart and numbers base on Top filters - */ - public displayCharts: Indicator[] = []; - public displayNumbers: Indicator[] = []; - /** - * Top filters - */ - public filters: FormGroup; - public all: Option = { - value: 'all', - label: 'All' - }; - /** - * Grid or List View - */ - public grid: boolean = true; - private subscriptions: any[] = []; - @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal; - @ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal; + @Input() + public properties: EnvProperties = null; + @Input() + public topicIndex: number = 0; + @Input() + public categoryIndex: number = 0; + @Input() + public subcategoryIndex: number = 0; + @Input() + public stakeholder: Stakeholder = null; + public indicatorUtils: IndicatorUtils = new IndicatorUtils(); + public indicatorFb: FormGroup; + /** + * Editable indicator + */ + public indicator: Indicator; + public index: number; + /** + * Displayed chart and numbers base on Top filters + */ + public displayCharts: Indicator[] = []; + public displayNumbers: Indicator[] = []; + /** + * Top filters + */ + public filters: FormGroup; + public all: Option = { + value: 'all', + label: 'All' + }; + /** + * Grid or List View + */ + public grid: boolean = true; + private subscriptions: any[] = []; + private urlSubscriptions: any[] = []; + @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal; + @ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal; - constructor(private layoutService: LayoutService, - private stakeholderService: StakeholderService, - private statisticsService: StatisticsService, - private fb: FormBuilder, - private sanitizer: DomSanitizer) { - } - - ngOnInit(): void { - this.buildFilters(); - } - - ngOnDestroy(): void { - this.subscriptions.forEach(value => { - if (value instanceof Subscriber) { - value.unsubscribe(); - } else if(value instanceof Function){ - value(); - } - }); - } - - ngAfterViewInit(): void { - if (document !== undefined) { - let callback = (list): void => { - let items: HTMLCollection = list.current.children; - let reordered = []; - for (let i = 0; i < items.length; i++) { - if (items.item(i).id) { - reordered.push(items.item(i).id); - } - } - this.reorderIndicators(list.current.id , reordered); - }; - this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback)); - this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback)); + constructor(private layoutService: LayoutService, + private stakeholderService: StakeholderService, + private statisticsService: StatisticsService, + private fb: FormBuilder, + private sanitizer: DomSanitizer) { } - } - ngOnChanges(changes: SimpleChanges): void { - if (this.canEdit) { - if(changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) { + ngOnInit(): void { this.buildFilters(); - } - this.filterCharts(); - this.filterNumbers(); } - } - public toggleOpen(event = null) { - if (!event) { - this.layoutService.setOpen(!this.open); - } else if (event && event['value'] === true) { - this.layoutService.setOpen(false); - } - } - - public changeGrid(value) { - this.grid = value; - } - - private buildFilters() { - this.filters = this.fb.group({ - chartType: this.fb.control('all'), - privacy: this.fb.control('all'), - status: this.fb.control('all'), - keyword: this.fb.control('') - }); - this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe( value => { - this.onChartTypeChange(value); - })); - this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe( value => { - this.onPrivacyChange(value); - })); - this.subscriptions.push(this.filters.get('status').valueChanges.subscribe( value => { - this.onStatusChange(value); - })); - this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe( value => { - this.onKeywordChange(value); - })); - } - - filterCharts() { - this.displayCharts = this.filterChartType(this.filterPrivacy( - this.filterStatus(this.filterByKeyword(this.charts, this.filters.value.keyword), - this.filters.value.status), - this.filters.value.privacy), - this.filters.value.chartType - ); - } - - filterNumbers() { - this.displayNumbers = this.filterPrivacy(this.filterStatus( - this.filterByKeyword(this.numbers, this.filters.value.keyword), - this.filters.value.status), - this.filters.value.privacy); - } - - onChartTypeChange(value) { - this.displayCharts = this.filterChartType(this.charts, value); - } - - onPrivacyChange(value) { - console.log(this.numbers); - this.displayCharts = this.filterPrivacy(this.charts, value); - this.displayNumbers = this.filterPrivacy(this.numbers, value); - } - - onStatusChange(value) { - this.displayCharts = this.filterStatus(this.charts, value); - this.displayNumbers = this.filterStatus(this.numbers, value); - } - - onKeywordChange(value) { - this.displayCharts = this.filterByKeyword(this.charts, value); - this.displayNumbers = this.filterByKeyword(this.numbers, value); - } - - private filterChartType(indicators: Indicator[], value): Indicator[] { - if (value === 'all') { - return indicators; - } else { - return indicators.filter(indicator => - indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0); - } - } - - private filterPrivacy(indicators: Indicator[], value): Indicator[] { - if (value === 'all') { - return indicators; - } else { - return indicators.filter(indicator => indicator.isPublic === value); - } - } - - private filterStatus(indicators: Indicator[], value): Indicator[] { - if (value === 'all') { - return indicators; - } else { - return indicators.filter(indicator => indicator.isActive === value); - } - } - - private filterByKeyword(indicators: Indicator[], value): Indicator[] { - if (value === null || value === '') { - return indicators; - } else { - return indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase())) - || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))); - } - } - - get charts(): Indicator[] { - return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts; - } - - set charts(indicators: Indicator[]) { - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = indicators; - } - - get numbers(): Indicator[] { - return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers; - } - - set numbers(indicators: Indicator[]) { - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = indicators; - } - - get open(): boolean { - return this.layoutService.open; - } - - get canNumbersReorder(): boolean { - return this.displayNumbers.length === this.numbers.length; - } - - get canChartsReorder(): boolean { - return this.displayCharts.length === this.charts.length; - } - - get canEdit() { - return this.stakeholder && - this.stakeholder.topics[this.topicIndex] && - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] && - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]; - } - - public get urls(): FormArray { - return this.indicatorFb.get('urls') as FormArray; - } - - public get indicatorPaths(): FormArray { - return this.indicatorFb.get('indicatorPaths') as FormArray; - } - - public getParameters(index: number): FormArray { - return this.indicatorPaths.at(index).get('parameters') as FormArray; - } - - public getParameter(index: number, key: string): FormControl { - return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl; - } - - private getUrlByStakeHolder(indicatorPath: IndicatorPath) { - return this.sanitizer.bypassSecurityTrustResourceUrl( - this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath))); - } - - public addUrl() { - this.urls.push(this.fb.control('', [Validators.required, - Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' + - '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' + - '[a-zA-Z0-9]+\.[^\s]{2,}')]) - ); - } - - public createIndicatorOpen() { - this.indicator = null; - this.indicatorFb = this.fb.group({ - id: this.fb.control(null), - name: this.fb.control('', Validators.required), - description: this.fb.control(''), - isPublic: this.fb.control(false), - isActive: this.fb.control(false), - urls: this.fb.array([]), - width: this.fb.control('small', Validators.required), - }); - this.addUrl(); - this.editIndicatorModal.alertTitle = 'Create a new chart Indicator'; - this.editIndicatorModal.cancelButtonText = 'Cancel'; - this.editIndicatorModal.okButtonText = 'Next'; - this.editIndicatorModal.okButtonLeft = false; - this.editIndicatorModal.alertMessage = false; - this.editIndicatorModal.stayOpen = true; - this.editIndicatorModal.open(); - } - - public createChartIndicator() { - this.indicator = new Indicator( - this.indicatorFb.value.name, - this.indicatorFb.value.description, - 'chart', - this.indicatorFb.value.width, - this.indicatorFb.value.isActive, - this.indicatorFb.value.isPublic, - [] - ); - this.indicatorFb.value.urls.forEach(url => { - this.indicator.indicatorPaths.push( - this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url)); - }); - this.editChartIndicatorOpen(); - } - - public editChartIndicatorOpen(id = null) { - this.index = (id)?this.charts.findIndex(value => value._id === id):-1; - if (this.index !== -1) { - this.indicator = HelperFunctions.copy(this.charts[this.index]); - } - let indicatorPaths = this.fb.array([]); - this.indicator.indicatorPaths.forEach(indicatorPath => { - let parameters = this.fb.array([]); - if (indicatorPath.parameters) { - console.info(indicatorPath.parameters); - Object.keys(indicatorPath.parameters).forEach(key => { - if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) { - if (this.indicatorUtils.parametersValidators.has(key)) { - parameters.push(this.fb.group({ - key: this.fb.control(key), - value: this.fb.control(indicatorPath.parameters[key], this.indicatorUtils.parametersValidators.get(key)) - })); - } else { - parameters.push(this.fb.group({ - key: this.fb.control(key), - value: this.fb.control(indicatorPath.parameters[key]) - })); + ngOnDestroy(): void { + this.subscriptions.forEach(value => { + if (value instanceof Subscriber) { + value.unsubscribe(); + } else if (value instanceof Function) { + value(); } - } }); - } - indicatorPaths.push(this.fb.group({ - parameters: parameters - })); - }); - this.indicatorFb = this.fb.group({ - id: this.fb.control(this.indicator._id), - name: this.fb.control(this.indicator.name/*, Validators.required*/), - description: this.fb.control(this.indicator.description), - isPublic: this.fb.control(this.indicator.isPublic), - isActive: this.fb.control(this.indicator.isActive), - indicatorPaths: indicatorPaths, - width: this.fb.control(this.indicator.width), - }); - if(this.index === -1) { - this.editIndicatorModal.okButtonText = 'Save'; - this.editIndicatorModal.stayOpen = false; - } else { - this.editIndicatorModal.cancelButtonText = 'Cancel'; - this.editIndicatorModal.okButtonText = 'Save Changes'; - this.editIndicatorModal.okButtonLeft = false; - this.editIndicatorModal.alertMessage = false; - this.editIndicatorModal.open(); } - this.indicator.indicatorPaths.forEach(indicatorPath => { - indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath) - }); - } - saveIndicator() { - if(this.indicator) { - if(this.indicator.type === 'chart') { - this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths); - } - let path = [ - this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id - ]; - this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => { - if (this.index !== -1) { - this.charts[this.index] = indicator; - } else { - this.charts.push(indicator); + ngAfterViewInit(): void { + if (document !== undefined) { + let callback = (list): void => { + let items: HTMLCollection = list.current.children; + let reordered = []; + for (let i = 0; i < items.length; i++) { + if (items.item(i).id) { + reordered.push(items.item(i).id); + } + } + this.reorderIndicators(list.current.id, reordered); + }; + this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback)); + this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback)); } - this.filterCharts(); - this.stakeholderService.setStakeholder(this.stakeholder); - this.indicatorFb = null; - }, error => { - this.indicatorFb = null; - }); - } else { - this.createChartIndicator(); } - } - reorderIndicators(type: string, indicatorIds: string[]) { - let path = [ - this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id - ]; - this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicatorIds, type).subscribe(indicators => { - if (type === 'chart') { - this.charts = indicators; - this.filterCharts(); - } else { - this.numbers = indicators; - this.filterNumbers(); - } - this.stakeholderService.setStakeholder(this.stakeholder); - }); - } - - hasDifference(index: number): boolean { - let hasDifference = false; - this.indicatorPaths.at(index).value.parameters.forEach((parameter) => { - if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) { - hasDifference = true; - return; - } - }); - return hasDifference; - } - - refreshIndicator() { - this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths); - this.indicator.indicatorPaths.forEach(indicatorPath => { - indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath) - }); - } - - deleteIndicatorOpen(id: string, type: string = 'chart') { - if(type === 'chart') { - this.indicator = this.charts.find(value => value._id == id); - } else { - this.indicator = this.numbers.find(value => value._id == id); + ngOnChanges(changes: SimpleChanges): void { + if (this.canEdit) { + if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) { + this.buildFilters(); + } + this.filterCharts(); + this.filterNumbers(); + } } - this.deleteIndicatorModal.alertTitle = 'Delete ' + this.indicator.name; - this.deleteIndicatorModal.cancelButtonText = 'No'; - this.deleteIndicatorModal.okButtonText = 'Yes'; - this.deleteIndicatorModal.message = 'This indicator will permanently be deleted. Are you sure you want to proceed?'; - this.deleteIndicatorModal.open(); - } - deleteIndicator() { - let path = [ - this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, - this.indicator._id - ]; - this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe( () => { - if(this.indicator.type === 'chart') { - this.charts.splice(this.index, 1); - } else { - this.numbers.splice(this.index, 1); - } - this.stakeholderService.setStakeholder(this.stakeholder); - }); - } + public toggleOpen(event = null) { + if (!event) { + this.layoutService.setOpen(!this.open); + } else if (event && event['value'] === true) { + this.layoutService.setOpen(false); + } + } - toggleIndicatorStatus(indicator: Indicator) { - let path = [ - this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, - indicator._id - ]; - this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => { - indicator.isActive = isActive; - this.stakeholderService.setStakeholder(this.stakeholder); - }); - } + public changeGrid(value) { + this.grid = value; + } - toggleIndicatorAccess(indicator: Indicator) { - let path = [ - this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, - this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, - indicator._id - ]; - this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => { - indicator.isPublic = isPublic; - this.stakeholderService.setStakeholder(this.stakeholder); - }); - } + private buildFilters() { + this.filters = this.fb.group({ + chartType: this.fb.control('all'), + privacy: this.fb.control('all'), + status: this.fb.control('all'), + keyword: this.fb.control('') + }); + this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe(value => { + this.onChartTypeChange(value); + })); + this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe(value => { + this.onPrivacyChange(value); + })); + this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => { + this.onStatusChange(value); + })); + this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => { + this.onKeywordChange(value); + })); + } + + filterCharts() { + this.displayCharts = this.filterChartType(this.filterPrivacy( + this.filterStatus(this.filterByKeyword(this.charts, this.filters.value.keyword), + this.filters.value.status), + this.filters.value.privacy), + this.filters.value.chartType + ); + } + + filterNumbers() { + this.displayNumbers = this.filterPrivacy(this.filterStatus( + this.filterByKeyword(this.numbers, this.filters.value.keyword), + this.filters.value.status), + this.filters.value.privacy); + } + + onChartTypeChange(value) { + this.displayCharts = this.filterChartType(this.charts, value); + } + + onPrivacyChange(value) { + this.displayCharts = this.filterPrivacy(this.charts, value); + this.displayNumbers = this.filterPrivacy(this.numbers, value); + } + + onStatusChange(value) { + this.displayCharts = this.filterStatus(this.charts, value); + this.displayNumbers = this.filterStatus(this.numbers, value); + } + + onKeywordChange(value) { + this.displayCharts = this.filterByKeyword(this.charts, value); + this.displayNumbers = this.filterByKeyword(this.numbers, value); + } + + private filterChartType(indicators: Indicator[], value): Indicator[] { + if (value === 'all') { + return indicators; + } else { + return indicators.filter(indicator => + indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0); + } + } + + private filterPrivacy(indicators: Indicator[], value): Indicator[] { + if (value === 'all') { + return indicators; + } else { + return indicators.filter(indicator => indicator.isPublic === value); + } + } + + private filterStatus(indicators: Indicator[], value): Indicator[] { + if (value === 'all') { + return indicators; + } else { + return indicators.filter(indicator => indicator.isActive === value); + } + } + + private filterByKeyword(indicators: Indicator[], value): Indicator[] { + if (value === null || value === '') { + return indicators; + } else { + return indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase())) + || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))); + } + } + + get charts(): Indicator[] { + return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts; + } + + set charts(indicators: Indicator[]) { + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts = indicators; + } + + get numbers(): Indicator[] { + return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers; + } + + set numbers(indicators: Indicator[]) { + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers = indicators; + } + + get open(): boolean { + return this.layoutService.open; + } + + get canNumbersReorder(): boolean { + return this.displayNumbers.length === this.numbers.length; + } + + get canChartsReorder(): boolean { + return this.displayCharts.length === this.charts.length; + } + + get canEdit() { + return this.stakeholder && + this.stakeholder.topics[this.topicIndex] && + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] && + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]; + } + + public get indicatorPaths(): FormArray { + return this.indicatorFb.get('indicatorPaths') as FormArray; + } + + public getParameters(index: number): FormArray { + return this.indicatorPaths.at(index).get('parameters') as FormArray; + } + + public getParameter(index: number, key: string): FormControl { + return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl; + } + + private getSecureUrlByStakeHolder(indicatorPath: IndicatorPath) { + return this.sanitizer.bypassSecurityTrustResourceUrl( + this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath))); + } + + private getUrlByStakeHolder(indicatorPath: IndicatorPath) { + return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)); + } + + public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([])) { + this.indicatorPaths.push(this.fb.group({ + url: this.fb.control(value, [Validators.required, + Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' + + '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' + + '[a-zA-Z0-9]+\.[^\s]{2,}')]), + parameters: parameters + } + )); + let index = this.indicatorPaths.length - 1; + this.urlSubscriptions.push(this.indicatorPaths.at(index).valueChanges.subscribe(value => { + if (this.indicatorPaths.at(index).valid) { + let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value.url), value.url); + let parameters = this.getParametersAsFormArray(indicatorPath); + (this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters); + if (!this.indicator.indicatorPaths[index]) { + this.indicator.indicatorPaths[index] = indicatorPath; + this.indicator.indicatorPaths[index].safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath); + } else { + indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl; + this.indicator.indicatorPaths[index] = indicatorPath; + } + } + }) + ); + } + + private getParametersAsFormArray(indicatorPath: IndicatorPath): FormArray { + let parameters = this.fb.array([]); + if (indicatorPath.parameters) { + Object.keys(indicatorPath.parameters).forEach(key => { + if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) { + if (this.indicatorUtils.parametersValidators.has(key)) { + parameters.push(this.fb.group({ + key: this.fb.control(key), + value: this.fb.control(indicatorPath.parameters[key], this.indicatorUtils.parametersValidators.get(key)) + })); + } else { + parameters.push(this.fb.group({ + key: this.fb.control(key), + value: this.fb.control(indicatorPath.parameters[key]) + })); + } + } + }); + } + return parameters; + } + + public editChartIndicatorOpen(id = null) { + this.urlSubscriptions.forEach(value => { + if(value instanceof Subscriber) { + value.unsubscribe(); + } + }); + this.index = (id) ? this.charts.findIndex(value => value._id === id) : -1; + if (this.index !== -1) { + this.indicator = HelperFunctions.copy(this.charts[this.index]); + this.indicatorFb = this.fb.group({ + id: this.fb.control(this.indicator._id), + name: this.fb.control(this.indicator.name/*, Validators.required*/), + description: this.fb.control(this.indicator.description), + isPublic: this.fb.control(this.indicator.isPublic), + isActive: this.fb.control(this.indicator.isActive), + indicatorPaths: this.fb.array([]), + width: this.fb.control(this.indicator.width), + }); + this.indicator.indicatorPaths.forEach(indicatorPath => { + this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath), this.getParametersAsFormArray(indicatorPath)); + indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath) + }); + } else { + this.indicator = new Indicator('', '', 'chart', 'small', false, false, []); + this.indicatorFb = this.fb.group({ + id: this.fb.control(null), + name: this.fb.control(''), + description: this.fb.control(''), + isPublic: this.fb.control(false), + isActive: this.fb.control(false), + indicatorPaths: this.fb.array([]), + width: this.fb.control('small', Validators.required), + }); + this.addIndicatorPath(); + } + this.editIndicatorModal.cancelButtonText = 'Cancel'; + this.editIndicatorModal.okButtonLeft = false; + this.editIndicatorModal.alertMessage = false; + if (this.index === -1) { + this.editIndicatorModal.alertTitle = 'Create a new chart Indicator'; + this.editIndicatorModal.okButtonText = 'Save'; + } else { + this.editIndicatorModal.okButtonText = 'Save Changes'; + } + this.editIndicatorModal.open(); + } + + saveIndicator() { + if (this.indicator.type === 'chart') { + this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths); + } + let path = [ + this.stakeholder._id, + this.stakeholder.topics[this.topicIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id + ]; + this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => { + if (this.index !== -1) { + this.charts[this.index] = indicator; + } else { + this.charts.push(indicator); + } + this.filterCharts(); + this.stakeholderService.setStakeholder(this.stakeholder); + this.indicatorFb = null; + }, error => { + this.indicatorFb = null; + }); + } + + reorderIndicators(type: string, indicatorIds: string[]) { + let path = [ + this.stakeholder._id, + this.stakeholder.topics[this.topicIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id + ]; + this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicatorIds, type).subscribe(indicators => { + if (type === 'chart') { + this.charts = indicators; + this.filterCharts(); + } else { + this.numbers = indicators; + this.filterNumbers(); + } + this.stakeholderService.setStakeholder(this.stakeholder); + }); + } + + hasDifference(index: number): boolean { + return this.indicator.indicatorPaths[index].safeResourceUrl.toString() !== + this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString(); + } + + refreshIndicator() { + this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths); + this.indicator.indicatorPaths.forEach(indicatorPath => { + indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath); + }); + } + + deleteIndicatorOpen(id: string, type: string = 'chart') { + if (type === 'chart') { + this.indicator = this.charts.find(value => value._id == id); + } else { + this.indicator = this.numbers.find(value => value._id == id); + } + this.deleteIndicatorModal.alertTitle = 'Delete ' + this.indicator.name; + this.deleteIndicatorModal.cancelButtonText = 'No'; + this.deleteIndicatorModal.okButtonText = 'Yes'; + this.deleteIndicatorModal.message = 'This indicator will permanently be deleted. Are you sure you want to proceed?'; + this.deleteIndicatorModal.open(); + } + + deleteIndicator() { + let path = [ + this.stakeholder._id, + this.stakeholder.topics[this.topicIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, + this.indicator._id + ]; + this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => { + if (this.indicator.type === 'chart') { + this.charts.splice(this.index, 1); + } else { + this.numbers.splice(this.index, 1); + } + this.stakeholderService.setStakeholder(this.stakeholder); + }); + } + + toggleIndicatorStatus(indicator: Indicator) { + let path = [ + this.stakeholder._id, + this.stakeholder.topics[this.topicIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, + indicator._id + ]; + this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => { + indicator.isActive = isActive; + this.stakeholderService.setStakeholder(this.stakeholder); + }); + } + + toggleIndicatorAccess(indicator: Indicator) { + let path = [ + this.stakeholder._id, + this.stakeholder.topics[this.topicIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, + indicator._id + ]; + this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => { + indicator.isPublic = isPublic; + this.stakeholderService.setStakeholder(this.stakeholder); + }); + } }