From 66e46004b883aacca8e6157cf9e7d67ff383ee06 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 23 Dec 2019 12:52:26 +0000
Subject: [PATCH] [Library| Trunk]

dashboard:
	move sidebar under library
	use menuItems class & add new fields needed


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57935 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../sidebar/layout.service.ts                 | 91 +++++++++++++++++++
 .../sidebar/sideBar.component.html            | 40 ++++++++
 .../sidebar/sideBar.component.ts              | 34 +++++++
 .../sidebar/sideBar.module.ts                 | 22 +++++
 services/user-management.service.ts           |  2 +-
 sharedComponents/menu.ts                      | 44 ++++++++-
 6 files changed, 229 insertions(+), 4 deletions(-)
 create mode 100644 dashboard/sharedComponents/sidebar/layout.service.ts
 create mode 100644 dashboard/sharedComponents/sidebar/sideBar.component.html
 create mode 100644 dashboard/sharedComponents/sidebar/sideBar.component.ts
 create mode 100644 dashboard/sharedComponents/sidebar/sideBar.module.ts

diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts
new file mode 100644
index 00000000..2a616ef3
--- /dev/null
+++ b/dashboard/sharedComponents/sidebar/layout.service.ts
@@ -0,0 +1,91 @@
+import {Injectable} from "@angular/core";
+import {BehaviorSubject, Observable} from "rxjs";
+import {ActivationStart, Router} from "@angular/router";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LayoutService {
+
+  /**
+   * Set this to true when sidebar items are ready.
+   */
+  private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   *  Add hasSidebar: false on data of route config, if sidebar is not needed.
+   */
+  private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   *  Add hasHeader: false on data of route config, if header is not needed.
+   */
+  private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  /**
+   *  Add hasAdminMenu: false on data of route config, if header is not needed.
+   */
+
+  private _hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  constructor(private router: Router) {
+    this.router.events.subscribe(event => {
+      if (event instanceof ActivationStart) {
+        let data = event.snapshot.data;
+        if (this.hasSidebarSubject.value === true &&
+          data['hasSidebar'] !== undefined &&
+          data['hasSidebar'] === false) {
+          this.setHasSidebar(false);
+        } else if (this.hasSidebarSubject.value === false) {
+          this.setHasSidebar(true);
+        }
+        if (this.hasHeaderSubject.value === true &&
+          data['hasHeader'] !== undefined &&
+          data['hasHeader'] === false) {
+          this.setHasHeader(false);
+        } else if (this.hasHeaderSubject.value === false) {
+          this.setHasHeader(true);
+        }
+        if (this._hasAdminMenuSubject.value === true &&
+          data['hasAdminMenu'] !== undefined &&
+          data['hasAdminMenu'] === false) {
+          this.setHasAdminMenu(false);
+        } else if (this.hasAdminMenu.value === false) {
+          this.setHasAdminMenu(true);
+        }
+      }
+    });
+  }
+
+  get open(): boolean {
+    return this.openSubject.getValue();
+  }
+
+  setOpen(value: boolean) {
+    this.openSubject.next(value);
+  }
+
+  get hasSidebar(): Observable<boolean> {
+    return this.hasSidebarSubject.asObservable();
+  }
+
+  setHasSidebar(value: boolean) {
+    this.hasSidebarSubject.next(value);
+  }
+
+  get hasHeader(): Observable<boolean> {
+    return this.hasHeaderSubject.asObservable();
+  }
+
+  setHasHeader(value: boolean) {
+    this.hasHeaderSubject.next(value);
+  }
+
+
+  get hasAdminMenu(): BehaviorSubject<boolean> {
+    return this._hasAdminMenuSubject;
+  }
+
+  setHasAdminMenu(value: boolean) {
+    this._hasAdminMenuSubject.next(value);
+  }
+}
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
new file mode 100644
index 00000000..81a5657b
--- /dev/null
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -0,0 +1,40 @@
+<aside id="sidebar_main">
+  <div *ngIf= "showHeader" class="sidebar_main_header">
+    <div *ngIf="headerDashboard || headerLogoUrl || headerName" class="uk-padding-small">
+      <img *ngIf="headerLogoUrl" [src]="headerLogoUrl">
+      <div class="uk-text-bold uk-margin-top">{{headerName}}</div>
+      <div>{{headerDashboard}}</div>
+    </div>
+  </div>
+  <div class="menu_section uk-margin-top">
+    <ul>
+      <ng-template ngFor [ngForOf]="items" let-item let-i="index">
+        <li [class.current_section]="isTheActiveMenuItem(item)"
+            [class.act_section]="item.open"
+            [title]="item.title"
+            [class.submenu_trigger]="item.items.length > 1">
+          <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null" [queryParams]=item.params>
+            <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
+            <span class="menu_title">{{item.title}}</span>
+          </a>
+          <ng-template [ngIf]="item.items.length > 1">
+            <a (click)="item.open = !item.open">
+              <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
+              <span class="menu_title">{{item.title}}</span>
+            </a>
+            <ul [style.display]="(item.open?'block':'none')">
+              <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
+                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)">
+                  <a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null" [queryParams]=subItem.params>
+                    <span *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></span>
+                    <span class="menu_title">{{subItem.title}}</span>
+                  </a>
+                </li>
+              </ng-template>
+            </ul>
+          </ng-template>
+        </li>
+      </ng-template>
+    </ul>
+  </div>
+</aside>
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts
new file mode 100644
index 00000000..aea9b634
--- /dev/null
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MenuItem} from "../../../sharedComponents/menu";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'dashboard-sidebar',
+  templateUrl: 'sideBar.component.html'
+})
+export class SideBarComponent implements OnInit {
+  @Input() items: MenuItem[] = [];
+  @Input() headerName: string;
+  @Input() headerDashboard: string;
+  @Input() headerLogoUrl: string;
+  @Input() showHeader: boolean = true;
+  @Input() activeItem: string = '';
+  @Input() activeSubItem: string = '';
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {}
+
+
+  isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
+    if(this.activeItem || this.activeSubItem){
+      return  (!subItem && this.activeItem === item.id) ||
+        (subItem && this.activeItem === item.id && this.activeSubItem === subItem.id);
+    }else {
+      if(subItem){
+        return MenuItem.isTheActiveMenu(subItem,this.router.url.split('?')[0])
+      }
+      return MenuItem.isTheActiveMenu(item,this.router.url.split('?')[0])
+    }
+  }
+}
diff --git a/dashboard/sharedComponents/sidebar/sideBar.module.ts b/dashboard/sharedComponents/sidebar/sideBar.module.ts
new file mode 100644
index 00000000..4f17e096
--- /dev/null
+++ b/dashboard/sharedComponents/sidebar/sideBar.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {RouterModule} from "@angular/router";
+
+import {SideBarComponent} from './sideBar.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
+  declarations: [
+    SideBarComponent
+  ],
+  providers: [],
+  exports: [
+    SideBarComponent
+  ]
+})
+export class SideBarModule {
+}
diff --git a/services/user-management.service.ts b/services/user-management.service.ts
index 807b1743..837f8b62 100644
--- a/services/user-management.service.ts
+++ b/services/user-management.service.ts
@@ -34,7 +34,7 @@ export class UserManagementService {
         this.lock = true;
         this.http.get<User>(url + token).pipe(map(userInfo => {
           return this.parseUserInfo(userInfo);
-        })).pipe(timeout(2000), catchError(() => {
+        })).pipe(timeout(3000), catchError(() => {
           return of(null);
         })).subscribe(user => {
           if (this.getUserInfoSubject.getValue() === null) {
diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts
index 99505b1a..d47d3923 100644
--- a/sharedComponents/menu.ts
+++ b/sharedComponents/menu.ts
@@ -7,8 +7,10 @@ export class MenuItem {
   entitiesRequired: string[] = []; // openaire entities used in page "publication, dataset, organization, software, project, datasource"
   routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense
   params: any = {};
-  markAsActive:boolean;
-
+  markAsActive: boolean;
+  items: MenuItem[] = [];
+  icon: string;
+  open: boolean;
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params) {
     this.id = id;
@@ -20,16 +22,52 @@ export class MenuItem {
     this.routeRequired = routeRequired;
     this.params = params;
     this.markAsActive = true;
+    this.items = [];
   }
-  public setMarkAsActive(showActive:boolean){
+
+  public setMarkAsActive(showActive: boolean) {
     this.markAsActive = showActive;
   }
 
+  public static isTheActiveMenu(menu: MenuItem, currentRoute: string): boolean {
+    if (!menu.markAsActive) {
+      return false;
+    }
+    if (currentRoute == menu.route) {
+      return true;
+    } else if (menu.items.length > 0) {
+      for (let menuItem of menu.items) {
+        if (menuItem.route == currentRoute) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+
 }
 
 export class RootMenuItem {
   rootItem: MenuItem;
   items: MenuItem[] = [];
+
+  public static isTheActiveRootMenu(menu: RootMenuItem, currentRoute: string): boolean {
+    if (!menu.rootItem.markAsActive) {
+      return false;
+    }
+    if (currentRoute == menu.rootItem.route) {
+      return true;
+    } else if (menu.items.length > 0) {
+      for (let menuItem of menu.items) {
+        let isActive = MenuItem.isTheActiveMenu(menuItem, currentRoute);
+        if (isActive) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }
 }
 
 export class SideMenuItem {