MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

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

36
dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
View File

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