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

[develop | FIXED | DONE]: Multi indicators paths fix dropdowns

This commit is contained in:
Konstantinos Triantafyllou 2024-04-16 16:08:05 +03:00
parent b729341199
commit a2b1bb8f70
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -276,7 +276,7 @@
<hr class="uk-width-1-1">
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
<div *ngIf="stakeholderUtils.hasMultiNumberIndicatorPaths" class="uk-margin-medium-bottom">
<ul #transitionGroup class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
<ul #numbersTransition class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
<li *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
class="uk-visible-toggle uk-flex uk-margin-small-top" transition-group-item
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
@ -292,14 +292,13 @@
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<a *ngIf="isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element *ngIf="isEditable && isCurator"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0;">
<ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0">
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, i)">
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, 'number', i)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
@ -307,7 +306,7 @@
</a>
</li>
<li *ngIf="i < numberIndicatorPaths.length - 1">
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, i, i + 1)">
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, 'number', i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span>
@ -479,7 +478,7 @@
</div>
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
<div *ngIf="stakeholderUtils.hasMultiChartIndicatorPaths" class="uk-margin-medium-bottom">
<ul #transitionGroup class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
<ul #chartsTransition class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
<li *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index"
class="uk-visible-toggle uk-flex uk-margin-small-top" transition-group-item
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
@ -490,14 +489,13 @@
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<a *ngIf="isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element *ngIf="isEditable && isCurator"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0;">
<ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0">
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, i)">
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, 'chart', i)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
@ -505,7 +503,7 @@
</a>
</li>
<li *ngIf="i < chartIndicatorPaths.length - 1">
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, i, i + 1)">
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, 'chart', i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span>

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

@ -102,7 +102,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
@ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent;
/* Transition Groups */
@ViewChild('transitionGroup') transitionGroup: TransitionGroupComponent;
@ViewChild('numbersTransition') numbersTransition: TransitionGroupComponent;
@ViewChild('chartsTransition') chartsTransition: TransitionGroupComponent;
public isFullscreen: boolean = false;
@ -590,7 +591,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public removeNumberIndicatorPath(index: number) {
this.numberIndicatorPaths.removeAt(index);
this.indicator.indicatorPaths.splice(index, 1);
this.transitionGroup.init();
this.numbersTransition.init();
if (this.indicator.activePath === index) {
this.activeNumberIndicatorPath(Math.max(0, index - 1));
} else if (this.indicator.activePath > index) {
@ -602,7 +603,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public removeChartIndicatorPath(index: number) {
this.chartIndicatorPaths.removeAt(index);
this.indicator.indicatorPaths.splice(index, 1);
this.transitionGroup.init();
this.chartsTransition.init();
if (this.indicator.activePath === index) {
this.activeChartIndicatorPath(Math.max(0, index - 1));
} else if (this.indicator.activePath > index) {
@ -612,9 +613,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
}
public moveIndicatorPath(form: FormGroup,
indicatorPaths: FormArray, index: number,
type: 'number' | 'chart', index: number,
newIndex: number = index - 1) {
this.transitionGroup.init();
let indicatorPaths = type == 'number'?this.numberIndicatorPaths:this.chartIndicatorPaths;
if(type == 'number') {
this.numbersTransition.init();
} else {
this.chartsTransition.init();
}
let a = indicatorPaths.at(index);
let b = indicatorPaths.at(newIndex);
indicatorPaths.setControl(index, b);
@ -632,7 +638,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
let paths = this.numberIndicatorPaths;
if (index == paths.length) {
this.addNumberIndicatorPath();
this.transitionGroup.init();
this.numbersTransition.init();
}
this.indicator.activePath = index;
}
@ -641,7 +647,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
let paths = this.chartIndicatorPaths;
if (index == paths.length) {
this.addChartIndicatorPath();
this.transitionGroup.init();
this.chartsTransition.init();
}
this.indicator.activePath = index;
}