From a2b1bb8f7047042793acb512b0eecbe0b24be051 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 16 Apr 2024 16:08:05 +0300
Subject: [PATCH] [develop | FIXED | DONE]: Multi indicators paths fix
 dropdowns

---
 monitor-admin/topic/indicators.component.html | 22 +++++++++----------
 monitor-admin/topic/indicators.component.ts   | 20 +++++++++++------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 0b5b1aa1..7452df47 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -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>
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index cb29946d..715fba78 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -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;
   }