MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add slider tabs in indicators multi chart.

This commit is contained in:
Konstantinos Triantafyllou 2024-05-30 13:59:07 +03:00
parent 65a60ddad1
commit 5197f88ade
5 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
monitor-admin/topic/indicators.component.html
View File

@ -181,19 +181,6 @@
class="uk-text-center uk-text-bold uk-margin-small-bottom">
{{ indicator.name }}
</div>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-margin-medium-bottom">
<ul class="uk-subnav uk-subnav-pill uk-subnav-small">
<li *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
class="uk-flex uk-margin-small-top"
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
<a (click)="indicator.activePath = i">
<span>
{{ indicatorPath.parameters.title ? indicatorPath.parameters.title : '--' }}
</span>
</a>
</li>
</ul>
</div>
<iframe *ngIf="!properties.disableFrameLoad && getActiveIndicatorPath(indicator) && getActiveIndicatorPath(indicator).source !=='image' &&
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, getActiveIndicatorPath(indicator)))"
allowfullscreen="true" mozallowfullscreen="true"
@ -213,6 +200,13 @@
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
[src]="getActiveIndicatorPath(indicator).url">
</div>
<slider-tabs *ngIf="indicator.indicatorPaths.length > 1" [type]="'dynamic'" [flexPosition]="'right'" (activeEmitter)="indicator.activePath = $event"
tabsClass="uk-subnav uk-subnav-pill uk-subnav-small" containerClass="uk-margin-top uk-margin-bottom" [border]="false">
<slider-tab *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
[tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title"
[tabId]="i" [active]="(!indicator.activePath && i == 0) || indicator.activePath == i">
</slider-tab>
</slider-tabs>
</div>
</div>
</div>
@ -483,7 +477,7 @@
class="uk-visible-toggle uk-flex uk-margin-small-top" transition-group-item
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
<a (click)="activeChartIndicatorPath(i)">
<span>{{ getParameter(i, 'title')?.get('value')?.value ? getParameter(i, 'title').get('value').value : 'No title yet' }}</span>
<span>{{ getParameter(i, 'tab')?.get('value')?.value ? getParameter(i, 'tab').get('value').value : 'No title yet' }}</span>
</a>
<span *ngIf="!indicator.defaultId && chartIndicatorPaths.length > 1"
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
@ -548,6 +542,9 @@
</div>
<div class="uk-width-1-1" formArrayName="parameters">
<div class="uk-grid" uk-grid>
<div *ngIf="stakeholderUtils.hasMultiChartIndicatorPaths && getParameter(i, 'tab')" input class="uk-width-1-1"
[formInput]="getParameter(i, 'tab').get('value')"
placeholder="Tab Title"></div>
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1"
[formInput]="getParameter(i, 'title').get('value')"
placeholder="Chart Title"></div>

3
monitor-admin/topic/indicators.component.ts
View File

@ -668,6 +668,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
if(!indicatorPath.parameters.statsProfile) {
indicatorPath.parameters.statsProfile = null;
}
if(!indicatorPath.parameters.tab) {
indicatorPath.parameters.tab = indicatorPath.parameters.title;
}
Object.keys(indicatorPath.parameters).forEach(key => {
if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
if (this.indicatorUtils.parametersValidators.has(key)) {

1
monitor-admin/utils/indicator-utils.ts
View File

@ -987,6 +987,7 @@ export class IndicatorUtils {
obj[this.getDescriptionObjectName(obj)]["options"]["title"] = ChartHelper.prefix + "title" + ChartHelper.suffix;
}
indicatorPath.parameters["title"] = title ? title : "";
indicatorPath.parameters["tab"] = title ? title : "";
}
private extractSubTitle(obj, indicatorPath: IndicatorPath) {

2
sharedComponents/tabs/slider-tab.component.ts
View File

@ -9,7 +9,7 @@ export class SliderTabComponent {
@Input("tabTitle")
public title: string;
@Input("tabId")
public id: string;
public id: string | number;
@Input()
public active: boolean = false;
@Input()

4
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -143,7 +143,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
/**
* Notify regarding new active element
* */
@Output() activeEmitter: EventEmitter<string> = new EventEmitter<string>();
@Output() activeEmitter: EventEmitter<string | number> = new EventEmitter<number>();
private activeIndex: number = 0;
private subscriptions: any[] = [];
private observer: IntersectionObserver;
@ -235,7 +235,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
});
}, {threshold: 0.1});
this.tabs.forEach(tab => {
let element = document.getElementById(tab.id);
let element = document.getElementById(tab.id.toString());
if (element) {
this.observer.observe(element);
}