Adds structure as requested on sidebar - (Issue #99)
This commit is contained in:
parent
5a51e6d616
commit
b7c070a939
|
@ -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) => {
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in New Issue