[Monitor Dashboard]: Add super class dashboard on body to implement custom dashboard theme. Adding new category, adds also a new subcategory with the same name.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57600 d315682c-612b-4755-9ff5-7f18f6832af3
2019-11-13 14:19:04 +00:00 · 2019-11-13 14:19:04 +00:00 · 6b6f8c11c1
parent 64c7195ab2
commit 6b6f8c11c1
7 changed files with 102 additions and 76 deletions
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component} from '@angular/core';
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
@ -7,16 +7,18 @@ 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 {Subscriber} from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy{
  properties: EnvProperties;
  user: User;
  loginCheck: boolean = false;
  hasSidebar: boolean = false;
+  public subscriptions: any[] = [];

  constructor(private  route: ActivatedRoute,
              private propertiesService: EnvironmentSpecificService,
@ -60,9 +62,17 @@ export class AppComponent {
          console.log(error);
        });
      });
-    this.sidebarService.hasSidebar.subscribe(hasSidebar => {
+    this.subscriptions.push(this.sidebarService.hasSidebar.subscribe(hasSidebar => {
      this.hasSidebar = hasSidebar;
      this.cdr.detectChanges();
+    }));
+  }
+
+  public ngOnDestroy() {
+    this.subscriptions.forEach( value => {
+      if(value instanceof Subscriber) {
+        value.unsubscribe();
+      }
    });
  }

@ -70,7 +80,6 @@ export class AppComponent {
    return this.sidebarService.open;
  }

-
  public toggleOpen(event = null) {
    if(!event) {
      this.sidebarService.setOpen(!this.open);
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@ -10,7 +10,6 @@
    <ul>
      <li [class.current_section]="analysisOpen"
          [class.act_section]="analysisOpen"
-          title="Analysis Indicators"
          class="submenu_trigger">
        <a [routerLink]="" (click)="analysisOpen = !analysisOpen">
          <span class="menu_icon"><i class="material-icons">donut_large</i></span>
@ -35,20 +34,19 @@
                <div *ngIf="copyTopic">
                  <div class="md-card">
                    <div class="md-card-content uk-position-relative">
-                      <a [routerLink]="" class="uk-position-top-right">
+                      <a 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">
+                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" 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>
+                                    rows="3" type="text"></textarea>
                        </div>
                        <div class="uk-width-1-2">
                          <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
@ -81,7 +79,7 @@
            </li>
          </ng-template>
          <li>
-            <a [routerLink]="" (click)="saveTopicOpen(newTopic)">
+            <a  (click)="saveTopicOpen(newTopic)">
              <span class="menu_icon"><i class="material-icons">add</i></span>
              <span class="menu_title">Create new Topic</span>
            </a>
@ -90,20 +88,19 @@
              <div *ngIf="copyTopic">
                <div class="md-card">
                  <div class="md-card-content uk-position-relative">
-                    <a [routerLink]="" class="uk-position-top-right">
+                    <a class="uk-position-top-right">
                      <i (click)="hide(newTopic)" class="material-icons">close</i>
                    </a>
                    <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)]="copyTopic.name"
-                               [class.uk-form-danger]="!valid" type="text">
+                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" 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>
+                                  rows="3" type="text"></textarea>
                      </div>
                      <div class="uk-width-1-2">
                        <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
@ -167,7 +164,7 @@
        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
+    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium uk-grid uk-grid-match" uk-grid
         uk-height-match="target: .md-card; row: true">
      <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
        <div>
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@ -10,6 +10,7 @@ import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.servic
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
+import {Subscriber} from "rxjs";

 declare var UIkit;

@ -18,7 +19,7 @@ declare var UIkit;
  templateUrl: './home.component.html',
 })
 export class HomeComponent implements OnInit, OnDestroy {
-  public status: number;
+  public subscriptions: any[] = [];
  public loading: boolean = true;
  public errorCodes: ErrorCodes;
  public stakeholder: Stakeholder;
@ -40,24 +41,28 @@ export class HomeComponent implements OnInit, OnDestroy {
    private stakeholderService: StakeholderService) {
    this.errorCodes = new ErrorCodes();
    this.errorMessages = new ErrorMessagesComponent();
-    this.status = this.errorCodes.LOADING;
  }

  public ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;
-        this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+        this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
          if (stakeholder) {
            this.stakeholder = HelperFunctions.copy(stakeholder);
            this.copyTopic = null;
            this.title.setTitle(stakeholder.index_name);
          }
-        });
+        }));
      });
  }

  public ngOnDestroy() {
+    this.subscriptions.forEach( value => {
+      if(value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
  }

  public show(element) {
@ -81,18 +86,21 @@ export class HomeComponent implements OnInit, OnDestroy {
  }

  public saveTopicOpen(element, index = -1) {
-    if(index === -1) {
-      this.copyTopic = new Topic(null, null, null,true, true);
+    if(element.className.indexOf('uk-open') !== -1) {
+      this.hide(element);
    } else {
-      this.copyTopic = HelperFunctions.copy(this.stakeholder.topics[index]);
+      if (index === -1) {
+        this.copyTopic = new Topic(null, null, null, true, true);
+      } else {
+        this.copyTopic = HelperFunctions.copy(this.stakeholder.topics[index]);
+      }
+      this.show(element);
+      this.valid = true;
    }
-    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.name && this.copyTopic.name !== '') {
      if(!this.copyTopic.alias) {
        this.copyTopic.alias = this.copyTopic.name.toLowerCase().trim();
      }
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@ -24,20 +24,19 @@
          <div *ngIf="topic">
            <div class="md-card">
              <div class="md-card-content uk-position-relative">
-                <a [routerLink]="" class="uk-position-top-right">
+                <a 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)]="topic.name"
-                           [class.uk-form-danger]="!valid" type="text">
+                           [class.uk-form-danger]="!valid && (!topic.name || topic.name === '')" 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>
+                              rows="3" type="text"></textarea>
                  </div>
                  <div class="uk-width-1-2">
                    <select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
@ -89,7 +88,7 @@
            <div *ngIf="copyCategory">
              <div class="md-card">
                <div class="md-card-content uk-position-relative">
-                  <a [routerLink]="" class="uk-position-top-right">
+                  <a class="uk-position-top-right">
                    <i (click)="hide(editCategory)" class="material-icons">close</i>
                  </a>
                  <div class="uk-grid-small" uk-grid>
@ -146,7 +145,7 @@
                  <div *ngIf="copySubCategory">
                    <div class="md-card">
                      <div class="md-card-content uk-position-relative">
-                        <a [routerLink]="" class="uk-position-top-right">
+                        <a class="uk-position-top-right">
                          <i (click)="hide(editSubCategory)" class="material-icons">close</i>
                        </a>
                        <div class="uk-grid-small" uk-grid>
@ -186,7 +185,7 @@
              </li>
            </ng-template>
            <li>
-              <a [routerLink]="" (click)="editSubCategoryOpen()">
+              <a (click)="editSubCategoryOpen()">
                <span class="menu_icon"><i class="material-icons">add</i></span>
                <span class="menu_title">Create new Subcategory</span>
              </a>
@ -195,7 +194,7 @@
                <div *ngIf="copySubCategory">
                  <div class="md-card">
                    <div class="md-card-content uk-position-relative">
-                      <a [routerLink]="" class="uk-position-top-right">
+                      <a class="uk-position-top-right">
                        <i (click)="hide(newSubCategory)" class="material-icons">close</i>
                      </a>
                      <div class="uk-grid-small" uk-grid>
@ -237,7 +236,7 @@
        </li>
      </ng-template>
      <li>
-        <a [routerLink]="" (click)="editCategoryOpen()">
+        <a (click)="editCategoryOpen()">
          <span class="menu_icon"><i class="material-icons">add</i></span>
          <span class="menu_title">Create new Category</span>
        </a>
@ -246,7 +245,7 @@
          <div *ngIf="copyCategory">
            <div class="md-card">
              <div class="md-card-content uk-position-relative">
-                <a [routerLink]="" class="uk-position-top-right">
+                <a class="uk-position-top-right">
                  <i (click)="hide(newCategory)" class="material-icons">close</i>
                </a>
                <div class="uk-grid-small" uk-grid>
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@ -7,6 +7,7 @@ import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.servic
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
+import {Subscriber} from "rxjs";

 declare var UIkit;

@ -15,25 +16,26 @@ declare var UIkit;
  templateUrl: './topic.component.html',
 })
 export class TopicComponent implements OnInit, OnDestroy {
+  public subscriptions: any[] = [];
  public properties: EnvProperties;
  public loading: boolean = true;
  public stakeholder: Stakeholder;
  /**
   * Current topic
   **/
-  public topicIndex: number = -1;
+  public topicIndex: number = 0;
  public topic: Topic = null;

  /**
   * categoryIndex: Current category to be edited, selectedCategoryIndex: selected on menu(opened)
   */
-  public categoryIndex: number = -1;
-  public selectedCategoryIndex: number = -1;
+  public categoryIndex: number = 0;
+  public selectedCategoryIndex: number = 0;
  public copyCategory: Category = null;
  /**
   * Current Subcategory to be edited
   */
-  public subCategoryIndex: number = -1;
+  public subCategoryIndex: number = 0;
  public copySubCategory: SubCategory = null;
  /**
   * Current drop element and index of topic, category or subcategory to be deleted.
@ -63,7 +65,7 @@ export class TopicComponent implements OnInit, OnDestroy {
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;
        this.route.params.subscribe( params => {
-          this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+          this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
            if (stakeholder) {
              this.stakeholder = HelperFunctions.copy(stakeholder);
              this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
@ -71,18 +73,20 @@ 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;
              }
            }
-          });
+          }));
        });
      });
  }

  public ngOnDestroy() {
+    this.subscriptions.forEach( value => {
+      if(value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
  }

  public hide(element) {
@ -104,8 +108,7 @@ export class TopicComponent implements OnInit, OnDestroy {
  }

  public saveTopic(element) {
-    if(this.topic.name && this.topic.name !== ''
-      && this.topic.description && this.topic.description !== '') {
+    if(this.topic.name && this.topic.name !== '') {
      if(!this.topic.alias) {
        this.topic.alias = this.topic.name.toLowerCase().trim();
      }
@ -157,6 +160,13 @@ export class TopicComponent implements OnInit, OnDestroy {
        this.copyCategory.alias = this.copyCategory.name.toLowerCase();
      }
      if(index === -1) {
+        this.copyCategory.subCategories.push(
+          new SubCategory(this.copyCategory.name,
+            this.copyCategory.description,
+            this.copyCategory.alias,
+            this.copyCategory.isPublic,
+            this.copyCategory.isActive)
+        );
        this.stakeholder.topics[this.topicIndex].categories.push(this.copyCategory);
        this.save('Category has been successfully created', element);
      } else {
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@ -9,71 +9,74 @@


 /* On link hover, his items with this class will be displayed*/
-li>a .onHover {
+.dashboard li>a .onHover {
  display: none;
 }

-li>a:hover .onHover {
+.dashboard 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;
+.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);
 }

-.sidebar_main_active #sidebar_main {
-  -webkit-transform: translate3d(0,0,0) !important;
-  transform: translate3d(0,0,0) !important;
+.dashboard .sidebar_main_active #sidebar_main {
+  -webkit-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
 }

-#sidebar_main .menu_section > ul > li > a {
-  font-weight: 700 !important;
-  font-size: var(--sidebar-font-size) !important;
+.dashboard #sidebar_main .menu_section > ul > li > a {
+  font-weight: 700;
+  font-size: var(--sidebar-font-size);
+  color: rgba(0, 0, 0, 0.70);
 }

-#sidebar_main .menu_section > ul > li ul a {
-  font-size: var(--sidebar-font-size) !important;
+.dashboard #sidebar_main .menu_section > ul > li ul a {
+  font-size: var(--sidebar-font-size);
+  color: rgba(0, 0, 0, 0.70);
 }

