[Monitor Dashboard]: Add my theme. Add uikit 3 js and icons. Add save functionality on elements.

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

src/app/app.component.ts

@@ -7,8 +7,6 @@ import {User} from './openaireLibrary/login/utils/helper.class';
 import {UserManagementService} from "./openaireLibrary/services/user-management.service";
 import {SideBarService} from "./library/sharedComponents/sidebar/sideBar.service";
 import {StakeholderService} from "./services/stakeholder.service";
-import {Stakeholder} from "./utils/entities/stakeholder";
-import {StakeholderCreator} from "./utils/entities/stakeholderCreator";
 
 @Component({
   selector: 'app-root',
@@ -24,7 +22,7 @@ export class AppComponent {
               private propertiesService: EnvironmentSpecificService,
               private router: Router,
               private userManagementService: UserManagementService,
-              private sideBarService: SideBarService,
+              private sidebarService: SideBarService,
               private stakeholderService: StakeholderService,
               private cdr: ChangeDetectorRef) {
   }
@@ -44,9 +42,8 @@ export class AppComponent {
                 if(!this.stakeholderService.stakeholder ||
                   this.stakeholderService.stakeholder.alias !== params['stakeholder']) {
                   this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
-                    // stakeholder = Stakeholder.createECStakeholder();
+                  this.stakeholderService.setStakeholder(stakeholder);
-                    // stakeholder = StakeholderCreator.createFunderFromDefaultProfile("ec","funder","ec__________::EC","European Commission","EC",false,"ec",true,true);
+                    this.sidebarService.setOpen(true);
-                    this.stakeholderService.setStakeholder(stakeholder);
                   });
                 }
               } else {
@@ -63,22 +60,22 @@ export class AppComponent {
           console.log(error);
         });
       });
-    this.sideBarService.hasSidebar.subscribe(hasSidebar => {
+    this.sidebarService.hasSidebar.subscribe(hasSidebar => {
       this.hasSidebar = hasSidebar;
       this.cdr.detectChanges();
     });
   }
 
   public get open() {
-    return this.sideBarService.open;
+    return this.sidebarService.open;
   }
 
 
   public toggleOpen(event = null) {
     if(!event) {
-      this.sideBarService.setOpen(!this.open);
+      this.sidebarService.setOpen(!this.open);
     } else if(event && event['value'] === true) {
-      this.sideBarService.setOpen(false);
+      this.sidebarService.setOpen(false);
     }
   }
 }

