Adds structure as requested on sidebar - (Issue #99)

This commit is contained in:
apapachristou 2019-06-18 11:40:12 +03:00
parent 5a51e6d616
commit b7c070a939
4 changed files with 82 additions and 33 deletions

View File

@ -1,5 +1,5 @@
import { Component, OnInit, ElementRef } from '@angular/core'; import { Component, OnInit, ElementRef } from '@angular/core';
import { GENERAL_ROUTES, DMP_ROUTES, PUBLIC_ROUTES } from '../sidebar/sidebar.component'; import { GENERAL_ROUTES, DMP_ROUTES, DATASETS_ROUTES } from '../sidebar/sidebar.component';
// import { HISTORY_ROUTES } from '../sidebar/sidebar.component'; // import { HISTORY_ROUTES } from '../sidebar/sidebar.component';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common'; import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -40,7 +40,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle); this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle)); this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
// this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle)); // this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
this.listTitles.push(PUBLIC_ROUTES.filter(listTitle => listTitle)); this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle));
const navbar: HTMLElement = this.element.nativeElement; const navbar: HTMLElement = this.element.nativeElement;
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
this.router.events.subscribe((event) => { this.router.events.subscribe((event) => {

View File

@ -54,12 +54,12 @@
<!-- Sidebar Menu --> <!-- Sidebar Menu -->
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst" <ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst"
[class.nav-list-item]="(isAuthenticated() || !groupMenuItem.requiresAuthentication)"> [class.nav-list-item]="showItem(groupMenuItem)">
<div *ngIf="showItem(groupMenuItem);"> <div *ngIf="showItem(groupMenuItem);">
<div class="sidebarSubtitle"> <div class="sidebarSubtitle">
<p>{{groupMenuItem.title | translate}}</p> <p>{{groupMenuItem.title | translate}}</p>
</div> </div>
<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes" <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes"
class="{{groupMenuRoute.class}} nav-item"> class="{{groupMenuRoute.class}} nav-item">
<a class="nav-link" [routerLink]="[groupMenuRoute.path]"> <a class="nav-link" [routerLink]="[groupMenuRoute.path]">
<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i> <i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
@ -67,7 +67,7 @@
<p>{{groupMenuRoute.title | translate}}</p> <p>{{groupMenuRoute.title | translate}}</p>
</a> </a>
</li> </li>
<hr *ngIf="!isLast"> <hr *ngIf="!isLast && !groupMenuItem.requiresAdmin">
</div> </div>
</ul> </ul>
<!-- Sidebar Footer --> <!-- Sidebar Footer -->

View File

@ -1,4 +1,4 @@
import { Component, OnInit} from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '../../core/services/auth/auth.service'; import { AuthService } from '../../core/services/auth/auth.service';
@ -7,6 +7,7 @@ import { Principal } from '../../core/model/auth/Principal';
import { AppRole } from '../../core/common/enum/app-role'; import { AppRole } from '../../core/common/enum/app-role';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Route } from '@angular/compiler/src/core';
declare interface RouteInfo { declare interface RouteInfo {
path: string; path: string;
@ -18,16 +19,34 @@ declare interface GroupMenuItem {
routes: RouteInfo[]; routes: RouteInfo[];
requiresAuthentication: boolean; requiresAuthentication: boolean;
requiresAdmin: boolean; requiresAdmin: boolean;
isGeneral: boolean;
} }
export const GENERAL_ROUTES: RouteInfo[] = [ export const GENERAL_ROUTES: RouteInfo[] = [
{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard' } { path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard' },
{ path: '/about', title: 'SIDE-BAR.ABOUT', icon: 'info_outline' }
]; ];
export const DMP_ROUTES: RouteInfo[] = [ export const DMP_ROUTES: RouteInfo[] = [
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda' }, { path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda' },
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public' },
{ path: '/quick-wizard', title: 'SIDE-BAR.QUICK-WIZARD', icon: 'play_circle_outline' },
{ path: '/plans/new', title: 'SIDE-BAR.ADD-EXPERT', icon: 'playlist_add' }
];
export const DATASETS_ROUTES: RouteInfo[] = [
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books' }, { path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books' },
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public'},
{ path: '/datasetcreatewizard', title: 'SIDE-BAR.QUICK-WIZARD-DATASET', icon: "play_circle_outline"},
{ path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline' } { path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline' }
]; ];
export const PUBLIC_ROUTES: RouteInfo[] = [
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public' },
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public'}
];
// export const PROJECTS_ROUTES: RouteInfo[] = [
// { path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline' }
// ];
export const ADMIN_ROUTES: RouteInfo[] = [ export const ADMIN_ROUTES: RouteInfo[] = [
{ path: '/dmp-profiles', title: 'SIDE-BAR.DMP-TEMPLATES', icon: 'library_books' }, { path: '/dmp-profiles', title: 'SIDE-BAR.DMP-TEMPLATES', icon: 'library_books' },
{ path: '/dataset-profiles', title: 'SIDE-BAR.DATASET-TEMPLATES', icon: 'library_books' }, { path: '/dataset-profiles', title: 'SIDE-BAR.DATASET-TEMPLATES', icon: 'library_books' },
@ -37,10 +56,6 @@ export const ADMIN_ROUTES: RouteInfo[] = [
// { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'}, // { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'},
// { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'} // { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'}
// ]; // ];
export const PUBLIC_ROUTES: RouteInfo[] = [
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public', },
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', }
];
@Component({ @Component({
selector: 'app-sidebar', selector: 'app-sidebar',
@ -52,6 +67,8 @@ export class SidebarComponent implements OnInit {
dmpItems: GroupMenuItem; dmpItems: GroupMenuItem;
adminItems: GroupMenuItem; adminItems: GroupMenuItem;
// historyItems: GroupMenuItem; // historyItems: GroupMenuItem;
datasetItems: GroupMenuItem;
projectItems: GroupMenuItem;
publicItems: GroupMenuItem; publicItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = []; groupMenuItems: GroupMenuItem[] = [];
private toggleButton: any; private toggleButton: any;
@ -71,6 +88,7 @@ export class SidebarComponent implements OnInit {
routes: GENERAL_ROUTES, routes: GENERAL_ROUTES,
requiresAuthentication: false, requiresAuthentication: false,
requiresAdmin: false, requiresAdmin: false,
isGeneral: true
} }
this.groupMenuItems.push(this.generalItems); this.groupMenuItems.push(this.generalItems);
@ -78,31 +96,51 @@ export class SidebarComponent implements OnInit {
title: 'SIDE-BAR.DMP', title: 'SIDE-BAR.DMP',
routes: DMP_ROUTES, routes: DMP_ROUTES,
requiresAuthentication: true, requiresAuthentication: true,
requiresAdmin: false requiresAdmin: false,
isGeneral: false
} }
this.groupMenuItems.push(this.dmpItems); this.groupMenuItems.push(this.dmpItems);
this.datasetItems = {
title: 'SIDE-BAR.DATASETS',
routes: DATASETS_ROUTES,
requiresAuthentication: true,
requiresAdmin: false,
isGeneral: false
}
this.groupMenuItems.push(this.datasetItems);
// this.projectItems = {
// title: 'SIDE-BAR.PROJECTS',
// routes: PROJECTS_ROUTES,
// requiresAuthentication: true,
// requiresAdmin: false
// }
// this.groupMenuItems.push(this.projectItems);
this.adminItems = { this.adminItems = {
title: 'SIDE-BAR.ADMIN', title: 'SIDE-BAR.ADMIN',
routes: ADMIN_ROUTES, routes: ADMIN_ROUTES,
requiresAuthentication: true, requiresAuthentication: true,
requiresAdmin: true requiresAdmin: true,
isGeneral: false
} }
this.groupMenuItems.push(this.adminItems); this.groupMenuItems.push(this.adminItems);
this.publicItems = {
title: 'SIDE-BAR.PUBLIC',
routes: PUBLIC_ROUTES,
requiresAuthentication: false,
requiresAdmin: false,
isGeneral: false
}
this.groupMenuItems.push(this.publicItems);
// this.historyItems = { // this.historyItems = {
// title: 'SIDE-BAR.HISTORY', // title: 'SIDE-BAR.HISTORY',
// routes: HISTORY_ROUTES // routes: HISTORY_ROUTES
// } // }
// this.groupMenuItems.push(this.historyItems); // this.groupMenuItems.push(this.historyItems);
this.publicItems = {
title: 'SIDE-BAR.PUBLIC',
routes: PUBLIC_ROUTES,
requiresAuthentication: false,
requiresAdmin: false
}
this.groupMenuItems.push(this.publicItems);
} }
public principalHasAvatar(): boolean { public principalHasAvatar(): boolean {
@ -141,11 +179,16 @@ export class SidebarComponent implements OnInit {
} }
showItem(value: GroupMenuItem) { showItem(value: GroupMenuItem) {
if (value.requiresAdmin) { if (this.isAuthenticated()) {
return this.isAdmin(); if (value.requiresAdmin) {
return this.isAdmin();
}
else {
return value.isGeneral || value.requiresAuthentication;
}
} }
else { else {
return this.isAuthenticated() || !value.requiresAuthentication; return !value.requiresAuthentication;
} }
} }

View File

@ -82,22 +82,28 @@
}, },
"SIDE-BAR": { "SIDE-BAR": {
"GENERAL": "GENERAL", "GENERAL": "GENERAL",
"DASHBOARD": "HOME", "ABOUT": "About",
"DASHBOARD": "Home",
"DMP": "DATA MANAGEMENT PLANS", "DMP": "DATA MANAGEMENT PLANS",
"MY-DMPS": "MY DMPs", "MY-DMPS": "My DMPs",
"MY-DATASET-DESC": "MY DATASET DESCRIPTIONS", "DATASETS": "DATASETS",
"MY-PROJECTS": "MY PROJECTS", "NEW DATASET": "New Dataset",
"QUICK-WIZARD": "New DMP (Wizard)",
"QUICK-WIZARD-DATASET": "Add Dataset (Wizard)",
"ADD-EXPERT": "New DMP (Expert)",
"MY-DATASET-DESC": "My Dataset Descriptions",
"MY-PROJECTS": "My Projects",
"HISTORY": "HISTORY", "HISTORY": "HISTORY",
"HISTORY-VISITED": "LAST VISITED", "HISTORY-VISITED": "LAST VISITED",
"HISTORY-EDITED": "LAST EDITED", "HISTORY-EDITED": "LAST EDITED",
"PUBLIC": "PUBLIC", "PUBLIC": "PUBLIC",
"PUBLIC-DMPS": "PUBLIC DMPs", "PUBLIC-DMPS": "Public DMPs",
"PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS", "PUBLIC-DESC": "Public Dataset Descriptions",
"ACCOUNT": "ACCOUNT", "ACCOUNT": "ACCOUNT",
"ADMIN": "ADMIN", "ADMIN": "ADMIN",
"DATASET-TEMPLATES": "DATASET TEMPLATES", "DATASET-TEMPLATES": "Dataset Templates",
"DMP-TEMPLATES": "DMP TEMPLATES", "DMP-TEMPLATES": "DMP Templates",
"USERS": "USERS" "USERS": "Users"
}, },
"DATASET-PROFILE-EDITOR": { "DATASET-PROFILE-EDITOR": {
"TITLE": { "TITLE": {