From 4746e10acda18b0171a5d3f30fc060696a06bdfe Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Mon, 2 Nov 2020 14:46:19 +0000
Subject: [PATCH] [Monitor Dashboard | Trunk]: 1. Indicator pages changes. 2.
 fix create new topic bug.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59736 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/app.component.html                    |  56 +-
 .../manageStakeholders.component.html         |   8 +-
 .../manageStakeholders.component.ts           |   2 +-
 src/app/topic/indicators.component.css        |  11 +
 src/app/topic/indicators.component.html       | 672 +++++++++---------
 src/app/topic/indicators.component.ts         |  46 +-
 src/app/topic/topic.component.html            |  41 +-
 src/app/topic/topic.component.ts              |  36 +-
 src/app/topic/topic.module.ts                 |   4 +-
 src/assets/dashboard-theme/main.css           |   2 +
 src/assets/dashboard-theme/notification.css   |  19 +
 src/assets/dashboard-theme/sortable.css       |  20 +
 src/assets/dashboard-theme/structure.css      |   1 +
 src/assets/dashboard-theme/tabs-pills.css     |   9 +
 src/assets/new.css                            |  56 +-
 15 files changed, 497 insertions(+), 486 deletions(-)
 create mode 100644 src/app/topic/indicators.component.css
 create mode 100644 src/assets/dashboard-theme/notification.css
 create mode 100644 src/assets/dashboard-theme/sortable.css

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c776464..d23b3a8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,62 +5,8 @@
 <div *ngIf="loading == false">
   <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
        [class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
-    <div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar"
-         class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;" >
-      <!-- <img
-           *ngIf="((!open && !hasMiniMenu) || !hasSidebar) && (properties.environment === 'beta' || properties.environment === 'development')"
-           class="badge"
-           [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
-           [alt]="properties.environment">-->
-      <!--<nav class="uk-navbar" [class.uk-light]="!isFrontPage">
-        <div *ngIf="stakeholder" class="uk-navbar-center">
-          <schema2jsonld *ngIf="properties"  [URL]="properties.domain + properties.baseLink + '/' + stakeholder.alias"
-                         [logoURL]="stakeholder.logoUrl" type="home"
-                         [searchActionRoute]="properties.searchLinkToResults" [searchAction]="false"
-                         [name]="'Monitor Dashboard | ' + this.stakeholder.name"
-                         [description]="stakeholder.name + ' monitoring dashboard'">
-          </schema2jsonld>
-          <ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical  uk-padding-remove-right">
-            &lt;!&ndash;<li>
-              <a class="uk-logo uk-navbar-item uk-link uk-margin-left "
-                 [routerLink]="'/'+stakeholder.alias">
-                <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
-              </a>
-            </li>&ndash;&gt;
-            <li>
-              <a class="uk-logo uk-navbar-item uk-link   "
-                 [routerLink]="'/'+stakeholder.alias">
-                <div class="uk-text-capitalize uk-h4  uk-text-bold uk-margin-remove">
-                  <span>    {{stakeholder.name}}</span>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="uk-navbar-right">
-          <ul class="uk-navbar-nav user_actions">
-            <li *ngIf="isFrontPage" title="It is comming soon. Stay tuned!">
-              <a [routerLink]="(isAdmin()?['/admin']:null)">
-                Manage
-              </a>
-            </li>
-            <li>
-              <user-mini *ngIf="properties"
-                         [user]="user" [dashboard]="true"
-                         [redirectUrl]="properties.afterLoginRedirectLink"
-                         [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
-                         [cookieDomain]=properties.cookieDomain
-                         [userMenuItems]=userMenuItems>
-              </user-mini>
-            </li>
-          </ul>
-        </div>
-      </nav>-->
-      <!--    <navbar *ngIf="properties && showMenu" portal="monitor" [onlyTop]=false [stakeholder]="stakeholder"-->
-      <!--            [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"-->
-      <!--            [showMenu]=showMenu [properties]="properties"></navbar>-->
+    <div class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;">
       <navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
-
               [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
     </div>
     <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html
index 600ced7..37f9ca3 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.html
+++ b/src/app/manageStakeholders/manageStakeholders.component.html
@@ -83,12 +83,12 @@
         </div>
       </div>
       <div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
-          <span class="clickable color">
-            <icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
-          </span>
+        <span class="clickable color">
+          <icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
+        </span>
         <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
           <ul class="uk-nav uk-dropdown-nav">
-            <li *ngFor="let v of stakeholderUtils.visibility">
+            <li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
               <a *ngIf="stakeholder.visibility != v.value"
                  (click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
                 <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts
index a8eb653..1bbaef0 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.ts
+++ b/src/app/manageStakeholders/manageStakeholders.component.ts
@@ -74,7 +74,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
         });
         let data = zip(
           this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
-          this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL)
+          this.stakeholderService.getMyStakeholders(this.properties.monitorServiceAPIURL)
         );
         data.subscribe(res => {
           this.defaultStakeholders = res[0];
diff --git a/src/app/topic/indicators.component.css b/src/app/topic/indicators.component.css
new file mode 100644
index 0000000..a6105e9
--- /dev/null
+++ b/src/app/topic/indicators.component.css
@@ -0,0 +1,11 @@
+.uk-card {
+  min-height: 270px;
+}
+
+div[id*="number-"] .uk-card-body {
+  padding-top: 60px;
+}
+
+div[id*="chart-"] .uk-card-body {
+  padding-top: 75px;
+}
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 409833b..8d9d34d 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -1,296 +1,250 @@
-  <div *ngIf="stakeholder && canEdit" >
-    <div class="uk-padding-small md-bg-white" uk-grid>
-      <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
-        <div>
-          <div dashboard-input [formInput]="filters.get('chartType')"
-               type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
-               label="Chart Type"></div>
-        </div>
-
-        <div>
-          <div dashboard-input [formInput]="filters.get('status')"
-               type="select" [options]="[all].concat(stakeholderUtils.visibility)"
-               label="Status"></div>
-        </div>
-      </div>
-      <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-        <div class="uk-inline uk-width-medium">
-          <span class="uk-position-center-right"><i uk-icon="search" class="uk-icon"></i></span>
-          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
-        </div>
-
-      </div>
-    </div>
-    <div class=" ">
-      <div class="uk-flex uk-flex-right">
-        <a class="uk-button uk-button-primary">
-          <icon name="preview"></icon>
-          Preview
-          <i uk-icon="chevron-down" class="uk-icon"></i>
-        </a>
-        <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
-             class="uk-padding-remove-horizontal">
-          <ul class="uk-nav uk-dropdown-nav uk-margin-left">
-            <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
-            </li>
-            <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
-            </li>
-          </ul>
-        </div>
+<div *ngIf="stakeholder && canEdit">
+  <div>
+    <div class="uk-flex uk-flex-right">
+      <a class="uk-button uk-button-primary">
+        <icon name="preview"></icon>
+        Preview
+        <i uk-icon="chevron-down" class="uk-icon"></i>
+      </a>
+      <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+           class="uk-padding-remove-horizontal">
+        <ul class="uk-nav uk-dropdown-nav uk-margin-left">
+          <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}"
+                 (click)="hide(element)">Public</a>
+          </li>
+          <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
+          </li>
+        </ul>
       </div>
     </div>
+  </div>
+  <div *ngIf="numberSections">
     <h6 class="uk-text-bold">Number Indicators</h6>
-    <div *ngIf="numberSections">
-      <ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index">
-        <div   [id]="'number-' + number._id" [class.section]="isAdministrator"
-             class="uk-grid-match  uk-grid-small uk-grid uk-margin-top"
-             uk-sortable="group: number" uk-grid>
-          <div  class="tools disable-sortable uk-sortable-nodrag">
-            <div *ngIf="isAdministrator" class="actions">
-              <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
-                      title="Create a new section"><i
-                uk-icon="icon:plus;ratio:0.8"></i></a>
-              <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <a [class.uk-disabled]="editing || number.defaultId  " class=""
-                      [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
-                      (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i uk-icon="icon:close;ratio:0.8"></i>
-              </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>
+    <ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index">
+      <div [id]="'number-' + number._id" [class.section]="isAdministrator"
+           class="uk-grid-match  uk-grid-small uk-grid uk-margin-top"
+           uk-sortable="group: number" uk-grid>
+        <div class="tools disable-sortable uk-sortable-nodrag">
+          <div *ngIf="isAdministrator" class="actions">
+            <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
+               title="Create a new section">
+              <icon name="add"></icon>
+            </a>
+            <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
+            <a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
+               (click)="deleteSectionOpen(number, i, 'number', 'delete')">
+              <icon name="close"></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 *ngIf="numberSections.at(i)"
-               class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
-               uk-grid>
-            <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="numberSections.at(i).get('title')"
-                 label="Add a section title"></div>
-            <div class="uk-width-expand">
-              <button *ngIf="numberSections.at(i).dirty" class="md-btn" [disabled]="editing"
+        </div>
+        <div *ngIf="numberSections.at(i)"
+             class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
+          <div dashboard-input [formInput]="numberSections.at(i).get('title')"
+               [extraLeft]="false" class="uk-width-1-3"
+               placeholder="Write a title for this section">
+            <div [class.uk-invisible]="numberSections.at(i).get('title').pristine">
+              <button class="uk-button uk-button-secondary" [disabled]="editing"
                       (click)="saveSection(numberSections.at(i).value, i, 'number')">
                 Save
               </button>
             </div>
           </div>
-          <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-            <div *ngIf="indicator" [id]="indicator._id"
-                 [class.uk-width-1-5@m]="indicator.width === 'small'"
-                 [class.uk-width-1-3@m]=" indicator.width === 'medium'"
-                 [class.uk-width-1-2@m]=" indicator.width === 'large'"
-                 [class.disable-sortable]="!canReorder"
-                 [class.uk-sortable-nodrag]="!canReorder">
-              <div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
-                <div class="uk-padding-small uk-padding-remove-bottom ">
-                  <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
-                  <div class="md-card-toolbar-actions uk-float-right" >
-
-                    <div class="md-card-dropdown uk-inline">
-                      <i uk-icon="more-vertical" class="clickable"></i>
-                      <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
-                           class="uk-padding-remove-horizontal">
-                        <ul class="uk-nav uk-dropdown-nav uk-margin-left">
-                          <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
-                              (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
-                          <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
-                            <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(number._id,
-                             indicator, v.value); hide(element)">
-                              {{'Make ' +  v.label.toLowerCase()}}</a>
-                            </li>
-                          </ng-template>
-                          <hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider">
-                          <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
-                              (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
-                            <!--                            <ng-container *ngIf="!stakeholder.defaultId">-->
-                            <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
-                            <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
-                            <!--                            </ng-container>-->
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-
-                </div>
-                <div  class=" uk-padding-small uk-padding-remove-top">
-                  <div class="">
-                    <div class="uk-text-center">
-                      {{indicator.name ? indicator.name : 'No title available'}}
-                    </div>
-                    <div class="uk-width-1-1">
-                      {{indicator.description}}
-                    </div>
-                    <div class="uk-width-1-1">
-                      {{indicator.additionalDescription}}
-                    </div>
-                  </div>
+        </div>
+        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+          <div *ngIf="indicator" [id]="indicator._id"
+               [class.uk-width-1-5@m]="indicator.width === 'small'"
+               [class.uk-width-1-3@m]=" indicator.width === 'medium'"
+               [class.uk-width-1-2@m]=" indicator.width === 'large'"
+               [class.disable-sortable]="!canReorder"
+               [class.uk-sortable-nodrag]="!canReorder">
+            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
+              <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
+              <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
+                <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
+                <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
+                        (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
+                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
+                      <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(number._id,
+                           indicator, v.value); hide(element)">
+                        {{'Make ' + v.label.toLowerCase()}}</a>
+                      </li>
+                    </ng-template>
+                    <hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider">
+                    <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
+                        (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
+                      <!--                            <ng-container *ngIf="!stakeholder.defaultId">-->
+                      <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
+                      <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
+                      <!--                            </ng-container>-->
+                    </li>
+                  </ul>
                 </div>
               </div>
-            </div>
-          </ng-template>
-          <div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag uk-width-1-3@m">
-            <div class="uk-card uk-card-default clickable" (click)="editNumberIndicatorOpen(number)">
-              <div class="uk-card-body">
-                <div uk-grid class="uk-text-center">
-                  <div class="uk-width-1-1 uk-text-center">
-                    Create a new number Indicator
-                  </div>
-                  <div class="uk-width-1-1 uk-flex uk-flex-center">
-                    <i uk-icon="plus"></i>
-                  </div>
+              <div>
+                <div class="uk-text-center uk-text-bold">
+                  {{indicator.name ? indicator.name : 'No title available'}}
+                </div>
+                <div *ngIf="indicator.description" class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
+                  {{indicator.description}}
+                </div>
+                <div *ngIf="indicator.additionalDescription"
+                     class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
+                  {{indicator.additionalDescription}}
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </ng-template>
-      <div *ngIf="isAdministrator" class="new-section uk-margin-top">
-        <div class="tools uk-flex uk-flex-middle">
-          <button class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection(-1, 'number')">
-            <i  uk-icon="plus"></i>
-          </button>
-          <span>Create a new section</span>
+        </ng-template>
+        <div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag uk-width-1-1">
+          <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
+            <div>
+              <h5 class="uk-text-bold">
+                Create a new number Indicator
+              </h5>
+              <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large">
+                <icon name="add" ratio="5"></icon>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+    </ng-template>
+    <div *ngIf="isAdministrator">
+      <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
     </div>
+  </div>
+  <div *ngIf="chartSections" class="uk-margin-large-top">
     <h6 class="uk-text-bold">Chart Indicators</h6>
-    <div *ngIf="chartSections">
-      <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
-        <div   [id]="'chart-' + chart._id"
-             class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
-             uk-sortable="group: chart" uk-grid>
-          <div   class="tools disable-sortable uk-sortable-nodrag">
-            <div class="actions">
-              <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
-                      title="Create a new section"><i
-                uk-icon="icon:plus;ratio:0.8"></i></a>
-              <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <a [class.uk-disabled]="editing || chart.defaultId  "
-                      [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
-                      class="" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
-                   uk-icon="icon:close;ratio:0.8"></i>
-              </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>
+    <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
+      <div [id]="'chart-' + chart._id"
+           class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
+           uk-sortable="group: chart" uk-grid>
+        <div class="tools disable-sortable uk-sortable-nodrag">
+          <div class="actions">
+            <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
+               title="Create a new section">
+              <icon name="add"></icon>
+            </a>
+            <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
+            <a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
+               (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
+              <icon name="close"></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 *ngIf="chartSections.at(i)"
-               class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
-               uk-grid>
-            <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
-                 label="Add a section title"></div>
-            <div class="uk-width-expand">
-              <button *ngIf="chartSections.at(i).dirty" class="md-btn" [disabled]="editing"
+        </div>
+        <div *ngIf="chartSections.at(i)"
+             class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
+          <div dashboard-input [formInput]="chartSections.at(i).get('title')"
+               [extraLeft]="false" class="uk-width-1-3"
+               placeholder="Write a title for this section">
+            <div [class.uk-invisible]="chartSections.at(i).get('title').pristine">
+              <button class="uk-button uk-button-secondary" [disabled]="editing"
                       (click)="saveSection(chartSections.at(i).value, i)">
                 Save
               </button>
             </div>
           </div>
-          <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-            <div *ngIf="indicator" [id]="indicator._id"
-                 [class.uk-width-1-3@m]="indicator.width === 'small'"
-                 [class.uk-width-1-2@m]=" indicator.width === 'medium'"
-                 [class.uk-width-1-1@m]="indicator.width === 'large'"
-                 [class.disable-sortable]="!canReorder"
-                 [class.uk-sortable-nodrag]="!canReorder">
-              <div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
-                <div class="uk-padding-small uk-padding-remove-bottom ">
-                  <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
-                  <div class="md-card-toolbar-actions uk-float-right" >
-                    <div class="md-card-dropdown uk-inline">
-                      <i uk-icon="more-vertical" class="clickable"></i>
-                      <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
-                           class="uk-padding-remove-horizontal">
-                        <ul class="uk-nav uk-dropdown-nav uk-margin-left">
-                          <li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
-                          </li>
-                          <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
-                            <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(chart._id,
+        </div>
+        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+          <div *ngIf="indicator" [id]="indicator._id"
+               [class.uk-width-1-3@m]="indicator.width === 'small'"
+               [class.uk-width-1-2@m]=" indicator.width === 'medium'"
+               [class.uk-width-1-1@m]="indicator.width === 'large'"
+               [class.disable-sortable]="!canReorder"
+               [class.uk-sortable-nodrag]="!canReorder">
+            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
+              <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
+              <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
+                <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
+                <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <li *ngIf="!editing"><a
+                        (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
+                    </li>
+                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
+                      <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(chart._id,
                              indicator, v.value); hide(element)">
-                              {{'Make ' +  v.label.toLowerCase()}}</a>
-                            </li>
-                          </ng-template>
-                          <hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
-                          <li *ngIf="!editing && !indicator.defaultId "><a
-                              (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
-                            Delete</a>
-                            <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
-                            <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-
-                </div>
-                <div  class="uk-padding-small uk-padding-remove-top">
-                  <div class="">
-                    <div class="uk-text-center">
-                      {{indicator.name}}
-                    </div>
-                    <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
-                                  safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
-                            [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
-                            class="uk-width-1-1 uk-height-medium"></iframe>
-<!--                    <div>Uncomment for iframes preview</div>-->
-                    <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
-                      <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[0].url">
-                    </div>
-                    <div class="uk-width-1-1 uk-text-muted uk-text-small">
-                      {{indicator.description ? indicator.description : ''}}
-                    </div>
-                    <div class="uk-width-1-1 uk-text-muted uk-text-small">
-                      {{indicator.additionalDescription ? indicator.additionalDescription : ''}}
-                    </div>
-                  </div>
+                        {{'Make ' + v.label.toLowerCase()}}</a>
+                      </li>
+                    </ng-template>
+                    <hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
+                    <li *ngIf="!editing && !indicator.defaultId "><a
+                        (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
+                      Delete</a>
+                      <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
+                      <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
+                    </li>
+                  </ul>
                 </div>
               </div>
-            </div>
-          </ng-template>
-          <div class="disable-sortable uk-sortable-nodrag uk-width-1-2@m">
-            <div class="uk-card uk-card-default clickable" (click)="editChartIndicatorOpen(chart)">
-              <div class="uk-card-body">
-                <div >
-                  <div class="uk-text-bold">Create a custom indicator</div>
-                  <div class="uk-width-1-1">
-                    Use our advance tool to create a custom Indicator that suit the needs of your funding
-                    KPI's.
-                  </div>
-                  <div class="uk-width-1-1 uk-flex uk-flex-center">
-                    <i uk-icon="plus"></i>
-                  </div>
+              <div>
+                <div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
+                  {{indicator.name}}
+                </div>
+                <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
+                                  safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
+                        [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
+                        class="uk-width-1-1 uk-height-medium"></iframe>
+                <!--                    <div>Uncomment for iframes preview</div>-->
+                <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
+                  <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[0].url">
+                </div>
+                <div *ngIf="indicator.description" class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
+                  {{indicator.description}}
+                </div>
+                <div *ngIf="indicator.additionalDescription"
+                     class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
+                  {{indicator.additionalDescription}}
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </ng-template>
-      <div class="new-section uk-margin-top">
-        <div class="tools uk-flex uk-flex-middle">
-          <button [disabled]="editing" class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection()">
-            <i uk-icon="plus"></i>
-          </button>
-          <span>Create a new section</span>
+        </ng-template>
+        <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
+          <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
+              <div>
+                <h5 class="uk-text-bold">
+                  Create a custom indicator
+                </h5>
+                <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-secondary uk-margin-large">
+                  <icon name="add" ratio="5"></icon>
+                </div>
+              </div>
+          </div>
         </div>
       </div>
-    </div>
+    </ng-template>
+    <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
   </div>
+</div>
 
-  <modal-alert #editNumberModal
+<modal-alert #editNumberModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
              [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
@@ -356,51 +310,47 @@
   </div>
 </modal-alert>
 <modal-alert #editChartModal
-             [classBody]="'large-modal'"
+             [large]="true"
              (alertOutput)="saveIndicator()"
              [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
   <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
-    <div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
-    <div *ngIf="isAdministrator" dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('description')"
-         label="Description" type="textarea">
-    </div>
-    <div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('additionalDescription')"
-         label="Additional information" type="textarea">
-    </div>
-    <div class="uk-form-row uk-flex uk-flex-middle">
-      <div dashboard-input class="uk-width-small" [formInput]="chartIndicatorFb.get('visibility')"
-           label="Visibility" [options]="stakeholderUtils.visibility" type="select">
+    <div class="uk-grid" uk-grid>
+      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
+      <div *ngIf="isAdministrator" dashboard-input class="uk-width-1-1"
+           [formInput]="chartIndicatorFb.get('description')"
+           label="Description" type="textarea">
       </div>
-      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="chartIndicatorFb.get('width')"
+      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
+           label="Additional information" type="textarea">
+      </div>
+      <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
+           label="Status" [options]="stakeholderUtils.visibility" type="select">
+      </div>
+      <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')"
            type="select" [options]="indicatorUtils.indicatorSizes"
            label="Chart Size">
       </div>
-    </div>
-    <h5 class="uk-text-bold uk-margin-top uk-margin-bottom">
-      Chart Settings
-    </h5>
-    <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths">
-      <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index"
-           [formGroup]="indicatorPath">
-        <div dashboard-input class="uk-form-row"
-             [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
-             [formInput]="indicatorPath.get('url')"
-             label="Chart Url"></div>
-        <div *ngIf="urlParameterizedMessage.length > 0" class="uk-alert-warning uk-alert">
-          {{urlParameterizedMessage}}
-        </div>
-        <div formArrayName="parameters">
-          <div *ngIf="getParameter(i, 'title')" class="uk-form-row">
-            <div dashboard-input
-                 [formInput]="getParameter(i, 'title').get('value')"
-                 label="Chart Title"></div>
+      <ng-template [ngIf]="chartIndicatorPaths" formArrayName="indicatorPaths">
+        <ng-template ngFor [ngForOf]="chartIndicatorPaths.controls" let-indicatorPath let-i="index"
+                     [formGroup]="toFormGroup(indicatorPath)">
+          <div dashboard-input class="uk-width-1-1"
+               [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
+               [formInput]="indicatorPath.get('url')"
+               label="Chart Url"></div>
+          <div *ngIf="urlParameterizedMessage.length > 0" class="uk-alert-warning uk-alert uk-width-1-1">
+            {{urlParameterizedMessage}}
           </div>
-          <div *ngIf="getParameter(i, 'subtitle')" class="uk-form-row">
-            <div dashboard-input
-                 [formInput]="getParameter(i, 'subtitle').get('value')"
-                 label="Chart Subtitle"></div>
-          </div>
-          <div class="uk-grid-medium uk-form-row" uk-grid>
+          <ng-template formArrayName="parameters">
+            <div *ngIf="getParameter(i, 'title')" class="uk-width-1-1">
+              <div dashboard-input
+                   [formInput]="getParameter(i, 'title').get('value')"
+                   label="Chart Title"></div>
+            </div>
+            <div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1">
+              <div dashboard-input
+                   [formInput]="getParameter(i, 'subtitle').get('value')"
+                   label="Chart Subtitle"></div>
+            </div>
             <div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s">
               <div dashboard-input [formInput]="indicatorPath.get('type')"
                    type="select"
@@ -436,28 +386,30 @@
               <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
                    label="Year (To)"></div>
             </div>
-          </div>
-        </div>
-        <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
-             class="uk-margin-medium-top uk-position-relative">
-          <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
-               class="uk-width-1-1 uk-height-medium refresh-iframe">
-            <div class="uk-position-relative uk-height-1-1">
-              <div class="uk-position-center md-color-white uk-text-center clickable"
-                   (click)="refreshIndicator()">
-                <div><i class="material-icons md-color-white">refresh</i></div>
-                <span>Click to refresh the graph view</span>
+          </ng-template>
+          <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-iframe">
+              <div class="uk-position-relative uk-height-1-1">
+                <div class="uk-position-center uk-text-center clickable"
+                     (click)="refreshIndicator()">
+                  <div>
+                    <icon name="refresh"></icon>
+                  </div>
+                  <span>Click to refresh the graph view</span>
+                </div>
               </div>
             </div>
+            <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
+                    [src]="indicator.indicatorPaths[i].safeResourceUrl"
+                    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" [src]="indicator.indicatorPaths[i].url">
+            </div>
           </div>
-          <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
-                  [src]="indicator.indicatorPaths[i].safeResourceUrl"
-                  class="uk-width-1-1 uk-height-medium"></iframe>
-          <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
-            <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
-          </div>
-        </div>
-      </div>
+        </ng-template>
+      </ng-template>
     </div>
   </div>
 </modal-alert>
@@ -472,18 +424,18 @@
   <!--  </span>-->
   Are you sure you want to proceed?
 </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 #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()">
   You are about to delete this section and its indicators permanently.
   <div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
@@ -494,30 +446,46 @@
   <!--  </span>-->
   Are you sure you want to proceed?
 </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 #visibilityOptions  let-indicator="indicator"  >
-   <span class="uk-invisible-hover uk-padding-remove"  (click)="$event.stopPropagation();$event.preventDefault()">
-                  <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" class="clickable visibility"></i>
-                  <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
-                    <ul class="uk-nav uk-dropdown-nav">
-                      <li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value == indicator.visibility">
-                        <a
-                          *ngIf="indicator.visibility != v.value"
-                          (click)="$event.stopPropagation();toggleIndicatorStatus(indicator._id, indicator,v.value);hide(element);$event.preventDefault()">
-                        <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}}</a>
-                        <a *ngIf="indicator.visibility == v.value">
-                        <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}} <icon
-                          customClass="uk-text-secondary uk-float-right" [ratio]="0.5"
-                          name="bullet"></icon></a>
-                      </li>
-                    </ul>
-                  </div>
-                  </span>
-  </ng-template>
+<!--<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 #visibilityOptions let-indicator="indicator">
+   <span class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
+      <span class="clickable color">
+          <icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon>
+        </span>
+      <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
+        <ul class="uk-nav uk-dropdown-nav">
+          <li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
+            <a *ngIf="indicator.visibility != v.value"
+               (click)="$event.stopPropagation();toggleIndicatorStatus(indicator._id, indicator,v.value);hide(element);$event.preventDefault()">
+                <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
+                <span> {{v.label}}</span>
+            </a>
+            <a *ngIf="indicator.visibility == v.value">
+              <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
+              <span> {{v.label}}</span>
+              <span class="uk-position-center-right">
+                <icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+   </span>
+</ng-template>
+<ng-template #new_section let-type="type">
+  <div class="new-section uk-margin-large-top">
+    <div class="tools uk-flex uk-flex-middle clickable" (click)="createSection(-1, type)">
+      <button class="uk-margin-small-right uk-icon-button uk-button-secondary">
+        <icon name="add" [ratio]="1.5"></icon>
+      </button>
+      <span>Create a new section</span>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index ed2e68f..78f1e90 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -27,7 +27,6 @@ import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholde
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
 import {Subscriber} from "rxjs";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
-import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
 import {Router} from "@angular/router";
 import {Session} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
@@ -36,7 +35,8 @@ declare var UIkit;
 
 @Component({
   selector: 'indicators',
-  templateUrl: './indicators.component.html'
+  templateUrl: './indicators.component.html',
+  styleUrls: ['indicators.component.css']
 })
 export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   
@@ -71,11 +71,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   /**
    * Top filters
    */
+  @Input()
   public filters: FormGroup;
-  public all: Option = {
-    value: 'all',
-    label: 'All'
-  };
   /**
    * Toggles
    */
@@ -213,11 +210,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
 
   private buildFilters() {
-    this.filters = this.fb.group({
-      chartType: this.fb.control('all'),
-      status: this.fb.control('all'),
-      keyword: this.fb.control('')
-    });
     this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe(value => {
       this.onChartTypeChange(value);
     }));
@@ -380,6 +372,10 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
   }
   
+  public toFormGroup(value: any): FormGroup {
+     return value as FormGroup
+  }
+  
   public addJsonPath(index: number) {
     if(index==0 && this.getJsonPath(index).getRawValue()[index].indexOf(",")!=-1){
       //if in the first path there are more than one paaths comma separated, split them and autogenerate the forms
@@ -956,20 +952,22 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   // }
 
   deleteSectionOpen(section: Section, index: number, type: IndicatorType, childrenAction: string = null) {
-    this.sectionTypeToDelete = type;
-    this.sectionChildrenActionOnDelete = null;
-    if(childrenAction == "delete") {
-      this.sectionChildrenActionOnDelete = childrenAction;
-    } else if(childrenAction == "disconnect") {
-      this.sectionChildrenActionOnDelete = childrenAction;
+    if(!this.editing && !section.defaultId) {
+      this.sectionTypeToDelete = type;
+      this.sectionChildrenActionOnDelete = null;
+      if (childrenAction == "delete") {
+        this.sectionChildrenActionOnDelete = childrenAction;
+      } else if (childrenAction == "disconnect") {
+        this.sectionChildrenActionOnDelete = childrenAction;
+      }
+  
+      this.section = section;
+      this.index = index;
+      this.deleteSectionModal.alertTitle = 'Delete Section';
+      this.deleteSectionModal.cancelButtonText = 'No';
+      this.deleteSectionModal.okButtonText = 'Yes';
+      this.deleteSectionModal.open();
     }
-
-    this.section = section;
-    this.index = index;
-    this.deleteSectionModal.alertTitle = 'Delete Section';
-    this.deleteSectionModal.cancelButtonText = 'No';
-    this.deleteSectionModal.okButtonText = 'Yes';
-    this.deleteSectionModal.open();
   }
   
   deleteSection() {
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index a3b5fe9..14c25a7 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -4,7 +4,7 @@
       <div class="uk-text-center">
         <a [routerLink]="'/admin/' + stakeholder.alias"
            class="uk-link-heading uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
-          <span class="" uk-icon="icon:close;ratio:1.8"></span>
+          <icon name="close" ratio="2"></icon>
           <span *ngIf="open" class="uk-margin-left">Indicators</span>
         </a>
       </div>
@@ -14,7 +14,7 @@
             <li class="uk-visible-toggle"
                 [class.uk-active]="topicIndex == i">
               <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
-                 class="uk-flex uk-flex-middle">
+                 class="uk-flex uk-flex-middle" [title]="topic.name">
                 <span *ngIf="topic.icon"></span>
                 <div class="uk-width-expand uk-position-relative uk-flex uk-flex-middle"
                      [class.uk-flex-center]="open">
@@ -69,12 +69,12 @@
     <span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
   </div>
 </aside>
-<div *ngIf="stakeholder" page-content>
+<div *ngIf="stakeholder && filters" page-content>
   <div header>
-    <nav class=" ">
-      <div *ngIf="stakeholder  && stakeholder.topics[topicIndex]" class="">
-        <ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
-            class="customTabs uk-tab ignore admin uk-flex uk-flex-middle">
+    <nav>
+      <div *ngIf="stakeholder  && stakeholder.topics[topicIndex]">
+        <ul *ngIf="stakeholder.topics[topicIndex]"
+            class="customTabs uk-tab ignore admin uk-flex uk-flex-middle" visibility="true">
           <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
             <li class="uk-visible-toggle uk-flex uk-flex-middle"
                 [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
@@ -116,9 +116,8 @@
         </ul>
       </div>
     </nav>
-    <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] &&
-      stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0"
-        class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle">
+    <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex]"
+        visibility="true" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle">
       <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
                    let-subCategory let-i="index">
         <li [class.uk-active]="(subCategory.alias ===
@@ -166,11 +165,33 @@
             </span>
       </li>
     </ul>
+    <!--<div class="uk-grid uk-margin-medium" uk-grid>
+      <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
+        <div>
+          <div dashboard-input [formInput]="filters.get('chartType')"
+               type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
+               label="Chart Type"></div>
+        </div>
+        <div>
+          <div dashboard-input [formInput]="filters.get('status')"
+               type="select" [options]="[all].concat(stakeholderUtils.visibility)"
+               label="Status"></div>
+        </div>
+      </div>
+      <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
+        <div class="uk-inline uk-width-medium">
+          <span class="uk-position-center-right"><i uk-icon="search" class="uk-icon"></i></span>
+          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
+        </div>
+
+      </div>
+    </div>-->
   </div>
   <div inner>
     <indicators [properties]="properties"
                 [topicIndex]="topicIndex"
                 [categoryIndex]="categoryIndex"
+                [filters]="filters"
                 [subcategoryIndex]="subCategoryIndex"></indicators>
   </div>
 </div>
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index d167479..91f1475 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -15,10 +15,11 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 import {Subscriber, Subscription} from "rxjs";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
-import {StakeholderUtils} from "../utils/indicator-utils";
+import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
 import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
 
 declare var UIkit;
 
@@ -30,6 +31,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
   public subscriptions: any[] = [];
   public properties: EnvProperties;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
   public loading: boolean = true;
   public stakeholder: Stakeholder;
   /**
@@ -60,7 +62,12 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
   @ViewChild('deleteModal') deleteModal: AlertModal;
   @ViewChild('editModal') editModal: AlertModal;
   public elementChildrenActionOnDelete: string;
-
+  public filters: FormGroup;
+  public all: Option = {
+    value: 'all',
+    label: 'All'
+  };
+  
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -89,9 +96,11 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
               }
               this.categoryIndex = 0;
               this.subCategoryIndex = 0;
-              // console.debug(this. stakeholder.topics[this.topicIndex])
-              // console.debug(this. stakeholder.topics[this.topicIndex].categories)
-              // console.debug( this. stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subCategoryIndex])
+              this.filters = this.fb.group({
+                chartType: this.fb.control('all'),
+                status: this.fb.control('all'),
+                keyword: this.fb.control('')
+              });
               if (this.topicIndex === -1) {
                 this.navigateToError();
               } else {
@@ -173,7 +182,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     }));
   }
   
-  public editTopicOpen(index=this.topicIndex) {
+  public editTopicOpen(index= -1) {
     this.index = index;
     this.type = 'topic';
     if (index === -1) {
@@ -184,14 +193,21 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     this.editOpen();
   }
   
-  public saveTopic(index=this.topicIndex) {
-    this.index = index;
+  public saveTopic() {
     if (!this.form.invalid) {
       let path = [this.stakeholder._id];
       let callback = (topic: Topic): void => {
-        this.stakeholder.topics[this.index] = topic;
+        if (this.index === -1) {
+          this.stakeholder.topics.push(topic);
+        } else {
+          this.stakeholder.topics[this.index] = HelperFunctions.copy(topic);
+        }
       };
-      this.save('Topic has been successfully saved', path, this.form.value, callback, true);
+      if (this.index === -1) {
+        this.save('Topic has been successfully created', path, this.form.value, callback);
+      } else {
+        this.save('Topic has been successfully saved', path, this.form.value, callback);
+      }
     }
   }
   
diff --git a/src/app/topic/topic.module.ts b/src/app/topic/topic.module.ts
index 6c9558a..9998824 100644
--- a/src/app/topic/topic.module.ts
+++ b/src/app/topic/topic.module.ts
@@ -15,7 +15,7 @@ import {InputModule} from "../openaireLibrary/dashboard/sharedComponents/input/i
 import {ClickModule} from "../openaireLibrary/utils/click/click.module";
 import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
-import {preview, bullet, add, earth, lock, group} from "../openaireLibrary/utils/icons/icons";
+import {preview, bullet, add, earth, lock, group, refresh, close} from "../openaireLibrary/utils/icons/icons";
 import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
@@ -37,6 +37,6 @@ import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/p
 })
 export class TopicModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([preview, bullet, add, earth, lock, group]);
+    this.iconsService.registerIcons([preview, bullet, add, earth, lock, group, refresh, close]);
   }
 }
diff --git a/src/assets/dashboard-theme/main.css b/src/assets/dashboard-theme/main.css
index 40a7317..5f6b6d3 100644
--- a/src/assets/dashboard-theme/main.css
+++ b/src/assets/dashboard-theme/main.css
@@ -6,3 +6,5 @@
 @import "tabs-pills.css";
 @import "card.css";
 @import "button.css";
+@import "sortable.css";
+@import "notification.css";
diff --git a/src/assets/dashboard-theme/notification.css b/src/assets/dashboard-theme/notification.css
new file mode 100644
index 0000000..7cfd41e
--- /dev/null
+++ b/src/assets/dashboard-theme/notification.css
@@ -0,0 +1,19 @@
+.uk-notification-message {
+  border-radius: 3px;
+  font-size: var(--small-font-size);
+  padding: 20px;
+}
+
+.uk-notification-message.uk-notification-message-success {
+  background-color: #e0f0d5;
+  color: #669a59;
+}
+
+.uk-notification-message.uk-notification-message-danger {
+  background-color: #f2dede;
+  color: #b25654;
+}
+
+.uk-notification-close.uk-close, .uk-notification-close.uk-close:hover {
+  color: var(--text-color);
+}
diff --git a/src/assets/dashboard-theme/sortable.css b/src/assets/dashboard-theme/sortable.css
new file mode 100644
index 0000000..30aea09
--- /dev/null
+++ b/src/assets/dashboard-theme/sortable.css
@@ -0,0 +1,20 @@
+.dashboard .uk-sortable > * {
+  cursor: move;
+}
+
+.dashboard .uk-sortable-drag .uk-card.uk-card-hover {
+  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.dashboard .uk-sortable-drag  {
+  overflow: unset !important;
+}
+
+.uk-drag .dashboard .disable-sortable {
+  pointer-events: none;
+}
+
+.dashboard .uk-sortable .uk-sortable-nodrag {
+  cursor: default;
+}
diff --git a/src/assets/dashboard-theme/structure.css b/src/assets/dashboard-theme/structure.css
index 067e210..d08f15e 100644
--- a/src/assets/dashboard-theme/structure.css
+++ b/src/assets/dashboard-theme/structure.css
@@ -67,6 +67,7 @@
 
 #sidebar_switcher_toggle {
   top: 50%;
+  color: var(--secondary-color);
   transform: translateY(-50%);
   position: fixed;
   background: #ffffff;
diff --git a/src/assets/dashboard-theme/tabs-pills.css b/src/assets/dashboard-theme/tabs-pills.css
index 4317017..4e6436a 100644
--- a/src/assets/dashboard-theme/tabs-pills.css
+++ b/src/assets/dashboard-theme/tabs-pills.css
@@ -71,3 +71,12 @@
   border: 1px solid var(--primary-color);
   background-color: var(--primary-color);
 }
+
+.uk-subnav[visibility=true], .uk-tab[visibility=true] {
+  margin-left: -50px;
+}
+
+.uk-subnav[visibility=true] > li:not(:first-child):not(:last-child) > :first-child,
+.uk-tab[visibility=true] > li:not(:first-child):not(:last-child) {
+  padding-left: 0;
+}
diff --git a/src/assets/new.css b/src/assets/new.css
index c693132..f81be25 100644
--- a/src/assets/new.css
+++ b/src/assets/new.css
@@ -137,6 +137,7 @@
 
 .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
   border-color: var(--monitor-portal-color);
+  color: var(--monitor-portal-color);
 }
 
 /* Section Tools*/
@@ -154,44 +155,40 @@
   top: 0;
   left: 50%;
   transform: translate(-50%, -100%);
+  width: 50px;
+  max-width: 50px;
+  background: var(--secondary-color);
+  color: var(--contrast-color);
+  -webkit-clip-path: polygon(15% 5%, 100% 5%, 100% 100%, 0% 100%);
+  clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
   display: none;
 }
 
-.dashboard .section:not(.list-view) {
-  border: white solid 1px;
+.dashboard .section {
+  border: transparent solid 1px;
 }
 
-.dashboard .section:not(.list-view):hover {
+.dashboard .section:hover {
   border: var(--secondary-color) solid 1px;
 }
 
-.dashboard .section:not(.list-view):hover .tools {
+.dashboard .section:hover .tools {
   display: block;
-  width: 50px;
-  background: var(--secondary-color);
-  color: white;
-  -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
-  clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%);
 }
 
-.dashboard .section:not(.list-view):hover .tools a {
-  color: white;
-}
-
-.dashboard .section:hover .tools .actions a:last-child {
-  margin-left: 3px;
+.dashboard .section:hover .tools a {
+  color: currentColor;
 }
 
 
 /* New section*/
 .dashboard .new-section {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-right: 10px;
-  border: #cecece dashed 2px;
+  border: #707070 dashed 1px;
+  border-radius: 2px;
   background-color: white;
-  min-height: 100px;
+  min-height: 200px;
   position: relative;
+  box-shadow: 0 2px 6px #00000038;
 }
 
 .dashboard .new-section .tools {
@@ -201,14 +198,6 @@
   transform: translate(-50%, -50%);
 }
 
-.dashboard .new-section .tools .md-btn {
-  background-color: var(--secondary-color);
-  position: relative;
-  min-width: 40px;
-  min-height: 40px;
-  border-radius: 50%;
-}
-
 .dashboard .new-section .tools .md-btn .material-icons {
   position: absolute;
   top: 50%;
@@ -245,3 +234,14 @@
   bottom: 3px;
   left: 3px;
 }
+
+.refresh-iframe {
+  background-color: rgba(0, 0, 0, 0.50);
+  border-radius: 4px;
+  position: absolute;
+  color: white;
+}
+
+.uk-modal-container .uk-modal-dialog {
+  width: 900px;
+}