From b0c69be6ef3e55089d7032f0d1457c874652974f Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Fri, 8 Mar 2024 12:50:55 +0200
Subject: [PATCH 01/27] [develop | DONE | ADDED] irish-monitor: add new
 BehaviorSubject for enabling/disabling help-pop-up component on admin and
 non-admin pages

---
 dashboard/sharedComponents/sidebar/layout.service.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts
index 17657431..dc515f81 100644
--- a/dashboard/sharedComponents/sidebar/layout.service.ts
+++ b/dashboard/sharedComponents/sidebar/layout.service.ts
@@ -88,6 +88,10 @@ export class LayoutService {
    * Handle it manually in the component, it doesn't use data
    * */
   private rootClassSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);
+  /**
+   * Display help pop-up on non-admin pages. (default true for the rest of the pages)
+   * */
+  private hasHelpPopUpSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
   private subscriptions: any[] = [];
 
   ngOnDestroy() {
@@ -343,4 +347,12 @@ export class LayoutService {
       this.rootClassSubject.next(value);
     }
   }
+
+  get hasHelpPopUp(): Observable<boolean> {
+    return this.hasHelpPopUpSubject.asObservable();
+  }
+
+  setHasHelpPopUp(value: boolean) {
+    this.hasHelpPopUpSubject.next(value);
+  }
 }

From 622459c26c5db0c832e9b159d0558b15b86800c8 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 12 Mar 2024 19:24:50 +0200
Subject: [PATCH 02/27] [develop]: Helper class: Remove group from mapType.

---
 login/utils/helper.class.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/login/utils/helper.class.ts b/login/utils/helper.class.ts
index 6f2a2951..152cda48 100644
--- a/login/utils/helper.class.ts
+++ b/login/utils/helper.class.ts
@@ -234,6 +234,7 @@ export class Role {
   }
 
   public static mapType(type: string, communityMap: boolean = true): string {
+    type = type.replace(this.GROUP, '');
     if (type == "ri" && communityMap) {
       type = "community";
     } else if (type == "organization") {

From 6b907fe97d765773e2865c748a6edf9fe4c2b866 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Wed, 13 Mar 2024 12:04:23 +0200
Subject: [PATCH 03/27] [develop | DONE | ADDED] add method for grouped count
 queries that goes through the cache

---
 services/searchResearchResults.service.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/services/searchResearchResults.service.ts b/services/searchResearchResults.service.ts
index 3e49a7cc..aadcd730 100644
--- a/services/searchResearchResults.service.ts
+++ b/services/searchResearchResults.service.ts
@@ -133,7 +133,14 @@ export class SearchResearchResultsService {
     return this.http.get((properties.useLongCache && size == 0 && !params && (!refineQuery || !refineQuery.includes("fq="))) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
         .pipe(map(res => [res['meta'].total, this.parseResults(resultType, res['results'], properties), RefineResultsUtils.parse(res['refineResults'], refineFields, "publication")]));
   }
+ countResults(field:string,value:string): any {
+    let url = properties.utilsService + "/portals/countResults";
+    if (field && value) {
+      url += "?field=" + encodeURIComponent(field) + "&value="+encodeURIComponent(value);
+    }
 
+    return this.http.get((properties.useLongCache  ) ? (properties.cacheUrl + encodeURIComponent(url)) : url);
+  }
   searchResultForEntity(resultType: string, params: string, page: number, size: number, properties: EnvProperties): any {
     let link = properties.searchAPIURLLAst;
     //let url = link+params+"/"+this.getEntityQueryName(resultType,true)+ "?format=json";

From c64df204052a07c4e061d97492283b775dcc8bb3 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Thu, 14 Mar 2024 09:28:33 +0200
Subject: [PATCH 04/27] [develop | DONE | ADDED] add orcid-core module, without
 the routing - use it in other components instead of orcid module

---
 landingPages/result/resultLanding.module.ts   |  4 +-
 .../searchMyOrcidResults.module.ts            |  4 +-
 orcid/orcid-core.module.ts                    | 43 +++++++++++++++++++
 orcid/orcid.module.ts                         | 36 ++--------------
 utils/result-preview/result-preview.module.ts |  4 +-
 5 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 orcid/orcid-core.module.ts

diff --git a/landingPages/result/resultLanding.module.ts b/landingPages/result/resultLanding.module.ts
index 8554f354..2d7dfc11 100644
--- a/landingPages/result/resultLanding.module.ts
+++ b/landingPages/result/resultLanding.module.ts
@@ -26,7 +26,6 @@ import {ResultPreviewModule} from "../../utils/result-preview/result-preview.mod
 import {FeedbackModule} from "../feedback/feedback.module";
 import {TabsModule} from "../../utils/tabs/tabs.module";
 import {LoadingModule} from "../../utils/loading/loading.module";
-import {OrcidModule} from "../../orcid/orcid.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {IconsService} from "../../utils/icons/icons.service";
 import {cite, fire, graph, landmark, link, link_to, quotes, rocket, versions} from "../../utils/icons/icons";
@@ -38,6 +37,7 @@ import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-sc
 import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
 import {EntityActionsModule} from "../../utils/entity-actions/entity-actions.module";
 import {ResultLandingRoutingModule} from "./resultLanding-routing.module";
+import {OrcidCoreModule} from "../../orcid/orcid-core.module";
 
 @NgModule({
   imports: [
@@ -47,7 +47,7 @@ import {ResultLandingRoutingModule} from "./resultLanding-routing.module";
     AltMetricsModule, Schema2jsonldModule, SEOServiceModule,
     DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule,
     LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule,
-    OrcidModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
+    OrcidCoreModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
     SdgFosSuggestModule, FullScreenModalModule, SafeHtmlPipeModule, EntityActionsModule
   ],
   declarations: [
diff --git a/orcid/my-orcid-links/searchMyOrcidResults.module.ts b/orcid/my-orcid-links/searchMyOrcidResults.module.ts
index 87ce11d0..66cf5358 100644
--- a/orcid/my-orcid-links/searchMyOrcidResults.module.ts
+++ b/orcid/my-orcid-links/searchMyOrcidResults.module.ts
@@ -6,15 +6,15 @@ import {RouterModule} from '@angular/router';
 import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
 import {ErrorMessagesModule} from "../../utils/errorMessages.module";
 import {searcMyOrcidResultsComponent} from "./searchMyOrcidResults.component";
-import {OrcidModule} from "../orcid.module";
 import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module";
 import {PagingModule} from "../../utils/paging.module";
+import {OrcidCoreModule} from "../orcid-core.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
     RouterModule, ErrorMessagesModule,
-    ResultPreviewModule, OrcidModule, NoLoadPaging, PagingModule
+    ResultPreviewModule, OrcidCoreModule, NoLoadPaging, PagingModule
   ],
   declarations: [
     searcMyOrcidResultsComponent
diff --git a/orcid/orcid-core.module.ts b/orcid/orcid-core.module.ts
new file mode 100644
index 00000000..eda20ab1
--- /dev/null
+++ b/orcid/orcid-core.module.ts
@@ -0,0 +1,43 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {RouterModule} from '@angular/router';
+
+import {OrcidComponent} from './orcid.component';
+import {OrcidService} from './orcid.service';
+import {OrcidWorkComponent} from './orcid-work.component';
+import {AlertModalModule} from '../utils/modal/alertModal.module';
+import {ResultLandingService} from '../landingPages/result/resultLanding.service';
+import {LoadingModule} from '../utils/loading/loading.module';
+import {ResultLandingUtilsModule} from '../landingPages/landing-utils/resultLandingUtils.module';
+import {IconsModule} from '../utils/icons/icons.module';
+import {IconsService} from "../utils/icons/icons.service";
+import {orcid_add, orcid_bin} from "../utils/icons/icons";
+import {FullScreenModalModule} from "../utils/modal/full-screen-modal/full-screen-modal.module";
+import {LogServiceModule} from "../utils/log/LogService.module";
+import {OrcidRoutingModule} from "./orcid-routing.module";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, AlertModalModule, LoadingModule, ResultLandingUtilsModule,
+    IconsModule, FullScreenModalModule, LogServiceModule
+  ],
+  declarations: [
+    OrcidComponent,
+    OrcidWorkComponent
+  ],
+  providers:[
+    OrcidService, ResultLandingService
+  ],
+  exports: [
+    OrcidComponent,
+    OrcidWorkComponent
+  ]
+})
+
+
+export class OrcidCoreModule{
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([orcid_add, orcid_bin])
+  }
+}
diff --git a/orcid/orcid.module.ts b/orcid/orcid.module.ts
index 54bae78b..5743c46a 100644
--- a/orcid/orcid.module.ts
+++ b/orcid/orcid.module.ts
@@ -1,43 +1,15 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {RouterModule} from '@angular/router';
-
-import {OrcidComponent} from './orcid.component';
-import {OrcidService} from './orcid.service';
-import {OrcidWorkComponent} from './orcid-work.component';
-import {AlertModalModule} from '../utils/modal/alertModal.module';
-import {ResultLandingService} from '../landingPages/result/resultLanding.service';
-import {LoadingModule} from '../utils/loading/loading.module';
-import {ResultLandingUtilsModule} from '../landingPages/landing-utils/resultLandingUtils.module';
-import {IconsModule} from '../utils/icons/icons.module';
 import {IconsService} from "../utils/icons/icons.service";
 import {orcid_add, orcid_bin} from "../utils/icons/icons";
-import {FullScreenModalModule} from "../utils/modal/full-screen-modal/full-screen-modal.module";
-import {LogServiceModule} from "../utils/log/LogService.module";
 import {OrcidRoutingModule} from "./orcid-routing.module";
+import {OrcidCoreModule} from "./orcid-core.module";
+import {OrcidComponent} from "./orcid.component";
 
 @NgModule({
-  imports: [
-    CommonModule, RouterModule, OrcidRoutingModule, AlertModalModule, LoadingModule, ResultLandingUtilsModule,
-    IconsModule, FullScreenModalModule, LogServiceModule
-  ],
-  declarations: [
-    OrcidComponent,
-    OrcidWorkComponent
-  ],
-  providers:[
-    OrcidService, ResultLandingService
-  ],
-  exports: [
-    OrcidComponent,
-    OrcidWorkComponent
-  ]
+  imports: [OrcidCoreModule, OrcidRoutingModule],
+  exports: [OrcidComponent]
 })
 
 
 export class OrcidModule{
-  constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([orcid_add, orcid_bin])
-  }
 }
diff --git a/utils/result-preview/result-preview.module.ts b/utils/result-preview/result-preview.module.ts
index 5ad90baf..12726cc6 100644
--- a/utils/result-preview/result-preview.module.ts
+++ b/utils/result-preview/result-preview.module.ts
@@ -4,15 +4,15 @@ import {ResultPreviewComponent} from "./result-preview.component";
 import {RouterModule} from "@angular/router";
 import {ShowAuthorsModule} from "../authors/showAuthors.module";
 import {ResultLandingUtilsModule} from "../../landingPages/landing-utils/resultLandingUtils.module";
-import {OrcidModule} from "../../orcid/orcid.module";
 import {IconsModule} from "../icons/icons.module";
 import {IconsService} from "../icons/icons.service";
 import {cite, fire, landmark, link, link_to, quotes, rocket} from "../icons/icons";
 import {EntityActionsModule} from "../entity-actions/entity-actions.module";
 import {EntityMetadataModule} from "../../landingPages/landing-utils/entity-metadata.module";
+import {OrcidCoreModule} from "../../orcid/orcid-core.module";
 
 @NgModule({
-  imports: [CommonModule, RouterModule, ShowAuthorsModule, ResultLandingUtilsModule, OrcidModule, IconsModule, EntityActionsModule, EntityMetadataModule],
+  imports: [CommonModule, RouterModule, ShowAuthorsModule, ResultLandingUtilsModule, OrcidCoreModule, IconsModule, EntityActionsModule, EntityMetadataModule],
   declarations: [ResultPreviewComponent],
   exports: [ResultPreviewComponent]
 })

From ca8b732a640cd222bc6a3a2792a98214dcd8e305 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 15 Mar 2024 15:43:58 +0200
Subject: [PATCH 05/27] [develop | DONE | ADDED]: menu.ts: In MenuItem class
 added field "badge?: string", which is used only in FAIRCORE4EOSC |
 navigationBar.component.html: Added <span> in menu item (only in no-link
 parent), to show a badge in FAIRCORE4EOSC.

---
 sharedComponents/menu.ts                      | 4 +++-
 sharedComponents/navigationBar.component.html | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts
index e3b38e60..b4328834 100644
--- a/sharedComponents/menu.ts
+++ b/sharedComponents/menu.ts
@@ -23,10 +23,11 @@ export class MenuItem {
   isFeatured: boolean;
   isActive: boolean;
   target: string = "_blank";
+  badge?: string = ""; // used only for RDGraph portal (FAIRCORE4EOSC)
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
               routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null,
-              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = []) {
+              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = [], badge: string = "") {
     this._id = id;
     this.title = title;
     this.url = url;
@@ -43,6 +44,7 @@ export class MenuItem {
     this.target = target;
     this.type = type;
     this.isFeatured = isFeatured;
+    this.badge = badge;
   }
 
   public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 7f502eab..a0147369 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -41,7 +41,9 @@
                   <a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [queryParams]="menu.params"
-                     [fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
+                     [fragment]="menu.fragment">
+                    <span *ngIf="menu.badge" style="position: relative"><span class="badge-mobile">{{menu.badge}}</span></span>
+                    {{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
                   <a *ngIf="menu.url"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [href]="menu.items.length === 0?menu.url:null"
@@ -215,7 +217,9 @@
                       <a *ngIf="menu.route.length == 0 && menu.url.length > 0"
                          href="{{menu.url}}" target="{{menu.target}}"
                          [class.custom-external]="menu.target != '_self'">{{menu.title}}</a>
-                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">{{menu.title}}</a>
+                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">
+                        <span *ngIf="menu.badge" class="badge">{{menu.badge}}</span>
+                        {{menu.title}}</a>
                       <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto">
                         <!-- Do not delete this div, because it will remove the margin bottom of navbar -->
                         <div>

From 6c4a4d9721030ad43ca7e4112a9bc8c548557123 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 19 Mar 2024 12:55:39 +0200
Subject: [PATCH 06/27] [develop | DONE | ADDED] add new custom classes fo
 slider-tabs container

---
 sharedComponents/tabs/slider-tabs.component.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index d4246f23..84cfbd1c 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@@ -20,7 +20,7 @@ declare var UIkit;
   template: `
     <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
          [ngClass]="customClass">
-      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
+      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'" [ngClass]="containerClass">
         <ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
             [class.uk-slider-items]="position === 'horizontal'"
             [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
@@ -112,6 +112,11 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
    * */
   @Input()
   public flexPosition: 'center' | 'left' | 'right' = 'left';
+  /**
+   * Set a class for the container
+   * */
+  @Input()
+  public containerClass: string;
   /**
    * Set a class above tabs
    * */
@@ -164,7 +169,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
             }
           });
           if (this.type === 'static') {
-            let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
+            let tabs = UIkit.switcher(this.tabsElement.nativeElement, {connect: this.connect});
             tabs.show(this.activeIndex);
             if (this.connect.includes('#')) {
               this.scrollToStart();

From b6cda48e2fa1db6a2361a862c1fd959077fde58c Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 27 Mar 2024 16:30:38 +0200
Subject: [PATCH 07/27] [develop | DONE | ADDED]: searchFields.base.ts: Added
 static "triplet" refine (facet) field "haslicense".

---
 utils/properties/searchFields.base.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/utils/properties/searchFields.base.ts b/utils/properties/searchFields.base.ts
index 79ece5b3..98c6a020 100644
--- a/utils/properties/searchFields.base.ts
+++ b/utils/properties/searchFields.base.ts
@@ -333,6 +333,14 @@ export class SearchFieldsBase {
       operator: "pf",
       equalityOperator: " = ",
       filterType: "triplet"
+    },
+    ["haslicense"]: {
+      name: "License",
+      type: "triplet",
+      param: "haslicense",
+      operator: "hl",
+      equalityOperator: " = ",
+      filterType: "triplet"
     }
   };
 
@@ -369,6 +377,11 @@ export class SearchFieldsBase {
       { name: "All", id: "", count: "0" },
       { name: "Yes", id: "true", count: "0" },
       { name: "No", id: "false", count: "0" }
+    ],
+    ["haslicense"]: [
+      { name: "All", id: "", count: "0" },
+      { name: "Yes", id: "true", count: "0" },
+      { name: "No", id: "false", count: "0" }
     ]
   };
 

From cafe0e4926f0d9762cd59a71ce1779743db34771 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 28 Mar 2024 13:07:11 +0200
Subject: [PATCH 08/27] [develop | DONE | ADDED] displayClaims: add bulk delete
 functionality for claims, change the claims cards to a more compact claims
 list

---
 .../displayClaims.component.html              | 109 ++++++++++--------
 .../displayClaims.component.less              |  10 --
 .../displayClaims/displayClaims.component.ts  |  68 +++++++++--
 .../claimEntityFormatter.component.ts         |  17 +--
 .../projectTitleFormatter.component.ts        |   2 +-
 5 files changed, 133 insertions(+), 73 deletions(-)

diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index bdcc74b3..94034a2e 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -56,57 +56,76 @@
           <div *ngIf="claims && claims.length == 0"  class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
             <div>No links found</div>
           </div>
-          <ul class="uk-margin-small-top uk-list uk-list-xlarge">
-            <li *ngFor="let claim of claims;  let i=index" class="uk-card uk-card-default">
-              <div class="uk-card-body">
-                <div class="uk-grid uk-grid-small" uk-grid>
-                  <div class="uk-width-expand">
-                    <div class="uk-margin-bottom">
-                      <claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
-                                    [externalPortalUrl]=externalPortalUrl [source]="true" [linkAvailable]="isClaimAvailable(claim)"></claim-entity>
-                    </div>
-                    <div class="uk-margin-bottom">
-                      <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success"
-                            [attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
-                      <ng-template #notAvailable>
-                        <span class="uk-label uk-label-danger"
-                            [attr.uk-tooltip]="'title:The link information  will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
-                      </ng-template>
-                    </div>
-                    <div class="uk-text-small">
-                      <div *ngIf="showUserEmail" class="uk-margin-small-bottom">
-                        <span class="uk-text-meta">Claimed by:</span>
-                        <span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
+          <ng-container *ngIf="claims && claims.length > 0">
+
+            <div class="uk-flex uk-flex-middle uk-margin-top uk-margin-small-bottom uk-padding-small uk-padding-remove-horizontal">
+              <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                <label>
+                  <input id="checkAll" type="checkbox" (click)="selectAll($event)" class="uk-checkbox" title="Select All"
+                    [ngModel]="selected.length == claims.length"/>
+                </label>
+              </div>
+              <button class="uk-button uk-button-link" [class.uk-disabled]="selected.length == 0" [disabled]="selected.length == 0"
+                (click)="deleteOpen()">
+                <span>Delete ({{selected.length}})</span>
+              </button>
+            </div>
+
+            <ul class="uk-margin-small-top uk-list uk-list-striped">
+              <li *ngFor="let claim of claims;  let i=index" class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-horizontal">
+                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                  <input type="checkbox" class="uk-checkbox"
+                    [id]="claim.id" (click)="selectClaim(claim, $event)" [ngModel]="isSelectedClaim(claim.id)">
+                </div>
+                <div class="uk-width-expand">
+                  <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                      <div class="uk-margin-small-bottom">
+                        <claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
+                                      [externalPortalUrl]=externalPortalUrl [source]="true" [linkAvailable]="isClaimAvailable(claim)"></claim-entity>
                       </div>
-                      <div>
-                        <span class="uk-text-meta">Claimed date:</span>
-                        <span class="uk-margin-xsmall-left">{{claim.date}}</span>
+                      <div class="uk-margin-small-bottom">
+                        <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-small uk-label-success"
+                              [attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
+                        <ng-template #notAvailable>
+                          <span class="uk-label uk-label-small uk-label-danger"
+                              [attr.uk-tooltip]="'title:The link information  will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
+                        </ng-template>
+                      </div>
+                      <div class="uk-text-small">
+                        <div *ngIf="showUserEmail" class="uk-margin-xsmall-bottom">
+                          <span class="uk-text-meta">Claimed by:</span>
+                          <span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
+                        </div>
+                        <div>
+                          <span class="uk-text-meta">Claimed date:</span>
+                          <span class="uk-margin-xsmall-left">{{claim.date}}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="uk-visible@m">
-                    <div class="claim-divider">
-                      <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
+                    <div class="uk-visible@m">
+                      <div class="claim-divider">
+                        <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
+                      </div>
+                    </div>
+                    <div class="uk-width-1-2@m uk-width-1-1">
+                      <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
+                                    [externalPortalUrl]=externalPortalUrl></claim-entity>
                     </div>
-                  </div>
-                  <div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">
-                    <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
-                                  [externalPortalUrl]=externalPortalUrl></claim-entity>
                   </div>
                 </div>
-              </div>
-              <div class="uk-card-footer uk-flex uk-flex-right">
-                <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
-                  <icon name="delete" [flex]="true"></icon>
-                  <span class="uk-margin-xsmall-left">Delete</span>
-                </button>
-              </div>
-            </li>
-          </ul>
-          <div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
-            <paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
-                            (pageChange)="pageChange($event)"></paging-no-load>
-          </div>
+                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                  <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
+                    <icon name="delete" [flex]="true"></icon>
+                  </button>
+                </div>
+              </li>
+            </ul>
+            <div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
+              <paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
+                              (pageChange)="pageChange($event)"></paging-no-load>
+            </div>
+          </ng-container>
         </div>
       </div>
     </div>
diff --git a/claims/claim-utils/displayClaims/displayClaims.component.less b/claims/claim-utils/displayClaims/displayClaims.component.less
index 0eadec18..e322586c 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.less
+++ b/claims/claim-utils/displayClaims/displayClaims.component.less
@@ -4,14 +4,4 @@
   position: relative;
   padding: 0 20px;
   height: 100%;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    right: 0;
-    bottom: 0;
-    border-left: @global-border-width solid @global-border;
-  }
 }
diff --git a/claims/claim-utils/displayClaims/displayClaims.component.ts b/claims/claim-utils/displayClaims/displayClaims.component.ts
index 9e5ccf97..8f24cf4d 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.ts
+++ b/claims/claim-utils/displayClaims/displayClaims.component.ts
@@ -52,6 +52,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   lastIndexDate = null;
   public filterForm: FormGroup;
   public entities: string[] = [];
+  selected = [];
   
   allOptions: Option[] = [
     {label: OpenaireEntities.PUBLICATIONS, value: "publication"},
@@ -310,23 +311,34 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   }
   
   isSelected(value: string) {
-    return this.filterForm && this.filterForm.get('entities').value.find(entity => entity === value)
+    return this.filterForm && this.filterForm.get('entities').value.find(entity => entity === value);
   }
   
-  deleteOpen(index: number) {
+  deleteOpen(index: number = null) {
     this.index = index;
     this.deleteModal.alertTitle = 'Delete Confirmation';
-    this.deleteModal.message = 'Are you sure you want to delete this link?';
+    this.deleteModal.message = 'Are you sure you want to delete ' + (this.index != null ? '1' : this.selected.length) + ' link(s)?';
     this.deleteModal.okButtonText = 'Yes';
     this.deleteModal.open();
   }
   
   delete() {
-    this.subscriptions.push(this._claimService.deleteBulk([this.claims[this.index].id], this.properties.claimsAPIURL).subscribe(
+    let claimsToBeDeleted = ((this.index != null) ? [this.claims[this.index].id] : this.selected.map(claim => claim.id));
+    console.log(claimsToBeDeleted);
+    this.subscriptions.push(this._claimService.deleteBulk(claimsToBeDeleted, this.properties.claimsAPIURL).subscribe(
       res => {
-        this.claims.splice(this.index, 1);
-        this.resultsNum = this.resultsNum - 1;
-        NotificationHandler.rise('Link has been deleted successfully');
+        if (this.index != null) {
+          this.claims.splice(this.index, 1);
+          this.resultsNum = this.resultsNum - 1;
+          NotificationHandler.rise('Link has been deleted successfully');
+        } else {
+          claimsToBeDeleted.forEach(claimId => {
+            this.claims.splice(this.claims.findIndex((id) => id == claimId), 1);
+          });
+          this.resultsNum = this.resultsNum - claimsToBeDeleted.length;
+          NotificationHandler.rise(claimsToBeDeleted.length + ' links have been deleted successfully');
+        }
+        this.selected = [];
         let goToPage = this.page;
         if (this.totalPages(this.resultsNum) < this.page && this.page > 0) {
           goToPage = this.page - 1;
@@ -334,7 +346,8 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
         this.goTo(goToPage);
       }, err => {
         this.handleErrors(err, "Error deleting claim with id: " + this.claims[this.index].id);
-      }));
+      }
+    ));
   }
   
   pageChange($event) {
@@ -362,7 +375,44 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
     }
     return totalPages;
   }
-  
+
+  selectClaim(item: any, event) {
+    let value = event.currentTarget.checked;
+    if (value) {
+      this.selected.push(item);
+    } else {
+      for (var _i = 0; _i < this.selected.length; _i++) {
+        let claim = this.selected[_i];
+        if (claim['id'] == item.id) {
+          this.selected.splice(_i, 1);
+        }
+      }
+    }
+  }
+
+  selectAll(event) {
+    let value = event.currentTarget.checked;
+    if (value) {
+      this.selected = [];
+      for (let _i = 0; _i < this.claims.length; _i++) {
+        let claim = this.claims[_i];
+        this.selected.push(claim);
+      }
+    } else {
+      this.selected = [];
+    }
+  }
+
+  isSelectedClaim(id: string) {
+    for (let _i = 0; _i < this.selected.length; _i++) {
+      let claim = this.selected[_i];
+      if (claim['id'] == id) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   private updateDescription(description: string) {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");
diff --git a/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts b/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
index 6102d684..547e4c16 100644
--- a/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
+++ b/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
@@ -15,21 +15,22 @@ import {StringUtils} from "../../../utils/string-utils.class";
       <div *ngIf="source" class="uk-text-small">
         {{getEntityName(type)}}
       </div>
-      <div class="uk-flex">
-        <span *ngIf="!source" class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
+      <div>
+        <span *ngIf="!source" class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
         <publication-title [entity]="entity" param="id"
                            path="/search/result" [externalPortalUrl]=externalPortalUrl [linkAvailable]="linkAvailable"></publication-title>
       </div>
     </div>
-    <div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)"
-         class="uk-flex">
-      <span class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
+    <div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)">
+      <span class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
       <project-title [project]="entity" [searchLink]=properties.searchLinkToProject
                      [externalPortalUrl]=externalPortalUrl></project-title>
     </div>
-    <div *ngIf="type == 'context'" class="uk-flex uk-text-large">
-      <span class="uk-text-meta uk-margin-small-right uk-text-nowrap">Link to:</span>
-      <span class="uk-text-truncate" uk-tooltip="Concept">{{entity.title}}</span>
+    <div *ngIf="type == 'context'">
+      <span class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
+      <h6 class="uk-h6 uk-margin-remove">
+        <span class="uk-text-truncate" uk-tooltip="Concept">{{entity.title}}</span>
+      </h6>
     </div>
   `
 })
diff --git a/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts b/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
index 92557d9a..14ee0e60 100644
--- a/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
+++ b/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
@@ -20,7 +20,7 @@ import {properties} from "../../../../../environments/environment";
       </h6>
     </ng-container>
     <span *ngIf="project['funderName']" class="uk-margin-small-top">
-      <span class="uk-text-muted">Funder: </span>{{project['funderName']}}
+      <span class="uk-text-meta">Funder: </span>{{project['funderName']}}
     </span>
   `
 })

From 894667955c788cc72db30ce68fa284b4fd02bd45 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 28 Mar 2024 13:22:21 +0200
Subject: [PATCH 09/27] [develop | DONE | ADDED] slider-tabs component: add
 condition to disable slider-arrows if isServer is true

---
 sharedComponents/tabs/slider-tabs.component.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index 84cfbd1c..666f90a2 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@@ -6,11 +6,14 @@ import {
   ElementRef, EventEmitter,
   Input, OnDestroy, Output,
   QueryList,
-  ViewChild
+  ViewChild,
+  Inject,
+  PLATFORM_ID
 } from "@angular/core";
 import {SliderTabComponent} from "./slider-tab.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {Subscription} from "rxjs";
+import {isPlatformServer} from "@angular/common";
 import Timeout = NodeJS.Timeout;
 
 declare var UIkit;
@@ -78,8 +81,10 @@ declare var UIkit;
           </ng-container>
         </ul>
       </div>
-      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
-      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
+      <ng-container *ngIf="!isServer">
+        <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
+        <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
+      </ng-container>
     </div>
   `,
 })
@@ -143,10 +148,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
   private subscriptions: any[] = [];
   private observer: IntersectionObserver;
   private timeout: Timeout;
+  isServer: boolean;
   
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private cdr: ChangeDetectorRef) {
+              private cdr: ChangeDetectorRef,
+              @Inject(PLATFORM_ID) private platform: any) {
+    this.isServer = isPlatformServer(this.platform);
   }
   
   ngAfterViewInit() {

From 0c7539462183f2716718afdc79f5db12ed581ba2 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 1 Apr 2024 01:16:31 +0300
Subject: [PATCH 10/27] [develop | FIXED | CHANGED]: Add stakeholder in export
 indicators file and import base on this stakeholder.

---
 monitor-admin/topic/indicators.component.html |  49 --------
 monitor-admin/topic/indicators.component.ts   | 105 +++++-------------
 2 files changed, 30 insertions(+), 124 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 05144592..e4e84099 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -14,16 +14,6 @@
                  (click)="deleteSectionOpen(number, i, 'number', 'delete')">
                 <icon name="close" [flex]="true"></icon>
               </a>
-              <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
-              <!--                <button   [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"-->
-              <!--                          [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
-              <!--                          (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
-              <!--                </button>-->
-              <!--                <button   [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"-->
-              <!--                          [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
-              <!--                          (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
-              <!--                </button>-->
-              <!--              </ng-container>-->
             </div>
           </div>
           <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
@@ -113,16 +103,6 @@
                  (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
                 <icon name="close" [flex]="true"></icon>
               </a>
-              <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
-              <!--                <button   [disabled]="editing || chart.defaultId  " class="md-btn md-btn-mini"-->
-              <!--                          [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
-              <!--                          (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
-              <!--                </button>-->
-              <!--                <button   [disabled]="editing || chart.defaultId  " class="md-btn md-btn-mini"-->
-              <!--                          [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
-              <!--                          (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
-              <!--                </button>-->
-              <!--              </ng-container>-->
             </div>
           </div>
           <div *ngIf="chartSections.at(i)"
@@ -187,7 +167,6 @@
                       <img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
                            [src]="indicator.indicatorPaths[0].url">
                     </div>
-                    <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
                   </div>
                 </div>
               </div>
@@ -440,8 +419,6 @@
             <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" [class.uk-blend-multiply]="!isFullscreen"
                     [src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
                     class="uk-width-1-1 uk-height-large"></iframe>
-            <!--            <div *ngIf="properties.disableFrameLoad  && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames-->
-            <!--              preview is disabled</div>-->
             <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
               <img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
             </div>
@@ -462,25 +439,10 @@
 		<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
 			Indicators of all profiles based on this default indicator, will be deleted as well.
 		</div>
-		<!--  <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
-		<!--    Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.-->
-		<!--  </span>-->
 		Are you sure you want to proceed?
 		<div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
 	</div>
 </modal-alert>
-<!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">
-  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
-  "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
-  <span class="uk-text-bold">Indicators of all profiles based on this default indicator, will be deleted as well.</span>
-  Are you sure you want to proceed?
-</modal-alert>
-<modal-alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')">
-  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
-  "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
-  <span class="uk-text-bold">Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.</span>
-  Are you sure you want to proceed?
-</modal-alert>-->
 <modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
 	<div [class.uk-invisible]="editing" class="uk-position-relative">
     <div *ngIf="editing">
@@ -490,20 +452,9 @@
 		<div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
 			Sections of all profiles based on this default section and their contents, will be deleted as well.
 		</div>
-		<!--  <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
-		<!--    Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.-->
-		<!--  </span>-->
 		Are you sure you want to proceed?
 	</div>
 </modal-alert>
-<!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
-  You are about to delete this section and its indicators permanently.
-  Are you sure you want to proceed?
-</modal-alert>
-<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
-  You are about to delete this section and its indicators permanently.
-  Are you sure you want to proceed?
-</modal-alert>-->
 <ng-template #new_section let-type="type">
   <div class="section">
     <div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 30343944..1abcfa4d 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -504,16 +504,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           this.numberIndicatorPaths.at(index).get('result').setValue(null);
           if (this.numberIndicatorPaths.at(index).get('url').valid) {
             let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value)));
-            if (!this.isStakeholderParametersValid(indicatorPath)) {
-              // default profile
-              if (this.stakeholder.defaultId == null) {
-                this.urlParameterizedMessage = "This indicator couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly."
-              } else {
-                this.urlParameterizedMessage = "This indicator couldn't be generated properly. Please make sure chart data is for the current stakeholder."
-              }
-            } else {
-              this.urlParameterizedMessage = null;
-            }
             this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
             if (this.indicator.indicatorPaths[index]) {
               this.indicator.indicatorPaths[index] = indicatorPath;
@@ -574,16 +564,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
         if (this.chartIndicatorPaths.at(index).get('url').valid) {
           let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder);
-          if (!this.isStakeholderParametersValid(indicatorPath)) {
-            // default profile
-            if (this.stakeholder.defaultId == null) {
-              this.urlParameterizedMessage = "This chart couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly."
-            } else {
-              this.urlParameterizedMessage = "This chart couldn't be generated properly. Please make sure chart data is for the current stakeholder."
-            }
-          } else {
-            this.urlParameterizedMessage = null;
-          }
           this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
           (this.chartIndicatorPaths.at(index) as UntypedFormGroup).get('type').setValue(indicatorPath.type);
           (this.chartIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
@@ -601,12 +581,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }
   }
 
-  private isStakeholderParametersValid(indicatorPath: IndicatorPath) {
-    return !((indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_name") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") == -1)
-      || (!indicatorPath.chartObject && indicatorPath.url.indexOf("index_id") == -1 && indicatorPath.url.indexOf("index_name") == -1 && (indicatorPath.url).indexOf("index_shortName") == -1));
-
-  }
-
   private getJsonPathAsFormArray(indicatorPath: IndicatorPath): UntypedFormArray {
     let jsonPath = this.fb.array([]);
     if (indicatorPath.jsonPath) {
@@ -1159,24 +1133,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }));
   }
 
-  // deleteNumberSectionOpen(section: Section, index: number) {
-  //   this.section = section;
-  //   this.index = index;
-  //   this.deleteNumberSectionModal.alertTitle = 'Delete Section';
-  //   this.deleteNumberSectionModal.cancelButtonText = 'No';
-  //   this.deleteNumberSectionModal.okButtonText = 'Yes';
-  //   this.deleteNumberSectionModal.open();
-  // }
-  //
-  // deleteChartSectionOpen(section: Section, index: number) {
-  //   this.section = section;
-  //   this.index = index;
-  //   this.deleteChartSectionModal.alertTitle = 'Delete Section';
-  //   this.deleteChartSectionModal.cancelButtonText = 'No';
-  //   this.deleteChartSectionModal.okButtonText = 'Yes';
-  //   this.deleteChartSectionModal.open();
-  // }
-
   deleteSectionOpen(section: Section, index: number, type: IndicatorType, childrenAction: string = null) {
     if (!this.editing && !section.defaultId) {
       this.sectionTypeToDelete = type;
@@ -1256,11 +1212,20 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     return charts;
   }
 
-  importIndicatorsAndSave(charts: any[]) {
+  importIndicatorsAndSave(stakeholder: Stakeholder, charts: any[]) {
     let sectionsToSave: Section[] = [];
     let countIndicators = 0;
+    if(stakeholder.type !== this.stakeholder.type) {
+      UIkit.notification("The type of this profile is not the same with the file's one!", {
+        status: 'warning',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
+      this.editing = false;
+      this.importLoading = false;
+      return;
+    }
     // name description additionalDescription, height, width, visibility
-    let noValidParams = 0;
     let duplicates = 0;
     charts = this.migrateFromOldImportJsonFile(charts);
     for (let chart of charts) {
@@ -1296,7 +1261,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       }
 
       if (chart.type == "chart") {
-        indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(chart.url), chart.url, chart.type, this.stakeholder);
+        indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(chart.url), chart.url, chart.type, stakeholder);
         for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts) {
           for (let chart of section.indicators) {
             if (JSON.stringify(chart.indicatorPaths[0].chartObject) == JSON.stringify(indicatorPath.chartObject)) {
@@ -1304,10 +1269,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
               exists = true;
             }
           }
-
         }
       } else if (chart.type == "number") {
-        indicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(chart.url), chart.url, this.stakeholder,
+        indicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(chart.url), chart.url, stakeholder,
           chart.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(chart.url)));
         for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers) {
           for (let chart of section.indicators) {
@@ -1316,20 +1280,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
               exists = true;
             }
           }
-
         }
       }
-      if (!this.isStakeholderParametersValid(indicatorPath)) {
-        noValidParams++;
-      }
       if (!exists) {
         let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility?"RESTRICTED":this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), [indicatorPath]);
         sectionsToSave[chart['sectionIndex']].indicators.push(i);
         countIndicators++;
       }
-
     }
-
     if (duplicates > 0) {
       UIkit.notification(duplicates + " urls already exist and will not be imported!", {
         status: 'warning',
@@ -1337,19 +1295,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         pos: 'bottom-right'
       });
     }
-    if (noValidParams > 0 && !(this.stakeholder.type == 'country')) {
-      let noValidMessage = "Some indicators couldn't be generated properly. Please make sure chart data is for the current stakeholder.";
-      if (this.stakeholder.defaultId == null) {
-        noValidMessage = "Some indicators couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly.";
-      }
-      UIkit.notification(noValidMessage, {
-        status: 'danger',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
-      this.editing = false;
-      this.importLoading = false;
-    } else if (sectionsToSave.length > 0 && countIndicators > 0) {
+    if (sectionsToSave.length > 0 && countIndicators > 0) {
       this.saveIndicators(sectionsToSave.filter(section => !!section));
     }
     if (sectionsToSave.length == 0 || countIndicators == 0) {
@@ -1408,8 +1354,11 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     let topic = this.stakeholder ? this.stakeholder.topics[this.topicIndex] : null;
     let category = topic ? topic.categories[this.categoryIndex] : null;
     let subCategory = category ? category.subCategories[subcategoryIndex] : null;
-
-    var jsonFileUrl = window.URL.createObjectURL(new Blob([JSON.stringify(indicators)], {type: 'application/json'}));
+    let json = {
+      stakeholder: this.stakeholder,
+      indicators: indicators
+    }
+    var jsonFileUrl = window.URL.createObjectURL(new Blob([JSON.stringify(json)], {type: 'application/json'}));
     var a = window.document.createElement('a');
     window.document.body.appendChild(a);
     a.setAttribute('style', 'display: none');
@@ -1456,11 +1405,17 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }
 
     this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => {
-
-      let json_result = JSON.parse(result);
-
+      let json = JSON.parse(result);
       // validate file
-      if (!json_result || json_result.length == 0) {
+      if(json && Array.isArray(json)) {
+        UIkit.notification("This file is not supported any more. Please export indicators and try again!", {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+        this.editing = false;
+        this.importLoading = false;
+      } else if (!json || json?.indicators.length == 0) {
         UIkit.notification("Importing file is empty", {
           status: 'danger',
           timeout: 6000,
@@ -1469,7 +1424,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         this.editing = false;
         this.importLoading = false;
       } else {
-        this.importIndicatorsAndSave(json_result);
+        this.importIndicatorsAndSave(json.stakeholder, json.indicators);
       }
     }, (error) => {
       console.error("Error importing files", error);

From b34f42326ca8069b6ade0e1934c7e7cd021112cb Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 1 Apr 2024 18:16:21 +0300
Subject: [PATCH 11/27] [develop | ADDED]:  Add loading in import indicators in
 order to avoid any actions during this process

---
 monitor-admin/topic/indicators.component.html |  9 ++--
 monitor-admin/topic/indicators.component.ts   | 45 ++++++++-----------
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index e4e84099..b9bce2df 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -198,13 +198,16 @@
     </div>
   </div>
 </div>
+<div *ngIf="loading" class="uk-position-relative uk-height-large">
+    <loading class="uk-position-center"></loading>
+</div>
 <modal-alert #editNumberModal
 						[large]="true" classTitle="uk-background-primary uk-light"
 						(alertOutput)="saveIndicator()"
 						[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
-	<div *ngIf="editing" class="uk-position-relative uk-height-large">
-		<loading class="uk-position-center"></loading>
-	</div>
+    <div *ngIf="editing" class="uk-position-relative uk-height-large">
+        <loading class="uk-position-center"></loading>
+    </div>
   <div [class.uk-hidden]="editing" class="uk-padding-small">
     <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
       <div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 1abcfa4d..ab491a54 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -86,8 +86,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
   public numberResponses: Map<string, any> = new Map<string, any>();
   public numberResults: Map<string, number> = new Map<string, number>();
-  /** Import / Export Indicators */
-  importLoading: boolean = false;
+  public loading: boolean = false;
   @ViewChild('editChartModal', {static: true}) editChartModal: AlertModal;
   @ViewChild('editNumberModal', {static: true}) editNumberModal: AlertModal;
   @ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
@@ -354,7 +353,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     return this.stakeholder &&
       this.stakeholder.topics[this.topicIndex] &&
       this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] && !this.loading;
   }
 
   public get numberIndicatorPaths(): UntypedFormArray {
@@ -874,19 +873,22 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           });
         }
       }
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
       NotificationHandler.rise('Indicators have been <b>imported</b> successfully!');
     }, error => {
       this.chartIndicatorFb = null;
       NotificationHandler.rise('An error has occurred. Please try again later', 'danger');
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
     }));
 
 
   }
 
+  finish() {
+    this.editing = false;
+    this.loading = false;
+  }
+
   reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) {
     this.editing = true;
     let path = [
@@ -1221,8 +1223,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         timeout: 6000,
         pos: 'bottom-right'
       });
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
       return;
     }
     // name description additionalDescription, height, width, visibility
@@ -1255,8 +1256,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           timeout: 6000,
           pos: 'bottom-right'
         });
-        this.editing = false;
-        this.importLoading = false;
+        this.finish();
         break;
       }
 