src/app/error/errorPage.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
 
 @Component({
@@ -7,11 +7,15 @@ import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.servic
     <error></error>
     `
 })
-export class OpenaireErrorPageComponent implements OnInit{
+export class OpenaireErrorPageComponent implements OnInit, OnDestroy{
 
     constructor(private sidebarService: SideBarService) {}
 
     ngOnInit(): void {
         this.sidebarService.setHasSidebar(false);
     }
+
+    ngOnDestroy(): void {
+        this.sidebarService.setHasSidebar(true);
+    }
 }

src/app/home/home.component.html

@@ -2,8 +2,8 @@
   <div *ngIf="stakeholder" class="sidebar_main_header">
     <div class="uk-padding-small">
       <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
-      <div class="uk-text-bold">{{stakeholder.index_name}}</div>
+      <h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>
-      <div>Admin Dashboard</div>
+      <span class="uk-text-large">Admin Dashboard</span>
     </div>
   </div>
   <div *ngIf="stakeholder" class="menu_section">
@@ -19,21 +19,75 @@
         <ul [style.display]="(analysisOpen?'block':'none')">
           <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
             <li>
-              <a [routerLink]="topic.alias">
+              <a (click)="navigateTo(topic.alias)">
                 <span *ngIf="topic.icon" class="menu_icon uk-margin-small-right"><i
                   class="material-icons">{{topic.icon}}</i></span>
-                <span class="menu_title">{{topic.name}}</span>
+                <div class="menu_title uk-inline">
+                  {{topic.name}}
+                  <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
+                          (click)="$event.stopPropagation();saveTopicOpen(editTopic, i)">
+                    <i class="material-icons">more_horiz</i>
+                  </button>
+                </div>
               </a>
+              <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
+                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
+                <div *ngIf="copyTopic">
+                  <div class="md-card">
+                    <div class="md-card-content uk-position-relative">
+                      <a [routerLink]="" class="uk-position-top-right">
+                        <i (click)="hide(editTopic)" class="material-icons">close</i>
+                      </a>
+                      <div class="uk-grid-small" uk-grid>
+                        <div class="uk-width-1-1">
+                          <label class="uk-text-bold">Topic Settings</label>
+                          <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
+                                 [class.uk-form-danger]="!valid" type="text">
+                        </div>
+                        <div class="uk-width-1-1">
+                          <label>Description</label>
+                          <textarea class="uk-textarea" [(ngModel)]="copyTopic.description"
+                                    rows="3"
+                                    [class.uk-form-danger]="!valid" type="text"></textarea>
+                        </div>
+                        <div class="uk-width-1-2">
+                          <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
+                            <option [value]="true">Public</option>
+                            <option [value]="false">Private</option>
+                          </select>
+                        </div>
+                        <div class="uk-width-1-2">
+                          <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">
+                            <option [value]="true">Active</option>
+                            <option [value]="false">Inactive</option>
+                          </select>
+                        </div>
+                      </div>
+                      <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>
+                        </div>
+                        <div>
+                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"
+                                  (click)="saveTopic(editTopic, i)">Save
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </li>
           </ng-template>
           <li>
-            <a [routerLink]="" (click)="newTopicOpen()">
+            <a [routerLink]="" (click)="saveTopicOpen(newTopic)">
               <span class="menu_icon"><i class="material-icons">add</i></span>
               <span class="menu_title">Create new Topic</span>
             </a>
-            <div uk-drop="mode: click; offset: -2; delay-hide: 0" #newTopic
+            <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newTopic
                  class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-              <div *ngIf="topic">
+              <div *ngIf="copyTopic">
                 <div class="md-card">
                   <div class="md-card-content uk-position-relative">
                     <a [routerLink]="" class="uk-position-top-right">
@@ -42,17 +96,23 @@
                     <div class="uk-grid-small" uk-grid>
                       <div class="uk-width-1-1">
                         <label class="uk-text-bold">New Topic</label>
-                        <input class="uk-input uk-form-small" [(ngModel)]="topic.name"
+                        <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
                                [class.uk-form-danger]="!valid" type="text">
                       </div>
+                      <div class="uk-width-1-1">
+                        <label>Description</label>
+                        <textarea class="uk-textarea" [(ngModel)]="copyTopic.description"
+                                  rows="3"
+                                  [class.uk-form-danger]="!valid" type="text"></textarea>
+                      </div>
                       <div class="uk-width-1-2">
-                        <select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
+                        <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
                           <option [value]="true">Public</option>
                           <option [value]="false">Private</option>
                         </select>
                       </div>
                       <div class="uk-width-1-2">
-                        <select class="uk-select uk-form-small"  [(ngModel)]="topic.isActive">
+                        <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">
                           <option [value]="true">Active</option>
                           <option [value]="false">Inactive</option>
                         </select>
@@ -64,7 +124,9 @@
                         <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>
+                        <button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="saveTopic(newTopic)">
+                          Create
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -85,7 +147,7 @@
     <div class="uk-text-large uk-margin-bottom">
       <div>
         Modify or add new topics, categories and content.<br><br>
-        Start your navigation through the <span class="md-color-blue-700">left side menu!</span>
+        Start your navigation through the <span class="md-color-blue-900">left side menu!</span>
       </div>
       <div class="uk-margin-small-top uk-margin-small-bottom uk-margin-large-left">
         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="88" viewBox="0 0 30 88">
@@ -102,10 +164,11 @@
         </svg>
       </div>
       <div class="uk-width-1-1">
-        Select one of the <span class="md-color-blue-700">topics below</span>!
+        Select one of the <span class="md-color-blue-900">topics below</span>!
       </div>
     </div>
-    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium" uk-grid uk-height-match="target: .target">
+    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium" uk-grid
+         uk-height-match="target: .target">
       <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
         <div>
           <a [routerLink]="topic.alias">
@@ -123,3 +186,4 @@
     </div>
   </div>
 </div>
+<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@@ -9,6 +9,7 @@ import {Stakeholder, Topic} from "../utils/entities/stakeholder";
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 
 declare var UIkit;
 
@@ -23,10 +24,14 @@ export class HomeComponent implements OnInit, OnDestroy {
   public stakeholder: Stakeholder;
   public analysisOpen: boolean = true;
   private errorMessages: ErrorMessagesComponent;
-  public topic: Topic;
+  public copyTopic: Topic;
   public valid = true;
+  public element: any;
+  public index: number;
   properties: EnvProperties;
 
+  @ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -44,9 +49,8 @@ export class HomeComponent implements OnInit, OnDestroy {
         this.properties = data.envSpecific;
         this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
           if (stakeholder) {
-            this.sideBarService.setHasSidebar(true);
             this.stakeholder = HelperFunctions.copy(stakeholder);
-            this.topic = null;
+            this.copyTopic = null;
             this.title.setTitle(stakeholder.index_name);
           }
         });
@@ -56,9 +60,8 @@ export class HomeComponent implements OnInit, OnDestroy {
   public ngOnDestroy() {
   }
 
-  public newTopicOpen() {
+  public show(element) {
-    this.topic = new Topic(null, null, null,true, true);
+    UIkit.drop(element).show();
-    this.valid = true;
   }
 
   public hide(element) {
@@ -77,13 +80,72 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
   }
 
-  public createTopic(element) {
+  public saveTopicOpen(element, index = -1) {
-    if(this.topic.name && this.topic.name !== '') {
+    if(index === -1) {
-      this.topic.alias = this.topic.name.toLowerCase();
+      this.copyTopic = new Topic(null, null, null,true, true);
-      this.stakeholder.topics.push(this.topic);
+    } else {
-      this.hide(element);
+      this.copyTopic = HelperFunctions.copy(this.stakeholder.topics[index]);
+    }
+    this.show(element);
+    this.valid = true;
+  }
+
+  public saveTopic(element, index = -1) {
+    if(this.copyTopic.name && this.copyTopic.name !== ''
+      && this.copyTopic.description && this.copyTopic.description !== '') {
+      if(!this.copyTopic.alias) {
+        this.copyTopic.alias = this.copyTopic.name.toLowerCase().trim();
+      }
+      if(index === -1) {
+        this.stakeholder.topics.push(this.copyTopic);
+        this.save('Topic has been successfully created', element);
+      } else {
+        this.stakeholder.topics[index] = HelperFunctions.copy(this.copyTopic);
+        this.save('Topic has been successfully saved', element);
+      }
     } else {
       this.valid = false;
     }
   }
+
+  public deleteTopicOpen(element, index: number) {
+    this.element = element;
+    this.index = index;
+    this.deleteTopicModal.alertHeader = true;
+    this.deleteTopicModal.alertMessage = true;
+    this.deleteTopicModal.cancelButton = true;
+    this.deleteTopicModal.cancelButtonText = 'No';
+    this.deleteTopicModal.okButtonText = 'Yes';
+    this.deleteTopicModal.message = 'This topic will permanently be deleted. Are you sure you want to proceed?';
+    this.deleteTopicModal.open();
+  }
+
+  public navigateTo(alias: string) {
+    this.router.navigate(['./' + alias], {
+      relativeTo: this.route
+    });
+  }
+
+  private save(message: string, element) {
+    this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
+      this.stakeholderService.setStakeholder(stakeholder);
+      UIkit.notification(message, {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(element);
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(element);
+    });
+  }
+
+  deleteTopic() {
+
+  }
 }

src/app/home/home.module.ts

@@ -10,10 +10,11 @@ import {HomeRoutingModule} from "./home-routing.module";
 import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
 import {RouterModule} from "@angular/router";
 import {FormsModule} from "@angular/forms";
+import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
 
 @NgModule({
   imports: [
-    CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule
+    CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule
   ],
   declarations: [
     HomeComponent

src/app/library/sharedComponents/sidebar/sideBar.service.ts

@@ -6,8 +6,16 @@ import {BehaviorSubject, Observable} from "rxjs";
 })
 export class SideBarService {
 
-  private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+  /**
-  private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+   * Set this to true when sidebar items are ready.
+   */
+  private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   *  Set this variable to false in pages when it is not needed to have sidebar on Init
+   *  and on Destroy set this to true.
+   */
+  private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 
   constructor() {}
 

src/app/services/stakeholder.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from "@angular/core";
 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";
 
 @Injectable({
   providedIn: "root"
@@ -36,13 +37,14 @@ export class StakeholderService {
   }
 
   saveIndicator(url: string, path: string[], indicator: Indicator): Observable<Indicator> {
+    path = HelperFunctions.encodeArray(path);
     return this.http.post<Indicator>(url + '/' + path.join('/') +
       '/indicator/save', indicator);
   }
 
-  deleteIndicator(url: string, path: string[], indicatorId: string): Observable<boolean> {
+  deleteElement(url: string, path: string[]): Observable<boolean> {
-    return this.http.delete<boolean>(url + '/' + path.join('/') +
+    path = HelperFunctions.encodeArray(path);
-      '/indicator/delete/' + encodeURIComponent(indicatorId));
+    return this.http.delete<boolean>(url + '/' + path.join('/'))
   }
 
   getStakeholderAsObservable(): Observable<Stakeholder> {

src/app/topic/indicators.component.html

@@ -54,17 +54,21 @@
   <div *ngIf="stakeholder" id="page_content_inner">
     <div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
       <div>
-        <ul class="uk-breadcrumb">
+        <ul id="breadcrumbs">
-          <li class="uk-disabled">{{stakeholder.topics[topicIndex].name}}</li>
+          <li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
-          <li>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</li>
+          <li><span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
-          <li>{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}</li>
+          <li>
+            <span class="md-color-blue-900 uk-text-bold">
+              {{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}
+            </span>
+          </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>
+    <h5 class="uk-text-bold">Number Indicators</h5>
     <div [class.uk-child-width-1-3@m]="grid"
          [class.uk-child-width-1-2@s]="grid"
          [class.uk-child-width-1-1]="!grid"
@@ -72,7 +76,7 @@
          uk-grid>
       <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
         <div>
-          <div class="md-card">
+          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
             <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">
@@ -87,7 +91,7 @@
                 </span>
                 <i class="md-icon material-icons">more_vert</i>
               </div>
-              <h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
+              <div class="uk-text-bold">{{indicator.name}}</div>
             </div>
             <div *ngIf="grid" class="md-card-content">
               <div class="uk-flex uk-flex-center" uk-grid>
@@ -109,7 +113,7 @@
         </div>
       </ng-template>
     </div>
-    <h6 class="uk-text-bold">Chart Indicators</h6>
+    <h5 class="uk-text-bold">Chart Indicators</h5>
     <div [class.uk-child-width-1-3@m]="grid"
          [class.uk-child-width-1-2@s]="grid"
          [class.uk-child-width-1-1]="!grid"
@@ -117,7 +121,7 @@
          uk-grid>
       <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
         <div>
-          <div class="md-card">
+          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <ng-template [ngIf]="!grid">
@@ -140,7 +144,7 @@
                 </span>
                 <i class="md-icon material-icons">more_vert</i>
               </div>
-              <h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
+              <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
             </div>
             <div *ngIf="grid" class="md-card-content">
               <div class="uk-flex uk-flex-center" uk-grid>

src/app/topic/indicators.component.ts

@@ -37,10 +37,17 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     if(this.stakeholder) {
       this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
         subCategories[this.subcategoryIndex].charts;
-      this.displayCharts = this.charts;
+      this.displayCharts = this.filterChartType(this.filterPrivacy(
+        this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.isActive),
+        this.isPublic),
+        this.chartType
+      );
       this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
         subCategories[this.subcategoryIndex].numbers;
-      this.displayNumbers = this.numbers;
+      this.displayNumbers = this.filterPrivacy(this.filterStatus(
+        this.filterByKeyword(this.numbers, this.keyword),
+        this.isActive),
+        this.isPublic);
     }
   }
 

src/app/topic/topic.component.html

@@ -2,13 +2,13 @@
   <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom">
     <div class="uk-padding-small">
       <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
-      <div class="uk-text-bold">{{stakeholder.index_name}}</div>
+      <h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>
-      <div>Admin Dashboard</div>
+      <span class="uk-text-large">Admin Dashboard</span>
     </div>
   </div>
   <div *ngIf="stakeholder" class="menu_section">
     <ul>
-      <li class="uk-margin-bottom md-bg-blue-700 uk-padding-small">
+      <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
         <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">
@@ -33,6 +33,12 @@
                     <input class="uk-input uk-form-small" [(ngModel)]="topic.name"
                            [class.uk-form-danger]="!valid" type="text">
                   </div>
+                  <div class="uk-width-1-1">
+                    <label>Description</label>
+                    <textarea class="uk-textarea" [(ngModel)]="topic.description"
+                              rows="3"
+                              [class.uk-form-danger]="!valid" type="text"></textarea>
+                  </div>
                   <div class="uk-width-1-2">
                     <select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
                       <option [value]="true">Public</option>
@@ -49,7 +55,7 @@
                 <hr>
                 <div class="uk-grid-small uk-child-width-1-2" uk-grid>
                   <div>
-                    <button class="md-btn md-btn-small" (click)="deleteTopic(editTopic)">Delete</button>
+                    <button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic)">Delete</button>
                   </div>
                   <div>
                     <button class="md-btn md-btn-small md-btn-primary uk-float-right"
@@ -108,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)="delete(editCategory)">Delete</button>
+                      <button class="md-btn md-btn-small" (click)="deleteCategoryOpen(editCategory, i)">Delete</button>
                     </div>
                     <div>
                       <button class="md-btn md-btn-small md-btn-primary uk-float-right"
@@ -165,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)="delete(editSubCategory)">Delete</button>
+                            <button class="md-btn md-btn-small" (click)="deleteSubcategoryOpen(editSubCategory, j)">Delete</button>
                           </div>
                           <div>
                             <button class="md-btn md-btn-small md-btn-primary uk-float-right"
@@ -285,3 +291,7 @@
             [topicIndex]="topicIndex"
             [categoryIndex]="categoryIndex"
             [subcategoryIndex]="subCategoryIndex"></indicators>
+<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
+<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
+<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>
+

src/app/topic/topic.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@@ -6,6 +6,7 @@ import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stake
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 
 declare var UIkit;
 
@@ -28,6 +29,13 @@ export class TopicComponent implements OnInit, OnDestroy {
   public edit: boolean = false;
   public toggle: boolean = false;
 
+  public element: any;
+  public index: number;
+
+  @ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
+  @ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
+  @ViewChild('deleteSubcategoryModal') deleteSubcategoryModal: AlertModal;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -43,7 +51,6 @@ export class TopicComponent implements OnInit, OnDestroy {
         this.route.params.subscribe( params => {
           this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
             if (stakeholder) {
-              this.sideBarService.setHasSidebar(true);
               this.stakeholder = HelperFunctions.copy(stakeholder);
               this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
               if(this.topicIndex === -1) {
@@ -99,18 +106,45 @@ export class TopicComponent implements OnInit, OnDestroy {
 
   public saveCategory(element, index = -1) {
     if(this.copyCategory.name && this.copyCategory.name !== '') {
-      this.copyCategory.alias = this.copyCategory.name.toLowerCase();
+      if(!this.copyCategory.alias) {
+        this.copyCategory.alias = this.copyCategory.name.toLowerCase();
+      }
       if(index === -1) {
         this.stakeholder.topics[this.topicIndex].categories.push(this.copyCategory);
+        this.save('Category has been successfully created', element);
       } else {
         this.stakeholder.topics[this.topicIndex].categories[index] = HelperFunctions.copy(this.copyCategory);
+        this.save('Category has been successfully saved', element);
       }
-      this.hide(element);
     } else {
       this.valid = false;
     }
   }
 
+  public deleteCategoryOpen(element, index) {
+    this.deleteOpen('category', this.deleteCategoryModal, element, index);
+  }
+
+  public deleteCategory() {
+    this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
+    this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
+      this.stakeholderService.setStakeholder(stakeholder);
+      UIkit.notification('Category has been successfully deleted', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+    });
+  }
+
   public editSubCategoryOpen(index:number = -1, element = null) {
     if(index === -1) {
       this.copySubCategory = new SubCategory(null, null, null, true, true);
@@ -128,13 +162,17 @@ export class TopicComponent implements OnInit, OnDestroy {
 
   public saveSubCategory(element, index = -1) {
     if(this.copySubCategory.name && this.copySubCategory.name !== '') {
-      this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
+      if(!this.copySubCategory.alias) {
+        this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
+      }
       if(index === -1) {
         this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
         subCategories.push(this.copySubCategory);
+        this.save('Subcategory has been successfully created', element);
       } else {
         this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
           subCategories[index] = HelperFunctions.copy(this.copySubCategory);
+        this.save('Subcategory has been successfully saved', element);
       }
       this.hide(element);
     } else {
@@ -142,6 +180,31 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
 
+  public deleteSubcategoryOpen(element, index) {
+    this.deleteOpen('subcategory', this.deleteSubcategoryModal, element, index);
+  }
+
+  public deleteSubcategory() {
+    this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.
+    splice(this.index, 1);
+    this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
+      this.stakeholderService.setStakeholder(stakeholder);
+      UIkit.notification('Subcategory has been successfully deleted', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+    });
+  }
+
   public editTopicOpen(element) {
     if(element.className.indexOf('uk-open') !== -1) {
       this.hide(element);
@@ -153,28 +216,81 @@ export class TopicComponent implements OnInit, OnDestroy {
   }
 
   public saveTopic(element) {
-    if(this.topic.name && this.topic.name !== '') {
+    if(this.topic.name && this.topic.name !== ''
-      this.topic.alias = this.topic.name.toLowerCase();
+      && this.topic.description && this.topic.description !== '') {
+      if(!this.topic.alias) {
+        this.topic.alias = this.topic.name.toLowerCase().trim();
+      }
       this.stakeholder.topics[this.topicIndex] = HelperFunctions.copy(this.topic);
-      this.hide(element);
+      this.save('Topic has been successfully saved', element, true);
     } else {
       this.valid = false;
     }
   }
 
-  public deleteTopic(element) {
+  public deleteTopicOpen(element) {
-    /*this.stakeholder.topics.splice(this.topicIndex, 1);
+    this.deleteOpen('topic', this.deleteTopicModal, element, this.topicIndex);
-    this.hide(element);
+  }
-    this.back();*/
+
+  public deleteTopic() {
+    this.stakeholder.topics.splice(this.index, 1);
+    this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
+      this.stakeholderService.setStakeholder(stakeholder);
+      UIkit.notification('Topic has been successfully deleted', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+      this.back();
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(this.element);
+    });
   }
 
   private navigateToError() {
     this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
   }
 
-  public getDefaultSubcategoryIndex(categoryIndex: number) {
+  private deleteOpen(type: string, modal: AlertModal, element, index) {
-    return this.stakeholder.topics[this.topicIndex].categories[categoryIndex].
+    this.element = element;
-    subCategories.findIndex(subcategory => subcategory.alias === null);
+    this.index = index;
+    modal.alertHeader = true;
+    modal.alertMessage = true;
+    modal.cancelButton = true;
+    modal.cancelButtonText = 'No';
+    modal.okButtonText = 'Yes';
+    modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
+    modal.open();
+  }
+
+  private save(message: string, element, redirect = false) {
+    this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
+      this.stakeholderService.setStakeholder(stakeholder);
+      UIkit.notification(message, {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      if(redirect) {
+        this.router.navigate(['../' + this.topic.alias], {
+          relativeTo: this.route
+        });
+      }
+      this.hide(element);
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+      this.hide(element);
+    });
   }
 
   back() {
@@ -184,9 +300,6 @@ export class TopicComponent implements OnInit, OnDestroy {
   }
 
   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

@@ -11,10 +11,11 @@ import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
 import {RouterModule} from "@angular/router";
 import {FormsModule} from "@angular/forms";
 import {IndicatorsComponent} from "./indicators.component";
+import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
 
 @NgModule({
   imports: [
-    CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule
+    CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent

src/assets/monitor-custom.css

@@ -17,44 +17,7 @@
     --connect-portal-lower-tone: #b48536;
     --develop-portal-lower-tone: #9f4e7e;
 
-    --sidebar-width: 300px;
+    --sidebar-width: 320px;
-    --header-height: 60px;
+    --sidebar-font-size: 16px;
+    --header-height: 70px;
 }
-
-/* On link hover, his items with this class will be displayed*/
-li>a .onHover {
-    display: none;
-}
-
-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 height of header, change var: header-height*/
-body {
-    padding-top: var(--header-height) !important;
-}
-
-#header_main {
-    padding: calc((var(--header-height) - 48px)/2) 25px !important;
-}
-/*---*/

src/assets/theme-assets/css/themes/my_theme.css

@@ -1,11 +1,11 @@
 .app_my_theme .uk-alert {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme .md-btn-primary,
 .app_my_theme .md-btn-primary:hover,
 .app_my_theme .md-btn-primary:focus,
 .app_my_theme .md-btn-primary:active {
-  background: #3f51b5;
+  background: #0d47a1;
   color: #fff;
 }
 .app_my_theme .md-btn-flat-primary,
@@ -20,7 +20,7 @@
   background: #d1d6ef;
 }
 .app_my_theme .uk-badge-primary {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme .md-card-list-wrapper .md-card-list > ul > li.item-shown.md-card-list-item-selected:before {
   background: #e8eaf6;
@@ -35,116 +35,116 @@
   background: #e8eaf6;
 }
 .app_my_theme .md-fab.md-fab-accent {
-  background: #ff4081;
+  background: #0d47a1;
 }
 .app_my_theme .md-list .uk-nestable-list > li.md-list-item-active,
 .app_my_theme .md-list > li.md-list-item-active {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .md-list-addon > li.md-list-item-active .md-list-addon-element,
 .app_my_theme .md-list-addon > li.md-list-item-active .md-list-addon-element .material-icons {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .uk-pagination > li > a:hover {
   background: #ffd9e6;
 }
 .app_my_theme .uk-pagination > li.uk-active > a,
 .app_my_theme .uk-pagination > li.uk-active > span {
-  background: #ff4081;
+  background: #0d47a1;
   color: #fff;
 }
 .app_my_theme .uk-subnav-pill > .uk-active > * {
-  background: #ff4081;
+  background: #0d47a1;
 }
 .app_my_theme .uk-tab > li > a:hover,
 .app_my_theme .uk-tab > li > a:focus {
   border-bottom-color: #abb4e2;
 }
 .app_my_theme .uk-tab > li.uk-active > a {
-  border-bottom-color: #3f51b5;
+  border-bottom-color: #0d47a1;
 }
 .app_my_theme .uk-tab-bottom li > a:hover,
 .app_my_theme .uk-tab-bottom li > a:focus {
   border-top-color: #abb4e2;
 }
 .app_my_theme .uk-tab-bottom li.uk-active > a {
-  border-top-color: #3f51b5;
+  border-top-color: #0d47a1;
 }
 .app_my_theme .uk-tab-left li > a:hover,
 .app_my_theme .uk-tab-left li > a:focus {
   border-right-color: #abb4e2;
 }
 .app_my_theme .uk-tab-left li.uk-active > a {
-  border-right-color: #3f51b5;
+  border-right-color: #0d47a1;
 }
 .app_my_theme .uk-tab-right li > a:hover,
 .app_my_theme .uk-tab-right li > a:focus {
   border-left-color: #abb4e2;
 }
 .app_my_theme .uk-tab-right li.uk-active > a {
-  border-left-color: #3f51b5;
+  border-left-color: #0d47a1;
 }
 .app_my_theme .uk-tab-double-header li a:hover,
 .app_my_theme .uk-tab-double-header li a:focus {
   border-bottom-color: #606fc7;
 }
 .app_my_theme .uk-tab-double-header li.uk-active > a {
-  border-bottom-color: #ff4081;
+  border-bottom-color: #0d47a1;
 }
 .app_my_theme #header_main {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme.header_double_height:after {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme #top_bar .top_bar_nav > li > a:hover {
-  -webkit-box-shadow: inset 0 -3px 0 #3f51b5;
+  -webkit-box-shadow: inset 0 -3px 0 #0d47a1;
-  box-shadow: inset 0 -3px 0 #3f51b5;
+  box-shadow: inset 0 -3px 0 #0d47a1;
 }
 .app_my_theme #top_bar .top_bar_nav > li.uk-active a {
-  -webkit-box-shadow: inset 0 -3px 0 #3f51b5;
+  -webkit-box-shadow: inset 0 -3px 0 #0d47a1;
-  box-shadow: inset 0 -3px 0 #3f51b5;
+  box-shadow: inset 0 -3px 0 #0d47a1;
 }
 .app_my_theme .user_heading {
   background: #303f9f;
 }
 .app_my_theme #sidebar_main .menu_section > ul > li ul li.act_item a {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme #sidebar_main .menu_section > ul > li.current_section > a .menu_title {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li > a > .menu_title {
-  background: #ff4081;
+  background: #0d47a1;
   color: #fff;
 }
 .app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu {
-  background: #ff4081;
+  background: #0d47a1;
 }
 .app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu > a .menu_icon .material-icons {
   color: #fff;
 }
 .app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu ul {
-  border-left-color: #ff4081;
+  border-left-color: #0d47a1;
 }
 .app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .clndr .clndr_days .clndr_days_grid .day.today > span {
-  background: #ff4081;
+  background: #0d47a1;
 }
 .app_my_theme .DTTT_print_info h6 {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .fc-unthemed .fc-button.fc-state-active:after {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .fc-unthemed .fc-highlight {
-  -webkit-box-shadow: inset 0 0 0 2px #3f51b5, inset 0 -1px 0 2px #3f51b5;
+  -webkit-box-shadow: inset 0 0 0 2px #0d47a1, inset 0 -1px 0 2px #0d47a1;
-  box-shadow: inset 0 0 0 2px #3f51b5, inset 0 -1px 0 2px #3f51b5;
+  box-shadow: inset 0 0 0 2px #0d47a1, inset 0 -1px 0 2px #0d47a1;
 }
 .app_my_theme .tablesorter-altair tbody > tr.row_highlighted > td {
   background: #e8eaf6;
@@ -155,10 +155,10 @@
 .app_my_theme .tablesorter-altair .headerSortDown,
 .app_my_theme .tablesorter-altair .tablesorter-headerSortDown,
 .app_my_theme .tablesorter-altair .tablesorter-headerDesc {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .wizard > .steps {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme .wizard > .steps > ul > li.current a,
 .app_my_theme .wizard > .steps > ul > li.current a:hover,
@@ -171,7 +171,7 @@
   background: #303f9f;
 }
 .app_my_theme .md-card-primary {
-  border-left-color: #3f51b5;
+  border-left-color: #0d47a1;
 }
 .app_my_theme .waves-effect.md-btn-flat-primary {
   background: none;
@@ -180,13 +180,13 @@
   background: rgba(63, 81, 181, 0.4);
 }
 .app_my_theme .search_list_link {
-  color: #ff4081;
+  color: #0d47a1;
 }
 .app_my_theme .chatbox.cb_active .chatbox_header {
   background: #303f9f;
 }
 .app_my_theme .chatbox_content .chatbox_message.own .chatbox_message_content li > span {
-  background: #3f51b5;
+  background: #0d47a1;
 }
 .app_my_theme .uk-table tr.row_checked td,
 .app_my_theme .uk-table-hover tbody tr:hover {

src/assets/theme-assets/dashboard-custom.css

@@ -0,0 +1,79 @@
+/*
+  Define the following variables on your project css file.
+
+  --sidebar-width: 320px;
+  --sidebar-font-size: 16px;
+
+  --header-height: 70px;
+*/
+
+
+/* On link hover, his items with this class will be displayed*/
+li>a .onHover {
+  display: none;
+}
+
+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;
+}
+
+#sidebar_main .menu_section > ul > li > a {
+  font-weight: 700 !important;
+  font-size: var(--sidebar-font-size) !important;
+}
+
+#sidebar_main .menu_section > ul > li ul a {
+  font-size: var(--sidebar-font-size) !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 height of header, change var: header-height*/
+body {
+  padding-top: var(--header-height) !important;
+}
+
+#header_main {
+  padding: calc((var(--header-height) - 48px)/2) 25px !important;
+}
+/*---*/
+
+/* Custom card*/
+.md-card .md-card-toolbar-heading-text {
+  font-weight: 700 !important;
+}
+/*---*/
+
+/* Breadcrumb*/
+#breadcrumbs {
+  background: inherit !important;
+}
+
+
+/* Notification */
+
+/*Remove the second close added by theme because it was used uikit 2*/
+.uk-close::after {content: '' !important;}
+
+/* Change z-index, because of sidebar and header z-index is larger that default */
+.uk-notification {
+  z-index: 2000 !important;
+}
+/*---*/

src/index.html

@@ -26,6 +26,7 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="assets/theme-assets/dashboard-custom.css">
     <link rel="stylesheet" href="assets/monitor-custom.css">
     <!-- uikit -->
     <link rel="stylesheet" href="assets/theme-assets/uikit/css/uikit.min.css" media="all">
@@ -40,9 +41,9 @@
     <link rel="stylesheet" href="assets/theme-assets/css/main.min.css" media="all">
 
     <!-- themes -->
-    <link rel="stylesheet" href="assets/theme-assets/css/themes/themes_combined.min.css" media="all">
+    <link rel="stylesheet" href="assets/theme-assets/css/themes/my_theme.min.css" media="all">
   </head>
-  <body>
+  <body class="app_my_theme">
     <div>
       <app-root></app-root>
     </div>
@@ -51,6 +52,7 @@
   <!-- uikit functions -->
 <!--  <script src="assets/theme-assets/js/uikit_custom.min.js"></script>-->
   <script src="assets/theme-assets/uikit/js/uikit.min.js"></script>
+  <script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>
   <!-- altair common functions/helpers -->
   <script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
   <script>