sidebar authenticaton changes
This commit is contained in:
parent
c23531d69b
commit
4902906fbc
|
@ -26,7 +26,7 @@ const appRoutes: Routes = [
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'exploreplans',
|
path: 'explore-plans',
|
||||||
loadChildren: './ui/explore-dmp/explore-dmp.module#ExploreDmpModule',
|
loadChildren: './ui/explore-dmp/explore-dmp.module#ExploreDmpModule',
|
||||||
data: {
|
data: {
|
||||||
breadcrumb: true
|
breadcrumb: true
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
width: 230px;
|
padding: 0.3em;
|
||||||
height: 40px;
|
|
||||||
margin: 5px 15px;
|
|
||||||
padding: 5px;
|
|
||||||
color: rgb(117, 117, 117);
|
color: rgb(117, 117, 117);
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
|
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
|
||||||
|
|
|
@ -23,6 +23,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
position: relative;
|
margin-top: auto;
|
||||||
height: 48%;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,8 +29,7 @@
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
|
<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
|
||||||
<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
|
<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
|
||||||
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
|
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
|
||||||
[src]="this.getPrincipalAvatar()">
|
|
||||||
<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
|
<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
@ -46,24 +45,21 @@
|
||||||
<!-- END OF MOBILE MENU -->
|
<!-- END OF MOBILE MENU -->
|
||||||
|
|
||||||
<!-- 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 getMenuItems(); last as isLast; first as isFirst">
|
||||||
<div class="sidebarSubtitle">
|
<div class="sidebarSubtitle">
|
||||||
<p>{{ groupMenuItem.title }}</p>
|
<p>{{groupMenuItem.title | translate}}</p>
|
||||||
</div>
|
</div>
|
||||||
<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes"
|
<li routerLinkActive="active" *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>
|
||||||
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
|
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
|
||||||
<p>{{ groupMenuRoute.title }}</p>
|
<p>{{groupMenuRoute.title | translate}}</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<hr *ngIf="!isLast">
|
<hr *ngIf="!isLast">
|
||||||
</ul>
|
</ul>
|
||||||
<!-- Sidebar Footer -->
|
<!-- Sidebar Footer -->
|
||||||
<ul class="nav sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
<li class="active-pro nav-item">
|
|
||||||
<app-sidebar-footer></app-sidebar-footer>
|
<app-sidebar-footer></app-sidebar-footer>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Component, Input, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
|
||||||
import { MatDialog } from '@angular/material';
|
import { MatDialog } from '@angular/material';
|
||||||
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
import { AuthService } from '../../core/services/auth/auth.service';
|
import { AuthService } from '../../core/services/auth/auth.service';
|
||||||
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
|
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ 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;
|
||||||
|
@ -15,21 +16,20 @@ declare interface GroupMenuItem {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const GENERAL_ROUTES: RouteInfo[] = [
|
export const GENERAL_ROUTES: RouteInfo[] = [
|
||||||
{ path: '/home', title: '', icon: 'dashboard'}
|
{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard', requiresAuthentication: true }
|
||||||
];
|
];
|
||||||
export const DMP_ROUTES: RouteInfo[] = [
|
export const DMP_ROUTES: RouteInfo[] = [
|
||||||
{ path: '/plans', title: '', icon: 'view_agenda'},
|
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda', requiresAuthentication: true },
|
||||||
{ path: '/datasets', title: '', icon: 'library_books'},
|
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books', requiresAuthentication: true },
|
||||||
{ path: '/projects', title: '', icon: 'work_outline'}
|
{ path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline', requiresAuthentication: true }
|
||||||
];
|
];
|
||||||
// export const HISTORY_ROUTES: RouteInfo[] = [
|
// export const HISTORY_ROUTES: RouteInfo[] = [
|
||||||
// { path: '/typography', title: 'LAST VISITED', icon: 'visibility'},
|
// { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'},
|
||||||
// { path: '/icons', title: 'LAST EDITED', icon: 'edit'}
|
// { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'}
|
||||||
// ];
|
// ];
|
||||||
export const PUBLIC_ROUTES: RouteInfo[] = [
|
export const PUBLIC_ROUTES: RouteInfo[] = [
|
||||||
// { path: '/maps', title: 'PUBLIC DMPs', icon: 'public'},
|
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public', requiresAuthentication: false },
|
||||||
{ path: '/explore', title: 'PUBLIC DATASET DESCRIPTIONS', icon: 'public'},
|
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', requiresAuthentication: false }
|
||||||
{ path: '/exploreplans', title: 'PUBLIC DATASET PLANS ', icon: 'public'}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -47,40 +47,28 @@ export class SidebarComponent implements OnInit {
|
||||||
constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
|
constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.translate.get('SIDE-BAR.DASHBOARD').subscribe((res: string) => {GENERAL_ROUTES[0].title = res});
|
|
||||||
this.translate.get('SIDE-BAR.MY-DMPS').subscribe((res: string) => {DMP_ROUTES[0].title = res});
|
|
||||||
this.translate.get('SIDE-BAR.MY-DATASET-DESC').subscribe((res: string) => {DMP_ROUTES[1].title = res});
|
|
||||||
this.translate.get('SIDE-BAR.MY-PROJECTS').subscribe((res: string) => {DMP_ROUTES[2].title = res});
|
|
||||||
// this.translate.get('SIDE-BAR.HISTORY-VISITED').subscribe((res: string) => {HISTORY_ROUTES[0].title = res});
|
|
||||||
// this.translate.get('SIDE-BAR.HISTORY-EDITED').subscribe((res: string) => {HISTORY_ROUTES[1].title = res});
|
|
||||||
this.translate.get('SIDE-BAR.PUBLIC-DESC').subscribe((res: string) => {PUBLIC_ROUTES[0].title = res});
|
|
||||||
this.translate.get('SIDE-BAR.PUBLIC-DMPS').subscribe((res: string) => {PUBLIC_ROUTES[1].title = res});
|
|
||||||
this.generalItems = {
|
this.generalItems = {
|
||||||
title: '',
|
title: 'SIDE-BAR.GENERAL',
|
||||||
routes: GENERAL_ROUTES.filter(menuItem => menuItem)
|
routes: GENERAL_ROUTES
|
||||||
}
|
}
|
||||||
this.translate.get('SIDE-BAR.GENERAL').subscribe((res: string) => {this.generalItems.title = res});
|
|
||||||
this.groupMenuItems.push(this.generalItems);
|
this.groupMenuItems.push(this.generalItems);
|
||||||
|
|
||||||
this.dmpItems = {
|
this.dmpItems = {
|
||||||
title: '',
|
title: 'SIDE-BAR.DMP',
|
||||||
routes: DMP_ROUTES.filter(menuItem => menuItem)
|
routes: DMP_ROUTES
|
||||||
}
|
}
|
||||||
this.translate.get('SIDE-BAR.DMP').subscribe((res: string) => {this.dmpItems.title = res});
|
|
||||||
this.groupMenuItems.push(this.dmpItems);
|
this.groupMenuItems.push(this.dmpItems);
|
||||||
|
|
||||||
// this.historyItems = {
|
// this.historyItems = {
|
||||||
// title: '',
|
// title: 'SIDE-BAR.HISTORY',
|
||||||
// routes: HISTORY_ROUTES.filter(menuItem => menuItem)
|
// routes: HISTORY_ROUTES
|
||||||
// }
|
// }
|
||||||
// this.translate.get('SIDE-BAR.HISTORY').subscribe((res: string) => {this.historyItems.title = res});
|
|
||||||
// this.groupMenuItems.push(this.historyItems);
|
// this.groupMenuItems.push(this.historyItems);
|
||||||
|
|
||||||
this.publicItems = {
|
this.publicItems = {
|
||||||
title: '',
|
title: 'SIDE-BAR.PUBLIC',
|
||||||
routes: PUBLIC_ROUTES.filter(menuItem => menuItem)
|
routes: PUBLIC_ROUTES
|
||||||
}
|
}
|
||||||
this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res});
|
|
||||||
this.groupMenuItems.push(this.publicItems);
|
this.groupMenuItems.push(this.publicItems);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -96,6 +84,19 @@ 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,
|
||||||
|
|
|
@ -48,8 +48,9 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.dropdown .dropdown-backdrop {
|
.dropdown .dropdown-backdrop {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
Loading…
Reference in New Issue