@@ -1304,8 +1304,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         timeout: 6000,
         pos: 'bottom-right'
       });
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
     }
   }
 
@@ -1367,14 +1366,13 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     a.click();
     window.URL.revokeObjectURL(jsonFileUrl);
     a.remove(); // remove the element
-
-    this.editing = false;
+    this.finish();
   }
 
   fileChangeEvent(fileInput: any, index) {
     this.index = index;
     this.editing = true;
-    this.importLoading = true;
+    this.loading = true;
     this.filesToUpload = <Array<File>>fileInput.target.files;
     this.upload();
   }
@@ -1387,8 +1385,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         timeout: 6000,
         pos: 'bottom-right'
       });
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
       return;
     } else {
       if (this.filesToUpload[0].name.indexOf(".json") == -1 || (this.filesToUpload[0].type != "application/json")) {
@@ -1398,8 +1395,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           timeout: 6000,
           pos: 'bottom-right'
         });
-        this.editing = false;
-        this.importLoading = false;
+        this.finish();
         return;
       }
     }
@@ -1413,16 +1409,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           timeout: 6000,
           pos: 'bottom-right'
         });
-        this.editing = false;
-        this.importLoading = false;
+        this.finish();
       } else if (!json || json?.indicators.length == 0) {
         UIkit.notification("Importing file is empty", {
           status: 'danger',
           timeout: 6000,
           pos: 'bottom-right'
         });
-        this.editing = false;
-        this.importLoading = false;
+        this.finish();
       } else {
         this.importIndicatorsAndSave(json.stakeholder, json.indicators);
       }
@@ -1433,8 +1427,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         timeout: 6000,
         pos: 'bottom-right'
       });
-      this.editing = false;
-      this.importLoading = false;
+      this.finish();
     });
   }
 

From 828dfc0671dc58977ef30a641cbd7fe7f94c0eb5 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 1 Apr 2024 18:56:26 +0300
Subject: [PATCH 12/27] [develop]: Remove topics from exported file in export
 indicators.

---
 monitor-admin/topic/indicators.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index ab491a54..46119354 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -1354,9 +1354,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     let category = topic ? topic.categories[this.categoryIndex] : null;
     let subCategory = category ? category.subCategories[subcategoryIndex] : null;
     let json = {
-      stakeholder: this.stakeholder,
+      stakeholder: HelperFunctions.copy(this.stakeholder),
       indicators: indicators
     }
+    delete json.stakeholder.topics;
     var jsonFileUrl = window.URL.createObjectURL(new Blob([JSON.stringify(json)], {type: 'application/json'}));
     var a = window.document.createElement('a');
     window.document.body.appendChild(a);

