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"> <hr class="uk-width-1-1">
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths"> <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
<div *ngIf="stakeholderUtils.hasMultiNumberIndicatorPaths" class="uk-margin-medium-bottom"> <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" <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-visible-toggle uk-flex uk-margin-small-top" transition-group-item
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i"> [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-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i" [class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (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> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element *ngIf="isEditable && isCurator" <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0;">
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0"> <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"> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon> <icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span> <span class="uk-margin-small-left uk-width-expand">Move Left</span>
@ -307,7 +306,7 @@
</a> </a>
</li> </li>
<li *ngIf="i < numberIndicatorPaths.length - 1"> <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"> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon> <icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span> <span class="uk-margin-small-left uk-width-expand">Move Right</span>
@ -479,7 +478,7 @@
</div> </div>
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1"> <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
<div *ngIf="stakeholderUtils.hasMultiChartIndicatorPaths" class="uk-margin-medium-bottom"> <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" <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-visible-toggle uk-flex uk-margin-small-top" transition-group-item
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i"> [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-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i" [class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (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> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element *ngIf="isEditable && isCurator" <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0;">
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0"> <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"> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon> <icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span> <span class="uk-margin-small-left uk-width-expand">Move Left</span>
@ -505,7 +503,7 @@
</a> </a>
</li> </li>
<li *ngIf="i < chartIndicatorPaths.length - 1"> <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"> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon> <icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span> <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('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent; @ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent;
/* Transition Groups */ /* Transition Groups */
@ViewChild('transitionGroup') transitionGroup: TransitionGroupComponent; @ViewChild('numbersTransition') numbersTransition: TransitionGroupComponent;
@ViewChild('chartsTransition') chartsTransition: TransitionGroupComponent;
public isFullscreen: boolean = false; public isFullscreen: boolean = false;
@ -590,7 +591,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public removeNumberIndicatorPath(index: number) { public removeNumberIndicatorPath(index: number) {
this.numberIndicatorPaths.removeAt(index); this.numberIndicatorPaths.removeAt(index);
this.indicator.indicatorPaths.splice(index, 1); this.indicator.indicatorPaths.splice(index, 1);
this.transitionGroup.init(); this.numbersTransition.init();
if (this.indicator.activePath === index) { if (this.indicator.activePath === index) {
this.activeNumberIndicatorPath(Math.max(0, index - 1)); this.activeNumberIndicatorPath(Math.max(0, index - 1));
} else if (this.indicator.activePath > index) { } else if (this.indicator.activePath > index) {
@ -602,7 +603,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public removeChartIndicatorPath(index: number) { public removeChartIndicatorPath(index: number) {
this.chartIndicatorPaths.removeAt(index); this.chartIndicatorPaths.removeAt(index);
this.indicator.indicatorPaths.splice(index, 1); this.indicator.indicatorPaths.splice(index, 1);
this.transitionGroup.init(); this.chartsTransition.init();
if (this.indicator.activePath === index) { if (this.indicator.activePath === index) {
this.activeChartIndicatorPath(Math.max(0, index - 1)); this.activeChartIndicatorPath(Math.max(0, index - 1));
} else if (this.indicator.activePath > index) { } else if (this.indicator.activePath > index) {
@ -612,9 +613,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
} }
public moveIndicatorPath(form: FormGroup, public moveIndicatorPath(form: FormGroup,
indicatorPaths: FormArray, index: number, type: 'number' | 'chart', index: number,
newIndex: number = index - 1) { 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 a = indicatorPaths.at(index);
let b = indicatorPaths.at(newIndex); let b = indicatorPaths.at(newIndex);
indicatorPaths.setControl(index, b); indicatorPaths.setControl(index, b);
@ -632,7 +638,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
let paths = this.numberIndicatorPaths; let paths = this.numberIndicatorPaths;
if (index == paths.length) { if (index == paths.length) {
this.addNumberIndicatorPath(); this.addNumberIndicatorPath();
this.transitionGroup.init(); this.numbersTransition.init();
} }
this.indicator.activePath = index; this.indicator.activePath = index;
} }
@ -641,7 +647,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
let paths = this.chartIndicatorPaths; let paths = this.chartIndicatorPaths;
if (index == paths.length) { if (index == paths.length) {
this.addChartIndicatorPath(); this.addChartIndicatorPath();
this.transitionGroup.init(); this.chartsTransition.init();
} }
this.indicator.activePath = index; this.indicator.activePath = index;
} }