From ea9e6f3d9b651ce04ea2e1d9ae709989e3c5977d Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Tue, 19 Nov 2019 14:25:19 +0000
Subject: [PATCH] [Monitor Dashboard]: 1. Create indicator Modal 2. Add new
 fields on stakeholder elements. 3. Add getFullUrl on indicatorUtils.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57639 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/home/home.component.html             |   2 +-
 src/app/home/home.component.ts               |   6 +-
 src/app/services/stakeholder.service.ts      |  47 ++++++-
 src/app/topic/indicators.component.html      |  83 +++++++++++-
 src/app/topic/indicators.component.ts        | 128 ++++++++++++++++---
 src/app/topic/topic.component.html           |   6 +-
 src/app/topic/topic.component.ts             |  18 ++-
 src/app/topic/topic.module.ts                |   4 +-
 src/app/utils/entities/stakeholder.ts        |  17 ++-
 src/app/utils/indicator-utils.ts             | 115 +++++++++--------
 src/app/utils/services/statistics.service.ts |  14 +-
 src/assets/monitor-custom.css                |   1 +
 src/assets/theme-assets/dashboard-custom.css |  44 +++++--
 13 files changed, 369 insertions(+), 116 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index ebb08a2..4c0e249 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -65,7 +65,7 @@
                       <hr>
                       <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                         <div>
-                          <button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic, i)">Delete</button>
+                          <button class="md-btn md-btn-small" (click)="deleteTopicOpen(copyTopic.name, editTopic, i)">Delete</button>
                         </div>
                         <div>
                           <button class="md-btn md-btn-small md-btn-primary uk-float-right"
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b736881..17c780d 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -116,12 +116,10 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
   }
 