From 78d262dd3b67ceb022cf9a3e5135bcf8466c7f1c Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 2 Apr 2024 10:59:33 +0300
Subject: [PATCH 13/27] [develop | DONE | ADDED]: Added search organizations by
 PID (ror, isni, wikidata, fundRef). 1. string-utils.class.ts: Added methods
 "isValidRor()", "isValidIsni()", "isValidWikidata()", "isValidFundRef()" and
 cases for these new identifiers. 2. newSearchPage.component.ts: In method
 "createKeywordQuery()", check for PIDs also for organizations entity. 3.
 environment.ts: Updated property "fundRefURL" to
 "https://data.crossref.org/fundingdata/funder/" (old:
 https://api.crossref.org/funders/).

---
 .../searchUtils/newSearchPage.component.ts    |  2 +-
 utils/properties/environments/environment.ts  |  2 +-
 utils/string-utils.class.ts                   | 37 +++++++++++++++++--
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index cf9f105a..e8447acb 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -1085,7 +1085,7 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
     let params = "";
     let doisParams = "";
     var DOIs: Identifier[] = Identifier.getIdentifiersFromString(value);
-    if ((entityType == 'publication' || entityType == 'dataset' || entityType == 'software' || entityType == 'other' || entityType == "result" || entityType == "dataprovider" || entityType == "service")) {
+    if ((entityType == 'publication' || entityType == 'dataset' || entityType == 'software' || entityType == 'other' || entityType == "result" || entityType == "dataprovider" || entityType == "service" || entityType == "organization")) {
       for (let identifier of DOIs) {
         // console.log(identifier)
         // pidclassid exact \"doi\" and pid exact \"10.1016/j.nima.2015.11.134\"
diff --git a/utils/properties/environments/environment.ts b/utils/properties/environments/environment.ts
index fb86e5d4..283a1295 100644
--- a/utils/properties/environments/environment.ts
+++ b/utils/properties/environments/environment.ts
@@ -23,7 +23,7 @@ export let common: EnvProperties = {
   rorURL: "https://ror.org/",
   isniURL: "https://isni.org/isni/",
   wikiDataURL: "https://www.wikidata.org/wiki/",
-  fundRefURL: "https://api.crossref.org/funders/",
+  fundRefURL: "https://data.crossref.org/fundingdata/funder/",
   fairSharingURL: "https://fairsharing.org/",
   eoscMarketplaceURL: "https://marketplace.eosc-portal.eu/services/",
   sherpaURL: "http://sherpa.ac.uk/romeo/issn/",
diff --git a/utils/string-utils.class.ts b/utils/string-utils.class.ts
index cbce9848..3ccf6e6b 100644
--- a/utils/string-utils.class.ts
+++ b/utils/string-utils.class.ts
@@ -150,7 +150,7 @@ export class DOI {
 }
 
 export class Identifier {
-  class: "doi" | "pmc" | "pmid" | "handle" | "ORCID" | "re3data" | "swhid" = null;
+  class: "doi" | "pmc" | "pmid" | "handle" | "ORCID" | "re3data" | "swhid" | "ror" | "wikidata" | "fundref" | "isni" = null;
   id: string;
   
   public static getDOIsFromString(str: string): string[] {
@@ -205,14 +205,22 @@ export class Identifier {
       return {"class": "re3data", "id": pid};
     } else if (Identifier.isValidSwhId(pid)) {
       return {"class": "swhid", "id": pid};
+    } else if (Identifier.isValidRor(pid)) {
+      return {"class": "ror", "id": pid};
+    } else if (Identifier.isValidFundRef(pid)) {
+      return {"class": "fundref", "id": pid};
+    } else if (Identifier.isValidWikidata(pid)) {
+      return {"class": "wikidata", "id": pid};
+    } else if (Identifier.isValidIsni(pid)) {
+      return {"class": "isni", "id": pid};
     }
     //set it as a doi, to catch the case that doi has not valid format
     return (strict?null:{"class": "doi", "id": pid});
   }
 
   public static getPIDFromIdentifiers(identifiers: Map<string, string[]>): Identifier {
-    let classes:string [] = ["doi", "handle", "pmc", "pmid", "re3data", "swhid"];
-    if(identifiers) {
+    let classes:string [] = ["doi", "handle", "pmc", "pmid", "re3data", "swhid", "ror", "wikidata", "fundref", "isni"];
+    if(identifiers && identifiers.size > 0) {
       for (let cl of classes) {
         if (identifiers.get(cl)) {
           for (let pid of identifiers.get(cl)) {
@@ -258,6 +266,7 @@ export class Identifier {
   }
   
   public static isValidHANDLE(str: string): boolean {
+    // let exp = /\b[0-9a-zA-Z-]*\/[0-9a-zA-Z-]*$/g;  // resolve with url - need to add method for raw value
     let exp = /^[0-9a-zA-Z-]*\/[0-9a-zA-Z-]*$/g;
     return str.match(exp) != null;
   }
@@ -272,6 +281,28 @@ export class Identifier {
     let exp = /swh:1:snp:[0-9a-f]{40}/g;
     return str.match(exp) != null;
   }
+
+  public static isValidRor(str: string): boolean {
+    let exp = /0[a-z|0-9]{6}[0-9]{2}\b/g;
+    return str.match(exp) != null;
+  }
+
+  public static isValidIsni(str: string): boolean {
+    let exp = /^[0]{7}[0-9]{8}[0-9X]$/g;
+    return str.match(exp) != null;
+  }
+
+  public static isValidWikidata(str: string): boolean {
+    let exp = /^Q\d+$/g;
+    return str.match(exp) != null;
+  }
+
+  public static isValidFundRef(str: string): boolean {
+    // let exp = /aaa/g;
+    let exp = /^[1-9]\d+$/g;
+    return str.match(exp) != null;
+  }
+
 }
 
 export class StringUtils {

From 18791ec9d22d3f30dd895e2e090d154b9e7b75fb Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 2 Apr 2024 13:33:23 +0300
Subject: [PATCH 14/27] [develop | DONE | ADDED]: searchFields.base.ts: Added
 "pid" field in ORGANIZATION_ADVANCED_FIELDS.

---
 utils/properties/searchFields.base.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/utils/properties/searchFields.base.ts b/utils/properties/searchFields.base.ts
index 98c6a020..1813b1a2 100644
--- a/utils/properties/searchFields.base.ts
+++ b/utils/properties/searchFields.base.ts
@@ -798,7 +798,7 @@ export class SearchFieldsBase {
   //ORGANIZATION
 
   public ORGANIZATION_REFINE_FIELDS: string[] = ["country"]
-  public ORGANIZATION_ADVANCED_FIELDS: string[] = ["q", "organizationlegalname", "organizationlegalshortname", "country"];
+  public ORGANIZATION_ADVANCED_FIELDS: string[] = ["q", "organizationlegalname", "organizationlegalshortname", "country", "pid"];
 
   public ORGANIZATION_FIELDS: { [key: string]: FieldDetails } = {
     ["q"]: {name: "Any field", type: "keyword", param: "q", operator: "op", equalityOperator: "=", filterType: null},
@@ -826,6 +826,7 @@ export class SearchFieldsBase {
       equalityOperator: " exact ",
       filterType: "checkbox"
     },
+    ["pid"]: {name: "PID", type: "keyword", param: "pid", operator: "pd", equalityOperator: " exact ", filterType: null}
   };
   //  public ORGANIZATION_INDEX:string[] = ["organizationcountryname"]//,"organizationeclegalbody"];
   // public ADVANCED_SEARCH_ORGANIZATION_PARAM:string[] = ["q","contenttype","compatibility","country","type"];

From 07569f24e16f1818742c41aacd86a6a76ac920af Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 3 Apr 2024 16:16:09 +0300
Subject: [PATCH 15/27] [develop | DONE | FIXED]: resultLanding.component.html
 & searchResult.component.ts: Added checks for ORCID also for
 properties.dashboard == "irish".

---
 landingPages/result/resultLanding.component.html  | 6 ++++--
 searchPages/searchUtils/searchResult.component.ts | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 3a2de7e2..d99ba7b3 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -79,7 +79,8 @@
                                       [type]="resultLandingInfo.resultType"
                                       [result]="resultLandingInfo" [id]="resultLandingInfo.objIdentifier">
                         <!-- ORCID -->
-                        <div *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community'  || properties.adminToolsPortalType == 'aggregator'"
+                        <div *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community'
+                                  || properties.adminToolsPortalType == 'aggregator' || properties.dashboard == 'irish'"
                              class="uk-margin-small-right">
                           <orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
                                       [pids]="pidsArrayString" [pageType]="'landing'">
@@ -544,7 +545,8 @@
         </div>
         <hr class="uk-margin-remove">
       </ng-container>
-      <ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
+      <ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community'
+                        || properties.adminToolsPortalType == 'aggregator' || properties.dashboard == 'irish'" >
         <div class="uk-padding-small uk-padding-remove-horizontal ">
           <orcid-work [resultId]="id" [resultTitle]="resultLandingInfo?.title" [resultLandingInfo]="resultLandingInfo"
                       [pids]="pidsArrayString" [pageType]="'landing'" [isMobile]="true"
diff --git a/searchPages/searchUtils/searchResult.component.ts b/searchPages/searchUtils/searchResult.component.ts
index 4303238b..33ba74c0 100644
--- a/searchPages/searchUtils/searchResult.component.ts
+++ b/searchPages/searchUtils/searchResult.component.ts
@@ -57,7 +57,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
       this.previewResults.push(this.getResultPreview(result));
     }
 
-    if ((properties.adminToolsPortalType == "explore" || properties.adminToolsPortalType == "community" || properties.adminToolsPortalType == "aggregator")
+    if ((properties.adminToolsPortalType == "explore" || properties.adminToolsPortalType == "community" || properties.adminToolsPortalType == "aggregator" || properties.dashboard == "irish")
         && Session.isLoggedIn() && this.results && this.results.length > 0
         && (this.type == "result" || this.type == "publication" || this.type == "dataset" || this.type == "software" || this.type == "other")
     ) {

From dcfc6b0b6a288d5f944efb63f51d8e6d11e5df76 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Thu, 4 Apr 2024 16:10:08 +0300
Subject: [PATCH 16/27] [develop | DONE | CHANGED]: searchFields.base.ts:
 Replace in ORGANIZATION_REFINE_FIELDS and ORGANIZATION_ADVANCED_FIELDS field
 "country" with "countrynojurisdiction".

---
 utils/properties/searchFields.base.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/utils/properties/searchFields.base.ts b/utils/properties/searchFields.base.ts
index 1813b1a2..a029a42e 100644
--- a/utils/properties/searchFields.base.ts
+++ b/utils/properties/searchFields.base.ts
@@ -797,8 +797,8 @@ export class SearchFieldsBase {
 
   //ORGANIZATION
 
-  public ORGANIZATION_REFINE_FIELDS: string[] = ["country"]
-  public ORGANIZATION_ADVANCED_FIELDS: string[] = ["q", "organizationlegalname", "organizationlegalshortname", "country", "pid"];
+  public ORGANIZATION_REFINE_FIELDS: string[] = ["countrynojurisdiction"]
+  public ORGANIZATION_ADVANCED_FIELDS: string[] = ["q", "organizationlegalname", "organizationlegalshortname", "countrynojurisdiction", "pid"];
 
   public ORGANIZATION_FIELDS: { [key: string]: FieldDetails } = {
     ["q"]: {name: "Any field", type: "keyword", param: "q", operator: "op", equalityOperator: "=", filterType: null},
@@ -818,7 +818,7 @@ export class SearchFieldsBase {
       equalityOperator: "=",
       filterType: null
     },
-    ["country"]: {
+    ["countrynojurisdiction"]: {
       name: "Country",
       type: "vocabulary",
       param: "country",
@@ -962,7 +962,7 @@ export class SearchFieldsBase {
       return "and";
     } else if (fieldId == "instancetypename" || fieldId == "eoscdatasourcetype"
         || fieldId == "resultlanguagename" || fieldId == "datasourceodlanguages"
-        || fieldId == "datasourcecompatibilityname" || fieldId == "country" || fieldId == "datasourceodcontenttypes"
+        || fieldId == "datasourcecompatibilityname" || fieldId == "country" || fieldId == "countrynojurisdiction" || fieldId == "datasourceodcontenttypes"
         || fieldId == "resulthostingdatasource" || fieldId == "collectedfrom") {
       return "or";
     }

From c351349f8ee3a130c56dc72b17159f07460c108e Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Thu, 4 Apr 2024 17:13:56 +0300
Subject: [PATCH 17/27] [develop | DONE | FIXED] newSearchPage.component.html:
 Added checks, not to show "Filters" column in the search pages, when there
 are no filters.

---
 searchPages/searchUtils/newSearchPage.component.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index f9143437..ab005f85 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -288,7 +288,9 @@
       </div>
       <div class="uk-container uk-margin-top" [class.uk-container-large]="!mobile" [class.uk-container-expand]="mobile" [class.uk-padding-remove-horizontal]="mobile">
         <div class="uk-grid uk-margin-large-bottom" [class.uk-margin-top]="!mobile" uk-grid>
-          <div *ngIf="!mobile && showRefine && (results.length > 0 || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (!hideFilters &&
+          <div *ngIf="!mobile && showRefine && (searchUtils.refineStatus == errorCodes.DONE && ((orderedFilters && orderedFilters.length > 0) || (staticFilters && staticFilters.length > 0)
+          || (rangeFilters && rangeFilters.length > 0) || (filters && filters.length > 0)))
+          && (results.length > 0 || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (!hideFilters &&
           (existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0))) "
                class="uk-width-1-4@m search-filters">
             <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>

From d63092cd9e48b10d130eb52fccfad945e9d785ba Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 5 Apr 2024 10:57:39 +0300
Subject: [PATCH 18/27] [new-order | DONE]: Add new move indicator method when
 an indicator moved to another section

---
 monitor-admin/topic/indicators.component.html | 14 ----
 monitor-admin/topic/indicators.component.ts   | 67 +++++++++++--------
 monitor/services/stakeholder.service.ts       | 31 +++++----
 3 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index b9bce2df..1f68e246 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -236,13 +236,6 @@
                     <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
                   </div>
                 </div>
-                <div *ngIf="showCheckForSchemaEnhancements" class="uk-width-1-1">
-                  <div class="uk-alert uk-alert-warning">
-                    There are schema enhancements that can be applied in this query.<a
-                      (click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
-                    now</a>
-                  </div>
-                </div>
                 <div class="uk-width-1-2@m">
                   <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
                        [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
@@ -373,13 +366,6 @@
               <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
             </div>
           </div>
-          <div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
-            <div class="uk-alert uk-alert-warning">
-              There are schema enhancements that can be applied in this query. <a
-                (click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
-              now</a>
-            </div>
-          </div>
           <div class="uk-width-1-1" formArrayName="parameters">
             <div class="uk-grid" uk-grid>
               <div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 46119354..62883ae6 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -31,8 +31,8 @@ import {AlertModal} from "../../utils/modal/alert";
 import {StatisticsService} from "../utils/services/statistics.service";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
-import {Reorder, StakeholderService} from "../../monitor/services/stakeholder.service";
-import {Observable, Subscriber} from "rxjs";
+import {MoveIndicator, SectionInfo, StakeholderService} from "../../monitor/services/stakeholder.service";
+import {BehaviorSubject, Observable, Subscriber} from "rxjs";
 import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
 import {Router} from "@angular/router";
 import {Role, Session, User} from "../../login/utils/helper.class";
@@ -82,6 +82,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   public index: number = -1;
   public editing: boolean = false;
   public dragging: boolean = false;
+  /* Reorder indicators */
+  public to: BehaviorSubject<SectionInfo> = new BehaviorSubject<SectionInfo>(null);
   /** Caches */
   public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
   public numberResponses: Map<string, any> = new Map<string, any>();
@@ -94,8 +96,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   public sectionTypeToDelete: string;
   public sectionChildrenActionOnDelete: string;
   public indicatorChildrenActionOnDelete: string;
-  urlParameterizedMessage = null;
-  showCheckForSchemaEnhancements: boolean = false;
+  public urlParameterizedMessage = null;
   private notification: Notification;
   @ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
   @ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@@ -124,7 +125,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
               private notificationService: NotificationService,
               private fb: UntypedFormBuilder,
               protected _router: Router,
-              private cdr: ChangeDetectorRef,
               private sanitizer: DomSanitizer) {
     super()
     this.filesToUpload = [];
@@ -186,7 +186,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       }
     });
     if (document !== undefined) {
-      let callback = (list, type: IndicatorType, action: 'moved' | 'added' | 'removed'): void => {
+      let callback = (list): string[] => {
         let items: HTMLCollection = list.current.children;
         let reordered = [];
         for (let i = 0; i < items.length; i++) {
@@ -194,12 +194,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
             reordered.push(items.item(i).id);
           }
         }
-        let reorder: Reorder = {
-          action: action,
-          target: list.detail[1].id,
-          ids: reordered
-        }
-        this.reorderIndicators(list.current.id.toString().split('-')[1], type, reorder);
+        return reordered;
       };
       this.numbers.forEach((section) => {
         this.subscriptions.push(UIkit.util.on(document, 'start', '#number-' + section._id, (): void => {
@@ -209,24 +204,32 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           this.dragging = false;
         }));
         this.subscriptions.push(UIkit.util.on(document, 'moved', '#number-' + section._id, (list): void => {
-          callback(list, "number", 'moved');
+          this.reorderIndicators(section._id, 'number', callback(list));
         }));
         this.subscriptions.push(UIkit.util.on(document, 'added', '#number-' + section._id, (list): void => {
-          callback(list, "number", 'added');
+         this.to.next({id: section._id, indicators: callback(list)});
         }));
         this.subscriptions.push(UIkit.util.on(document, 'removed', '#number-' + section._id, (list): void => {
-          callback(list, "number", 'removed');
+          let sub = this.to.asObservable().subscribe(to => {
+            if(to) {
+              let from: SectionInfo = {id: section._id, indicators: callback(list)};
+              this.moveIndicator({target: list.detail[1].id, from: from, to: to});
+              setTimeout(() => {
+                sub.unsubscribe();
+              })
+            }
+          })
         }));
       });
       this.charts.forEach((section) => {
         this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart-' + section._id, (list): void => {
-          callback(list, "chart", 'moved');
+          this.reorderIndicators(section._id, 'chart', callback(list));
         }));
         this.subscriptions.push(UIkit.util.on(document, 'added', '#chart-' + section._id, (list): void => {
-          callback(list, "chart", 'added');
+          //callback(list, "chart", 'added');
         }));
         this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => {
-          callback(list, "chart", 'removed');
+         // callback(list, "chart", 'removed');
         }));
       });
     }
@@ -496,14 +499,12 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     let index = this.numberIndicatorPaths.length - 1;
     if (this.numberIndicatorPaths.at(index).get('url').valid) {
       this.validateJsonPath(index);
-      this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
     }
     if (this.indicator.defaultId === null) {
       this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
           this.numberIndicatorPaths.at(index).get('result').setValue(null);
           if (this.numberIndicatorPaths.at(index).get('url').valid) {
             let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value)));
-            this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
             if (this.indicator.indicatorPaths[index]) {
               this.indicator.indicatorPaths[index] = indicatorPath;
             } else {
@@ -559,11 +560,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     if (disableUrl) {
       this.chartIndicatorPaths.at(index).get('url').disable();
     } else {
-      this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
       this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
         if (this.chartIndicatorPaths.at(index).get('url').valid) {
           let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder);
-          this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
           (this.chartIndicatorPaths.at(index) as UntypedFormGroup).get('type').setValue(indicatorPath.type);
           (this.chartIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
           if (!this.indicator.indicatorPaths[index]) {
@@ -889,7 +888,23 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     this.loading = false;
   }
 
-  reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) {
+  moveIndicator(moveIndicator: MoveIndicator) {
+    this.editing = true;
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
+    ];
+    this.subscriptions.push(this.stakeholderService.moveIndicator(this.properties.monitorServiceAPIURL, path, moveIndicator).subscribe(subCategory => {
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] = subCategory;
+      this.setCharts();
+      this.setNumbers();
+      this.editing = false;
+    }));
+  }
+
+  reorderIndicators(sectionId: string, type: IndicatorType, indicators: string[]) {
     this.editing = true;
     let path = [
       this.stakeholder._id,
@@ -898,7 +913,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
       sectionId
     ];
-    this.subscriptions.push(this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, reorder, type).subscribe(indicators => {
+    this.subscriptions.push(this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicators).subscribe(indicators => {
       if (type === 'chart') {
         this.charts.find(section => section._id === sectionId).indicators = indicators;
         this.setCharts();
@@ -1191,10 +1206,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }));
   }
 
-  private checkForSchemaEnhancements(url: string) {
-    this.showCheckForSchemaEnhancements = this.isAdministrator && url && !this.properties.useOldStatisticsSchema && this.indicatorUtils.checkForSchemaEnhancements(url) && this.properties.dashboard != 'irish';
-  }
-
   migrateFromOldImportJsonFile(charts) {
     // first section contains numbers
     // second contains charts
diff --git a/monitor/services/stakeholder.service.ts b/monitor/services/stakeholder.service.ts
index 3f0f3a11..d8b8bf30 100644
--- a/monitor/services/stakeholder.service.ts
+++ b/monitor/services/stakeholder.service.ts
@@ -1,16 +1,21 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {BehaviorSubject, from, Observable, Subscriber} from "rxjs";
-import {Indicator, Section, Stakeholder, StakeholderInfo, Visibility} from "../entities/stakeholder";
+import {Indicator, Section, Stakeholder, StakeholderInfo, SubCategory, Visibility} from "../entities/stakeholder";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {map} from "rxjs/operators";
 import {properties} from "../../../../environments/environment";
 import {CustomOptions} from "../../services/servicesUtils/customOptions.class";
 
-export interface Reorder {
-  action: 'moved' | 'added' | 'removed',
-  target: string,
-  ids: string[];
+export interface SectionInfo {
+  id: string;
+  indicators: string[];
+}
+
+export interface MoveIndicator {
+  target: string;
+  from: SectionInfo;
+  to: SectionInfo;
 }
 
 @Injectable({
@@ -128,7 +133,6 @@ export class StakeholderService {
     if (element.alias && element.alias.startsWith('/')) {
       element.alias = element.alias.slice(1);
     }
-    path = HelperFunctions.encodeArray(path);
     return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
         '/save', element, CustomOptions.registryOptions()).pipe(map(element => {
       if (path.length === 0) {
@@ -140,7 +144,6 @@ export class StakeholderService {
   }
 
   saveBulkElements(url: string, indicators, path: string[] = []): Observable<any> {
-    path = HelperFunctions.encodeArray(path);
     return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
         '/save-bulk', indicators, CustomOptions.registryOptions()).pipe(map(element => {
       if (path.length === 0) {
@@ -152,7 +155,6 @@ export class StakeholderService {
   }
 
   saveSection(url: string, element: any, path: string[] = [], index: number = -1): Observable<Section> {
-    path = HelperFunctions.encodeArray(path);
     return this.http.post<Section>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
         '/save/' + index, element, CustomOptions.registryOptions()).pipe(map(element => {
       return HelperFunctions.copy(element);
@@ -160,7 +162,6 @@ export class StakeholderService {
   }
 
   deleteElement(url: string, path: string[], childrenAction: string = null): Observable<any> {
-    path = HelperFunctions.encodeArray(path);
     let params: string = "";
     if (childrenAction) {
       params = "?children=" + childrenAction;
@@ -169,17 +170,21 @@ export class StakeholderService {
   }
 
   reorderElements(url: string, path: string[], ids: string[]): Observable<any> {
-    path = HelperFunctions.encodeArray(path);
     return this.http.post<any>(url + '/' + path.join('/') + '/reorder', ids, CustomOptions.registryOptions());
   }
 
-  reorderIndicators(url: string, path: string[], reorder: Reorder, type: string = 'chart'): Observable<Indicator[]> {
-    path = HelperFunctions.encodeArray(path);
-    return this.http.post<Indicator[]>(url + '/' + path.join('/') + '/' + type + '/reorder', reorder, CustomOptions.registryOptions()).pipe(map(indicators => {
+  reorderIndicators(url: string, path: string[], indicators: string[]): Observable<Indicator[]> {
+    return this.http.post<Indicator[]>(url + '/' + path.join('/') + '/reorder', indicators, CustomOptions.registryOptions()).pipe(map(indicators => {
       return HelperFunctions.copy(indicators);
     }));
   }
 
+  moveIndicator(url: string, path: string[], moveIndicator: MoveIndicator): Observable<SubCategory> {
+    return this.http.post<SubCategory>(url + '/' + path.join('/') + '/moveIndicator', moveIndicator, CustomOptions.registryOptions()).pipe(map(subCategory => {
+      return HelperFunctions.copy(subCategory);
+    }));
+  }
+
   getStakeholderAsObservable(): Observable<Stakeholder> {
     return this.stakeholderSubject.asObservable();
   }

From dc1679c56534a505836bc505c75adc3c7ac77fda Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 5 Apr 2024 11:09:16 +0300
Subject: [PATCH 19/27] [develop | DONE | CHANGED]:
 newSearchPage.component.html: Restored number of results and keyword display
 & added uk-text-capitalize on selected filter labels.

---
 .../searchUtils/newSearchPage.component.html  | 75 ++++++++++++-------
 1 file changed, 49 insertions(+), 26 deletions(-)

diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index ab005f85..d59cb0b1 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -1,11 +1,11 @@
 <ng-template #selected_filters_pills>
   <h1 class="uk-margin-remove">
-    <div [class.uk-invisible]="list.children.length === 0">
+    <div [class.uk-invisible]="list.children.length === 0" [class.uk-margin-top]="list.children.length > 0">
       <ul #list class="uk-grid uk-grid-small uk-flex-wrap" uk-grid>
         <ng-container  *ngFor="let customFilter of customFilters">
           <ng-container *ngIf="customFilter.isHiddenFilter">
             <li class="uk-flex uk-flex-middle">
-              <span class="uk-label uk-label-small uk-label-secondary uk-text-truncate target1">
+              <span class="uk-text-capitalize uk-label uk-label-small uk-label-secondary uk-text-truncate target1">
                 {{customFilter.valueName}}
               </span>
             </li>
@@ -15,7 +15,7 @@
           <ng-container *ngFor="let type of resultTypes.values; let i = index;">
             <ng-container *ngIf="type.selected">
               <li class="">
-                <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target2">
+                <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target2">
                   <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
                   <button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
                     <icon name="close" flex="true" ratio="0.7"></icon>
@@ -29,7 +29,7 @@
           <ng-container *ngFor="let filter of rangeFilters ">
             <ng-container *ngIf="filter.selectedFromAndToValues">
               <li class="">
-                <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target3">
+                <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target3">
                   <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
                   <button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
                     <icon name="close" flex="true" ratio="0.7"></icon>
@@ -44,7 +44,7 @@
             <ng-container *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; ">
               <li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
                   class="">
-                <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target4">
+                <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target4">
                   <span
                     class="uk-margin-small-right uk-width-expand uk-text-truncate">
                     <ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
@@ -73,7 +73,7 @@
           <ng-container *ngIf="filter.countSelectedValues > 0">
             <ng-container *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; ">
               <li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)">
-                <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target5">
+                <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target5">
                   <span class="uk-margin-small-right uk-width-expand uk-text-truncate">
                     <ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
                       <span>{{filter.title}}:
@@ -310,31 +310,47 @@
                     [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
                     target="_blank"> OpenAIRE - Explore</a>.
               </div>
-              <ng-container *ngIf="mobile">
+
+              <div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-auto uk-flex-between">
+                <!-- Total results, number of pages -->
+                <div class="uk-margin-remove-bottom uk-text-truncate" [class.uk-margin-medium-right]="!mobile" [class.uk-margin-right]="mobile" [class.uk-h6]="!mobile">
+                  <ng-container *ngIf="results && searchUtils.totalResults > 0">
+                    <span>{{searchUtils.totalResults|number}}</span>
+                    <span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
+                    <ng-container *ngIf="searchTerm && simpleView">
+                      <span class="uk-text-meta"> for </span>
+                      <span class="uk-text-bold">{{searchTerm}}</span>
+                    </ng-container>
+                    <ng-container *ngIf="!simpleView && advancedSearchTerms > 0">
+                      <span class="uk-text-bold"> ({{advancedSearchTerms}} rule{{advancedSearchTerms == 1 ? '' : 's'}} applied)</span>
+                    </ng-container>
+                  </ng-container>
+                  <ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
+                    <span>{{oldTotalResults|number}}</span>
+                    <span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
+                    <span>{{searchUtils.page | number}}</span>
+                    <span class="uk-text-meta"> of {{(totalPages(oldTotalResults)|number)}}</span>
+                  </ng-container>
+                </div>
                 <!-- Download results -->
-                <div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
-                  class="uk-margin-small-bottom uk-flex uk-flex-center">
+                <div *ngIf="mobile && showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
+                     class="uk-flex uk-flex-center">
                   <search-download
-                      *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
-                      [isDisabled]="disabled"
-                      [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
+                    *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
+                    [isDisabled]="disabled"
+                    [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
                   </search-download>
                   <ng-container *ngIf="properties.zenodoDumpUrl && entityType == 'result'">
                     <a [href]="properties.zenodoDumpUrl" target="_blank" class=" uk-margin-left uk-button uk-button-link uk-flex uk-flex-middle">
-                      <img src="assets/common-assets/common/zenodoDump.png" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
+                      <img src="assets/common-assets/common/zenodoDump.png" alt="Zenodo dump" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
                     </a>
                   </ng-container>
                 </div>
-              </ng-container>
-              <div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-flex uk-flex-top">
-                <!-- filters pills -->
-                <div class="uk-width-expand@m">
-                  <ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
-                </div>
-                <div class="uk-width-auto@m uk-margin-medium-left uk-flex uk-flex-middle">
+
+                <div *ngIf="!mobile" class="uk-margin-medium-left uk-flex uk-flex-middle">
                   <div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
                     (!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)"
-                    class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
+                       class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
                     <div>
                       <div class="uk-grid uk-flex-middle uk-grid-column-collapse" uk-grid>
                         <search-sorting *ngIf="sort && searchUtils.totalResults > 0"
@@ -347,20 +363,27 @@
                   </div>
                   <!-- Download results -->
                   <div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
-                    class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
+                       class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
                     <search-download
-                        *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
-                        [isDisabled]="disabled"
-                        [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
+                      *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
+                      [isDisabled]="disabled"
+                      [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
                     </search-download>
                     <ng-container *ngIf="properties.zenodoDumpUrl && entityType == 'result'">
                       <a [href]="properties.zenodoDumpUrl" target="_blank" class=" uk-margin-left uk-button uk-button-link uk-flex uk-flex-middle">
-                        <img src="assets/common-assets/common/zenodoDump.png" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
+                        <img src="assets/common-assets/common/zenodoDump.png" alt="Zenodo dump" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
                       </a>
                     </ng-container>
                   </div>
                 </div>
               </div>
+
+              <div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-flex uk-flex-top">
+                <!-- filters pills -->
+                <div class="uk-width-expand@m">
+                  <ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
+                </div>
+              </div>
               <div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
                    *ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
                 <p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>

From b71bdfa559a84623bde09f987edc9054a167e588 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 5 Apr 2024 20:13:05 +0300
Subject: [PATCH 20/27] [new-reorder]: Add multi charts in admin indicators
 (works now only for charts in UI). Deprecated transition-group disable/enable
 method.

---
 dashboard/menu/menu.component.ts              |    2 -
 monitor-admin/topic/indicators.component.html | 1025 ++++++++++-------
 monitor-admin/topic/indicators.component.ts   |  130 ++-
 monitor-admin/topic/topic.component.ts        |   30 +-
 monitor-admin/topic/topic.module.ts           |    3 +-
 monitor-admin/utils/indicator-utils.ts        |   10 +
 monitor/entities/stakeholder.ts               |    1 +
 ...or-indicator-stakeholder-base.component.ts |   28 +-
 .../transition-group.component.ts             |   16 +-
 9 files changed, 758 insertions(+), 487 deletions(-)

diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts
index d756a77f..9f89224b 100644
--- a/dashboard/menu/menu.component.ts
+++ b/dashboard/menu/menu.component.ts
@@ -372,10 +372,8 @@ export class MenuComponent implements OnInit {
 	}
 
 	public valueChange() {
-		this.elements.disable();
 		this.cdr.detectChanges();
 		this.elements.init();
-		this.elements.enable();
 	}
 
 	public get displayMenuItems() {
diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 1f68e246..2b0a57c3 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -1,456 +1,657 @@
 <div *ngIf="stakeholder && canEdit" class="uk-section">
-  <div *ngIf="numberSections">
-    <h5 class="uk-text-bold">Number Indicators</h5>
-    <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
-      <div *ngFor="let number of numbers; let i=index">
-        <div class="section">
-          <div class="tools">
-            <div class="uk-flex uk-flex-middle">
-              <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
-                 uk-tooltip="Create a new section">
-                <icon name="add" [flex]="true"></icon>
-              </a>
-              <a *ngIf="!number.defaultId" [attr.uk-tooltip]="'Delete section'"
-                 (click)="deleteSectionOpen(number, i, 'number', 'delete')">
-                <icon name="close" [flex]="true"></icon>
-              </a>
-            </div>
-          </div>
-          <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
-            <div input [formInput]="numberSections.at(i).get('title')"
-                 (focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
-                 class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
-          </div>
-          <div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: number" uk-grid>
-            <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-              <div *ngIf="indicator" [id]="indicator._id"
-                   [ngClass]="getNumberClassBySize(indicator.width)">
-                <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative">
-                  <div *ngIf="!dragging"
-                      class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
-                    <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
-                      <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
-                      <icon [flex]="true" name="more_vert"></icon>
-                    </a>
-                    <div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
-                      <ul class="uk-nav uk-dropdown-nav">
-                        <ng-container *ngIf="isCurator">
-                          <li><a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a></li>
-                        </ng-container>
-                        <ng-container *ngIf="showVisibility">
-                          <li *ngIf="isCurator" class="uk-nav-divider"></li>
-                          <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
-                            <li>
-                              <a (click)="changeIndicatorStatus(number._id, indicator, v.value);hide(element)">
-                                <div class="uk-flex uk-flex-middle">
-                                  <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
-                                  <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
-                                  <icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
+    <div *ngIf="numberSections">
+        <h5 class="uk-text-bold">Number Indicators</h5>
+        <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
+            <div *ngFor="let number of numbers; let i=index">
+                <div class="section">
+                    <div class="tools">
+                        <div class="uk-flex uk-flex-middle">
+                            <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
+                               uk-tooltip="Create a new section">
+                                <icon name="add" [flex]="true"></icon>
+                            </a>
+                            <a *ngIf="!number.defaultId" [attr.uk-tooltip]="'Delete section'"
+                               (click)="deleteSectionOpen(number, i, 'number', 'delete')">
+                                <icon name="close" [flex]="true"></icon>
+                            </a>
+                        </div>
+                    </div>
+                    <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
+                        <div input [formInput]="numberSections.at(i).get('title')"
+                             (focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
+                             class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
+                    </div>
+                    <div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match"
+                         uk-sortable="group: number" uk-grid>
+                        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                            <div *ngIf="indicator" [id]="indicator._id"
+                                 [ngClass]="getNumberClassBySize(indicator.width)">
+                                <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative">
+                                    <div *ngIf="!dragging"
+                                         class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
+                                        <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
+                                            <icon *ngIf="showVisibility" [flex]="true"
+                                                  [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
+                                                  ratio="0.6"></icon>
+                                            <icon [flex]="true" name="more_vert"></icon>
+                                        </a>
+                                        <div #element class="uk-dropdown"
+                                             uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
+                                            <ul class="uk-nav uk-dropdown-nav">
+                                                <ng-container *ngIf="isCurator">
+                                                    <li>
+                                                        <a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a>
+                                                    </li>
+                                                </ng-container>
+                                                <ng-container *ngIf="showVisibility">
+                                                    <li *ngIf="isCurator" class="uk-nav-divider"></li>
+                                                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
+                                                        <li>
+                                                            <a (click)="changeIndicatorStatus(number._id, indicator, v.value);hide(element)">
+                                                                <div class="uk-flex uk-flex-middle">
+                                                                    <icon [flex]="true" [name]="v.icon"
+                                                                          ratio="0.6"></icon>
+                                                                    <span class="uk-margin-small-left uk-width-expand">{{ v.label }}</span>
+                                                                    <icon *ngIf="indicator.visibility === v.value"
+                                                                          [flex]="true" name="done"
+                                                                          class="uk-text-secondary" ratio="0.8"></icon>
+                                                                </div>
+                                                            </a>
+                                                        </li>
+                                                    </ng-template>
+                                                </ng-container>
+                                                <ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
+                                                    <li class="uk-nav-divider">
+                                                    <li>
+                                                        <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
+                                                    </li>
+                                                </ng-container>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}</div>
+                                    <div class="number uk-text-small uk-text-bold">
+                                        <span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
+                                              [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
+                                        <span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</span>
+                                    </div>
                                 </div>
-                              </a>
-                            </li>
-                          </ng-template>
-                        </ng-container>
-                        <ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
-                          <li class="uk-nav-divider">
-                          <li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a></li>
-                        </ng-container>
-                      </ul>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div *ngIf="isCurator" class="uk-margin-top">
+                        <div class="uk-grid uk-grid-small" uk-grid>
+                            <div [ngClass]="getNumberClassBySize('small')">
+                                <a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset"
+                                   (click)="editNumberIndicatorOpen(number)">
+                                    <div class="uk-text-background uk-margin-right">
+                                        <icon name="add" [flex]="true" ratio="1.5"></icon>
+                                    </div>
+                                    <div class="uk-text-bold uk-margin-remove">
+                                        Create a number Indicator
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
                     </div>
-                  </div>
-                  <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
-                  <div class="number uk-text-small uk-text-bold">
-                    <span *ngIf="numberResults.get(i + '-' + j)" [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
-                    <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
-                  </div>
                 </div>
-              </div>
-            </ng-template>
-          </div>
-          <div *ngIf="isCurator" class="uk-margin-top">
-            <div class="uk-grid uk-grid-small" uk-grid>
-              <div [ngClass]="getNumberClassBySize('small')">
-                <a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset" (click)="editNumberIndicatorOpen(number)">
-                  <div class="uk-text-background uk-margin-right">
-                    <icon name="add" [flex]="true" ratio="1.5"></icon>
-                  </div>
-                  <div class="uk-text-bold uk-margin-remove">
-                    Create a number Indicator
-                  </div>
-                </a>
-              </div>
             </div>
-          </div>
+            <div>
+                <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
+            </div>
         </div>
-      </div>
-      <div>
-        <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
-      </div>
     </div>
-  </div>
-  <div *ngIf="chartSections" class="uk-margin-large-top">
-    <h5 class="uk-text-bold">Chart Indicators</h5>
-    <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
-      <div *ngFor="let chart of charts; let i=index">
-        <div class="section uk-margin-top uk-padding-small">
-          <div class="tools">
-            <div class="uk-flex uk-flex-middle">
-              <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
-                 title="Create a new section">
-                <icon name="add" [flex]="true"></icon>
-              </a>
-              <a *ngIf="!chart.defaultId" [attr.uk-tooltip]="'Delete section'"
-                 (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
-                <icon name="close" [flex]="true"></icon>
-              </a>
-            </div>
-          </div>
-          <div *ngIf="chartSections.at(i)"
-               class="uk-margin-medium-bottom">
-            <div input [formInput]="chartSections.at(i).get('title')"
-                 (focusEmitter)="saveSection($event, chartSections.at(i), i)"
-                 class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
-          </div>
-          <div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: chart" uk-grid>
-            <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-              <div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
-                <div class="uk-card uk-card-default uk-card-body uk-position-relative">
-                  <div *ngIf="!dragging"
-                      class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
-                    <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
-                      <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
-                      <icon [flex]="true" name="more_vert"></icon>
-                    </a>
-                    <div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
-                      <ul class="uk-nav uk-dropdown-nav">
-                        <ng-container *ngIf="isCurator">
-                          <li><a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a></li>
-                        </ng-container>
-                        <ng-container *ngIf="showVisibility">
-                          <li *ngIf="isCurator" class="uk-nav-divider"></li>
-                          <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
-                            <li>
-                              <a (click)="changeIndicatorStatus(chart._id, indicator, v.value);">
-                                <div class="uk-flex uk-flex-middle">
-                                  <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
-                                  <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
-                                  <icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
+    <div *ngIf="chartSections" class="uk-margin-large-top">
+        <h5 class="uk-text-bold">Chart Indicators</h5>
+        <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
+            <div *ngFor="let chart of charts; let i=index">
+                <div class="section uk-margin-top uk-padding-small">
+                    <div class="tools">
+                        <div class="uk-flex uk-flex-middle">
+                            <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
+                               title="Create a new section">
+                                <icon name="add" [flex]="true"></icon>
+                            </a>
+                            <a *ngIf="!chart.defaultId" [attr.uk-tooltip]="'Delete section'"
+                               (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
+                                <icon name="close" [flex]="true"></icon>
+                            </a>
+                        </div>
+                    </div>
+                    <div *ngIf="chartSections.at(i)"
+                         class="uk-margin-medium-bottom">
+                        <div input [formInput]="chartSections.at(i).get('title')"
+                             (focusEmitter)="saveSection($event, chartSections.at(i), i)"
+                             class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
+                    </div>
+                    <div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match"
+                         uk-sortable="group: chart" uk-grid>
+                        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+                            <div *ngIf="indicator" [id]="indicator._id"
+                                 [ngClass]="getChartClassBySize(indicator.width)">
+                                <div class="uk-card uk-card-default uk-card-body uk-position-relative">
+                                    <div *ngIf="!dragging"
+                                         class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
+                                        <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
+                                            <icon *ngIf="showVisibility" [flex]="true"
+                                                  [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
+                                                  ratio="0.6"></icon>
+                                            <icon [flex]="true" name="more_vert"></icon>
+                                        </a>
+                                        <div #element class="uk-dropdown"
+                                             uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
+                                            <ul class="uk-nav uk-dropdown-nav">
+                                                <ng-container *ngIf="isCurator">
+                                                    <li>
+                                                        <a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a>
+                                                    </li>
+                                                </ng-container>
+                                                <ng-container *ngIf="showVisibility">
+                                                    <li *ngIf="isCurator" class="uk-nav-divider"></li>
+                                                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
+                                                        <li>
+                                                            <a (click)="changeIndicatorStatus(chart._id, indicator, v.value);">
+                                                                <div class="uk-flex uk-flex-middle">
+                                                                    <icon [flex]="true" [name]="v.icon"
+                                                                          ratio="0.6"></icon>
+                                                                    <span class="uk-margin-small-left uk-width-expand">{{ v.label }}</span>
+                                                                    <icon *ngIf="indicator.visibility === v.value"
+                                                                          [flex]="true" name="done"
+                                                                          class="uk-text-secondary" ratio="0.8"></icon>
+                                                                </div>
+                                                            </a>
+                                                        </li>
+                                                    </ng-template>
+                                                </ng-container>
+                                                <ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
+                                                    <li class="uk-nav-divider">
+                                                    <li>
+                                                        <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a>
+                                                    </li>
+                                                </ng-container>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div *ngIf="indicator.name"
+                                             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"
+                                                webkitallowfullscreen="true"
+                                                [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, getActiveIndicatorPath(indicator)))"
+                                                class="uk-width-1-1"
+                                                [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                                                [class.uk-blend-multiply]="!isFullscreen"></iframe>
+                                        <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths &&
+                        indicator.indicatorPaths.length > 0 && getActiveIndicatorPath(indicator).source !=='image'">
+                                            <img class="uk-width-1-1 uk-blend-multiply"
+                                                 [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                                                 src="assets/chart-placeholder.png">
+                                        </div>
+                                        <div *ngIf="indicator.indicatorPaths &&  getActiveIndicatorPath(indicator) && getActiveIndicatorPath(indicator).source === 'image'">
+                                            <img class="uk-width-1-1 uk-blend-multiply"
+                                                 [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                                                 [src]="getActiveIndicatorPath(indicator).url">
+                                        </div>
+                                    </div>
                                 </div>
-                              </a>
-                            </li>
-                          </ng-template>
-                        </ng-container>
-                        <ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
-                          <li class="uk-nav-divider">
-                          <li><a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a></li>
-                        </ng-container>
-                      </ul>
+                            </div>
+                        </ng-template>
                     </div>
-                  </div>
-                  <div>
-                    <div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
-                      {{indicator.name}}
+                    <div *ngIf="isCurator" class="uk-margin-top">
+                        <div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
+                            <div [ngClass]="getChartClassBySize('small')">
+                                <div class=" uk-card uk-card-default uk-card-body clickable"
+                                     (click)="editChartIndicatorOpen(chart)">
+                                    <h6 class="uk-text-bold uk-text-center">
+                                        Create a custom indicator
+                                    </h6>
+                                    <div class="uk-text-muted uk-text-small">
+                                        Use our advance tool to create a custom Indicator that suit the needs of your
+                                        funding
+                                        KPI's.
+                                    </div>
+                                    <div class="uk-flex uk-flex-center uk-text-background uk-margin-medium-top">
+                                        <icon name="add" ratio="3" [flex]="true"></icon>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !=='image' &&
-                            safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
-                            allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
-                            [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
-                            class="uk-width-1-1" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
-														[class.uk-blend-multiply]="!isFullscreen"></iframe>
-                    <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths && 
-                    indicator.indicatorPaths.length > 0 && indicator.indicatorPaths[0].source !=='image'">
-                      <img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
-                           src="assets/chart-placeholder.png">
-                    </div>
-                    <div *ngIf="indicator.indicatorPaths &&  indicator.indicatorPaths[0] && 
-                    indicator.indicatorPaths[0].source === 'image'">
-                      <img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
-                           [src]="indicator.indicatorPaths[0].url">
-                    </div>
-                  </div>
                 </div>
-              </div>
-            </ng-template>
-          </div>
-          <div *ngIf="isCurator" class="uk-margin-top">
-            <div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
-              <div [ngClass]="getChartClassBySize('small')">
-                <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
-                  <h6 class="uk-text-bold uk-text-center">
-                    Create a custom indicator
-                  </h6>
-                  <div class="uk-text-muted uk-text-small">
-                    Use our advance tool to create a custom Indicator that suit the needs of your funding
-                    KPI's.
-                  </div>
-                  <div class="uk-flex uk-flex-center uk-text-background uk-margin-medium-top">
-                    <icon name="add" ratio="3" [flex]="true"></icon>
-                  </div>
-                </div>
-              </div>
             </div>
-          </div>
+            <div>
+                <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
+            </div>
         </div>
-      </div>
-      <div>
-        <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
-      </div>
     </div>
-  </div>
 </div>
 <div *ngIf="loading" class="uk-position-relative uk-height-large">
     <loading class="uk-position-center"></loading>
 </div>
 <modal-alert #editNumberModal
-						[large]="true" classTitle="uk-background-primary uk-light"
-						(alertOutput)="saveIndicator()"
-						[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
+             [large]="true" classTitle="uk-background-primary uk-light"
+             (alertOutput)="saveIndicator()"
+             [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
     <div *ngIf="editing" class="uk-position-relative uk-height-large">
         <loading class="uk-position-center"></loading>
     </div>
-  <div [class.uk-hidden]="editing" class="uk-padding-small">
-    <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
-      <div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
-      <div *ngIf="stakeholder.defaultId != '-1' && (  (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
-           input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
-      </div>
-      <div input class="uk-width-1-1" *ngIf="stakeholder.defaultId" [formInput]="numberIndicatorFb.get('additionalDescription')"
-           placeholder="Description" type="textarea">
-      </div>
-      <div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
-           placeholder="Visibility" [options]="stakeholderUtils.visibilities" type="select">
-      </div>
-      <div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
-           placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
-      </div>
-      <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
-        <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
-          <div class="uk-grid" uk-grid>
-            <div class="uk-width-1-1">
-              <div class="uk-grid" uk-grid>
-                <div class="uk-width-1-1 uk-flex uk-flex-middle">
-                  <div input class="uk-width-expand" [formInput]="indicatorPath.get('url')" placeholder="Number URL">
-                    <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
-                  </div>
-                  <div class='uk-padding-small'>
-                    <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
-                  </div>
-                </div>
-                <div class="uk-width-1-2@m">
-                  <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
-                       [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
-                  </div>
-                </div>
-                <div class="uk-width-1-2@m">
-                  <div input [formInput]="indicatorPath.get('format')" placeholder="Format"
-                       [options]="indicatorUtils.formats" type="select">
-                  </div>
-                </div>
-                <div class="uk-width-1-2@m" formArrayName="parameters">
-                  <div *ngIf="getParameter(i, 'statsProfile', 'number') && statsProfiles" input [formInput]="getParameter(i, 'statsProfile', 'number').get('value')"
-                       [type]="'select'"
-                       [options]="statsProfiles"
-                       placeholder="Stats Profile"></div>
-                </div>
-              </div>
+    <div [class.uk-hidden]="editing" class="uk-padding-small">
+        <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
+            <div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
+            <div *ngIf="stakeholder.defaultId != '-1' && (  (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
+                 input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')"
+                 placeholder="Profile description" type="textarea">
             </div>
-            <div formArrayName="jsonPath" class="uk-width-1-1">
-              <h6 class="uk-text-bold uk-margin-remove-bottom">
-                <span>JSON Path</span>
-              </h6>
-              <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
-                <div class="uk-text-danger uk-text-small">
-                  This JSON path is not valid or the result has not been calculated yet.
-                  Please press calculate on box below to see the result.
-                </div>
-              </div>
-              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle" uk-grid>
-                <div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
-                  <div input class="uk-width-1-1" [formInput]="jsonPath" [placeholder]="'Level ' + +(j + 1)"></div>
-                  <a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
-                     class="uk-margin-small-left uk-text-danger"
-                     [class.uk-disabled]="getJsonPath(i).disabled"
-                     (click)="removeJsonPath(i, j)">
-                    <icon name="close"></icon>
-                  </a>
-                  <span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)" class="uk-text-center uk-margin-small-left">
-                    <icon name="east"></icon>
-                  </span>
-                </div>
-                <div *ngIf="indicator.defaultId === null">
-                  <button class="uk-icon-button uk-button-primary" (click)="addJsonPath(i)">
-                    <icon name="add" [flex]="true"></icon>
-                  </button>
-                </div>
-              </div>
+            <div input class="uk-width-1-1" *ngIf="stakeholder.defaultId"
+                 [formInput]="numberIndicatorFb.get('additionalDescription')"
+                 placeholder="Description" type="textarea">
             </div>
-            <div class="uk-width-1-1 uk-flex uk-flex-center">
-              <div class="uk-flex uk-position-relative">
-                <span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
-                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0"
-                        [innerHTML]="(numberIndicatorPaths.at(i).get('format').value == 'NUMBER'?(numberIndicatorPaths.at(i).get('result').value | numberRound: 2:1:stakeholder.locale):(numberIndicatorPaths.at(i).get('result').value | numberPercentage: stakeholder.locale))">
-                  </span>
-                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
-                    --
-                  </span>
-                </span>
-                <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
-                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
-                  <div class="uk-position-relative uk-height-1-1">
-                    <a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
-                         [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
-                         (click)="validateJsonPath(i, true)">
-                      <div>
-                        <icon name="refresh"></icon>
-                      </div>
-                      <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
-                      <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
-                    </a>
-                  </div>
-                </div>
-                <div *ngIf="hasDifference(i, 'number')"
-                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
-                  <div class="uk-position-relative uk-height-1-1">
-                    <a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
-                       [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
-                       (click)="refreshIndicator('number')">
-                      <div>
-                        <icon name="refresh"></icon>
-                      </div>
-                      <span>Calculate</span>
-                      <span *ngIf="numberIndicatorPaths.at(i).get('result').errors?.validating">Calculating...</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
+            <div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
+                 placeholder="Visibility" [options]="stakeholderUtils.visibilities" type="select">
+            </div>
+            <div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
+                 placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
+            </div>
+            <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>
+                        <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">
+                            <a (click)="activeNumberIndicatorPath(i)">
+                          <span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value !== 0"
+                                [innerHTML]="(indicatorPath.get('format').value == 'NUMBER'?(indicatorPath.get('result').value | numberRound: 2:1:stakeholder.locale):(indicatorPath.get('result').value | numberPercentage: stakeholder.locale))">
+                          </span>
+                                <span *ngIf="!indicatorPath.get('result').valid || indicatorPath.get('result').value === 0">
+                            --
+                          </span>
+                            </a>
+                            <span *ngIf="!indicator.defaultId && numberIndicatorPaths.length > 1"
+                                  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 class="uk-link-reset uk-flex uk-flex-middle">
+                              <icon [flex]="true" name="more_vert"></icon>
+                            </a>
+                            <div #element
+                                 uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
+                               <ul class="uk-nav uk-dropdown-nav">
+                                  <li *ngIf="i > 0">
+                                    <a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, 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>
+                                      </div>
+                                    </a>
+                                  </li>
+                                  <li *ngIf="i < numberIndicatorPaths.length - 1">
+                                    <a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, 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>
+                                      </div>
+                                    </a>
+                                  </li>
+                                  <li>
+                                    <a (click)="removeNumberIndicatorPath(i); hide(element)">
+                                      <div class="uk-flex uk-flex-middle">
+                                         <icon [flex]="true" name="delete" ratio="0.6"></icon>
+                                         <span class="uk-margin-small-left uk-width-expand">Delete</span>
+                                      </div>
+                                    </a>
+                                  </li>
+                              </ul>
+                            </div>
+                      </span>
+                        </li>
+                        <li class="uk-margin-small-top">
+                            <a (click)="activeNumberIndicatorPath(numberIndicatorPaths.length); $event.preventDefault()"
+                               class="uk-flex uk-flex-middle">
+                                <icon name="add" [flex]="true"></icon>
+                                <span class="uk-text-uppercase">Add</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
+                    <div *ngIf="(!indicator.activePath && i == 0) || indicator.activePath === i" class="uk-grid"
+                         uk-grid>
+                        <div class="uk-width-1-1">
+                            <div class="uk-grid" uk-grid>
+                                <div class="uk-width-1-1 uk-flex uk-flex-middle">
+                                    <div input class="uk-width-expand" [formInput]="indicatorPath.get('url')"
+                                         placeholder="Number URL">
+                                        <div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
+                                    </div>
+                                    <div class='uk-padding-small'>
+                                        <a class="uk-link-reset"
+                                           (click)="copyToClipboard(indicatorPath.get('url').value)">
+                                            <icon [flex]="true" name="content_copy"></icon>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="uk-width-1-2@m">
+                                    <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
+                                         [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes"
+                                         type="select">
+                                    </div>
+                                </div>
+                                <div class="uk-width-1-2@m">
+                                    <div input [formInput]="indicatorPath.get('format')" placeholder="Format"
+                                         [options]="indicatorUtils.formats" type="select">
+                                    </div>
+                                </div>
+                                <div class="uk-width-1-2@m" formArrayName="parameters">
+                                    <div *ngIf="getParameter(i, 'statsProfile', 'number') && statsProfiles" input
+                                         [formInput]="getParameter(i, 'statsProfile', 'number').get('value')"
+                                         [type]="'select'"
+                                         [options]="statsProfiles"
+                                         placeholder="Stats Profile"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div formArrayName="jsonPath" class="uk-width-1-1">
+                            <h6 class="uk-text-bold uk-margin-remove-bottom">
+                                <span>JSON Path</span>
+                            </h6>
+                            <div *ngIf="indicatorPath.get('result').invalid && indicatorPath.get('result').errors.required">
+                                <div class="uk-text-danger uk-text-small">
+                                    This JSON path is not valid or the result has not been calculated yet.
+                                    Please press calculate on box below to see the result.
+                                </div>
+                            </div>
+                            <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle"
+                                 uk-grid>
+                                <div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index"
+                                     class="uk-flex uk-flex-middle">
+                                    <div input class="uk-width-1-1" [formInput]="jsonPath"
+                                         [placeholder]="'Level ' + +(j + 1)"></div>
+                                    <a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
+                                       class="uk-margin-small-left uk-text-danger"
+                                       [class.uk-disabled]="getJsonPath(i).disabled"
+                                       (click)="removeJsonPath(i, j)">
+                                        <icon name="close"></icon>
+                                    </a>
+                                    <span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)"
+                                          class="uk-text-center uk-margin-small-left">
+                        <icon name="east"></icon>
+                      </span>
+                                </div>
+                                <div *ngIf="indicator.defaultId === null">
+                                    <button class="uk-icon-button uk-button-primary" (click)="addJsonPath(i)">
+                                        <icon name="add" [flex]="true"></icon>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="uk-width-1-1 uk-flex uk-flex-center">
+                            <div class="uk-flex uk-position-relative">
+                    <span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
+                      <span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value !== 0"
+                            [innerHTML]="(indicatorPath.get('format').value == 'NUMBER'?(indicatorPath.get('result').value | numberRound: 2:1:stakeholder.locale):(indicatorPath.get('result').value | numberPercentage: stakeholder.locale))">
+                      </span>
+                      <span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value === 0">
+                        --
+                      </span>
+                    </span>
+                                <div *ngIf="indicatorPath.get('result').invalid"
+                                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
+                                    <div class="uk-position-relative uk-height-1-1">
+                                        <a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
+                                           [class.uk-disabled]="indicatorPath.get('url').invalid"
+                                           (click)="validateJsonPath(i, true)">
+                                            <div>
+                                                <icon name="refresh"></icon>
+                                            </div>
+                                            <span *ngIf="indicatorPath.get('result').errors.required">Calculate</span>
+                                            <span *ngIf="indicatorPath.get('result').errors.validating">Calculating...</span>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div *ngIf="hasDifference(i, 'number')"
+                                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
+                                    <div class="uk-position-relative uk-height-1-1">
+                                        <a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
+                                           [class.uk-disabled]="indicatorPath.get('url').invalid"
+                                           (click)="refreshIndicator('number')">
+                                            <div>
+                                                <icon name="refresh"></icon>
+                                            </div>
+                                            <span>Calculate</span>
+                                            <span *ngIf="indicatorPath.get('result').errors?.validating">Calculating...</span>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
+        <div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
     </div>
-    <div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
-  </div>
 </modal-alert>
 <modal-alert #editChartModal [large]="true" (alertOutput)="saveIndicator()" classTitle="uk-background-primary uk-light"
-						[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
-	<div *ngIf="editing" class="uk-position-relative uk-height-large">
-		<loading class="uk-position-center"></loading>
-	</div>
-  <div [class.uk-hidden]="editing" class="uk-padding-small">
-    <div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
-      <div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
-      <div *ngIf="stakeholder.defaultId != '-1' && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
-           input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
-      </div>
-      <div *ngIf="stakeholder.defaultId" input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
-           placeholder="Description" type="textarea">
-      </div>
-      <div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
-           placeholder="Status" [options]="stakeholderUtils.visibilities" type="select">
-      </div>
-      <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" placeholder="Chart width"
-           [options]="indicatorUtils.indicatorSizes" type="select">
-      </div>
-      <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" placeholder="Chart height"
-            [options]="indicatorUtils.indicatorSizes" type="select">
-      </div>
-      <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
-        <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let  i=index;"
-             [formGroupName]="i" class="uk-grid" uk-grid>
-          <div class="uk-width-1-1 uk-flex uk-flex-middle">
-            <div input class="uk-width-expand" [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
-                 [formInput]="indicatorPath.get('url')" placeholder="Chart URL">
-              <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
+             [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
+    <div *ngIf="editing" class="uk-position-relative uk-height-large">
+        <loading class="uk-position-center"></loading>
+    </div>
+    <div [class.uk-hidden]="editing" class="uk-padding-small">
+        <div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
+            <div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
+            <div *ngIf="stakeholder.defaultId != '-1' && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
+                 input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')"
+                 placeholder="Default Description" type="textarea">
             </div>
-            <div class='uk-padding-small'>
-              <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
+            <div *ngIf="stakeholder.defaultId" input class="uk-width-1-1"
+                 [formInput]="chartIndicatorFb.get('additionalDescription')"
+                 placeholder="Description" type="textarea">
             </div>
-          </div>
-          <div class="uk-width-1-1" formArrayName="parameters">
-            <div class="uk-grid" uk-grid>
-              <div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
-                   placeholder="Chart Title"></div>
-              <div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1" placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')" label="Chart Subtitle"></div>
-              <div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
-                   [options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
-                   type="select"></div>
-              <div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
-                   [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)" type="select"></div>
-              <div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'xAxisTitle').get('value')"
-                   placeholder="X-Axis Title"></div>
-              <div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'yAxisTitle').get('value')"
-                   placeholder="Y-Axis Title"></div>
-              <div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_0').get('value')"
-                   placeholder="Data Title"></div>
-              <div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_1').get('value')"
-                   placeholder="Data Title"></div>
-              <div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'start_year').get('value')"
-                   placeholder="Year (From)"></div>
-              <div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'end_year').get('value')"
-                   placeholder="Year (To)"></div>
-              <div *ngIf="getParameter(i, 'statsProfile') && statsProfiles" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'statsProfile').get('value')"
-                   [type]="'select'" [options]="statsProfiles" placeholder="Stats Profile"></div>
+            <div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
+                 placeholder="Status" [options]="stakeholderUtils.visibilities" type="select">
             </div>
-          </div>
-          <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
-               class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
-            <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
-                 class="uk-width-1-1 uk-height-large refresh-indicator">
-              <div class="uk-position-relative uk-height-1-1">
-                <a class="uk-position-center uk-text-center uk-link-reset" (click)="refreshIndicator()">
-                  <div>
-                    <icon name="refresh"></icon>
-                  </div>
-                  <span>Click to refresh the graph view</span>
-                </a>
-              </div>
+            <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" placeholder="Chart width"
+                 [options]="indicatorUtils.indicatorSizes" type="select">
             </div>
-            <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" [class.uk-blend-multiply]="!isFullscreen"
-                    [src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
-                    class="uk-width-1-1 uk-height-large"></iframe>
-            <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
-              <img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
+            <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" placeholder="Chart height"
+                 [options]="indicatorUtils.indicatorSizes" type="select">
+            </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>
+                        <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">
+                            <a (click)="activeChartIndicatorPath(i)">
+                                <span>{{ getParameter(i, 'title')?.get('value')?.value ? getParameter(i, 'title').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"
+                                  [class.uk-invisible-hover]="indicator.activePath !== i"
+                                  (click)="$event.stopPropagation();$event.preventDefault()">
+                            <a class="uk-link-reset uk-flex uk-flex-middle">
+                              <icon [flex]="true" name="more_vert"></icon>
+                            </a>
+                            <div #element
+                                 uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
+                               <ul class="uk-nav uk-dropdown-nav">
+                                  <li *ngIf="i > 0">
+                                    <a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, 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>
+                                      </div>
+                                    </a>
+                                  </li>
+                                  <li *ngIf="i < chartIndicatorPaths.length - 1">
+                                    <a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, 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>
+                                      </div>
+                                    </a>
+                                  </li>
+                                  <li>
+                                    <a (click)="removeChartIndicatorPath(i); hide(element)">
+                                      <div class="uk-flex uk-flex-middle">
+                                         <icon [flex]="true" name="delete" ratio="0.6"></icon>
+                                         <span class="uk-margin-small-left uk-width-expand">Delete</span>
+                                      </div>
+                                    </a>
+                                  </li>
+                              </ul>
+                            </div>
+                      </span>
+                        </li>
+                        <li class="uk-margin-small-top">
+                            <a (click)="activeChartIndicatorPath(chartIndicatorPaths.length); $event.preventDefault()"
+                               class="uk-flex uk-flex-middle">
+                                <icon name="add" [flex]="true"></icon>
+                                <span class="uk-text-uppercase">Add</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let  i=index;"
+                     [formGroupName]="i">
+                    <div *ngIf="(!indicator.activePath && i == 0) || indicator.activePath === i" class="uk-grid"
+                         uk-grid>
+                        <div class="uk-width-1-1 uk-flex uk-flex-middle">
+                            <div input class="uk-width-expand"
+                                 [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
+                                 [formInput]="indicatorPath.get('url')" placeholder="Chart URL">
+                                <div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
+                            </div>
+                            <div class='uk-padding-small'>
+                                <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)">
+                                    <icon [flex]="true" name="content_copy"></icon>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="uk-width-1-1" formArrayName="parameters">
+                            <div class="uk-grid" uk-grid>
+                                <div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1"
+                                     [formInput]="getParameter(i, 'title').get('value')"
+                                     placeholder="Chart Title"></div>
+                                <div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1"
+                                     placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')"
+                                     label="Chart Subtitle"></div>
+                                <div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s"
+                                     [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
+                                     [options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
+                                     type="select"></div>
+                                <div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
+                                     [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
+                                     type="select"></div>
+                                <div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'xAxisTitle').get('value')"
+                                     placeholder="X-Axis Title"></div>
+                                <div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'yAxisTitle').get('value')"
+                                     placeholder="Y-Axis Title"></div>
+                                <div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'data_title_0').get('value')"
+                                     placeholder="Data Title"></div>
+                                <div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'data_title_1').get('value')"
+                                     placeholder="Data Title"></div>
+                                <div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'start_year').get('value')"
+                                     placeholder="Year (From)"></div>
+                                <div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s"
+                                     [formInput]="getParameter(i, 'end_year').get('value')"
+                                     placeholder="Year (To)"></div>
+                                <div *ngIf="getParameter(i, 'statsProfile') && statsProfiles" input
+                                     class="uk-width-1-3@s" [formInput]="getParameter(i, 'statsProfile').get('value')"
+                                     [type]="'select'" [options]="statsProfiles" placeholder="Stats Profile"></div>
+                            </div>
+                        </div>
+                        <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
+                             class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
+                            <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
+                                 class="uk-width-1-1 uk-height-large refresh-indicator">
+                                <div class="uk-position-relative uk-height-1-1">
+                                    <a class="uk-position-center uk-text-center uk-link-reset"
+                                       (click)="refreshIndicator()">
+                                        <div>
+                                            <icon name="refresh"></icon>
+                                        </div>
+                                        <span>Click to refresh the graph view</span>
+                                    </a>
+                                </div>
+                            </div>
+                            <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
+                                    [class.uk-blend-multiply]="!isFullscreen"
+                                    [src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true"
+                                    mozallowfullscreen="true" webkitallowfullscreen="true"
+                                    class="uk-width-1-1 uk-height-large"></iframe>
+                            <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
+                                <img class="uk-width-1-1 uk-height-large uk-blend-multiply"
+                                     [src]="indicator.indicatorPaths[i].url">
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
+        <div #editChartNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
     </div>
-    <div #editChartNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
-  </div>
 </modal-alert>
-<modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
-  <div [class.uk-invisible]="editing" class="uk-position-relative">
-    <div *ngIf="editing">
-      <loading class="uk-position-center"></loading>
+<modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false"
+             classTitle="uk-background-primary uk-light">
+    <div [class.uk-invisible]="editing" class="uk-position-relative">
+        <div *ngIf="editing">
+            <loading class="uk-position-center"></loading>
+        </div>
+        You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
+		"{{ indicator.name ? indicator.name : (indicator.indicatorPaths[0]?.parameters?.title ? indicator.indicatorPaths[0].parameters.title : '') }}
+        "</span> indicator permanently.
+        <div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
+            Indicators of all profiles based on this default indicator, will be deleted as well.
+        </div>
+        Are you sure you want to proceed?
+        <div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
     </div>
-		You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
-		"{{indicator.name ? indicator.name : (indicator.indicatorPaths[0]?.parameters?.title?indicator.indicatorPaths[0].parameters.title:'')}}"</span> indicator permanently.
-		<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
-			Indicators of all profiles based on this default indicator, will be deleted as well.
-		</div>
-		Are you sure you want to proceed?
-		<div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
-	</div>
 </modal-alert>
-<modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
-	<div [class.uk-invisible]="editing" class="uk-position-relative">
-    <div *ngIf="editing">
-      <loading class="uk-position-center"></loading>
+<modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false"
+             classTitle="uk-background-primary uk-light">
+    <div [class.uk-invisible]="editing" class="uk-position-relative">
+        <div *ngIf="editing">
+            <loading class="uk-position-center"></loading>
+        </div>
+        You are about to delete this section and its indicators permanently.
+        <div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
+            Sections of all profiles based on this default section and their contents, will be deleted as well.
+        </div>
+        Are you sure you want to proceed?
     </div>
-		You are about to delete this section and its indicators permanently.
-		<div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
-			Sections of all profiles based on this default section and their contents, will be deleted as well.
-		</div>
-		Are you sure you want to proceed?
-	</div>
 </modal-alert>
 <ng-template #new_section let-type="type">
-  <div class="section">
-    <div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
-      <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
-        <icon name="add" [flex]="true"></icon>
-        <span class="uk-margin-small-left">New section</span>
-      </button>
+    <div class="section">
+        <div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
+            <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
+                <icon name="add" [flex]="true"></icon>
+                <span class="uk-margin-small-left">New section</span>
+            </button>
+        </div>
     </div>
-  </div>
 </ng-template>
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 62883ae6..42e85ddc 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -20,7 +20,7 @@ import {
   Visibility
 } from "../../monitor/entities/stakeholder";
 import {
-  AbstractControl,
+  AbstractControl, FormArray, FormGroup,
   UntypedFormArray,
   UntypedFormBuilder,
   UntypedFormControl,
@@ -45,6 +45,7 @@ import {NotificationHandler} from "../../utils/notification-handler";
 import {IndicatorStakeholderBaseComponent} from "../utils/stakeholder-base.component";
 import {properties} from "../../../../environments/environment";
 import {StatsProfilesService} from "../utils/services/stats-profiles.service";
+import {TransitionGroupComponent} from "../../utils/transition-group/transition-group.component";
 
 declare var UIkit;
 declare var copy;
@@ -101,6 +102,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   @ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
   @ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
   @ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent;
+  /* Transition Groups */
+  @ViewChild('transitionGroup') transitionGroup: TransitionGroupComponent;
 
   public isFullscreen: boolean = false;
 
@@ -266,7 +269,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   setNumbers() {
     this.numberSections = this.fb.array([]);
     this.numberResults.clear();
-    let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
+    let urls: Map<string, [number, number, number][]> = new Map<string, [number, number, number][]>();
     this.numbers.forEach((section, i) => {
       this.numberSections.push(this.fb.group({
         _id: this.fb.control(section._id),
@@ -278,11 +281,13 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         indicators: this.fb.control(section.indicators)
       }));
       section.indicators.forEach((number, j) => {
-        let url = this.indicatorUtils.getFullUrl(this.stakeholder, number.indicatorPaths[0]);
-        const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
-        const indexes = urls.get(pair) ? urls.get(pair) : [];
-        indexes.push([i, j]);
-        urls.set(pair, indexes);
+        number.indicatorPaths.forEach((indicatorPath, k) => {
+          let url = this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath);
+          const pair = JSON.stringify([indicatorPath.source, url]);
+          const indexes = urls.get(pair) ? urls.get(pair) : [];
+          indexes.push([i, j, k]);
+          urls.set(pair, indexes);
+        });
       });
     });
     this.numberSubscription.forEach(value => {
@@ -304,10 +309,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     });
   }
 
-  private calculateResults(response: any, indexes: [number, number][]) {
-    indexes.forEach(([i, j]) => {
+  private calculateResults(response: any, indexes: [number, number, number][]) {
+    indexes.forEach(([i, j, k]) => {
       let result = JSON.parse(JSON.stringify(response));
-      this.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
+      this.numbers[i].indicators[j].indicatorPaths[k].jsonPath.forEach(jsonPath => {
         if (result) {
           result = result[jsonPath];
         }
@@ -320,7 +325,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       } else {
         result = 0;
       }
-      this.numberResults.set(i + '-' + j, result);
+      this.numberResults.set(i + '-' + j + '-' + k, result);
     });
   }
 
@@ -367,6 +372,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     return this.chartIndicatorFb.get('indicatorPaths') as UntypedFormArray;
   }
 
+  public getActiveIndicatorPath(indicator: Indicator) {
+    if(indicator.activePath) {
+      return indicator.indicatorPaths[indicator.activePath];
+    } else {
+      return indicator.indicatorPaths[0];
+    }
+  }
+
   public getNumberClassBySize(size: IndicatorSize) {
     if (size === 'small') {
       return 'uk-width-medium@m uk-width-1-1';
@@ -579,6 +592,65 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }
   }
 
+  public removeNumberIndicatorPath(index: number) {
+    this.numberIndicatorPaths.removeAt(index);
+    this.indicator.indicatorPaths.splice(index, 1);
+    this.transitionGroup.init();
+    if(this.indicator.activePath === index) {
+      this.activeNumberIndicatorPath(Math.max(0, index - 1));
+    } else if(this.indicator.activePath >  index) {
+      this.activeNumberIndicatorPath(this.indicator.activePath - 1);
+    }
+    this.numberIndicatorFb.markAsDirty();
+  }
+
+  public removeChartIndicatorPath(index: number) {
+    this.chartIndicatorPaths.removeAt(index);
+    this.indicator.indicatorPaths.splice(index, 1);
+    this.transitionGroup.init();
+    if(this.indicator.activePath === index) {
+      this.activeChartIndicatorPath(Math.max(0, index - 1));
+    } else if(this.indicator.activePath >  index) {
+      this.activeChartIndicatorPath(this.indicator.activePath - 1);
+    }
+    this.chartIndicatorFb.markAsDirty();
+  }
+
+  public moveIndicatorPath(form: FormGroup,
+                           indicatorPaths: FormArray, index: number,
+                           newIndex: number = index - 1) {
+    this.transitionGroup.init();
+    let a = indicatorPaths.at(index);
+    let b = indicatorPaths.at(newIndex);
+    indicatorPaths.setControl(index , b);
+    indicatorPaths.setControl(newIndex , a);
+    HelperFunctions.swap(this.indicator.indicatorPaths, index , newIndex);
+    if(this.indicator.activePath === index) {
+      this.indicator.activePath = newIndex;
+    } else if(this.indicator.activePath === newIndex) {
+      this.indicator.activePath = index;
+    }
+    form.markAsDirty();
+  }
+
+  public activeNumberIndicatorPath(index: number) {
+    let paths = this.numberIndicatorPaths;
+    if(index == paths.length) {
+      this.addNumberIndicatorPath();
+      this.transitionGroup.init();
+    }
+    this.indicator.activePath = index;
+  }
+
+  public activeChartIndicatorPath(index: number) {
+    let paths = this.chartIndicatorPaths;
+    if(index == paths.length) {
+      this.addChartIndicatorPath();
+      this.transitionGroup.init();
+    }
+    this.indicator.activePath = index;
+  }
+
   private getJsonPathAsFormArray(indicatorPath: IndicatorPath): UntypedFormArray {
     let jsonPath = this.fb.array([]);
     if (indicatorPath.jsonPath) {
@@ -1273,25 +1345,29 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
       if (chart.type == "chart") {
         indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(chart.url), chart.url, chart.type, stakeholder);
-        for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts) {
-          for (let chart of section.indicators) {
-            if (JSON.stringify(chart.indicatorPaths[0].chartObject) == JSON.stringify(indicatorPath.chartObject)) {
-              duplicates++;
-              exists = true;
-            }
-          }
-        }
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts.forEach((section: Section) => {
+          section.indicators.forEach(indicator => {
+            indicator.indicatorPaths.forEach(path => {
+              if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
+                duplicates++;
+                exists = true;
+              }
+            });
+          });
+        });
       } else if (chart.type == "number") {
         indicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(chart.url), chart.url, stakeholder,
           chart.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(chart.url)));
-        for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers) {
-          for (let chart of section.indicators) {
-            if (JSON.stringify(chart.indicatorPaths[0].chartObject) == JSON.stringify(indicatorPath.chartObject)) {
-              duplicates++;
-              exists = true;
-            }
-          }
-        }
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers.forEach((section: Section) => {
+          section.indicators.forEach(indicator => {
+            indicator.indicatorPaths.forEach(path => {
+              if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
+                duplicates++;
+                exists = true;
+              }
+            });
+          });
+        });
       }
       if (!exists) {
         let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility?"RESTRICTED":this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), [indicatorPath]);
diff --git a/monitor-admin/topic/topic.component.ts b/monitor-admin/topic/topic.component.ts
index b178eb46..40d128d8 100644
--- a/monitor-admin/topic/topic.component.ts
+++ b/monitor-admin/topic/topic.component.ts
@@ -242,30 +242,18 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
   }
   
   topicChanged(callback: Function, save: boolean = false) {
-    if(this.topics && save) {
-      this.topics.disable();
-    }
-    if(this.categories) {
-      this.categories.disable();
-    }
-    if(this.subCategories) {
-      this.subCategories.disable();
-    }
     if(callback) {
       callback();
     }
     this.cdr.detectChanges();
     if(this.topics && save) {
       this.topics.init();
-      this.topics.enable();
     }
     if(this.categories) {
       this.categories.init();
-      this.categories.enable();
     }
     if(this.subCategories) {
       this.subCategories.init();
-      this.subCategories.enable();
     }
   }
   
@@ -359,6 +347,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
         this.stakeholder.topics.splice(this.index, 1);
         if(this.topicIndex === this.index) {
           this.chooseTopic(Math.max(0, this.index - 1));
+        } else if(this.topicIndex > this.index) {
+          this.chooseTopic(this.topicIndex - 1);
         }
       }, true);
     };
@@ -388,23 +378,15 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
   }
   
   categoryChanged(callback: Function, save: boolean = false) {
-    if(this.categories && save) {
-      this.categories.disable();
-    }
-    if(this.subCategories) {
-      this.subCategories.disable();
-    }
     if(callback) {
       callback();
     }
     this.cdr.detectChanges();
     if(this.categories && save) {
       this.categories.init();
-      this.categories.enable();
     }
     if(this.subCategories) {
       this.subCategories.init();
-      this.subCategories.enable();
     }
   }
   
@@ -500,6 +482,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
         this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
         if(this.categoryIndex === this.index) {
           this.chooseCategory(Math.max(0, this.index - 1));
+        } else if(this.categoryIndex > this.index) {
+          this.chooseCategory(this.categoryIndex - 1);
         }
       }, true);
     };
@@ -528,16 +512,12 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
   }
   
   subCategoryChanged(callback: Function, save: boolean = false) {
-    if(this.subCategories && save) {
-      this.subCategories.disable();
-    }
     if(callback) {
       callback();
     }
     this.cdr.detectChanges();
     if(this.subCategories && save) {
       this.subCategories.init();
-      this.subCategories.enable();
     }
   }
   
@@ -640,6 +620,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
         this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
         if(this.subCategoryIndex === this.index) {
           this.chooseSubcategory(Math.max(0, this.index - 1));
+        } else if(this.subCategoryIndex > this.index) {
+          this.chooseSubcategory(this.subCategoryIndex - 1);
         }
       }, true);
     };
diff --git a/monitor-admin/topic/topic.module.ts b/monitor-admin/topic/topic.module.ts
index 71e9b9d9..4c887228 100644
--- a/monitor-admin/topic/topic.module.ts
+++ b/monitor-admin/topic/topic.module.ts
@@ -20,11 +20,12 @@ import {TransitionGroupModule} from "../../utils/transition-group/transition-gro
 import {NumberRoundModule} from "../../utils/pipes/number-round.module";
 import {SideBarModule} from "../../dashboard/sharedComponents/sidebar/sideBar.module";
 import {SidebarMobileToggleModule} from "../../dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
+import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
-    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule, SidebarMobileToggleModule
+    ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule, SidebarMobileToggleModule, SliderTabsModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent
diff --git a/monitor-admin/utils/indicator-utils.ts b/monitor-admin/utils/indicator-utils.ts
index 9360c228..832b4894 100644
--- a/monitor-admin/utils/indicator-utils.ts
+++ b/monitor-admin/utils/indicator-utils.ts
@@ -55,6 +55,8 @@ export class StakeholderConfiguration {
     {icon: 'incognito', value: "PRIVATE", label: 'Private'},
   ];
   public static CACHE_INDICATORS: boolean = true;
+  public static NUMBER_MULTI_INDICATOR_PATHS = false;
+  public static CHART_MULTI_INDICATOR_PATHS = true;
 }
 
 export class StakeholderUtils {
@@ -82,6 +84,14 @@ export class StakeholderUtils {
     return StakeholderConfiguration.CACHE_INDICATORS;
   }
 
+  get hasMultiNumberIndicatorPaths() {
+    return StakeholderConfiguration.NUMBER_MULTI_INDICATOR_PATHS;
+  }
+
+  get hasMultiChartIndicatorPaths() {
+    return StakeholderConfiguration.CHART_MULTI_INDICATOR_PATHS;
+  }
+
   visibilityIcon: Map<Visibility, string> = new Map<Visibility, string>(this.visibilities.map(option => [option.value, option.icon]));
 
   defaultValue(options: Option[]) {
diff --git a/monitor/entities/stakeholder.ts b/monitor/entities/stakeholder.ts
index 49c8e755..a33506ac 100644
--- a/monitor/entities/stakeholder.ts
+++ b/monitor/entities/stakeholder.ts
@@ -183,6 +183,7 @@ export class Indicator {
   visibility: Visibility;
   defaultId: string;
   indicatorPaths: IndicatorPath[];
+  activePath: number = 0;
   overlay: Overlay = false;
 
   constructor(name: string, description: string, additionalDescription:string, type: IndicatorType, width: IndicatorSize,height: IndicatorSize, visibility: Visibility, indicatorPaths: IndicatorPath[], defaultId: string = null) {
diff --git a/monitor/monitor-indicator-stakeholder-base.component.ts b/monitor/monitor-indicator-stakeholder-base.component.ts
index 4573dee4..8838d202 100644
--- a/monitor/monitor-indicator-stakeholder-base.component.ts
+++ b/monitor/monitor-indicator-stakeholder-base.component.ts
@@ -214,15 +214,17 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
         (this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
     //clear numbers when filters change
     this.numberResults.clear();
-    let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
+    let urls: Map<string, [number, number, number][]> = new Map<string, [number, number, number][]>();
     this.activeSubCategory.numbers.forEach((section, i) => {
       section.indicators.forEach((number, j) => {
         if (this.hasPermission(number.visibility)) {
-          let url = this.getFullUrl(number.indicatorPaths[0]);
-          const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
-          const indexes = urls.get(pair) ? urls.get(pair) : [];
-          indexes.push([i, j]);
-          urls.set(pair, indexes);
+          number.indicatorPaths.forEach((indicatorPath, k) => {
+            let url = this.getFullUrl(indicatorPath);
+            const pair = JSON.stringify([indicatorPath.source, url]);
+            const indexes = urls.get(pair) ? urls.get(pair) : [];
+            indexes.push([i, j, k]);
+            urls.set(pair, indexes);
+          })
         }
       });
     });
@@ -231,10 +233,10 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
       let activeSubcategory = this.activeSubCategory._id;
       this.subscriptions.push(this.statisticsService.getNumbers(this.indicatorUtils.getSourceType(pair[0]), pair[1]).subscribe(response => {
         if(activeSubcategory === this.activeSubCategory._id) {
-          indexes.forEach(([i, j]) => {
+          indexes.forEach(([i, j, k]) => {
             if( this.activeSubCategory?.numbers[i]?.indicators[j]) {
               let result = JSON.parse(JSON.stringify(response));
-              this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
+              this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[k].jsonPath.forEach(jsonPath => {
                 if (result) {
                   result = result[jsonPath];
                 }
@@ -247,7 +249,7 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
               } else {
                 result = 0;
               }
-              this.numberResults.set(i + '-' + j, result);
+              this.numberResults.set(i + '-' + j + '-' + k, result);
             }
           });
         }
@@ -255,10 +257,10 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
     });
     this.activeSubCategory.charts.forEach((section, i) => {
       section.indicators.forEach((indicator, j) => {
-        if (indicator.indicatorPaths.length > 0) {
-          indicator.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[0]);
-          this.chartsActiveType.set(i + '-' + j, indicator.indicatorPaths[0]);
-        }
+        indicator.indicatorPaths.forEach((indicatorPath, k) => {
+          indicator.indicatorPaths[k].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[k]);
+          this.chartsActiveType.set(i + '-' + j + '-' + k, indicator.indicatorPaths[k]);
+        });
       });
     });
     if (this.cdr && !(this.cdr as ViewRef).destroyed) {
diff --git a/utils/transition-group/transition-group.component.ts b/utils/transition-group/transition-group.component.ts
index 53530868..8cea910d 100644
--- a/utils/transition-group/transition-group.component.ts
+++ b/utils/transition-group/transition-group.component.ts
@@ -1,6 +1,6 @@
 import {TransitionGroupItemDirective} from "./transition-group-item.directive";
 import {
-  AfterViewInit,
+  AfterViewInit, ChangeDetectorRef,
   Component,
   ContentChildren,
   ElementRef, Input,
@@ -29,15 +29,14 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
   @ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;
   @Input()
   public id: string;
-  private disabled: boolean = false;
+  public size: number;
   private subscription: Subscription;
 
   constructor(public element: ElementRef) {}
   
   ngAfterViewInit() {
-    this.init();
     this.subscription = this.items.changes.subscribe(items => {
-      if(!this.disabled) {
+      if(items.length === this.size) {
         items.forEach(item => item.prevPos = item.newPos || item.prevPos);
         items.forEach(this.runCallback);
         this.refreshPosition('newPos');
@@ -80,6 +79,7 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
   init() {
     this.refreshPosition('prevPos');
     this.refreshPosition('newPos');
+    this.size = this.items.length;
   }
 
   runCallback(item: TransitionGroupItemDirective) {
@@ -126,17 +126,17 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
   
   /**
    * Enable transition
-   *
+   * @deprecated
    * */
   enable() {
-    this.disabled = false;
+    console.debug('Deprecated')
   }
   
   /**
    * Disable transition
-   *
+   * @deprecated
    * */
   disable() {
-    this.disabled = true;
+    console.debug('Deprecated')
   }
 }

From e91830f2f8c1182c6e728f87a03af3a2932d816e Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 5 Apr 2024 20:31:29 +0300
Subject: [PATCH 21/27] [develop]: Monitor base component delete
 chartsActiveType

---
 .../monitor-indicator-stakeholder-base.component.ts  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/monitor/monitor-indicator-stakeholder-base.component.ts b/monitor/monitor-indicator-stakeholder-base.component.ts
index 8838d202..c6d388e3 100644
--- a/monitor/monitor-indicator-stakeholder-base.component.ts
+++ b/monitor/monitor-indicator-stakeholder-base.component.ts
@@ -53,7 +53,6 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
   minYear = Dates.currentYear - 20;
   maxYear =  Dates.currentYear;
   public numberResults: Map<string, number> = new Map<string, number>();
-  public chartsActiveType: Map<string, IndicatorPath> = new Map<string, IndicatorPath>();
   public clipboard;
 
   /** Services */
@@ -259,7 +258,6 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
       section.indicators.forEach((indicator, j) => {
         indicator.indicatorPaths.forEach((indicatorPath, k) => {
           indicator.indicatorPaths[k].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[k]);
-          this.chartsActiveType.set(i + '-' + j + '-' + k, indicator.indicatorPaths[k]);
         });
       });
     });
@@ -273,10 +271,12 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
         this.indicatorUtils.getChartUrl(indicatorPath.source, this.getFullUrl(indicatorPath)));
   }
 
-  public setActiveChart(i: number, j: number, type: string) {
-    let activeChart = this.activeSubCategory.charts[i].indicators[j].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
-    activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
-    this.chartsActiveType.set(i + '-' + j, activeChart);
+  public getActiveIndicatorPath(indicator: Indicator) {
+    if(indicator.activePath) {
+      return indicator.indicatorPaths[indicator.activePath];
+    } else {
+      return indicator.indicatorPaths[0];
+    }
   }
 
   public filter() {

From 4f10c5c5f4a42629ac4eb13f3a1e3977ab353b86 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Sat, 6 Apr 2024 03:10:51 +0300
Subject: [PATCH 22/27] [develop]: Align import/export indicators with multi
 indicator paths.

---
 monitor-admin/topic/indicators.component.html |   2 -
 monitor-admin/topic/indicators.component.ts   | 306 +++++++++---------
 2 files changed, 158 insertions(+), 150 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 2b0a57c3..69abb1dd 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -339,7 +339,6 @@
                                 <div class="uk-width-1-1 uk-flex uk-flex-middle">
                                     <div input class="uk-width-expand" [formInput]="indicatorPath.get('url')"
                                          placeholder="Number URL">
-                                        <div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
                                     </div>
                                     <div class='uk-padding-small'>
                                         <a class="uk-link-reset"
@@ -538,7 +537,6 @@
                             <div input class="uk-width-expand"
                                  [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
                                  [formInput]="indicatorPath.get('url')" placeholder="Chart URL">
-                                <div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
                             </div>
                             <div class='uk-padding-small'>
                                 <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)">
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 42e85ddc..9be745ae 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -97,7 +97,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   public sectionTypeToDelete: string;
   public sectionChildrenActionOnDelete: string;
   public indicatorChildrenActionOnDelete: string;
-  public urlParameterizedMessage = null;
   private notification: Notification;
   @ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
   @ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@@ -210,11 +209,11 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           this.reorderIndicators(section._id, 'number', callback(list));
         }));
         this.subscriptions.push(UIkit.util.on(document, 'added', '#number-' + section._id, (list): void => {
-         this.to.next({id: section._id, indicators: callback(list)});
+          this.to.next({id: section._id, indicators: callback(list)});
         }));
         this.subscriptions.push(UIkit.util.on(document, 'removed', '#number-' + section._id, (list): void => {
           let sub = this.to.asObservable().subscribe(to => {
-            if(to) {
+            if (to) {
               let from: SectionInfo = {id: section._id, indicators: callback(list)};
               this.moveIndicator({target: list.detail[1].id, from: from, to: to});
               setTimeout(() => {
@@ -232,7 +231,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
           //callback(list, "chart", 'added');
         }));
         this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => {
-         // callback(list, "chart", 'removed');
+          // callback(list, "chart", 'removed');
         }));
       });
     }
@@ -331,8 +330,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   get charts(): Section[] {
     if (this.stakeholder.topics[this.topicIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
       return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
     } else {
       return [];
@@ -341,8 +340,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   get numbers(): Section[] {
     if (this.stakeholder.topics[this.topicIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
       return this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;
     } else {
       return [];
@@ -359,9 +358,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   get canEdit() {
     return this.stakeholder &&
-      this.stakeholder.topics[this.topicIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] && !this.loading;
+        this.stakeholder.topics[this.topicIndex] &&
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] && !this.loading;
   }
 
   public get numberIndicatorPaths(): UntypedFormArray {
@@ -373,7 +372,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   }
 
   public getActiveIndicatorPath(indicator: Indicator) {
-    if(indicator.activePath) {
+    if (indicator.activePath) {
       return indicator.indicatorPaths[indicator.activePath];
     } else {
       return indicator.indicatorPaths[0];
@@ -476,7 +475,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   }
 
   public getParameters(index: number, type: IndicatorType = 'chart'): UntypedFormArray {
-    if(type === 'chart') {
+    if (type === 'chart') {
       return this.chartIndicatorPaths.at(index).get('parameters') as UntypedFormArray;
     } else {
       return this.numberIndicatorPaths.at(index).get('parameters') as UntypedFormArray;
@@ -489,7 +488,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   private getSecureUrlByStakeHolder(indicatorPath: IndicatorPath) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(
-      this.indicatorUtils.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)));
+        this.indicatorUtils.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)));
   }
 
   private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
@@ -501,13 +500,13 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       jsonPath.push(this.fb.control('', Validators.required));
     }
     this.numberIndicatorPaths.push(this.fb.group({
-        url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
-        jsonPath: jsonPath,
-        result: this.fb.control(0, Validators.required),
-        source: this.fb.control(source, Validators.required),
-        parameters: parameters,
-        format: this.fb.control(format, Validators.required)
-      }
+          url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
+          jsonPath: jsonPath,
+          result: this.fb.control(0, Validators.required),
+          source: this.fb.control(source, Validators.required),
+          parameters: parameters,
+          format: this.fb.control(format, Validators.required)
+        }
     ));
     let index = this.numberIndicatorPaths.length - 1;
     if (this.numberIndicatorPaths.at(index).get('url').valid) {
@@ -515,45 +514,43 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     }
     if (this.indicator.defaultId === null) {
       this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
-          this.numberIndicatorPaths.at(index).get('result').setValue(null);
-          if (this.numberIndicatorPaths.at(index).get('url').valid) {
-            let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value)));
-            if (this.indicator.indicatorPaths[index]) {
-              this.indicator.indicatorPaths[index] = indicatorPath;
-            } else {
-              this.indicator.indicatorPaths.push(indicatorPath);
-            }
-            if (indicatorPath.source) {
-              this.numberIndicatorPaths.at(index).get('source').setValue(indicatorPath.source);
-            }
-            (this.numberIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
-            if (indicatorPath.jsonPath.length > 1 && this.getJsonPath(index).length == 1) {
-              let paths = indicatorPath.jsonPath;
-              for (let i = 0; i < paths.length; i++) {
-                if (i == this.getJsonPath(index).length) {
-                  this.getJsonPath(index).push(this.fb.control('', Validators.required));
-                }
+            this.numberIndicatorPaths.at(index).get('result').setValue(null);
+            if (this.numberIndicatorPaths.at(index).get('url').valid) {
+              let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value)));
+              if (this.indicator.indicatorPaths[index]) {
+                this.indicator.indicatorPaths[index] = indicatorPath;
+              } else {
+                this.indicator.indicatorPaths.push(indicatorPath);
+              }
+              if (indicatorPath.source) {
+                this.numberIndicatorPaths.at(index).get('source').setValue(indicatorPath.source);
+              }
+              (this.numberIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
+              if (indicatorPath.jsonPath.length > 1 && this.getJsonPath(index).length == 1) {
+                let paths = indicatorPath.jsonPath;
+                for (let i = 0; i < paths.length; i++) {
+                  if (i == this.getJsonPath(index).length) {
+                    this.getJsonPath(index).push(this.fb.control('', Validators.required));
+                  }
+                }
+                this.getJsonPath(index).setValue(paths)
               }
-              this.getJsonPath(index).setValue(paths)
             }
-          } else {
-            this.urlParameterizedMessage = null;
-          }
-        })
+          })
       );
 
       this.subscriptions.push(this.numberIndicatorPaths.at(index).get('jsonPath').valueChanges.subscribe(value => {
-          if (this.indicator.indicatorPaths[index]) {
-            this.indicator.indicatorPaths[index].jsonPath = value;
-          }
-          this.numberIndicatorPaths.at(index).get('result').setValue(null);
-        })
+            if (this.indicator.indicatorPaths[index]) {
+              this.indicator.indicatorPaths[index].jsonPath = value;
+            }
+            this.numberIndicatorPaths.at(index).get('result').setValue(null);
+          })
       );
       this.subscriptions.push(this.numberIndicatorPaths.at(index).get('source').valueChanges.subscribe(value => {
-          if (this.indicator.indicatorPaths[index]) {
-            this.indicator.indicatorPaths[index].source = value;
-          }
-        })
+            if (this.indicator.indicatorPaths[index]) {
+              this.indicator.indicatorPaths[index].source = value;
+            }
+          })
       );
     } else {
       this.numberIndicatorPaths.at(index).get('url').disable();
@@ -564,10 +561,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   public addChartIndicatorPath(value: string = '', parameters: UntypedFormArray = new UntypedFormArray([]), disableUrl: boolean = false, type: string = null) {
     this.chartIndicatorPaths.push(this.fb.group({
-        url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
-        parameters: parameters,
-        type: this.fb.control(type)
-      }
+          url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
+          parameters: parameters,
+          type: this.fb.control(type)
+        }
     ));
     let index = this.chartIndicatorPaths.length - 1;
     if (disableUrl) {
@@ -585,8 +582,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
             indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl;
             this.indicator.indicatorPaths[index] = indicatorPath;
           }
-        } else {
-          this.urlParameterizedMessage = null;
         }
       }));
     }
@@ -596,9 +591,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     this.numberIndicatorPaths.removeAt(index);
     this.indicator.indicatorPaths.splice(index, 1);
     this.transitionGroup.init();
-    if(this.indicator.activePath === index) {
+    if (this.indicator.activePath === index) {
       this.activeNumberIndicatorPath(Math.max(0, index - 1));
-    } else if(this.indicator.activePath >  index) {
+    } else if (this.indicator.activePath > index) {
       this.activeNumberIndicatorPath(this.indicator.activePath - 1);
     }
     this.numberIndicatorFb.markAsDirty();
@@ -608,9 +603,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     this.chartIndicatorPaths.removeAt(index);
     this.indicator.indicatorPaths.splice(index, 1);
     this.transitionGroup.init();
-    if(this.indicator.activePath === index) {
+    if (this.indicator.activePath === index) {
       this.activeChartIndicatorPath(Math.max(0, index - 1));
-    } else if(this.indicator.activePath >  index) {
+    } else if (this.indicator.activePath > index) {
       this.activeChartIndicatorPath(this.indicator.activePath - 1);
     }
     this.chartIndicatorFb.markAsDirty();
@@ -622,12 +617,12 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     this.transitionGroup.init();
     let a = indicatorPaths.at(index);
     let b = indicatorPaths.at(newIndex);
-    indicatorPaths.setControl(index , b);
-    indicatorPaths.setControl(newIndex , a);
-    HelperFunctions.swap(this.indicator.indicatorPaths, index , newIndex);
-    if(this.indicator.activePath === index) {
+    indicatorPaths.setControl(index, b);
+    indicatorPaths.setControl(newIndex, a);
+    HelperFunctions.swap(this.indicator.indicatorPaths, index, newIndex);
+    if (this.indicator.activePath === index) {
       this.indicator.activePath = newIndex;
-    } else if(this.indicator.activePath === newIndex) {
+    } else if (this.indicator.activePath === newIndex) {
       this.indicator.activePath = index;
     }
     form.markAsDirty();
@@ -635,7 +630,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   public activeNumberIndicatorPath(index: number) {
     let paths = this.numberIndicatorPaths;
-    if(index == paths.length) {
+    if (index == paths.length) {
       this.addNumberIndicatorPath();
       this.transitionGroup.init();
     }
@@ -644,7 +639,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   public activeChartIndicatorPath(index: number) {
     let paths = this.chartIndicatorPaths;
-    if(index == paths.length) {
+    if (index == paths.length) {
       this.addChartIndicatorPath();
       this.transitionGroup.init();
     }
@@ -684,7 +679,21 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   }
 
   public editNumberIndicatorOpen(section: Section, id = null) {
-    this.urlParameterizedMessage = null;
+    this.editNumberModal.cancelButtonText = 'Cancel';
+    this.editNumberModal.okButtonLeft = false;
+    this.editNumberModal.alertMessage = false;
+    if (this.index === -1) {
+      this.editNumberModal.alertTitle = 'Create a new number indicator';
+      this.editNumberModal.okButtonText = 'Save';
+      this.notification = NotificationUtils.createIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
+      this.editNumberNotify.reset(this.notification.message);
+    } else {
+      this.editNumberModal.alertTitle = 'Edit number indicator\'s information';
+      this.editNumberModal.okButtonText = 'Save Changes';
+      this.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
+      this.editNumberNotify.reset(this.notification.message);
+    }
+    this.editNumberModal.stayOpen = true;
     this.section = section;
     this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
     if (this.index !== -1) {
@@ -726,26 +735,26 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         this.numberIndicatorFb.get('description').disable();
       }, 0);
     }
-    this.editNumberModal.cancelButtonText = 'Cancel';
-    this.editNumberModal.okButtonLeft = false;
-    this.editNumberModal.alertMessage = false;
-    if (this.index === -1) {
-      this.editNumberModal.alertTitle = 'Create a new number indicator';
-      this.editNumberModal.okButtonText = 'Save';
-      this.notification = NotificationUtils.createIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
-      this.editNumberNotify.reset(this.notification.message);
-    } else {
-      this.editNumberModal.alertTitle = 'Edit number indicator\'s information';
-      this.editNumberModal.okButtonText = 'Save Changes';
-      this.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
-      this.editNumberNotify.reset(this.notification.message);
-    }
-    this.editNumberModal.stayOpen = true;
     this.editNumberModal.open();
   }
 
   public editChartIndicatorOpen(section: Section, id = null) {
-    this.urlParameterizedMessage = null;
+    this.editChartModal.cancelButtonText = 'Cancel';
+    this.editChartModal.okButtonLeft = false;
+    this.editChartModal.alertMessage = false;
+    if (this.index === -1) {
+      this.editChartModal.alertTitle = 'Create a new chart indicator';
+      this.editChartModal.okButtonText = 'Save';
+      this.notification = NotificationUtils.createIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
+      this.editChartNotify.reset(this.notification.message);
+    } else {
+      this.editChartModal.alertTitle = 'Edit chart indicator\'s information';
+      this.editChartModal.okButtonText = 'Save Changes';
+      this.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
+      ;
+      this.editChartNotify.reset(this.notification.message);
+    }
+    this.editChartModal.stayOpen = true;
     this.urlSubscriptions.forEach(value => {
       if (value instanceof Subscriber) {
         value.unsubscribe();
@@ -769,7 +778,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       });
       this.indicator.indicatorPaths.forEach(indicatorPath => {
         this.addChartIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
-          this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null, indicatorPath.type);
+            this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null, indicatorPath.type);
         indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
       });
     } else {
@@ -792,22 +801,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
         this.chartIndicatorFb.get('description').disable();
       }, 0);
     }
-    this.editChartModal.cancelButtonText = 'Cancel';
-    this.editChartModal.okButtonLeft = false;
-    this.editChartModal.alertMessage = false;
-    if (this.index === -1) {
-      this.editChartModal.alertTitle = 'Create a new chart indicator';
-      this.editChartModal.okButtonText = 'Save';
-      this.notification = NotificationUtils.createIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
-      this.editChartNotify.reset(this.notification.message);
-    } else {
-      this.editChartModal.alertTitle = 'Edit chart indicator\'s information';
-      this.editChartModal.okButtonText = 'Save Changes';
-      this.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
-      ;
-      this.editChartNotify.reset(this.notification.message);
-    }
-    this.editChartModal.stayOpen = true;
     this.editChartModal.open();
   }
 
@@ -907,7 +900,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       this.setCharts();
       this.setNumbers();
       this.initReorder();
-      if(properties.notificationsAPIURL) {
+      if (properties.notificationsAPIURL) {
         this.notification = NotificationUtils.importIndicators(this.user.fullname, this.stakeholder.alias);
         this.notification.entity = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index]._id;
         this.notification.name = this.user.firstname;
@@ -999,7 +992,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
 
   hasDifference(index: number, type: IndicatorType = 'chart'): boolean {
     let hasDifference = false;
-    if(type === 'chart') {
+    if (type === 'chart') {
       this.chartIndicatorPaths.at(index).value.parameters.forEach(parameter => {
         if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
           hasDifference = true;
@@ -1008,7 +1001,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       });
       return hasDifference || this.indicator.indicatorPaths[index].safeResourceUrl.toString() !==
           this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString();
-    } else if(type === 'number') {
+    } else if (type === 'number') {
       let indicatorPath = this.numberIndicatorPaths.at(index).value;
       indicatorPath.parameters.forEach(parameter => {
         if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
@@ -1029,12 +1022,12 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   }
 
   refreshIndicator(type: IndicatorType = 'chart') {
-    if(type === 'chart') {
+    if (type === 'chart') {
       this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths, 'chart');
       this.indicator.indicatorPaths.forEach(indicatorPath => {
         indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
       });
-    } else if(type === 'number') {
+    } else if (type === 'number') {
       this.indicator = this.indicatorUtils.generateIndicatorByForm(this.numberIndicatorFb.value, this.indicator.indicatorPaths, 'number');
       this.indicator.indicatorPaths.forEach((indicatorPath, index) => {
         this.validateJsonPath(index);
@@ -1293,6 +1286,11 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       if (chart['sectionIndex'] == null) {
         chart['sectionIndex'] = chart['type'] == 'chart' ? chartsSection : 0;
       }
+      if (chart.url && chart.jsonPath) {
+        chart.indicatorPaths = [{url: chart.url, jsonPath: chart.jsonPath}];
+      } else if(chart.url) {
+        chart.indicatorPaths = [{url: chart.url}];
+      }
     }
     return charts;
   }
@@ -1300,7 +1298,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   importIndicatorsAndSave(stakeholder: Stakeholder, charts: any[]) {
     let sectionsToSave: Section[] = [];
     let countIndicators = 0;
-    if(stakeholder.type !== this.stakeholder.type) {
+    if (stakeholder.type !== this.stakeholder.type) {
       UIkit.notification("The type of this profile is not the same with the file's one!", {
         status: 'warning',
         timeout: 6000,
@@ -1313,23 +1311,25 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     let duplicates = 0;
     charts = this.migrateFromOldImportJsonFile(charts);
     for (let chart of charts) {
-      chart.visibility = this.showVisibility?chart.visibility:this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities);
+      chart.visibility = this.showVisibility ? chart.visibility : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities);
       if (!sectionsToSave[chart['sectionIndex']]) {
         let sectionToSave = new Section(chart['sectionType'] ? chart['sectionType'] : chart['type'], chart['sectionTitle']);
         sectionToSave.indicators = [];
         sectionsToSave[chart['sectionIndex']] = sectionToSave;
       }
       let exists = false;
-      let indicatorPath;
+      let indicatorPaths: IndicatorPath[] = [];
       // validate indicators' schema from file
       let invalid_file_message;
       if (!chart.type) {
         invalid_file_message = "No indicator type is specified. Type should be chart or number.";
       } else if (chart.type != "chart" && chart.type != "number") {
         invalid_file_message = "Invalid indicator type. Type should be chart or number.";
-      } else if (chart.type == "number" && !chart.jsonPath) {
+      } else if (chart.indicatorPaths.length === 0) {
+        invalid_file_message = "No indicator paths are specified."
+      } else if (chart.type == "number" && chart.indicatorPaths.filter(path => !path.jsonPath).length > 0) {
         invalid_file_message = "No jsonPath is specified for number indicator."
-      } else if (!chart.url) {
+      } else if (chart.indicatorPaths.filter(path => !path.url).length > 0) {
         invalid_file_message = "No indicator url is specified.";
       }
 
@@ -1344,33 +1344,38 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
       }
 
       if (chart.type == "chart") {
-        indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(chart.url), chart.url, chart.type, stakeholder);
+        indicatorPaths = chart.indicatorPaths.map(path => this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(path.url), path.url, chart.type, stakeholder));
         this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts.forEach((section: Section) => {
           section.indicators.forEach(indicator => {
             indicator.indicatorPaths.forEach(path => {
-              if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
-                duplicates++;
+              let size = indicatorPaths.length;
+              indicatorPaths = indicatorPaths.filter(indicatorPath => JSON.stringify(path.chartObject) !== JSON.stringify(indicatorPath.chartObject))
+              if (indicatorPaths.length < size) {
+                duplicates = duplicates + (size - indicatorPaths.length);
                 exists = true;
               }
             });
           });
         });
       } else if (chart.type == "number") {
-        indicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(chart.url), chart.url, stakeholder,
-          chart.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(chart.url)));
+        indicatorPaths = chart.indicatorPaths.map(path =>
+            this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(path.url), path.url,
+                stakeholder, path.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(path.url))));
         this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers.forEach((section: Section) => {
           section.indicators.forEach(indicator => {
             indicator.indicatorPaths.forEach(path => {
-              if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
-                duplicates++;
+              let size = indicatorPaths.length;
+              indicatorPaths = indicatorPaths.filter(indicatorPath => JSON.stringify(path.chartObject) !== JSON.stringify(indicatorPath.chartObject))
+              if (indicatorPaths.length < size) {
+                duplicates = duplicates + (size - indicatorPaths.length);
                 exists = true;
               }
             });
           });
         });
       }
-      if (!exists) {
-        let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility?"RESTRICTED":this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), [indicatorPath]);
+      if (indicatorPaths.length > 0) {
+        let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility ? "RESTRICTED" : this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), indicatorPaths);
         sectionsToSave[chart['sectionIndex']].indicators.push(i);
         countIndicators++;
       }
@@ -1402,36 +1407,41 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     let indexIndicator: number = 0;
     this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[subcategoryIndex].numbers.forEach(section => {
       section.indicators.forEach(indicator => {
-        indicator.indicatorPaths.forEach(indicatorPath => {
-          indicators[indexIndicator] = {
-            "type": indicator.type, "name": indicator.name, "jsonPath": indicatorPath.jsonPath,
-            "description": indicator.description, "additionalDescription": indicator.additionalDescription,
-            "visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
-            "url": this.indicatorUtils.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)),
-            "sectionTitle": section.title,
-            "sectionType": section.type,
-            "sectionIndex": index
-          };
-          indexIndicator++;
-        });
+        indicators[indexIndicator] = {
+          "indicatorPaths": indicator.indicatorPaths.map(path => {
+            return {
+              jsonPath: path.jsonPath,
+              url: this.indicatorUtils.getNumberUrl(path.source, this.indicatorUtils.getFullUrl(this.stakeholder, path))
+            }
+          }),
+          "type": indicator.type, "name": indicator.name,
+          "description": indicator.description, "additionalDescription": indicator.additionalDescription,
+          "visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
+          "sectionTitle": section.title,
+          "sectionType": section.type,
+          "sectionIndex": index
+        };
+        indexIndicator++;
       });
       index++;
     });
 
     this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[subcategoryIndex].charts.forEach(section => {
       section.indicators.forEach(indicator => {
-        indicator.indicatorPaths.forEach(indicatorPath => {
-          indicators[indexIndicator] = {
-            "type": indicator.type, "name": indicator.name,
-            "description": indicator.description, "additionalDescription": indicator.additionalDescription,
-            "visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
-            "url": this.getUrlByStakeHolder(indicatorPath),
-            "sectionTitle": section.title,
-            "sectionType": section.type,
-            "sectionIndex": index
-          };
-          indexIndicator++;
-        });
+        indicators[indexIndicator] = {
+          "indicatorPaths": indicator.indicatorPaths.map(path => {
+            return {
+              url: this.getUrlByStakeHolder(path)
+            }
+          }),
+          "type": indicator.type, "name": indicator.name,
+          "description": indicator.description, "additionalDescription": indicator.additionalDescription,
+          "visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
+          "sectionTitle": section.title,
+          "sectionType": section.type,
+          "sectionIndex": index
+        };
+        indexIndicator++;
       });
       index++;
 
@@ -1491,7 +1501,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => {
       let json = JSON.parse(result);
       // validate file
-      if(json && Array.isArray(json)) {
+      if (json && Array.isArray(json)) {
         UIkit.notification("This file is not supported any more. Please export indicators and try again!", {
           status: 'danger',
           timeout: 6000,

From 69cdb2cec2001ece062af3b2b629d2ce9cdf4867 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 8 Apr 2024 14:14:09 +0300
Subject: [PATCH 23/27] [develop]: Add roles in stakeholder configuration to
 handle naming of roles in different services.

---
 .../role-users/role-users.component.html      | 22 +++++++++----------
 .../users/role-users/role-users.component.ts  | 17 +++++++++-----
 monitor-admin/utils/indicator-utils.ts        | 10 +++++++++
 .../role-verification.component.ts            |  6 +++--
 utils/email/composer.ts                       |  7 +++---
 5 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html
index 6fb1d94f..88befe57 100644
--- a/dashboard/users/role-users/role-users.component.html
+++ b/dashboard/users/role-users/role-users.component.html
@@ -8,26 +8,26 @@
 				<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
 					<ul class="uk-subnav uk-subnav-pill">
 						<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
-							<a class="uk-text-capitalize">{{role}}s</a>
+							<a class="uk-text-capitalize">{{stakeholderUtils.roles[role]}}s</a>
 						</li>
 						<li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
-							<a>Pending {{role}}s</a>
+							<a>Pending {{stakeholderUtils.roles[role]}}s</a>
 						</li>
 					</ul>
 				</div>
 				<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-right@m uk-flex-center uk-flex-middle" uk-grid>
 					<div *ngIf="showCurrent" [disabled]="loadActive" search-input class="uk-width-expand@l uk-width-1-1"
-							 [searchControl]="filterForm.get('active')" [expandable]="true" [placeholder]="'Search ' + role + 's'" searchInputClass="outer">
+							 [searchControl]="filterForm.get('active')" [expandable]="true" [placeholder]="'Search ' + stakeholderUtils.roles[role] + 's'" searchInputClass="outer">
 					</div>
 					<div *ngIf="!showCurrent" [disabled]="loadPending" search-input class="uk-width-expand@l uk-width-1-1"
 							 [searchControl]="filterForm.get('pending')" [expandable]="true" [placeholder]="'Search invitations'" searchInputClass="outer">
 					</div>
 					<div>
-						<button *ngIf="exists" class="uk-button uk-button-default uk-flex uk-flex-middle"
+						<button *ngIf="canInvite" class="uk-button uk-button-default uk-flex uk-flex-middle"
 										[attr.uk-tooltip]="inviteDisableMessage" [class.uk-disabled]="loadPending || loadPending"
 										[disabled]="loadActive || loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
 							<icon name="person_add" [flex]="true" type="filled"></icon>
-							<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Invite {{role}}</span>
+							<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Invite {{stakeholderUtils.roles[role]}}</span>
 						</button>
 						<button *ngIf="!exists && isCurator" class="uk-button uk-button-default uk-flex uk-flex-middle"
 										(click)="openCreateRoleModal()">
@@ -47,16 +47,16 @@
 			<div *ngIf="!loadActive && !loadPending">
 				<div *ngIf="(showCurrent && showActive.length == 0) || (!showCurrent && showPending.length == 0)"
 						 class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
-					<div *ngIf="showCurrent">No {{role}}s found</div>
-					<div *ngIf="!showCurrent">No pending {{role}} invitations found</div>
+					<div *ngIf="showCurrent">No {{stakeholderUtils.roles[role]}}s found</div>
+					<div *ngIf="!showCurrent">No pending {{stakeholderUtils.roles[role]}} invitations found</div>
 				</div>
 				<div *ngIf="(showCurrent && showActive.length > 0) || (!showCurrent && showPending.length > 0)">
-					<no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
+					<no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(stakeholderUtils.roles[role] + 's'):role"
 													(pageChange)="updateActivePage($event)"
 													[page]="activePage" [pageSize]="pageSize"
 													[totalResults]="showActive.length">
 					</no-load-paging>
-					<no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
+					<no-load-paging *ngIf="!showCurrent" [type]="stakeholderUtils.roles[role] + ' ' + (showPending.length > 1?'invitations':'invitation')"
 													(pageChange)="updatePendingPage($event)"
 													[page]="pendingPage" [pageSize]="pageSize"
 													[totalResults]="showPending.length">
@@ -109,12 +109,12 @@
 </modal-alert>
 <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="deleteActive()" classTitle="uk-background-primary uk-light">
   <div *ngIf="selectedUser">
-    Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from {{role}}s?
+    Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from {{stakeholderUtils.roles[role]}}s?
   </div>
 </modal-alert>
 <modal-alert #deletePendingModal [overflowBody]="false" (alertOutput)="deletePending()" classTitle="uk-background-primary uk-light">
   <div *ngIf="selectedUser">
-    Are you sure you want to cancel {{role}} invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
+    Are you sure you want to cancel {{stakeholderUtils.roles[role]}} invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
   </div>
 </modal-alert>
 <modal-alert #createRoleModal [overflowBody]="false" (alertOutput)="createGroup()" classTitle="uk-background-primary uk-light"
diff --git a/dashboard/users/role-users/role-users.component.ts b/dashboard/users/role-users/role-users.component.ts
index cb53ed14..788fed32 100644
--- a/dashboard/users/role-users/role-users.component.ts
+++ b/dashboard/users/role-users/role-users.component.ts
@@ -23,6 +23,7 @@ import {NotificationHandler} from "../../../utils/notification-handler";
 import {ClearCacheService} from "../../../services/clear-cache.service";
 import {catchError, map, tap} from "rxjs/operators";
 import {InputComponent} from "../../../sharedComponents/input/input.component";
+import {StakeholderUtils} from "../../../monitor-admin/utils/indicator-utils";
 
 class InvitationResponse {
   email: string;
@@ -53,6 +54,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   public deleteAuthorizationLevel: 'curator' | 'manager' = 'curator';
   @Input()
+  public inviteAuthorizationLevel: 'curator' | 'manager' = 'manager';
+  @Input()
   public message: string = null;
   @Input()
   public emailComposer: Function;
@@ -86,12 +89,12 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   @ViewChild('deleteModal') deleteModal: AlertModal;
   @ViewChild('deletePendingModal') deletePendingModal: AlertModal;
   @ViewChild('createRoleModal') createRoleModal: AlertModal;
+  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   
   constructor(private userRegistryService: UserRegistryService,
               private userManagementService: UserManagementService,
               private clearCacheService: ClearCacheService,
               private notificationService: NotificationService,
-              private router: Router,
               private cdr: ChangeDetectorRef,
               private fb: UntypedFormBuilder) {
   }
@@ -182,7 +185,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   openDeleteModal(item: any) {
     if (this.showCurrent) {
       this.selectedUser = item.email;
-      this.deleteModal.alertTitle = 'Delete ' + this.role;
+      this.deleteModal.alertTitle = 'Delete ' + this.stakeholderUtils.roles[this.role];
       this.deleteModal.open();
     } else {
       this.selectedUser = item;
@@ -192,7 +195,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   }
   
   openInviteModal() {
-    this.inviteModal.alertTitle = 'Invite ' + this.role;
+    this.inviteModal.alertTitle = 'Invite ' + this.stakeholderUtils.roles[this.role];
     this.inviteModal.okButtonLeft = false;
     this.inviteModal.okButtonText = 'Send';
     this.emailsForm = this.fb.array([], Validators.required);
@@ -241,7 +244,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
       if (this.currentPendingPage.length === 0) {
         this.pendingPage = 1;
       }
-      NotificationHandler.rise(StringUtils.capitalize(this.role) + ' invitation to ' + this.selectedUser + ' has been <b>canceled</b>');
+      NotificationHandler.rise(StringUtils.capitalize(this.stakeholderUtils.roles[this.role]) + ' invitation to ' + this.selectedUser + ' has been <b>canceled</b>');
       this.loadPending = false;
     }, error => {
       NotificationHandler.rise('An error has occurred. Please try again later', 'danger');
@@ -309,7 +312,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
       this.updateLists();
     }, error => {
       if(error.status === 409) {
-        NotificationHandler.rise('Group already exists. You can try to invite a ' + this.role + ' instead.', 'warning');
+        NotificationHandler.rise('Group already exists. You can try to invite a ' + this.stakeholderUtils.roles[this.role] + ' instead.', 'warning');
         this.updateLists();
       } else {
         NotificationHandler.rise('An error has occurred. Please try again later', 'danger');
@@ -322,6 +325,10 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   public get canDelete() {
     return (this.deleteAuthorizationLevel === 'curator'?this.isCurator:this.isManager);
   }
+
+  public get canInvite() {
+    return this.exists && (this.inviteAuthorizationLevel === 'curator'?this.isCurator:this.isManager);
+  }
   
   public isMe(userId: string) {
     return userId && userId.includes(this.user.id) && !this.isCurator;
diff --git a/monitor-admin/utils/indicator-utils.ts b/monitor-admin/utils/indicator-utils.ts
index 832b4894..3e8cf554 100644
--- a/monitor-admin/utils/indicator-utils.ts
+++ b/monitor-admin/utils/indicator-utils.ts
@@ -17,6 +17,11 @@ import {Session} from "../../login/utils/helper.class";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {properties} from "src/environments/environment";
 
+class Roles {
+  manager = 'manager';
+  member = 'member';
+}
+
 class Entities {
   stakeholder = 'Dashboard';
   funder = 'Funder';
@@ -37,6 +42,7 @@ class Entities {
 }
 
 export class StakeholderConfiguration {
+  public static ROLES: Roles = new Roles();
   public static ENTITIES: Entities = new Entities();
   public static TYPES: Option[] = [
     {value: 'funder', label: StakeholderConfiguration.ENTITIES.funder},
@@ -60,6 +66,10 @@ export class StakeholderConfiguration {
 }
 
 export class StakeholderUtils {
+  get roles() {
+    return StakeholderConfiguration.ROLES;
+  }
+
   get entities() {
     return StakeholderConfiguration.ENTITIES;
   }
diff --git a/role-verification/role-verification.component.ts b/role-verification/role-verification.component.ts
index 1b54fe75..46dd7899 100644
--- a/role-verification/role-verification.component.ts
+++ b/role-verification/role-verification.component.ts
@@ -12,6 +12,7 @@ import {EmailService} from "../utils/email/email.service";
 import {Composer} from "../utils/email/composer";
 import {ClearCacheService} from "../services/clear-cache.service";
 import {BaseComponent} from "../sharedComponents/base/base.component";
+import {StakeholderUtils} from "../monitor-admin/utils/indicator-utils";
 
 @Component({
   selector: 'role-verification',
@@ -106,6 +107,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   public error: string = null;
   public loading: boolean = false;
   public isMember: boolean = false;
+  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
@@ -179,7 +181,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
     this.managerModal.okButtonText = 'Accept';
     this.managerModal.stayOpen = true;
     this.managerModal.cancelButtonText = 'Cancel';
-    this.managerModal.alertTitle = 'Manager Invitation';
+    this.managerModal.alertTitle = this.stakeholderUtils.roles.manager + ' Invitation';
     this.managerModal.open();
   }
   
@@ -195,7 +197,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
     this.memberModal.okButtonLeft = false;
     this.memberModal.stayOpen = true;
     this.memberModal.cancelButtonText = 'Cancel';
-    this.memberModal.alertTitle = 'Member Invitation';
+    this.memberModal.alertTitle = this.stakeholderUtils.roles.member + ' Invitation';
     this.cdr.detectChanges();
     this.memberModal.open();
   }
diff --git a/utils/email/composer.ts b/utils/email/composer.ts
index 676dc4c2..ab3c69f0 100644
--- a/utils/email/composer.ts
+++ b/utils/email/composer.ts
@@ -2,6 +2,7 @@ import {Email} from "./email";
 import {Body} from "./body";
 import {properties} from "../../../../environments/environment";
 import {User} from "../../login/utils/helper.class";
+import {StakeholderConfiguration} from "../../monitor-admin/utils/indicator-utils";
 
 export class Composer {
   private static noteBodySize = "14px";
@@ -335,13 +336,13 @@ export class Composer {
     email.subject = 'National Open Access Monitor Ireland | ' + name;
     email.recipient = recipient;
     email.body = '<p>Dear user,</p>' +
-        '<p>You have been invited to be a ' + role +' of the for the National Open Access Monitor, Ireland dashboard for the ' + name + '.</p>' +
+        '<p>You have been invited to be a ' + StakeholderConfiguration.ROLES[role] +' of the for the National Open Access Monitor, Ireland dashboard for the ' + name + '.</p>' +
         '<p>Click <a href="((__link__))" target="_blank">this URL</a> and use the verification code below to accept the invitation.</p>' +
         '<p>The verification code is <b>((__code__))</b>.</p>' +
         '<p>At your first sign in you will be asked to accept and consent to the "OpenAIRE Personal Data Protection Policy and Consent Form" to be able to use the service.</p>' +
         (role === "manager"?
-            '<p>As a manager of the National Open Access Monitor, Ireland, you will have access to the administration part of the dashboard, where you will be able to also invite other users to become managers.</p>':
-            '<p>As a member of the OpenAIRE Monitor Dashboard, you will have access to the restricted access areas of the profile for the ' + name + '.') +
+            '<p>As a ' + StakeholderConfiguration.ROLES[role] + ' of the National Open Access Monitor, Ireland, you will have access to the administration part of the dashboard, where you will be able to also invite other users to become ' + StakeholderConfiguration.ROLES['member'] + 's.</p>':
+            '<p>As a ' + StakeholderConfiguration.ROLES[role] + ' of the National Open Access Monitor, Ireland, you will have access to the sandbox of the profile for the ' + name + '.') +
         '<p>Please contact us at <a href="mailto:' + properties.helpdeskEmail+'">' +  properties.helpdeskEmail +
         '</a> if you have any questions or concerns.</p>' +
         '<p>Kind Regards<br>The OpenAIRE Team</p>' +

From 901f9f769d85aeeb6511810b0f998aa024ec27bf Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 8 Apr 2024 15:17:53 +0300
Subject: [PATCH 24/27] [develop]: Fix an error while inviting a person that it
 is already a member or manager. Remove message while accepting the member
 role.

---
 .../users/role-users/role-users.component.ts  |  9 ++-
 .../role-verification.component.ts            | 74 +++++++------------
 2 files changed, 30 insertions(+), 53 deletions(-)

diff --git a/dashboard/users/role-users/role-users.component.ts b/dashboard/users/role-users/role-users.component.ts
index 788fed32..af6dbaa0 100644
--- a/dashboard/users/role-users/role-users.component.ts
+++ b/dashboard/users/role-users/role-users.component.ts
@@ -268,9 +268,9 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
       return this.userRegistryService.invite(this.type, this.id, {
         link: this.link,
         email: this.emailComposer(this.name, email, this.role)
-      }, this.role).pipe(map(invitation => new InvitationResponse(email, invitation), catchError(error => {
-        return of(new InvitationResponse(current, null));
-      })));
+      }, this.role).pipe(catchError(error => {
+        return of(null);
+      }), map(invitation => new InvitationResponse(email, invitation)));
     });
     this.subs.push(forkJoin(invitations).subscribe(responses => {
       let notifications = responses.map(response => {
@@ -292,7 +292,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
            return of(null);
           }
         } else {
-          NotificationHandler.rise('An error has occurred while sending the invitation mail to ' + response.email + '.Please try again later', 'danger');
+          NotificationHandler.rise('An error has occurred while sending the invitation mail to ' +
+              response.email + '.Check if the user is already a ' + this.stakeholderUtils.roles[this.role] + ' or try again later', 'danger');
           return of(null);
         }
       });
diff --git a/role-verification/role-verification.component.ts b/role-verification/role-verification.component.ts
index 46dd7899..9563eff9 100644
--- a/role-verification/role-verification.component.ts
+++ b/role-verification/role-verification.component.ts
@@ -13,6 +13,7 @@ import {Composer} from "../utils/email/composer";
 import {ClearCacheService} from "../services/clear-cache.service";
 import {BaseComponent} from "../sharedComponents/base/base.component";
 import {StakeholderUtils} from "../monitor-admin/utils/indicator-utils";
+import {StringUtils} from "../utils/string-utils.class";
 
 @Component({
   selector: 'role-verification',
@@ -20,12 +21,9 @@ import {StakeholderUtils} from "../monitor-admin/utils/indicator-utils";
     <modal-alert #managerModal [overflowBody]="false" (alertOutput)="verifyManager()" (cancelOutput)="cancel()"
                  [okDisabled]="code.invalid || loading">
       <div>
-        You have been invited to join <span
-          class="uk-text-bold">{{name}}</span> {{(service === 'monitor' ? 'Monitor' : 'Research Community')}} Dashboard
-        as a manager.
+        You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(dashboard)}} Dashboard as a {{stakeholderUtils.roles.manager}}.
         <span class="uk-text-primary">Fill</span> in the <span class="uk-text-primary">verification code</span>, sent to
-        your
-        email, to accept the invitation request.
+        your email, to accept the invitation request.
       </div>
       <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-center">
         <div input [formInput]="code" class="uk-width-medium" placeholder="Verification code">
@@ -37,14 +35,12 @@ import {StakeholderUtils} from "../monitor-admin/utils/indicator-utils";
       </div>
     </modal-alert>
     <modal-alert #memberModal [overflowBody]="false" (cancelOutput)="cancel()"
-                 (alertOutput)="verifyMember()" [okDisabled]="(code.invalid || loading) && !isMember">
-      <div *ngIf="!isMember">
+                 (alertOutput)="verifyMember()" [okDisabled]="(code.invalid || loading)">
+      <div>
         <div>
-          You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard as a member.
+          You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(dashboard)}} as a {{stakeholderUtils.roles.member}}.
           <span class="uk-text-primary">Fill</span> in the <span class="uk-text-primary">verification code</span>, sent
-          to
-          your
-          email, to accept the invitation request.
+          to your email, to accept the invitation request.
         </div>
         <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-wrap uk-flex-center">
           <div input [formInput]="code" class="uk-width-medium" placeholder="Verification code">
@@ -55,13 +51,6 @@ import {StakeholderUtils} from "../monitor-admin/utils/indicator-utils";
           <loading></loading>
         </div>
       </div>
-      <div *ngIf="isMember">
-        <div>
-          Welcome! You are now a member of the OpenAIRE Monitor Dashboard for the <span
-            class="uk-text-bold">{{name}}</span>!
-          From now on, you will have access to our restricted content.
-        </div>
-      </div>
     </modal-alert>
     <modal-alert #errorModal (alertOutput)="cancel()" [overflowBody]="false">
       <div>
@@ -96,6 +85,8 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   public userInfoLink = null;
   @Input()
   public relativeTo: ActivatedRoute = this._route;
+  @Input()
+  public dashboard: string = 'Research Community';
   public user: User;
   public verification: any;
   public code: UntypedFormControl;
@@ -106,9 +97,8 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   @ViewChild('errorModal') errorModal: AlertModal;
   public error: string = null;
   public loading: boolean = false;
-  public isMember: boolean = false;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
-  
+
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
               private fb: UntypedFormBuilder,
@@ -119,18 +109,18 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
               private cdr: ChangeDetectorRef) {
     super();
   }
-  
+
   ngOnInit() {
     this.reset();
   }
-  
+
   ngAfterViewInit() {
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
       this.paramsSubscription = this._route.queryParams.subscribe(params => {
         if (params) {
           this.cdr.detectChanges();
-          if(params['verify'] && !this.isMember) {
+          if(params['verify']) {
             if (this.user) {
               this.subscriptions.push(this.userRegistryService.getInvitation(params['verify']).subscribe(verification => {
                 this.verification = verification;
@@ -157,51 +147,43 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
                 relativeTo: this.relativeTo
               });
             }
-          } else if(this.isMember) {
-            this.openMemberModal();
           }
         } else {
-          this.isMember = false;
           this.cdr.detectChanges();
         }
       });
     }));
   }
-  
+
   ngOnDestroy() {
     super.ngOnDestroy();
     if (this.paramsSubscription instanceof Subscription) {
       this.paramsSubscription.unsubscribe();
     }
   }
-  
+
   public openManagerModal() {
     this.error = null;
     this.managerModal.okButtonLeft = false;
     this.managerModal.okButtonText = 'Accept';
     this.managerModal.stayOpen = true;
     this.managerModal.cancelButtonText = 'Cancel';
-    this.managerModal.alertTitle = this.stakeholderUtils.roles.manager + ' Invitation';
+    this.managerModal.alertTitle = StringUtils.capitalize(this.stakeholderUtils.roles.manager) + ' Invitation';
     this.managerModal.open();
   }
-  
+
   public openMemberModal() {
     this.error = null;
-    if(this.isMember) {
-      this.memberModal.cancelButton = false;
-      this.memberModal.okButtonText = 'Close';
-    } else {
-      this.memberModal.cancelButton = true;
-      this.memberModal.okButtonText = 'Accept';
-    }
+    this.memberModal.cancelButton = true;
+    this.memberModal.okButtonText = 'Accept';
     this.memberModal.okButtonLeft = false;
     this.memberModal.stayOpen = true;
     this.memberModal.cancelButtonText = 'Cancel';
-    this.memberModal.alertTitle = this.stakeholderUtils.roles.member + ' Invitation';
+    this.memberModal.alertTitle = StringUtils.capitalize(this.stakeholderUtils.roles.member)  + ' Invitation';
     this.cdr.detectChanges();
     this.memberModal.open();
   }
-  
+
   public openErrorModal() {
     this.error = null;
     this.errorModal.cancelButton = false;
@@ -209,7 +191,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
     this.errorModal.alertTitle = 'Invalid URL';
     this.errorModal.open();
   }
-  
+
   public verifyManager() {
     this.loading = true;
     this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => {
@@ -252,15 +234,13 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
       this.error = 'The verification code is invalid';
     }));
   }
-  
+
   public verifyMember() {
     this.loading = true;
-    if (!this.isMember) {
       this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
         this.clearCacheService.clearCache('Members updated');
         this.loading = false;
         this.error = null;
-        this.isMember = true;
         this.userManagementService.updateUserInfo(() => {
           if (this.paramsSubscription instanceof Subscription) {
             this.paramsSubscription.unsubscribe();
@@ -271,17 +251,13 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
         this.loading = false;
         this.error = 'The verification code is invalid';
       }));
-    } else {
-      this.memberModal.cancel();
-    }
   }
-  
+
   public reset() {
     this.code = this.fb.control('', [Validators.required, Validators.pattern('^[+0-9]{6}$')]);
   }
-  
+
   cancel() {
-    this.isMember = false;
     this._router.navigate([]);
   }
 }

From c69d1cd94de99824210f6e8893f4ba1964725b9c Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 8 Apr 2024 16:44:47 +0300
Subject: [PATCH 25/27] [develop]: Role verification improve redirect.

---
 role-verification/role-verification.component.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/role-verification/role-verification.component.ts b/role-verification/role-verification.component.ts
index 9563eff9..5b963e6f 100644
--- a/role-verification/role-verification.component.ts
+++ b/role-verification/role-verification.component.ts
@@ -38,7 +38,7 @@ import {StringUtils} from "../utils/string-utils.class";
                  (alertOutput)="verifyMember()" [okDisabled]="(code.invalid || loading)">
       <div>
         <div>
-          You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(dashboard)}} as a {{stakeholderUtils.roles.member}}.
+          You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(dashboard)}} Dashboard as a {{stakeholderUtils.roles.member}}.
           <span class="uk-text-primary">Fill</span> in the <span class="uk-text-primary">verification code</span>, sent
           to your email, to accept the invitation request.
         </div>
@@ -115,6 +115,11 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   }
 
   ngAfterViewInit() {
+    this.init();
+  }
+
+  init() {
+    this.ngOnDestroy();
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
       this.paramsSubscription = this._route.queryParams.subscribe(params => {
@@ -239,6 +244,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
     this.loading = true;
       this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
         this.clearCacheService.clearCache('Members updated');
+        this.memberModal.cancel();
         this.loading = false;
         this.error = null;
         this.userManagementService.updateUserInfo(() => {
@@ -258,6 +264,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   }
 
   cancel() {
-    this._router.navigate([]);
+    this._router.navigate([], {relativeTo: this.relativeTo});
+    this.init();
   }
 }

From 0111ea668179f643ed4ac5b91881d9185733b8e8 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 8 Apr 2024 17:14:00 +0300
Subject: [PATCH 26/27] [develop]: Role verification reload page instead of
 removing params.

---
 .../role-verification.component.ts            | 44 +++++++------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/role-verification/role-verification.component.ts b/role-verification/role-verification.component.ts
index 5b963e6f..2c260add 100644
--- a/role-verification/role-verification.component.ts
+++ b/role-verification/role-verification.component.ts
@@ -203,20 +203,13 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
       this.clearCacheService.clearCache('Managers updated');
       this.managerModal.cancel();
       this.error = null;
-      this.userManagementService.updateUserInfo(() => {
-        if (this.paramsSubscription instanceof Subscription) {
-          this.paramsSubscription.unsubscribe();
-        }
-        if(this.service === "irish") {
-          this.loading = false;
-          this.userManagementService.login(properties.domain + '/admin/' + this.verification.entity);
-        } else if (this.service === "monitor" ) {
-          this.loading = false;
-          this._router.navigate(['/admin/' + this.verification.entity]);
-        } else {
-          this.subscriptions.push(this.emailService.notifyManagers(this.id, 'manager',
+      if(this.service === "irish" || this.service === "monitor") {
+        this.loading = false;
+        this.userManagementService.login(properties.domain + '/admin/' + this.verification.entity);
+      } else {
+        this.subscriptions.push(this.emailService.notifyManagers(this.id, 'manager',
             Composer.composeEmailToInformOldManagersForTheNewOnes(this.name, this.id)).subscribe(() => {
-            this.subscriptions.push(this.emailService.notifyNewManager(Composer.composeEmailForNewManager(this.id, this.name)).subscribe(
+          this.subscriptions.push(this.emailService.notifyNewManager(Composer.composeEmailForNewManager(this.id, this.name)).subscribe(
               () => {
                 this.loading = false;
                 window.location.href = properties.adminPortalURL + '/' + this.verification.entity;
@@ -226,14 +219,13 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
                 this.loading = false;
                 window.location.href = properties.adminPortalURL + '/' + this.verification.entity;
               }
-            ));
-          }, error => {
-            console.error(error);
-            this.loading = false;
-            window.location.href = properties.adminPortalURL + '/' + this.verification.entity;
-          }));
-        }
-      });
+          ));
+        }, error => {
+          console.error(error);
+          this.loading = false;
+          window.location.href = properties.adminPortalURL + '/' + this.verification.entity;
+        }));
+      }
     }, error => {
       this.loading = false;
       this.error = 'The verification code is invalid';
@@ -247,12 +239,7 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
         this.memberModal.cancel();
         this.loading = false;
         this.error = null;
-        this.userManagementService.updateUserInfo(() => {
-          if (this.paramsSubscription instanceof Subscription) {
-            this.paramsSubscription.unsubscribe();
-          }
-          this.cancel();
-        });
+        window.location.href = window.location.href.split('?')[0];
       }, error => {
         this.loading = false;
         this.error = 'The verification code is invalid';
@@ -264,7 +251,6 @@ export class RoleVerificationComponent extends BaseComponent implements OnInit,
   }
 
   cancel() {
-    this._router.navigate([], {relativeTo: this.relativeTo});
-    this.init();
+    this._router.navigate([]);
   }
 }

From 4f9f2f25057d4d0933f34488960b50286971b587 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 8 Apr 2024 18:57:49 +0300
Subject: [PATCH 27/27] [develop]: Add stats profile in form of an indicator
 even if it is null

---
 monitor-admin/topic/indicators.component.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index 9be745ae..e4e4eb9d 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -659,6 +659,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
   private getParametersAsFormArray(indicatorPath: IndicatorPath): UntypedFormArray {
     let parameters = this.fb.array([]);
     if (indicatorPath.parameters) {
+      if(!indicatorPath.parameters.statsProfile) {
+        indicatorPath.parameters.statsProfile = null;
+      }
       Object.keys(indicatorPath.parameters).forEach(key => {
         if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
           if (this.indicatorUtils.parametersValidators.has(key)) {