[develop | FIXED | DONE]: Multi indicators paths fix dropdowns
This commit is contained in:
parent
b729341199
commit
a2b1bb8f70
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue