sidebar changes

This commit is contained in:
Diamantis Tziotzios 2019-05-08 18:24:30 +03:00
parent 4e8fe92dcb
commit 918d7ca782
2 changed files with 26 additions and 34 deletions

View File

@ -45,18 +45,20 @@
<!-- END OF MOBILE MENU -->
<!-- Sidebar Menu -->
<ul class="nav" *ngFor="let groupMenuItem of getMenuItems(); last as isLast; first as isFirst">
<div class="sidebarSubtitle">
<p>{{groupMenuItem.title | translate}}</p>
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst">
<div *ngIf="isAuthenticated() || !groupMenuItem.requiresAuthentication">
<div class="sidebarSubtitle">
<p>{{groupMenuItem.title | translate}}</p>
</div>
<li routerLinkActive="active" *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>
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
<p>{{groupMenuRoute.title | translate}}</p>
</a>
</li>
<hr *ngIf="!isLast">
</div>
<li routerLinkActive="active" *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>
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
<p>{{groupMenuRoute.title | translate}}</p>
</a>
</li>
<hr *ngIf="!isLast">
</ul>
<!-- Sidebar Footer -->
<div class="sidebar-footer">

View File

@ -8,28 +8,28 @@ declare interface RouteInfo {
path: string;
title: string;
icon: string;
requiresAuthentication: boolean;
}
declare interface GroupMenuItem {
title: string;
routes: RouteInfo[];
requiresAuthentication: boolean;
}
export const GENERAL_ROUTES: RouteInfo[] = [
{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard', requiresAuthentication: true }
{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard' }
];
export const DMP_ROUTES: RouteInfo[] = [
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda', requiresAuthentication: true },
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books', requiresAuthentication: true },
{ path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline', requiresAuthentication: true }
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda' },
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books' },
{ path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline' }
];
// export const HISTORY_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', requiresAuthentication: false },
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', requiresAuthentication: false }
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public', },
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', }
];
@Component({
@ -49,13 +49,15 @@ export class SidebarComponent implements OnInit {
ngOnInit() {
this.generalItems = {
title: 'SIDE-BAR.GENERAL',
routes: GENERAL_ROUTES
routes: GENERAL_ROUTES,
requiresAuthentication: true
}
this.groupMenuItems.push(this.generalItems);
this.dmpItems = {
title: 'SIDE-BAR.DMP',
routes: DMP_ROUTES
routes: DMP_ROUTES,
requiresAuthentication: true
}
this.groupMenuItems.push(this.dmpItems);
@ -67,7 +69,8 @@ export class SidebarComponent implements OnInit {
this.publicItems = {
title: 'SIDE-BAR.PUBLIC',
routes: PUBLIC_ROUTES
routes: PUBLIC_ROUTES,
requiresAuthentication: false
}
this.groupMenuItems.push(this.publicItems);
}
@ -84,19 +87,6 @@ export class SidebarComponent implements OnInit {
return !(!this.authentication.current());
}
public getMenuItems() {
if (this.isAuthenticated()) {
return this.groupMenuItems;
} else {
const groupMenuItems = this.groupMenuItems.filter(x => x);
groupMenuItems.forEach(group => {
group.routes = group.routes.filter(y => !y.requiresAuthentication);
});
return groupMenuItems.filter(x => x.routes.length > 0);
}
}
openProfile() {
const dialogRef = this.dialog.open(UserDialogComponent, {
hasBackdrop: true,