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 { 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 { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
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.push(DMP_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;
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
this.router.events.subscribe((event) => {

View File

@ -54,12 +54,12 @@
<!-- Sidebar Menu -->
<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 class="sidebarSubtitle">
<p>{{groupMenuItem.title | translate}}</p>
</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">
<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
@ -67,7 +67,7 @@
<p>{{groupMenuRoute.title | translate}}</p>
</a>
</li>
<hr *ngIf="!isLast">
<hr *ngIf="!isLast && !groupMenuItem.requiresAdmin">
</div>
</ul>
<!-- 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 { TranslateService } from '@ngx-translate/core';
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 { Router } from '@angular/router';
import { Location } from '@angular/common';
import { Route } from '@angular/compiler/src/core';
declare interface RouteInfo {
path: string;
@ -18,16 +19,34 @@ declare interface GroupMenuItem {
routes: RouteInfo[];
requiresAuthentication: boolean;
requiresAdmin: boolean;
isGeneral: boolean;
}
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[] = [
{ 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: '/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' }
];
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[] = [
{ path: '/dmp-profiles', title: 'SIDE-BAR.DMP-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: '/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({
selector: 'app-sidebar',
@ -52,6 +67,8 @@ export class SidebarComponent implements OnInit {
dmpItems: GroupMenuItem;
adminItems: GroupMenuItem;
// historyItems: GroupMenuItem;
datasetItems: GroupMenuItem;
projectItems: GroupMenuItem;
publicItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = [];
private toggleButton: any;
@ -71,6 +88,7 @@ export class SidebarComponent implements OnInit {
routes: GENERAL_ROUTES,
requiresAuthentication: false,
requiresAdmin: false,
isGeneral: true
}
this.groupMenuItems.push(this.generalItems);
@ -78,31 +96,51 @@ export class SidebarComponent implements OnInit {
title: 'SIDE-BAR.DMP',
routes: DMP_ROUTES,
requiresAuthentication: true,
requiresAdmin: false
requiresAdmin: false,
isGeneral: false
}
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 = {
title: 'SIDE-BAR.ADMIN',
routes: ADMIN_ROUTES,
requiresAuthentication: true,
requiresAdmin: true
requiresAdmin: true,
isGeneral: false
}
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 = {
// title: 'SIDE-BAR.HISTORY',
// routes: HISTORY_ROUTES
// }
// 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 {
@ -141,11 +179,16 @@ export class SidebarComponent implements OnInit {
}
showItem(value: GroupMenuItem) {
if (value.requiresAdmin) {
return this.isAdmin();
if (this.isAuthenticated()) {
if (value.requiresAdmin) {
return this.isAdmin();
}
else {
return value.isGeneral || value.requiresAuthentication;
}
}
else {
return this.isAuthenticated() || !value.requiresAuthentication;
return !value.requiresAuthentication;
}
}

View File

@ -82,22 +82,28 @@
},
"SIDE-BAR": {
"GENERAL": "GENERAL",
"DASHBOARD": "HOME",
"ABOUT": "About",
"DASHBOARD": "Home",
"DMP": "DATA MANAGEMENT PLANS",
"MY-DMPS": "MY DMPs",
"MY-DATASET-DESC": "MY DATASET DESCRIPTIONS",
"MY-PROJECTS": "MY PROJECTS",
"MY-DMPS": "My DMPs",
"DATASETS": "DATASETS",
"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-VISITED": "LAST VISITED",
"HISTORY-EDITED": "LAST EDITED",
"PUBLIC": "PUBLIC",
"PUBLIC-DMPS": "PUBLIC DMPs",
"PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS",
"PUBLIC-DMPS": "Public DMPs",
"PUBLIC-DESC": "Public Dataset Descriptions",
"ACCOUNT": "ACCOUNT",
"ADMIN": "ADMIN",
"DATASET-TEMPLATES": "DATASET TEMPLATES",
"DMP-TEMPLATES": "DMP TEMPLATES",
"USERS": "USERS"
"DATASET-TEMPLATES": "Dataset Templates",
"DMP-TEMPLATES": "DMP Templates",
"USERS": "Users"
},
"DATASET-PROFILE-EDITOR": {
"TITLE": {