[MonitorDashboard]: Make custom css for sidebar width and header height. Add indicators on page. Remove global save. Add indicator filters

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57555 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.html

@@ -1,6 +1,6 @@
 <!--disable_transitions -->
 <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar">
-  <div id="header_main" [class.header_full]="!hasSidebar">
+  <div id="header_main"[class.header_full]="!hasSidebar">
     <nav class="uk-light">
       <a *ngIf="hasSidebar" id="sidebar_main_toggle" (click)="toggleOpen()" class="sSwitch sSwitch_left">
         <span class="sSwitchIcon"></span>

src/app/home/home.component.html

@@ -37,7 +37,7 @@
                 <div class="md-card">
                   <div class="md-card-content uk-position-relative">
                     <a [routerLink]="" class="uk-position-top-right">
-                      <i (click)="close(newTopic)" class="material-icons">close</i>
+                      <i (click)="hide(newTopic)" class="material-icons">close</i>
                     </a>
                     <div class="uk-grid-small" uk-grid>
                       <div class="uk-width-1-1">
@@ -61,7 +61,7 @@
                     <hr>
                     <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                       <div>
-                        <button class="md-btn md-btn-small" (click)="close(newTopic)">Cancel</button>
+                        <button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>
                       </div>
                       <div>
                         <button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="createTopic(newTopic)">Create</button>

src/app/home/home.component.ts

@@ -61,7 +61,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.valid = true;
   }
 
-  public close(element) {
+  public hide(element) {
     UIkit.drop(element).hide();
   }
 
@@ -81,7 +81,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     if(this.topic.name && this.topic.name !== '') {
       this.topic.alias = this.topic.name.toLowerCase();
       this.stakeholder.topics.push(this.topic);
-      this.close(element);
+      this.hide(element);
     } else {
       this.valid = false;
     }

src/app/library/sharedComponents/loading/loading.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+  selector: 'loading',
+  template: `
+    <div *ngIf="loading" class="uk-flex uk-flex-center uk-margin-small-top">
+      <div class="md-preloader" [ngClass]="'md-preloader-' + color">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
+          <circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
+        </svg>
+      </div>
+    </div>`
+})
+export class LoadingComponent {
+  @Input()
+  public loading: boolean = false;
+
+  /**
+   * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
+   */
+  @Input() color: string = '';
+
+  constructor() {
+  }
+}

src/app/library/sharedComponents/loading/loading.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LoadingComponent} from "./loading.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    LoadingComponent
+  ],
+  providers: [],
+  exports: [
+    LoadingComponent
+  ]
+})
+export class LoadingModule {
+}

src/app/login/libUser.module.ts

@@ -9,11 +9,12 @@ import { UserModule} from '../openaireLibrary/login/user.module';
 import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 import { SubscribeService } from '../openaireLibrary/utils/subscribe/subscribe.service';
 import {EmailService} from "../openaireLibrary/utils/email/email.service";
