From 5197f88ade39de6b779963fe9ccfa5871564ca0f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 30 May 2024 13:59:07 +0300
Subject: [PATCH] Add slider tabs in indicators multi chart.

---
 monitor-admin/topic/indicators.component.html | 25 ++++++++-----------
 monitor-admin/topic/indicators.component.ts   |  3 +++
 monitor-admin/utils/indicator-utils.ts        |  1 +
 sharedComponents/tabs/slider-tab.component.ts |  2 +-
 .../tabs/slider-tabs.component.ts             |  4 +--
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 7452df47..21d0f0e2 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -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>
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 715fba78..49cae7bb 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -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)) {
diff --git a/monitor-admin/utils/indicator-utils.ts b/monitor-admin/utils/indicator-utils.ts
index 39b88646..8cb35b35 100644
--- a/monitor-admin/utils/indicator-utils.ts
+++ b/monitor-admin/utils/indicator-utils.ts
@@ -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) {
diff --git a/sharedComponents/tabs/slider-tab.component.ts b/sharedComponents/tabs/slider-tab.component.ts
index 6302affe..f585e095 100644
--- a/sharedComponents/tabs/slider-tab.component.ts
+++ b/sharedComponents/tabs/slider-tab.component.ts
@@ -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()
diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index 666f90a2..ae37843d 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@@ -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);
       }