-  public deleteTopicOpen(element, index: number) {
+  public deleteTopicOpen(name: string, element, index: number) {
     this.element = element;
     this.index = index;
-    this.deleteTopicModal.alertHeader = true;
-    this.deleteTopicModal.alertMessage = true;
-    this.deleteTopicModal.cancelButton = true;
+    this.deleteTopicModal.alertTitle = 'Delete ' + name;
     this.deleteTopicModal.cancelButtonText = 'No';
     this.deleteTopicModal.okButtonText = 'Yes';
     this.deleteTopicModal.message = 'This topic will permanently be deleted. Are you sure you want to proceed?';
diff --git a/src/app/services/stakeholder.service.ts b/src/app/services/stakeholder.service.ts
index c5edffc..a4046bd 100644
--- a/src/app/services/stakeholder.service.ts
+++ b/src/app/services/stakeholder.service.ts
@@ -3,6 +3,7 @@ import {HttpClient} from "@angular/common/http";
 import {BehaviorSubject, Observable} from "rxjs";
 import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {map} from "rxjs/operators";
 
 @Injectable({
   providedIn: "root"
@@ -17,23 +18,33 @@ export class StakeholderService {
 
   getStakeholder(url: string, alias:string): Observable<Stakeholder> {
     // return new BehaviorSubject<Stakeholder>(Stakeholder.createECStakeholder()).asObservable();
-    return this.http.get<Stakeholder>(url + '/stakeholder/' + encodeURIComponent(alias));
+    return this.http.get<Stakeholder>(url + '/stakeholder/' + encodeURIComponent(alias)).pipe(map(stakeholder => {
+      return this.formalizeStakeholder([stakeholder])[0];
+    }));
   }
 
   getAllStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
-    return this.http.get<Stakeholder[]>(url + '/stakeholder/all' + (type)?('?type=' + type):'');
+    return this.http.get<Stakeholder[]>(url + '/stakeholder/all' + (type)?('?type=' + type):'').pipe(map(stakeholders => {
+      return this.formalizeStakeholder(stakeholders);
+    }));
   }
 
   getStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
-    return this.http.get<Stakeholder[]>(url + '/stakeholder' + (type)?('?type=' + type):'');
+    return this.http.get<Stakeholder[]>(url + '/stakeholder' + (type)?('?type=' + type):'').pipe(map(stakeholders => {
+      return this.formalizeStakeholder(stakeholders);
+    }));
   }
 
   getDefaultStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
-    return this.http.get<Stakeholder[]>(url + '/stakeholder/default' + (type)?('?type=' + type):'');
+    return this.http.get<Stakeholder[]>(url + '/stakeholder/default' + (type)?('?type=' + type):'').pipe(map(stakeholders => {
+      return this.formalizeStakeholder(stakeholders);
+    }));
   }
 
   saveStakeholder(url: string, stakeholder: Stakeholder): Observable<Stakeholder> {
-    return this.http.post<Stakeholder>(url + '/stakeholder/save', stakeholder);
+    return this.http.post<Stakeholder>(url + '/stakeholder/save', stakeholder).pipe(map(stakeholder => {
+      return this.formalizeStakeholder([stakeholder])[0];
+    }));
   }
 
   saveIndicator(url: string, path: string[], indicator: Indicator): Observable<Indicator> {
@@ -58,4 +69,30 @@ export class StakeholderService {
   setStakeholder(stakeholder: Stakeholder) {
     this.stakeholderSubject.next(stakeholder);
   }
+
+  private formalizeStakeholder(stakeholders: Stakeholder[]): Stakeholder[] {
+    stakeholders.forEach( stakeholder => {
+      stakeholder.topics.forEach( topic => {
+        topic.categories.forEach( category => {
+          category.subCategories.forEach(subcategory => {
+            subcategory.charts.forEach(indicator => {
+              indicator.indicatorPaths.forEach(indicatorPath => {
+                if(indicatorPath.parameters) {
+                  indicatorPath.parameters = new Map<string, string>(Object.entries(indicatorPath.parameters));
+                }
+                if(indicatorPath.filters) {
+                  let filters = new Map<string, Map<string, string>>();
+                  Object.entries(indicatorPath.filters).forEach(([key, value]) => {
+                    filters.set(key, new Map<string, string>(Object.entries(value)));
+                  });
+                  indicatorPath.filters = filters;
+                }
+              });
+            });
+          });
+        });
+      });
+    });
+    return stakeholders;
+  }
 }
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index ff56d00..4bef60b 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -73,11 +73,12 @@
     <div [class.uk-child-width-1-3@m]="grid"
          [class.uk-child-width-1-2@s]="grid"
          [class.uk-child-width-1-1]="!grid"
-         class="uk-grid-match"
+         class="uk-grid-match uk-grid-small"
+         [class.list]="!grid"
          uk-grid>
       <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
         <div>
-          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
+          <div class="md-card">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
@@ -118,11 +119,12 @@
     <div [class.uk-child-width-1-3@m]="grid"
          [class.uk-child-width-1-2@s]="grid"
          [class.uk-child-width-1-1]="!grid"
-         uk-height-match="target: .md-card"
+         [class.list]="!grid"
+         class="uk-grid-match uk-grid-small"
          uk-grid>
       <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
         <div>
-          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
+          <div class="md-card">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <ng-template [ngIf]="!grid">
@@ -154,7 +156,7 @@
             <div *ngIf="grid" class="md-card-content">
               <div class="uk-flex uk-flex-center" uk-grid>
                 <div class="uk-width-1-1">
-                  {{indicator.description}}
+                  {{indicator.description ? indicator.description : ''}}
                 </div>
                 <div class="uk-width-1-3 uk-text-center"
                      [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
@@ -182,6 +184,77 @@
           </div>
         </div>
       </ng-template>
+      <div>
+        <div class="md-card clickable" (click)="createIndicatorOpen()">
+          <div class="md-card-toolbar">
+            <div class="md-card-toolbar-heading-text"
+                 [class.uk-flex-middle]="!grid"
+                 [class.uk-flex]="!grid"
+                 [class.uk-flex-center]="!grid">
+              <i *ngIf="!grid" class="material-icons md-36">add</i>
+              <span>Create a custom Indicator</span>
+            </div>
+          </div>
+          <div *ngIf="grid" class="md-card-content">
+            <div class="uk-flex uk-flex-center" uk-grid>
+              <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>
+            <div class="uk-flex uk-flex-center uk-margin-top">
+              <i class="material-icons md-48">add</i>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
+<modal-alert #createIndicatorModal
+             (alertOutput)="createIndicator()"
+             [okDisabled]="indicatorFb && indicatorFb.invalid">
+  <div *ngIf="indicatorFb" class="uk-form-stacked" [formGroup]="indicatorFb">
+    <label class="uk-form-label">Name</label>
+    <div class="uk-form-controls" formArrayName="name">
+      <input class="uk-input"
+             [class.uk-form-danger]="indicatorFb.get('name').invalid && indicatorFb.get('name').dirty"
+             [formControl]="indicatorFb.get('name')">
+    </div>
+    <label class="uk-form-label">Description</label>
+    <div class="uk-form-controls" formArrayName="urls">
+      <textarea class="uk-textarea" rows="3"
+                [formControl]="indicatorFb.get('description')"></textarea>
+    </div>
+    <label class="uk-form-label">Chart url</label>
+    <div class="uk-form-controls" formArrayName="urls">
+      <input class="uk-input"
+             [class.uk-form-danger]="chartUrl.invalid && chartUrl.dirty"
+             *ngFor="let chartUrl of urls.controls;"
+             [formControl]="chartUrl">
+    </div>
+  </div>
+</modal-alert>
+<!--<modal-alert #editIndicatorModal
+             (alertOutput)="saveIndicator()"
+             [okDisabled]="editIndicatorFb && (editIndicatorFb.invalid || !editIndicatorFb.dirty)">
+  <div *ngIf="editIndicatorFb" class="uk-form-stacked" [formGroup]="editIndicatorFb">
+    <label class="uk-form-label">Name</label>
+    <div class="uk-form-controls" formArrayName="name">
+      <input class="uk-input"
+             [class.uk-form-danger]="indicatorFb.get('name').status === 'INVALID' && indicatorFb.get('name').dirty"
+             [formControl]="indicatorFb.get('name')">
+    </div>
+    <label class="uk-form-label">Description</label>
+    <div class="uk-form-controls" formArrayName="urls">
+      <textarea class="uk-textarea" rows="3"
+                [formControl]="indicatorFb.get('description')"></textarea>
+    </div>
+    <label class="uk-form-label">Chart url</label>
+    <div class="uk-form-controls" formArrayName="urls">
+      <input class="uk-input"
+             [class.uk-form-danger]="chartUrl.status === 'INVALID' && chartUrl.dirty"
+             *ngFor="let chartUrl of urls.controls;"
+             [formControl]="chartUrl">
+    </div>
+  </div>
+</modal-alert>-->
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index 6d3e2b2..eb5d2b8 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -1,7 +1,11 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
+import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
 import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
 import {IndicatorUtils} from "../utils/indicator-utils";
+import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {AlertModal} from "../openaireLibrary/utils/modal/alert";
+import {StatisticsService} from "../utils/services/statistics.service";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 
 @Component({
   selector: 'indicators',
@@ -18,6 +22,12 @@ export class IndicatorsComponent implements OnInit, OnChanges {
   @Input()
   public stakeholder: Stakeholder = null;
   public indicatorUtils: IndicatorUtils = new IndicatorUtils();
+  public indicatorFb: FormGroup;
+  public editIndicatorFb: FormGroup;
+  /**
+   * Editable indicator
+   */
+  public indicator: Indicator;
   /**
    * All charts and numbers
    */
@@ -40,22 +50,27 @@ export class IndicatorsComponent implements OnInit, OnChanges {
    */
   public grid: boolean = true;
 
-  constructor(private sideBarService: SideBarService) {}
+  @ViewChild('createIndicatorModal') createIndicatorModal: AlertModal;
+  @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
+
+  constructor(private sideBarService: SideBarService,
+              private statisticsService: StatisticsService,
+              private fb: FormBuilder) {
+  }
 
   ngOnInit(): void {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if(this.canEdit) {
-      this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
-        subCategories[this.subcategoryIndex].charts;
+    if (this.canEdit) {
+      this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
+      console.log(this.charts);
       this.displayCharts = this.filterChartType(this.filterPrivacy(
         this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.status),
         this.privacy),
         this.chartType
       );
-      this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
-        subCategories[this.subcategoryIndex].numbers;
+      this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].numbers;
       this.displayNumbers = this.filterPrivacy(this.filterStatus(
         this.filterByKeyword(this.numbers, this.keyword),
         this.status),
@@ -63,6 +78,18 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     }
   }
 
+  public toggleOpen(event = null) {
+    if (!event) {
+      this.sideBarService.setOpen(!this.open);
+    } else if (event && event['value'] === true) {
+      this.sideBarService.setOpen(false);
+    }
+  }
+
+  public changeGrid(value) {
+    this.grid = value;
+  }
+
   onChartTypeChange(value) {
     this.displayCharts = this.filterChartType(this.charts, value);
   }
@@ -82,7 +109,7 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     this.displayNumbers = this.filterByKeyword(this.numbers, value);
   }
 
-  filterChartType(indicators: Indicator[], value): Indicator[] {
+  private filterChartType(indicators: Indicator[], value): Indicator[] {
     if (value === 'all') {
       return indicators;
     } else {
@@ -91,7 +118,7 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     }
   }
 
-  filterPrivacy(indicators: Indicator[], value): Indicator[] {
+  private filterPrivacy(indicators: Indicator[], value): Indicator[] {
     if (value === 'all') {
       return indicators;
     } else {
@@ -99,7 +126,7 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     }
   }
 
-  filterStatus(indicators: Indicator[], value): Indicator[] {
+  private filterStatus(indicators: Indicator[], value): Indicator[] {
     if (value === 'all') {
       return indicators;
     } else {
@@ -107,7 +134,7 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     }
   }
 
-  filterByKeyword(indicators: Indicator[], value): Indicator[] {
+  private filterByKeyword(indicators: Indicator[], value): Indicator[] {
     if (value === null || value === '') {
       return indicators;
     } else {
@@ -126,15 +153,78 @@ export class IndicatorsComponent implements OnInit, OnChanges {
       this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
   }
 
-  public toggleOpen(event = null) {
-    if (!event) {
-      this.sideBarService.setOpen(!this.open);
-    } else if (event && event['value'] === true) {
-      this.sideBarService.setOpen(false);
-    }
+  public get urls(): FormArray {
+    return this.indicatorFb.get('urls') as FormArray;
   }
 
-  public changeGrid(value) {
-    this.grid = value;
+  public addUrl() {
+    this.urls.push(this.fb.control('', [Validators.required,
+      Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
+        '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
+        '[a-zA-Z0-9]+\.[^\s]{2,}')])
+    );
+  }
+
+  public createIndicatorOpen() {
+    this.indicatorFb = this.fb.group({
+      name: this.fb.control('', Validators.required),
+      description: this.fb.control(''),
+      width: this.fb.control('small', Validators.required),
+      urls: this.fb.array([]),
+    });
+    this.addUrl();
+    this.createIndicatorModal.alertTitle = 'Create a new chart Indicator';
+    this.createIndicatorModal.cancelButtonText = 'Cancel';
+    this.createIndicatorModal.okButtonText = 'Create';
+    this.createIndicatorModal.okButtonLeft = false;
+    this.createIndicatorModal.alertMessage = false;
+    this.createIndicatorModal.open();
+  }
+
+  public createIndicator() {
+    this.indicator = new Indicator(
+      this.indicatorFb.value.name,
+      this.indicatorFb.value.description,
+      'chart',
+      this.indicatorFb.value.width,
+      false,
+      false,
+      []
+    );
+    this.indicatorFb.value.urls.forEach(url => {
+      this.indicator.indicatorPaths.push(
+        this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url));
+    });
+    let index = this.charts.push(this.indicator);
+    this.editIndicatorOpen(index -1);
+  }
+
+  public editIndicatorOpen(index: number) {
+    this.indicator = HelperFunctions.copy(this.charts[index]);
+      let indicatorPaths = this.fb.array([]);
+    this.indicator.indicatorPaths.forEach(indicatorPath => {
+      indicatorPaths.push(this.fb.group({
+        parameters: this.fb.array([])
+      }));
+    });
+    this.editIndicatorFb = this.fb.group({
+      name: this.fb.control(this.indicator.name, Validators.required),
+      description: this.fb.control(this.indicator.description),
+      isPublic: this.fb.control(this.indicator.isPublic),
+      isActive: this.fb.control(this.indicator.isActive),
+      indicatorPaths: indicatorPaths,
+      width: this.fb.control(this.indicator.width, Validators.required),
+    });
+    console.log(this.editIndicatorFb.value);
+    /*this.editIndicatorModal.alertTitle = this.indicator.name;
+    this.editIndicatorModal.cancelButtonText = 'Cancel';
+    this.editIndicatorModal.okButtonText = 'Save Changes';
+    this.editIndicatorModal.okButtonLeft = false;
+    this.editIndicatorModal.alertMessage = false;
+    this.editIndicatorModal.open();*/
+  }
+
+  saveIndicator() {
+
   }
 }
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 38630d3..a8da93f 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -54,7 +54,7 @@
                 <hr>
                 <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                   <div>
-                    <button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic)">Delete</button>
+                    <button class="md-btn md-btn-small" (click)="deleteTopicOpen(topic.name, editTopic)">Delete</button>
                   </div>
                   <div>
                     <button class="md-btn md-btn-small md-btn-primary uk-float-right"
@@ -114,7 +114,7 @@
                   <hr>
                   <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                     <div>
-                      <button class="md-btn md-btn-small" (click)="deleteCategoryOpen(editCategory, i)">Delete</button>
+                      <button class="md-btn md-btn-small" (click)="deleteCategoryOpen(copyCategory.name, editCategory, i)">Delete</button>
                     </div>
                     <div>
                       <button class="md-btn md-btn-small md-btn-primary uk-float-right"
@@ -171,7 +171,7 @@
                         <hr>
                         <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                           <div>
-                            <button class="md-btn md-btn-small" (click)="deleteSubcategoryOpen(editSubCategory, j)">Delete</button>
+                            <button class="md-btn md-btn-small" (click)="deleteSubcategoryOpen(copySubCategory.name, editSubCategory, j)">Delete</button>
                           </div>
                           <div>
                             <button class="md-btn md-btn-small md-btn-primary uk-float-right"
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index d93a44a..a9a7cd4 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -119,8 +119,8 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
 
-  public deleteTopicOpen(element) {
-    this.deleteOpen('topic', this.deleteTopicModal, element, this.topicIndex);
+  public deleteTopicOpen(name: string, element) {
+    this.deleteOpen(name,'topic', this.deleteTopicModal, element, this.topicIndex);
   }
 
   public deleteTopic() {
@@ -177,8 +177,8 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
 
-  public deleteCategoryOpen(element, index) {
-    this.deleteOpen('category', this.deleteCategoryModal, element, index);
+  public deleteCategoryOpen(name: string, element, index) {
+    this.deleteOpen(name,'category', this.deleteCategoryModal, element, index);
   }
 
   public deleteCategory() {
@@ -224,8 +224,8 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
 
-  public deleteSubcategoryOpen(element, index) {
-    this.deleteOpen('subcategory', this.deleteSubcategoryModal, element, index);
+  public deleteSubcategoryOpen(name: string, element, index) {
+    this.deleteOpen(name,'subcategory', this.deleteSubcategoryModal, element, index);
   }
 
   public deleteSubcategory() {
@@ -242,12 +242,10 @@ export class TopicComponent implements OnInit, OnDestroy {
     this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
   }
 
-  private deleteOpen(type: string, modal: AlertModal, element, index) {
+  private deleteOpen(name: string, type: string, modal: AlertModal, element, index) {
     this.element = element;
     this.index = index;
-    modal.alertHeader = true;
-    modal.alertMessage = true;
-    modal.cancelButton = true;
+    modal.alertTitle = 'Delete ' + name;
     modal.cancelButtonText = 'No';
     modal.okButtonText = 'Yes';
     modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
diff --git a/src/app/topic/topic.module.ts b/src/app/topic/topic.module.ts
index 547bfc4..797a1a7 100644
--- a/src/app/topic/topic.module.ts
+++ b/src/app/topic/topic.module.ts
@@ -9,13 +9,13 @@ import {TopicComponent} from "./topic.component";
 import {TopicRoutingModule} from "./topic-routing.module";
 import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
 import {RouterModule} from "@angular/router";
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {IndicatorsComponent} from "./indicators.component";
 import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
 
 @NgModule({
   imports: [
-    CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule
+    CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent
diff --git a/src/app/utils/entities/stakeholder.ts b/src/app/utils/entities/stakeholder.ts
index 93d6bd8..6968413 100644
--- a/src/app/utils/entities/stakeholder.ts
+++ b/src/app/utils/entities/stakeholder.ts
@@ -269,13 +269,16 @@ export class Stakeholder {
 }
 
 export class Topic {
+  id:string;
   name: string;
   alias: string;
   description: string;
   isActive: boolean;
   isPublic: boolean;
+  isDefault: boolean;
   categories: Category[];
-  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean){
+  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean) {
+    this.id = null;
     this.name =  name;
     this.description = description;
     this.alias = alias;
@@ -285,14 +288,17 @@ export class Topic {
   }
 }
 export class Category {
+  id:string;
   name: string;
   alias: string;
   description: string;
   isActive: boolean;
   isPublic: boolean;
   isOverview: boolean;
+  isDefault: boolean;
   subCategories: SubCategory[];
-  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean){
+  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean) {
+    this.id = null;
     this.name =  name;
     this.description = description;
     this.alias = alias;
@@ -303,14 +309,17 @@ export class Category {
 }
 
 export class SubCategory {
+  id:string;
   name: string;
   alias: string;
   description: string;
   isActive: boolean;
   isPublic: boolean;
+  isDefault: boolean;
   charts: Indicator[];
   numbers: Indicator[];
-  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean){
+  constructor(name: string, description: string, alias:string , isActive: boolean, isPublic: boolean) {
+    this.id = null;
     this.name =  name;
     this.description = description;
     this.alias = alias;
@@ -330,8 +339,10 @@ export class Indicator {
   tags:string[];
   isActive: boolean;
   isPublic: boolean;
+  isDefault: boolean;
   indicatorPaths:IndicatorPath[];
   constructor(name: string, description: string, type:string , width:string,  isActive: boolean, isPublic: boolean, indicatorPaths:IndicatorPath[]){
+    this.id = null;
     this.name =  name;
     this.description = description;
     this.type =  type;
diff --git a/src/app/utils/indicator-utils.ts b/src/app/utils/indicator-utils.ts
index b6d45ff..31a7e05 100644
--- a/src/app/utils/indicator-utils.ts
+++ b/src/app/utils/indicator-utils.ts
@@ -1,4 +1,4 @@
-import {ChartHelper, Indicator, IndicatorPath} from "./entities/stakeholder";
+import {ChartHelper, IndicatorPath} from "./entities/stakeholder";
 
 export class IndicatorUtils {
 
@@ -18,9 +18,9 @@ export class IndicatorUtils {
 
   isActiveIcon: string = 'brightness_1';
 
-  public getFullUrl(indicatorPath: IndicatorPath):string{
+  public getFullUrl(indicatorPath: IndicatorPath): string {
     let replacedUrl = indicatorPath.chartObject;
-    if(indicatorPath.parameters) {
+    if (indicatorPath.parameters) {
       Object.entries(indicatorPath.parameters).forEach((key, value) => {
         replacedUrl = replacedUrl.replace(ChartHelper.prefix + key + ChartHelper.suffix, value.toString());
       });
@@ -28,57 +28,58 @@ export class IndicatorUtils {
     return indicatorPath.url + encodeURIComponent(replacedUrl);
   }
 
-  generateIndicatorByChartUrl(url:string): Indicator{
-    let indicator = new Indicator("","","chart","small",true,true,[]);
-    let indicatorPath = new IndicatorPath("","","","",[]);
-    indicator.indicatorPaths.push(indicatorPath);
-    if(url.indexOf("json=")!=-1){
-      indicatorPath.url = url.split("json=")[0]+"json=";
-      indicatorPath.url = indicatorPath.url.split("/")[indicatorPath.url.split("/").length-1];
+  generateIndicatorByChartUrl(source: string, url: string, type: string = null): IndicatorPath {
+    let indicatorPath = new IndicatorPath("", source, "", "", []);
+    if (source === 'stats-tool') {
+      indicatorPath.url = url.split("json=")[0] + "json=";
+      indicatorPath.url = indicatorPath.url.split("/")[indicatorPath.url.split("/").length - 1];
       indicatorPath.chartObject = decodeURIComponent(url.split("json=")[1]);
-      indicatorPath.source = "stats-tool";
       let chart = JSON.parse(indicatorPath.chartObject);
       indicatorPath.type = this.extractType(chart, indicatorPath);
-      this.extractTitle(chart,indicatorPath);
-      this.extractXTitle(chart,indicatorPath);
-      this.extractYTitle(chart,indicatorPath);
-      this.extractFunder(chart,indicatorPath);
-      this.extractStartYear(chart,indicatorPath);
-      this.extractEndYear(chart,indicatorPath);
+      this.extractTitle(chart, indicatorPath);
+      this.extractXTitle(chart, indicatorPath);
+      this.extractYTitle(chart, indicatorPath);
+      this.extractFunder(chart, indicatorPath);
+      this.extractStartYear(chart, indicatorPath);
+      this.extractEndYear(chart, indicatorPath);
       indicatorPath.chartObject = JSON.stringify(chart);
-    }else if(url.indexOf("data=")!=-1){
-      indicatorPath.url = url.split("data=")[0]+"data=";
+    } else if (source === 'old') {
+      indicatorPath.url = url.split("data=")[0] + "data=";
       indicatorPath.chartObject = decodeURIComponent(url.split("data=")[1]);
-      indicatorPath.source = "old";
+    } else {
+      indicatorPath.url = url;
+      indicatorPath.type = type;
     }
-    return indicator;
+    return indicatorPath;
   }
 
-  private extractType(obj,indicatorPath:IndicatorPath ):string{
-    let defaultTypes = ["column","bar","pie"];
-    let type= obj["chartDescription"]["queries"][0]["type"];
-    if(defaultTypes.indexOf(type)==-1){
+  private extractType(obj, indicatorPath: IndicatorPath): string {
+    let defaultTypes = ["column", "bar", "pie"];
+    let type = obj["chartDescription"]["queries"][0]["type"];
+    if (defaultTypes.indexOf(type) == -1) {
       type = defaultTypes [0];
-    }else{
-      obj["chartDescription"]["queries"][0]["type"] = ChartHelper.prefix+"type"+ChartHelper.suffix;
-      indicatorPath.parameters.set("type",type);
+    } else {
+      obj["chartDescription"]["queries"][0]["type"] = ChartHelper.prefix + "type" + ChartHelper.suffix;
+      indicatorPath.parameters.set("type", type);
     }
     return type;
   }
-  private extractFunder(obj,indicatorPath:IndicatorPath ){
+
+  private extractFunder(obj, indicatorPath: IndicatorPath) {
     let funderName;
-    for(let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]){
-      if(filter["groupFilters"][0]["field"].indexOf(".funder")!=-1){
-        funderName= filter["groupFilters"][0]["values"][0];
-        filter["groupFilters"][0]["values"][0] = ChartHelper.prefix+"funder_name"+ChartHelper.suffix;
-        indicatorPath.parameters.set("funder_name",funderName);
+    for (let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]) {
+      if (filter["groupFilters"][0]["field"].indexOf(".funder") != -1) {
+        funderName = filter["groupFilters"][0]["values"][0];
+        filter["groupFilters"][0]["values"][0] = ChartHelper.prefix + "funder_name" + ChartHelper.suffix;
+        indicatorPath.parameters.set("funder_name", funderName);
       }
     }
   }
-  private extractStartYear(obj,indicatorPath:IndicatorPath ){
+
+  private extractStartYear(obj, indicatorPath: IndicatorPath) {
     let start_year;
-    for(let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]){
-      for(let gfilter of filter["groupFilters"]) {
+    for (let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]) {
+      for (let gfilter of filter["groupFilters"]) {
         if (gfilter["field"].indexOf(".year") != -1 && gfilter["type"].indexOf(">") != -1) {
           start_year = gfilter["values"][0];
           gfilter["values"][0] = ChartHelper.prefix + "start_year" + ChartHelper.suffix;
@@ -87,10 +88,11 @@ export class IndicatorUtils {
       }
     }
   }
-  private extractEndYear(obj,indicatorPath:IndicatorPath ){
+
+  private extractEndYear(obj, indicatorPath: IndicatorPath) {
     let end_year;
-    for(let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]){
-      for(let gfilter of filter["groupFilters"]) {
+    for (let filter of obj["chartDescription"]["queries"][0]["query"]["filters"]) {
+      for (let gfilter of filter["groupFilters"]) {
         if (gfilter["field"].indexOf(".year") != -1 && gfilter["type"].indexOf("<") != -1) {
           end_year = gfilter["values"][0];
           gfilter["values"][0] = ChartHelper.prefix + "end_year" + ChartHelper.suffix;
@@ -99,26 +101,29 @@ export class IndicatorUtils {
       }
     }
   }
-  private extractTitle(obj,indicatorPath:IndicatorPath ){
-    let title= obj["chartDescription"]["title"]["text"];
-    if(obj["chartDescription"]["title"]){
-      obj["chartDescription"]["title"]["text"] = ChartHelper.prefix+"title"+ChartHelper.suffix;
-      indicatorPath.parameters.set("title",title);
+
+  private extractTitle(obj, indicatorPath: IndicatorPath) {
+    let title = obj["chartDescription"]["title"]["text"];
+    if (obj["chartDescription"]["title"]) {
+      obj["chartDescription"]["title"]["text"] = ChartHelper.prefix + "title" + ChartHelper.suffix;
+      indicatorPath.parameters.set("title", title);
 
     }
   }
-  private extractXTitle(obj,indicatorPath:IndicatorPath ){
-    let title= obj["chartDescription"]["xAxis"]["title"]["text"];
-    if(obj["chartDescription"]["xAxis"]["title"]){
-      obj["chartDescription"]["xAxis"]["title"]["text"] = ChartHelper.prefix+"xAxisTitle"+ChartHelper.suffix;
-      indicatorPath.parameters.set("xAxisTitle",title);
+
+  private extractXTitle(obj, indicatorPath: IndicatorPath) {
+    let title = obj["chartDescription"]["xAxis"]["title"]["text"];
+    if (obj["chartDescription"]["xAxis"]["title"]) {
+      obj["chartDescription"]["xAxis"]["title"]["text"] = ChartHelper.prefix + "xAxisTitle" + ChartHelper.suffix;
+      indicatorPath.parameters.set("xAxisTitle", title);
     }
   }
-  private extractYTitle(obj,indicatorPath:IndicatorPath ){
-    let title= obj["chartDescription"]["yAxis"]["title"]["text"];
-    if(obj["chartDescription"]["yAxis"]["title"]){
-      obj["chartDescription"]["yAxis"]["title"]["text"] = ChartHelper.prefix+"yAxisTitle"+ChartHelper.suffix;
-      indicatorPath.parameters.set("yAxisTitle",title);
+
+  private extractYTitle(obj, indicatorPath: IndicatorPath) {
+    let title = obj["chartDescription"]["yAxis"]["title"]["text"];
+    if (obj["chartDescription"]["yAxis"]["title"]) {
+      obj["chartDescription"]["yAxis"]["title"]["text"] = ChartHelper.prefix + "yAxisTitle" + ChartHelper.suffix;
+      indicatorPath.parameters.set("yAxisTitle", title);
     }
   }
 
diff --git a/src/app/utils/services/statistics.service.ts b/src/app/utils/services/statistics.service.ts
index 5657dd7..47e0210 100644
--- a/src/app/utils/services/statistics.service.ts
+++ b/src/app/utils/services/statistics.service.ts
@@ -4,7 +4,9 @@ import {EnvironmentSpecificService} from "../../openaireLibrary/utils/properties
 import {Observable} from "rxjs";
 
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class StatisticsService {
 
     numberSources: Map<string, string> = new Map<string, string>();
@@ -29,4 +31,14 @@ export class StatisticsService {
     getChartUrl(source: string, url: string): string {
         return this.chartSources.get(source) + url;
     }
+
+    getChartSource(url: string): string {
+        let source = 'fake';
+        this.chartSources.forEach((value, key) => {
+            if(value !== '' && url.indexOf(value) !== -1) {
+                source = key;
+            }
+        });
+        return source;
+    }
 }
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index 7fb762f..5a64688 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -20,4 +20,5 @@
     --sidebar-width: 320px;
     --sidebar-font-size: 16px;
     --header-height: 70px;
+    --list-card-max-width: 1220px;
 }
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index 5bc3d13..6cfd099 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -5,6 +5,8 @@
   --sidebar-font-size: 16px;
 
   --header-height: 70px;
+
+  --list-card-max-width: 1220px;
 */
 
 /* Global css*/
@@ -13,12 +15,16 @@ html .dashboard {
   color: black;
 }
 
+.dashboard .clickable {
+  cursor: pointer;
+}
+
 /* On link hover, his items with this class will be displayed*/
-.dashboard li>a .onHover {
+.dashboard li > a .onHover {
   display: none;
 }
 
-.dashboard li>a:hover .onHover {
+.dashboard li > a:hover .onHover {
   display: block;
 }
 
@@ -29,13 +35,13 @@ html .dashboard {
 
 .dashboard #sidebar_main {
   width: var(--sidebar-width);
-  -webkit-transform: translate3d(calc(-1 * var(--sidebar-width)),0,0);
-  transform: translate3d(calc(-1 * var(--sidebar-width)),0,0);
+  -webkit-transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
+  transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
 }
 
 .dashboard .sidebar_main_active #sidebar_main {
-  -webkit-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 .dashboard #sidebar_main .sidebar_main_header {
@@ -75,7 +81,7 @@ body.dashboard {
 }
 
 .dashboard #header_main {
-  padding: calc((var(--header-height) - 48px)/2) 25px;
+  padding: calc((var(--header-height) - 48px) / 2) 25px;
 }
 
 /* Custom card*/
@@ -87,8 +93,19 @@ body.dashboard {
   color: rgba(0, 0, 0, 0.8);
 }
 
+@media only screen and (max-width: 767px) {
+  .dashboard .md-card .md-card-toolbar .md-card-toolbar-actions span {
+    display: none;
+  }
+}
+
 .dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
   font-weight: 700;
+  float: none;
+}
+
+.dashboard .list .md-card {
+  max-width: var(--list-card-max-width);
 }
 
 /* Breadcrumb*/
@@ -112,9 +129,20 @@ body.dashboard {
 
 /* Notification */
 /* Remove the second close added by theme because it was used uikit 2*/
-.dashboard .uk-close::after {content: '';}
+.dashboard .uk-close::after {
+  content: '';
+}
 
 /* Change z-index, because of sidebar and header z-index is bigger that default */
 .dashboard .uk-notification {
   z-index: 2000;
 }
+
+/* Form */
+
+.dashboard .uk-form-stacked .uk-form-label {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0;
+  margin-top: 5px;
+}