+import {SubscribeModule} from "../utils/subscribe/subscribe.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
-    UserRoutingModule, UserModule
+    UserRoutingModule, UserModule, SubscribeModule
   ],
   providers:[PreviousRouteRecorder, SubscribeService, EmailService],
   declarations: [

src/app/login/user.component.ts

@@ -38,7 +38,7 @@ import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
 
   </div>
 </div>
-    <!--<subscribe  [communityId]="communityId" [showTemplate]= false class="" (subscribeEvent)="afterSubscibeEvent($event)">--></subscribe>
+<subscribe  [communityId]="communityId" [showTemplate]= false class="" (subscribeEvent)="afterSubscibeEvent($event)"></subscribe>
     `
 })
 

src/app/services/stakeholder.service.ts

@@ -15,6 +15,7 @@ export class StakeholderService {
   }
 
   getStakeholder(url: string, alias:string): Observable<Stakeholder> {
+    // return new BehaviorSubject<Stakeholder>(Stakeholder.createECStakeholder()).asObservable();
     return this.http.get<Stakeholder>(url + '/stakeholder/' + alias);
   }
 

src/app/topic/indicators.component.html

@@ -0,0 +1,173 @@
+<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
+  <div class="uk-padding-small md-bg-white" uk-grid>
+    <div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
+      <div class="uk-flex uk-flex-middle">
+        <label>Chart Type:</label>
+        <select class="uk-select uk-form-small uk-margin-small-left"
+                (ngModelChange)="onChartTypeChange($event)"
+                [(ngModel)]="chartType">
+          <option [value]="'all'">All</option>
+          <option [value]="'pie'">Pie</option>
+          <option [value]="'table'">Table</option>
+          <option [value]="'line'">Line</option>
+          <option [value]="'column'">Column</option>
+          <option [value]="'bar'">Bar</option>
+        </select>
+      </div>
+      <div class="uk-flex uk-flex-middle">
+        <label>Privacy:</label>
+        <select class="uk-select uk-form-small uk-margin-small-left"
+                (ngModelChange)="onPrivacyChange($event)"
+                [(ngModel)]="isPublic">
+          <option [value]="'all'">All</option>
+          <option [value]="'public'">Public</option>
+          <option [value]="'private'">Private</option>
+        </select>
+      </div>
+      <div class="uk-flex uk-flex-middle">
+        <label>Status:</label>
+        <select class="uk-select uk-form-small uk-margin-small-left"
+                (ngModelChange)="onStatusChange($event)"
+                [(ngModel)]="isActive">
+          <option [value]="'all'">All</option>
+          <option [value]="'active'">Active</option>
+          <option [value]="'inactive'">Inactive</option>
+        </select>
+      </div>
+    </div>
+    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
+      <div class="uk-inline">
+        <span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
+        <input (ngModelChange)="onKeywordChange($event)"
+               [(ngModel)]="keyword"
+               class="uk-input uk-form-small" placeholder="Locate indicator..">
+      </div>
+      <div [class.uk-active]="grid" class="uk-margin-small-left">
+        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
+          class="material-icons">view_module</i></a>
+      </div>
+      <div [class.uk-active]="!grid" class="uk-margin-small-left">
+        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="stakeholder" id="page_content_inner">
+    <div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
+      <div>
+        <ul class="uk-breadcrumb">
+          <li class="uk-disabled">{{stakeholder.topics[topicIndex].name}}</li>
+          <li>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</li>
+          <li>{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}</li>
+        </ul>
+      </div>
+      <div class="uk-flex uk-flex-right">
+        <button class="md-btn md-btn-primary">Preview</button>
+      </div>
+    </div>
+    <h6 class="uk-text-bold">Number Indicators</h6>
+    <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"
+         uk-grid>
+      <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
+        <div>
+          <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">
+                  <i
+                    class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                </span>
+                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                  <i class="material-icons md-24 uk-margin-small-right"
+                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
+                </span>
+                <i class="md-icon material-icons">more_vert</i>
+              </div>
+              <h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
+            </div>
+            <div *ngIf="grid" class="md-card-content">
+              <div class="uk-flex uk-flex-center" uk-grid>
+                <div class="uk-width-1-1">
+                  {{indicator.description}}
+                </div>
+                <div class="uk-width-1-2 uk-text-center">
+                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
+                </div>
+                <div class="uk-width-1-2 uk-text-center">
+                  <i class="material-icons md-24"
+                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                  <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+    <h6 class="uk-text-bold">Chart Indicators</h6>
+    <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"
+         uk-grid>
+      <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
+        <div>
+          <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">
+                  <span *ngFor="let indicatorPath of indicator.indicatorPaths"
+                        class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
+                    <i
+                      class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
+                    {{indicatorPath.type + ' Chart'}}
+                  </span>
+                </ng-template>
+                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                  <i
+                    class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                </span>
+                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                  <i class="material-icons md-24 uk-margin-small-right"
+                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
+                </span>
+                <i class="md-icon material-icons">more_vert</i>
+              </div>
+              <h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
+            </div>
+            <div *ngIf="grid" class="md-card-content">
+              <div class="uk-flex uk-flex-center" uk-grid>
+                <div class="uk-width-1-1">
+                  {{indicator.description}}
+                </div>
+                <div class="uk-width-1-3 uk-text-center"
+                     [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
+                  <div *ngFor="let indicatorPath of indicator.indicatorPaths">
+                    <i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
+                    <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
+                  </div>
+                </div>
+                <div class="uk-width-1-3 uk-text-center">
+                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
+                </div>
+                <div class="uk-width-1-3 uk-text-center">
+                  <i class="material-icons md-24"
+                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                  <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+  </div>
+</div>

src/app/topic/indicators.component.ts

@@ -0,0 +1,114 @@
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
+import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
+import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
+import {IndicatorUtils} from "../utils/Tools";
+
+@Component({
+  selector: 'indicators',
+  templateUrl: './indicators.component.html'
+})
+export class IndicatorsComponent implements OnInit, OnChanges {
+
+  @Input()
+  public topicIndex: number = 0;
+  @Input()
+  public categoryIndex: number = 0;
+  @Input()
+  public subcategoryIndex: number = 0;
+  @Input()
+  public stakeholder: Stakeholder = null;
+  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
+  public charts: Indicator[] = [];
+  public numbers: Indicator[] = [];
+  public displayCharts: Indicator[] = [];
+  public displayNumbers: Indicator[] = [];
+  public chartType: string = 'all';
+  public isPublic: string = 'all';
+  public isActive: string = 'all';
+  public keyword: string = null;
+  public grid: boolean = true;
+
+  constructor(private sideBarService: SideBarService) {}
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(this.stakeholder) {
+      this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
+        subCategories[this.subcategoryIndex].charts;
+      this.displayCharts = this.charts;
+      this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
+        subCategories[this.subcategoryIndex].numbers;
+      this.displayNumbers = this.numbers;
+    }
+  }
+
+  onChartTypeChange(value) {
+    this.displayCharts = this.filterChartType(this.charts, value);
+  }
+
+  onPrivacyChange(value) {
+    this.displayCharts = this.filterPrivacy(this.charts, value);
+    this.displayNumbers = this.filterPrivacy(this.numbers, value);
+  }
+
+  onStatusChange(value) {
+    this.displayCharts = this.filterStatus(this.charts, value);
+    this.displayNumbers = this.filterStatus(this.numbers, value);
+  }
+
+  onKeywordChange(value) {
+    this.displayCharts = this.filterByKeyword(this.charts, value);
+    this.displayNumbers = this.filterByKeyword(this.numbers, value);
+  }
+
+  filterChartType(indicators: Indicator[], value): Indicator[] {
+    if (value === 'all') {
+      return indicators;
+    } else {
+      return indicators.filter(indicator =>
+        indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0);
+    }
+  }
+
+  filterPrivacy(indicators: Indicator[], value): Indicator[] {
+    if (value === 'all') {
+      return indicators;
+    } else {
+      return indicators.filter(indicator => indicator.isPublic === (value === 'public'));
+    }
+  }
+
+  filterStatus(indicators: Indicator[], value): Indicator[] {
+    if (value === 'all') {
+      return indicators;
+    } else {
+      return indicators.filter(indicator => indicator.isActive === (value === 'active'));
+    }
+  }
+
+  filterByKeyword(indicators: Indicator[], value): Indicator[] {
+    if (value === null || value === '') {
+      return indicators;
+    } else {
+      return indicators.filter(indicator => indicator.name.includes(value) || indicator.description.includes(value));
+    }
+  }
+
+  get open(): boolean {
+    return this.sideBarService.open;
+  }
+
+  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;
+  }
+}

src/app/topic/topic.component.html

@@ -9,11 +9,11 @@
   <div *ngIf="stakeholder" class="menu_section">
     <ul>
       <li class="uk-margin-bottom md-bg-blue-700 uk-padding-small">
-        <a class="md-color-white" (click)="back()">
+        <a class="md-color-white uk-flex uk-flex-middle" (click)="back()">
           <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
           <div class="menu_title uk-inline">
             {{stakeholder.topics[topicIndex].name.toUpperCase()}}
-            <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
+            <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
                     (click)="$event.stopPropagation();editTopicOpen(editTopic)">
               <i class="material-icons md-color-white">more_horiz</i>
             </button>
@@ -64,7 +64,7 @@
       </li>
       <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
         <li [class.current_section]="categoryIndex === i"
-            [class.act_section]="categoryIndex === i && toggle"
+            [class.act_section]="selectedCategoryIndex === i && toggle"
             [title]="category.name"
             class="submenu_trigger">
           <a (click)="toggleCategory(i);hide(editCategory)">
@@ -72,7 +72,7 @@
               class="material-icons">{{category.icon}}</i></span>
             <div class="menu_title uk-inline">
               {{category.name}}
-              <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
+              <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
                       (click)="$event.stopPropagation();editCategoryOpen(i, editCategory)">
                 <i class="material-icons">more_horiz</i>
               </button>
@@ -120,22 +120,22 @@
               </div>
             </div>
           </div>
-          <ul [style.display]="((categoryIndex === i && toggle)?'block':'none')">
+          <ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
             <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
                          let-subcategory let-j="index">
-              <li>
-                <a (click)="editSubCategoryOpen(j, editSubCategory)">
+              <li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
+                <a (click)="chooseSubcategory(i, j)">
                 <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
                   class="material-icons">{{subcategory.icon}}</i></span>
                   <div class="menu_title uk-inline">
                     {{subcategory.name}}
-                    <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
+                    <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
                             (click)="$event.stopPropagation();editSubCategoryOpen(j, editSubCategory)">
                     <i class="material-icons">more_horiz</i>
                   </button>
                   </div>
                 </a>
-                <div uk-drop="mode: click; offset: -2; delay-hide: 0" #editSubCategory
+                <div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
                      class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
                   <div *ngIf="copySubCategory">
                     <div class="md-card">
@@ -280,56 +280,8 @@
       </li>
     </ul>
   </div>
-  <hr class="uk-hr">
-  <div class="uk-padding-small uk-padding-remove-vertical">
-    <button [class.md-btn-primary]="unsaved" [class.disabled]="!unsaved"
-            class="md-btn md-btn-small uk-float-right">Save</button>
-  </div>
 </aside>
-<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
-  <div class="uk-padding-small md-bg-white" uk-grid>
-    <div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
-      <div class="uk-flex uk-flex-middle">
-        <label>Chart Type:</label>
-        <select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="chartType">
-          <option [value]="null">all</option>
-          <option [value]="'pie'">Pie</option>
-          <option [value]="'table'">Table</option>
-          <option [value]="'line'">Line</option>
-          <option [value]="'column'">Column</option>
-          <option [value]="'bar'">Bar</option>
-        </select>
-      </div>
-      <div class="uk-flex uk-flex-middle">
-        <label>Privacy:</label>
-        <select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="isPublic">
-          <option [value]="null">all</option>
-          <option [value]="true">Public</option>
-          <option [value]="false">Private</option>
-        </select>
-      </div>
-      <div class="uk-flex uk-flex-middle">
-        <label>Status:</label>
-        <select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="isActive">
-          <option [value]="null">all</option>
-          <option [value]="true">Active</option>
-          <option [value]="false">Inactive</option>
-        </select>
-      </div>
-    </div>
-    <div class="uk-width-expand uk-flex uk-flex-middle uk-flex-right">
-      <div class="uk-inline">
-        <span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
-        <input class="uk-input uk-form-small" placeholder="Locate indicator..">
-      </div>
-      <div [class.uk-active]="grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i class="material-icons">view_module</i></a>
-      </div>
-      <div [class.uk-active]="!grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
-      </div>
-    </div>
-  </div>
-  <div id="page_content_inner">
-  </div>
-</div>
+<indicators [stakeholder]="stakeholder"
+            [topicIndex]="topicIndex"
+            [categoryIndex]="categoryIndex"
+            [subcategoryIndex]="subCategoryIndex"></indicators>

src/app/topic/topic.component.ts

@@ -2,9 +2,6 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
-
-import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
-import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
 import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
 import {StakeholderService} from "../services/stakeholder.service";
@@ -17,26 +14,19 @@ declare var UIkit;
   templateUrl: './topic.component.html',
 })
 export class TopicComponent implements OnInit, OnDestroy {
-  public status: number;
+  public properties: EnvProperties;
   public loading: boolean = true;
-  public errorCodes: ErrorCodes;
   public stakeholder: Stakeholder;
-  private errorMessages: ErrorMessagesComponent;
   public topicIndex: number = -1;
   public topic: Topic = null;
   public categoryIndex: number = -1;
+  public selectedCategoryIndex: number = -1;
   public copyCategory: Category = null;
   public subCategoryIndex: number = -1;
   public copySubCategory: SubCategory = null;
   public valid = true;
   public edit: boolean = false;
   public toggle: boolean = false;
-  public unsaved: boolean = false;
-  public properties: EnvProperties;
-  public chartType: string = null;
-  public isPublic: boolean = null;
-  public isActive: boolean = null;
-  grid: boolean = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -44,9 +34,6 @@ export class TopicComponent implements OnInit, OnDestroy {
     private title: Title,
     private sideBarService: SideBarService,
     private stakeholderService: StakeholderService) {
-    this.errorCodes = new ErrorCodes();
-    this.errorMessages = new ErrorMessagesComponent();
-    this.status = this.errorCodes.LOADING;
   }
 
   public ngOnInit() {
@@ -63,6 +50,10 @@ export class TopicComponent implements OnInit, OnDestroy {
                 this.navigateToError();
               } else {
                 this.title.setTitle(stakeholder.index_name);
+                this.categoryIndex = 0;
+                this.selectedCategoryIndex = 0;
+                this.subCategoryIndex = 0;
+                this.toggle = true;
               }
             }
           });
@@ -83,21 +74,9 @@ export class TopicComponent implements OnInit, OnDestroy {
     UIkit.drop(element).show();
   }
 
-  get open(): boolean {
-    return this.sideBarService.open;
-  }
-
-  public toggleOpen(event = null) {
-    if (!event) {
-      this.sideBarService.setOpen(!this.open);
-    } else if (event && event['value'] === true) {
-      this.sideBarService.setOpen(false);
-    }
-  }
-
   public toggleCategory(index: number) {
-    if(this.categoryIndex !== index) {
-      this.categoryIndex = index;
+   if(this.selectedCategoryIndex !== index) {
+      this.selectedCategoryIndex = index;
       this.toggle = true;
     } else {
       this.toggle = !this.toggle;
@@ -127,22 +106,11 @@ export class TopicComponent implements OnInit, OnDestroy {
         this.stakeholder.topics[this.topicIndex].categories[index] = Tools.copy(this.copyCategory);
       }
       this.hide(element);
-      this.unsaved = true;
     } else {
       this.valid = false;
     }
   }
 
-  public editTopicOpen(element) {
-    if(element.className.indexOf('uk-open') !== -1) {
-      this.hide(element);
-    } else {
-      this.topic = Tools.copy(this.stakeholder.topics[this.topicIndex]);
-      this.valid = true;
-      this.show(element);
-    }
-  }
-
   public editSubCategoryOpen(index:number = -1, element = null) {
     if(index === -1) {
       this.copySubCategory = new SubCategory(null, null, null, true, true);
@@ -162,25 +130,33 @@ export class TopicComponent implements OnInit, OnDestroy {
     if(this.copySubCategory.name && this.copySubCategory.name !== '') {
       this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
       if(index === -1) {
-        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
+        this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
         subCategories.push(this.copySubCategory);
       } else {
-        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
+        this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
           subCategories[index] = Tools.copy(this.copySubCategory);
       }
       this.hide(element);
-      this.unsaved = true;
     } else {
       this.valid = false;
     }
   }
 
+  public editTopicOpen(element) {
+    if(element.className.indexOf('uk-open') !== -1) {
+      this.hide(element);
+    } else {
+      this.topic = Tools.copy(this.stakeholder.topics[this.topicIndex]);
+      this.valid = true;
+      this.show(element);
+    }
+  }
+
   public saveTopic(element) {
     if(this.topic.name && this.topic.name !== '') {
       this.topic.alias = this.topic.name.toLowerCase();
       this.stakeholder.topics[this.topicIndex] = Tools.copy(this.topic);
       this.hide(element);
-      this.unsaved = true;
     } else {
       this.valid = false;
     }
@@ -192,17 +168,26 @@ export class TopicComponent implements OnInit, OnDestroy {
     this.back();*/
   }
 
-  public changeGrid(value) {
-    this.grid = value;
-  }
-
   private navigateToError() {
     this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
   }
 
+  public getDefaultSubcategoryIndex(categoryIndex: number) {
+    return this.stakeholder.topics[this.topicIndex].categories[categoryIndex].
+    subCategories.findIndex(subcategory => subcategory.alias === null);
+  }
+
   back() {
     this.router.navigate(['../'], {
       relativeTo: this.route
     });
   }
+
+  chooseSubcategory(categoryIndex: number, subcategoryIndex: number) {
+    /*let topic: Topic = this.stakeholder.topics[this.topicIndex];
+    let category: Category = topic.categories[this.categoryIndex];
+    let subCatetegory: SubCategory = category.subCategories[index];*/
+    this.categoryIndex = categoryIndex;
+    this.subCategoryIndex = subcategoryIndex;
+  }
 }

src/app/topic/topic.module.ts

@@ -10,13 +10,14 @@ 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 {IndicatorsComponent} from "./indicators.component";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule
   ],
   declarations: [
-    TopicComponent
+    TopicComponent, IndicatorsComponent
   ],
   providers: [
     FreeGuard, PreviousRouteRecorder,

src/app/utils/Tools.ts

@@ -1,3 +1,22 @@
+export class IndicatorUtils {
+
+  chartTypes: Map<string, string> = new Map([
+    ['pie', 'pie_chart'],
+    ['table', 'table_chart'],
+    ['line', 'show_chart'],
+    ['column', 'bar_chart'],
+    ['bar', 'bar_chart'],
+    ['image', 'perm_media']
+  ]);
+
+  isPublicIcon: Map<boolean, string> = new Map([
+    [true, 'public'],
+    [false, 'lock']
+  ]);
+
+  isActiveIcon: string = 'brightness_1';
+}
+
 export class Tools {
 
   public static copy(element: any): any {

src/app/utils/entities/stakeholder.ts

@@ -94,8 +94,8 @@ export class Stakeholder {
 
     //Numbers
 
-    let n_total_pubs = new Indicator("Publications",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","publications"])]);
-    let n_open_pubs = new Indicator("OA Publications",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null,["statistics","open_access"])]);
+    let n_total_pubs = new Indicator("Publications",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","publications"])]);
+    let n_open_pubs = new Indicator("OA Publications",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null,["statistics","open_access"])]);
     let n_total_projects = new Indicator("Projects",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","total_projects"])]);
     let n_total_data = new Indicator("Reserach data",null, "number","small",true, true, [new IndicatorPath(null, "search",
       "/datasets/count?fq="+(encodeURIComponent("relfunderid exact "+stakeholder.index_id))+"&format=json", null, ["total"])]);
@@ -121,7 +121,7 @@ export class Stakeholder {
 
     //Charts
 
-    let c_pubs_per_project = new Indicator("Which are the top "+stakeholder.index_shortName+" projects?",null, "chart","large",true, true, [
+    let c_pubs_per_project = new Indicator("Which are the top "+stakeholder.index_shortName+" projects?",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "chart","large",true, true, [
       new IndicatorPath("bar", "old","chart.php?com=query&data=",'{"table":"result","fields":[{"fld":"number","agg":"count","type":"'+ChartHelper.prefix+'type'+ChartHelper.suffix+'","yaxis":1,"c":false}],"xaxis":{"name":"result_projects-project-acronym","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"count-number","yaxisheaders":[""],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"result_projects-project-funder","values":["'+ChartHelper.prefix+'funder_name'+ChartHelper.suffix+'"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"}],"having":[],"xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"title":"'+ChartHelper.prefix+'title'+ChartHelper.suffix+'","subtitle":"","xaxistitle":"project","order":"d"}', null )]);
     c_pubs_per_project.indicatorPaths[0].parameters = IndicatorPath.createParameters(stakeholder.index_name,"Publications per project (top 30)","bar");
     pubDefSub.charts.push(c_pubs_per_project);

src/assets/monitor-custom.css

@@ -16,16 +16,45 @@
     --monitor-portal-lower-tone: #7c9144;
     --connect-portal-lower-tone: #b48536;
     --develop-portal-lower-tone: #9f4e7e;
+
+    --sidebar-width: 300px;
+    --header-height: 60px;
 }
 
-html {
-    color: black !important;
-}
-
-li>a .uk-button {
+/* On link hover, his items with this class will be displayed*/
+li>a .onHover {
     display: none;
 }
 
-li>a:hover .uk-button {
+li>a:hover .onHover {
     display: block;
 }
+/*---*/
+
+
+/* Custom width of sidebar, change var: sidebar-width*/
+#sidebar_main {
+    width: var(--sidebar-width) !important;
+    -webkit-transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
+    transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
+}
+
+.sidebar_main_active #sidebar_main {
+    -webkit-transform: translate3d(0,0,0) !important;
+    transform: translate3d(0,0,0) !important;
+}
+
+@media only screen and (min-width: 1220px) {
+    .sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar {
+        margin-left: var(--sidebar-width) !important;
+    }
+}
+/* Custom width of sidebar, change var: sidebar-width*/
+body {
+    padding-top: var(--header-height) !important;
+}
+
+#header_main {
+    padding: calc((var(--header-height) - 48px)/2) 25px !important;
+}
+/*---*/