From 310f06b2348977c64825231fff79180f70fb404d Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 25 Jul 2024 10:31:08 +0300 Subject: [PATCH] [develop]: Make some improvements regarding import/export indicators and editing an indicator. --- monitor-admin/topic/indicators.component.html | 314 ++++++++---------- monitor-admin/topic/indicators.component.ts | 85 ++--- monitor-admin/utils/indicator-utils.ts | 10 - .../utils/stakeholder-base.component.ts | 14 +- monitor/entities/stakeholder.ts | 25 ++ sharedComponents/tabs/slider-tab.component.ts | 2 + .../tabs/slider-tabs.component.ts | 146 ++++---- 7 files changed, 278 insertions(+), 318 deletions(-) diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html index 44ce49f5..8b5ad4c2 100644 --- a/monitor-admin/topic/indicators.component.html +++ b/monitor-admin/topic/indicators.component.html @@ -6,7 +6,8 @@
- @@ -20,66 +21,67 @@
-
{{numberSections.at(i).get('title').value}}
+
{{ numberSections.at(i).get('title').value }}
- -
-
-
- +
+
+
+ - - - - -
- -
-
-
{{ indicator.name }}
-
- - -- + + + + +
+
+
{{ indicator.name }}
+
+ + -- +
- +
@@ -99,7 +101,14 @@
- +
+
+ +
+
@@ -125,24 +134,30 @@
-
{{chartSections.at(i).get('title').value}}
+
{{ chartSections.at(i).get('title').value }}
- -
-
+ [attr.uk-sortable]="isEditable ? 'group: chart': null" uk-grid> +
+
+
+
- - + [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" + ratio="0.6"> + + -
+
-
- {{ indicator.name }} -
+
+ {{ indicator.name + " " }} +
-
+
-
+
- - - -
+ + + + +
- +
@@ -235,7 +251,14 @@
- +
+
+ +
+
@@ -269,68 +292,8 @@
-
- -
-
+
@@ -388,8 +351,8 @@ - - + +
-
+
-
-
+
+
-
-
@@ -641,13 +603,3 @@ Are you sure you want to proceed?
- -
-
- -
-
- diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts index 5f2eab4e..97c148c3 100644 --- a/monitor-admin/topic/indicators.component.ts +++ b/monitor-admin/topic/indicators.component.ts @@ -10,8 +10,8 @@ import { ViewChild } from "@angular/core"; import { - Format, - Indicator, + Format, ImportIndicators, + Indicator, IndicatorImport, IndicatorPath, IndicatorSize, IndicatorType, @@ -79,7 +79,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple * Editable indicator */ public section: Section; - public indicator: Indicator; public index: number = -1; public editing: boolean = false; public dragging: boolean = false; @@ -102,7 +101,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple @ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent; @ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent; /* Transition Groups */ - @ViewChild('numbersTransition') numbersTransition: TransitionGroupComponent; @ViewChild('chartsTransition') chartsTransition: TransitionGroupComponent; public isFullscreen: boolean = false; @@ -581,26 +579,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple } } - public removeNumberIndicatorPath(index: number) { - this.numberIndicatorPaths.removeAt(index); - this.indicator.indicatorPaths.splice(index, 1); - this.numbersTransition.init(); - if (this.indicator.activePath === index) { - this.activeNumberIndicatorPath(Math.max(0, index - 1)); - } else if (this.indicator.activePath > index) { - this.activeNumberIndicatorPath(this.indicator.activePath - 1); - } - this.numberIndicatorFb.markAsDirty(); - } - public removeChartIndicatorPath(index: number) { this.chartIndicatorPaths.removeAt(index); this.indicator.indicatorPaths.splice(index, 1); this.chartsTransition.init(); if (this.indicator.activePath === index) { - this.activeChartIndicatorPath(Math.max(0, index - 1)); + this.setActiveChartIndicatorPath(Math.max(0, index - 1)); } else if (this.indicator.activePath > index) { - this.activeChartIndicatorPath(this.indicator.activePath - 1); + this.setActiveChartIndicatorPath(this.indicator.activePath - 1); } this.chartIndicatorFb.markAsDirty(); } @@ -609,9 +595,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple type: 'number' | 'chart', index: number, newIndex: number = index - 1) { let indicatorPaths = type == 'number'?this.numberIndicatorPaths:this.chartIndicatorPaths; - if(type == 'number') { - this.numbersTransition.init(); - } else { + if(type == 'chart') { this.chartsTransition.init(); } let a = indicatorPaths.at(index); @@ -627,16 +611,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple form.markAsDirty(); } - public activeNumberIndicatorPath(index: number) { - let paths = this.numberIndicatorPaths; - if (index == paths.length) { - this.addNumberIndicatorPath(); - this.numbersTransition.init(); - } - this.indicator.activePath = index; - } - - public activeChartIndicatorPath(index: number) { + public setActiveChartIndicatorPath(index: number) { let paths = this.chartIndicatorPaths; if (index == paths.length) { this.addChartIndicatorPath(); @@ -1008,8 +983,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString(); } else if (type === 'number') { let indicatorPath = this.numberIndicatorPaths.at(index).value; - indicatorPath.parameters.forEach(parameter => { - if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) { + indicatorPath.parameters.forEach((parameter: { value: any; key: string | number; }) => { + if (!parameter.value && !this.indicator.indicatorPaths[index].parameters[parameter.key]) { + return; + } else if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) { hasDifference = true; return; } @@ -1027,6 +1004,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple } refreshIndicator(type: IndicatorType = 'chart') { + let activePath = this.indicator.activePath; if (type === 'chart') { this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths, 'chart'); this.indicator.indicatorPaths.forEach(indicatorPath => { @@ -1038,6 +1016,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple this.validateJsonPath(index); }); } + this.indicator.activePath = activePath; } deleteIndicatorOpen(section: Section, indicatorId: string, type: string, childrenAction: string = null) { @@ -1276,10 +1255,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple })); } - importIndicatorsAndSave(stakeholder: Stakeholder, charts: any[]) { + importIndicatorsAndSave(importIndicators: ImportIndicators) { let sectionsToSave: Section[] = []; let countIndicators = 0; - if (stakeholder.type !== this.stakeholder.type) { + if (importIndicators.stakeholder.type !== this.stakeholder.type) { UIkit.notification("The type of this profile is not the same with the file's one!", { status: 'warning', timeout: 6000, @@ -1290,26 +1269,26 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple } // name description additionalDescription, height, width, visibility let duplicates = 0; - for (let chart of charts) { - chart.visibility = this.showVisibility ? chart.visibility : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities); - if (!sectionsToSave[chart['sectionIndex']]) { - let sectionToSave = new Section(chart['sectionType'] ? chart['sectionType'] : chart['type'], chart['sectionTitle']); + for (let indicator of importIndicators.indicators) { + indicator.visibility = this.showVisibility ? indicator.visibility : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities); + if (!sectionsToSave[indicator['sectionIndex']]) { + let sectionToSave = new Section(indicator['sectionType'] ? indicator['sectionType'] : indicator['type'], indicator['sectionTitle']); sectionToSave.indicators = []; - sectionsToSave[chart['sectionIndex']] = sectionToSave; + sectionsToSave[indicator['sectionIndex']] = sectionToSave; } let exists = false; let indicatorPaths: IndicatorPath[] = []; // validate indicators' schema from file let invalid_file_message; - if (!chart.type) { + if (!indicator.type) { invalid_file_message = "No indicator type is specified. Type should be chart or number."; - } else if (chart.type != "chart" && chart.type != "number") { + } else if (indicator.type != "chart" && indicator.type != "number") { invalid_file_message = "Invalid indicator type. Type should be chart or number."; - } else if (chart.indicatorPaths.length === 0) { + } else if (indicator.indicatorPaths.length === 0) { invalid_file_message = "No indicator paths are specified." - } else if (chart.type == "number" && chart.indicatorPaths.filter(path => !path.jsonPath).length > 0) { + } else if (indicator.type == "number" && indicator.indicatorPaths.filter(path => !path.jsonPath).length > 0) { invalid_file_message = "No jsonPath is specified for number indicator." - } else if (chart.indicatorPaths.filter(path => !path.url).length > 0) { + } else if (indicator.indicatorPaths.filter(path => !path.url).length > 0) { invalid_file_message = "No indicator url is specified."; } @@ -1323,8 +1302,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple break; } - if (chart.type == "chart") { - indicatorPaths = chart.indicatorPaths.map(path => this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(path.url), path.url, chart.type, stakeholder, path.tab)); + if (indicator.type == "chart") { + indicatorPaths = indicator.indicatorPaths.map(path => this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(path.url), path.url, null, importIndicators.stakeholder, path.tab)); this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts.forEach((section: Section) => { section.indicators.forEach(indicator => { indicator.indicatorPaths.forEach(path => { @@ -1337,10 +1316,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple }); }); }); - } else if (chart.type == "number") { - indicatorPaths = chart.indicatorPaths.map(path => + } else if (indicator.type == "number") { + indicatorPaths = indicator.indicatorPaths.map(path => this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(path.url), path.url, - stakeholder, path.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(path.url)))); + importIndicators.stakeholder, path.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(path.url)))); this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers.forEach((section: Section) => { section.indicators.forEach(indicator => { indicator.indicatorPaths.forEach(path => { @@ -1355,8 +1334,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple }); } if (indicatorPaths.length > 0) { - let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility ? "RESTRICTED" : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), indicatorPaths); - sectionsToSave[chart['sectionIndex']].indicators.push(i); + let i: Indicator = new Indicator(indicator.name, indicator.description, indicator.additionalDescription, indicator.type, indicator.width, indicator.height, this.showVisibility ? "RESTRICTED" : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), indicatorPaths); + sectionsToSave[indicator['sectionIndex']].indicators.push(i); countIndicators++; } } @@ -1498,7 +1477,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple }); this.finish(); } else { - this.importIndicatorsAndSave(json.stakeholder, json.indicators); + this.importIndicatorsAndSave(json); } }, (error) => { console.error("Error importing files", error); diff --git a/monitor-admin/utils/indicator-utils.ts b/monitor-admin/utils/indicator-utils.ts index a30172dd..767d23fa 100644 --- a/monitor-admin/utils/indicator-utils.ts +++ b/monitor-admin/utils/indicator-utils.ts @@ -84,8 +84,6 @@ export class StakeholderConfiguration { {icon: 'incognito', value: "PRIVATE", label: 'Private'}, ]; public static CACHE_INDICATORS: boolean = true; - public static NUMBER_MULTI_INDICATOR_PATHS = false; - public static CHART_MULTI_INDICATOR_PATHS = true; public static openAccess: Map = new Map(); } @@ -119,14 +117,6 @@ export class StakeholderUtils { return StakeholderConfiguration.CACHE_INDICATORS; } - get hasMultiNumberIndicatorPaths() { - return StakeholderConfiguration.NUMBER_MULTI_INDICATOR_PATHS; - } - - get hasMultiChartIndicatorPaths() { - return StakeholderConfiguration.CHART_MULTI_INDICATOR_PATHS; - } - get openAccess(): Map { return StakeholderConfiguration.openAccess; } diff --git a/monitor-admin/utils/stakeholder-base.component.ts b/monitor-admin/utils/stakeholder-base.component.ts index 76daa8f5..6526f041 100644 --- a/monitor-admin/utils/stakeholder-base.component.ts +++ b/monitor-admin/utils/stakeholder-base.component.ts @@ -2,7 +2,7 @@ import {Directive} from "@angular/core"; import {BaseComponent} from "../../sharedComponents/base/base.component"; import {IndicatorUtils, StakeholderUtils} from "./indicator-utils"; import {ConnectHelper} from "../../connect/connectHelper"; -import {IndicatorSize} from "../../monitor/entities/stakeholder"; +import {Indicator, IndicatorSize} from "../../monitor/entities/stakeholder"; import {statsToolParser} from "./cache-indicators/cache-indicators"; @Directive() @@ -53,6 +53,7 @@ export abstract class StakeholderBaseComponent extends BaseComponent { export abstract class IndicatorStakeholderBaseComponent extends StakeholderBaseComponent { indicatorUtils: IndicatorUtils = new IndicatorUtils(); + indicator: Indicator; public getNumberClassBySize(size: IndicatorSize): string { if (size === 'small') { @@ -73,4 +74,15 @@ export abstract class IndicatorStakeholderBaseComponent extends StakeholderBaseC return 'uk-width-1-1'; } } + + public getActivePathIndex(indicator: Indicator = this.indicator): number { + return indicator?.activePath ? indicator.activePath : 0; + } + + public getActiveIndicatorPath(indicator: Indicator = this.indicator) { + if(indicator?.indicatorPaths.length > this.getActivePathIndex(indicator)) { + return indicator.indicatorPaths[this.getActivePathIndex(indicator)]; + } + return null; + } } diff --git a/monitor/entities/stakeholder.ts b/monitor/entities/stakeholder.ts index 277e2388..25f72033 100644 --- a/monitor/entities/stakeholder.ts +++ b/monitor/entities/stakeholder.ts @@ -16,6 +16,31 @@ export type Format = 'NUMBER' | 'PERCENTAGE'; export type Visibility = 'PUBLIC' | 'PRIVATE' | 'RESTRICTED'; export type Overlay = 'embed' | 'description' | false; +export interface IndicatorImport { + indicatorPaths?: IndicatorPathImport[]; + type: IndicatorType, + name: string, + description: string, + additionalDescription: string, + visibility: Visibility, + width: IndicatorSize, + height: IndicatorSize, + sectionTitle: string, + sectionType: IndicatorType, + sectionIndex: number +} + +export interface IndicatorPathImport { + jsonPath?: string[], + tab: string, + url: string +} + +export interface ImportIndicators { + stakeholder: Stakeholder, + indicators: IndicatorImport[] +} + export class ManageStakeholders { templates: (Stakeholder & StakeholderInfo)[]; standalone: (Stakeholder & StakeholderInfo)[]; diff --git a/sharedComponents/tabs/slider-tab.component.ts b/sharedComponents/tabs/slider-tab.component.ts index f585e095..b2113b55 100644 --- a/sharedComponents/tabs/slider-tab.component.ts +++ b/sharedComponents/tabs/slider-tab.component.ts @@ -15,6 +15,8 @@ export class SliderTabComponent { @Input() public disabled: boolean = false; @Input() + public invisible: boolean = false; + @Input() public align: 'left' | 'right' = 'left'; @Input() public routerLink: any[] | string | null | undefined = null; diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts index 095ef1d2..ae72cece 100644 --- a/sharedComponents/tabs/slider-tabs.component.ts +++ b/sharedComponents/tabs/slider-tabs.component.ts @@ -21,71 +21,71 @@ declare var UIkit; @Component({ selector: 'slider-tabs', template: ` -
- - - - - -
`, }) export class SliderTabsComponent implements AfterViewInit, OnDestroy { @@ -149,18 +149,18 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { private observer: IntersectionObserver; private timeout: Timeout; isServer: boolean; - + constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platform: any) { this.isServer = isPlatformServer(this.platform); } - + ngAfterViewInit() { this.initTabs(); this.tabs.changes.subscribe(() => { - this.initTabs(); + this.initTabs(); }); } @@ -194,7 +194,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { }); } } - + private scrollToStart() { this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => { let index = event.detail[0].index(); @@ -204,7 +204,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { } })); } - + private scrollable(slider = null) { this.activeFragment(this.route.snapshot.fragment, slider); this.subscriptions.push(this.route.fragment.subscribe(fragment => { @@ -212,7 +212,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { })); this.setObserver(); } - + private setObserver() { if (this.observer) { this.observer.disconnect(); @@ -249,7 +249,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { this.slider.show(this.activeIndex); } } - + private activeFragment(fragment, slider) { let index = 0; if (fragment) { @@ -268,15 +268,15 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy { }); this.cdr.detectChanges(); } - + get leftTabs(): SliderTabComponent[] { return this.tabs.toArray().filter(tab => tab.align === 'left'); } - + get rightTabs(): SliderTabComponent[] { return this.tabs.toArray().filter(tab => tab.align === 'right'); } - + ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) {