@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;
+  .dashboard .sidebar_main_active #header_main,
+  .dashboard .sidebar_main_active #page_content,
+  .dashboard .sidebar_main_active #top_bar {
+    margin-left: var(--sidebar-width);
  }
 }
 /* Custom height of header, change var: header-height*/
-body {
-  padding-top: var(--header-height) !important;
+body.dashboard {
+  padding-top: var(--header-height);
 }

-#header_main {
-  padding: calc((var(--header-height) - 48px)/2) 25px !important;
+.dashboard #header_main {
+  padding: calc((var(--header-height) - 48px)/2) 25px;
 }
 /*---*/

 /* Custom card*/
-.md-card .md-card-toolbar-heading-text {
-  font-weight: 700 !important;
+.dashboard .md-card .md-card-toolbar-heading-text {
+  font-weight: 700;
 }
 /*---*/

 /* Breadcrumb*/
-#breadcrumbs {
-  background: inherit !important;
+.dashboard #breadcrumbs {
+  background: inherit;
 }

-
 /* Notification */

 /*Remove the second close added by theme because it was used uikit 2*/
-.uk-close::after {content: '' !important;}
+.dashboard .uk-close::after {content: '';}

 /* Change z-index, because of sidebar and header z-index is larger that default */
-.uk-notification {
-  z-index: 2000 !important;
+.dashboard .uk-notification {
+  z-index: 2000;
 }
 /*---*/
--- a/src/index.html
+++ b/src/index.html
@ -43,7 +43,7 @@
    <!-- themes -->
    <link rel="stylesheet" href="assets/theme-assets/css/themes/my_theme.min.css" media="all">
  </head>
-  <body class="app_my_theme">
+  <body class="app_my_theme dashboard">
    <div>
      <app-root></app-root>
    </div>