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

sidebar authenticaton changes

This commit is contained in:
Diamantis Tziotzios 2019-05-08 15:48:57 +03:00
parent c23531d69b
commit 4902906fbc
6 changed files with 85 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app-routing.module.ts
View File

@ -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

5
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
View File

@ -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);

27
dmp-frontend/src/app/ui/sidebar/sidebar.component.css
View File

@ -1,28 +1,27 @@
.logo-img { .logo-img {
width: 60px; width: 60px;
display: block; display: block;
max-height: none; max-height: none;
margin-left: 100px; margin-left: 100px;
} }
.logo-img img { .logo-img img {
width: 60px; width: 60px;
top: 0px; top: 0px;
position: inherit; position: inherit;
} }
.sidebarSubtitle p { .sidebarSubtitle p {
margin-left: 20px; margin-left: 20px;
color: rgb(166, 166, 166); color: rgb(166, 166, 166);
} }
.nav hr { .nav hr {
width: 230px; width: 230px;
border-top: 1px solid #fff; border-top: 1px solid #fff;
border-bottom: 2px solid #d4d4d4; border-bottom: 2px solid #d4d4d4;
} }
.sidebar-footer { .sidebar-footer {
position: relative; margin-top: auto;
height: 48%;
} }

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

@ -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> </div>
</li>
</ul>
</div> </div>

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

@ -1,13 +1,14 @@
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';
declare interface RouteInfo { 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,74 +16,61 @@ 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({
selector: 'app-sidebar', selector: 'app-sidebar',
templateUrl: './sidebar.component.html', templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css', './sidebar.component.scss'] styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
}) })
export class SidebarComponent implements OnInit { export class SidebarComponent implements OnInit {
generalItems: GroupMenuItem; generalItems: GroupMenuItem;
dmpItems: GroupMenuItem; dmpItems: GroupMenuItem;
// historyItems: GroupMenuItem; // historyItems: GroupMenuItem;
publicItems: GroupMenuItem; publicItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = []; groupMenuItems: GroupMenuItem[] = [];
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.generalItems = {
this.translate.get('SIDE-BAR.MY-DMPS').subscribe((res: string) => {DMP_ROUTES[0].title = res}); title: 'SIDE-BAR.GENERAL',
this.translate.get('SIDE-BAR.MY-DATASET-DESC').subscribe((res: string) => {DMP_ROUTES[1].title = res}); routes: GENERAL_ROUTES
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.groupMenuItems.push(this.generalItems);
// 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.dmpItems = {
this.translate.get('SIDE-BAR.PUBLIC-DMPS').subscribe((res: string) => {PUBLIC_ROUTES[1].title = res}); title: 'SIDE-BAR.DMP',
this.generalItems = { routes: DMP_ROUTES
title: '', }
routes: GENERAL_ROUTES.filter(menuItem => menuItem) this.groupMenuItems.push(this.dmpItems);
// this.historyItems = {
// title: 'SIDE-BAR.HISTORY',
// routes: HISTORY_ROUTES
// }
// this.groupMenuItems.push(this.historyItems);
this.publicItems = {
title: 'SIDE-BAR.PUBLIC',
routes: PUBLIC_ROUTES
}
this.groupMenuItems.push(this.publicItems);
} }
this.translate.get('SIDE-BAR.GENERAL').subscribe((res: string) => {this.generalItems.title = res});
this.groupMenuItems.push(this.generalItems);
this.dmpItems = {
title: '',
routes: DMP_ROUTES.filter(menuItem => menuItem)
}
this.translate.get('SIDE-BAR.DMP').subscribe((res: string) => {this.dmpItems.title = res});
this.groupMenuItems.push(this.dmpItems);
// this.historyItems = {
// title: '',
// routes: HISTORY_ROUTES.filter(menuItem => menuItem)
// }
// this.translate.get('SIDE-BAR.HISTORY').subscribe((res: string) => {this.historyItems.title = res});
// this.groupMenuItems.push(this.historyItems);
this.publicItems = {
title: '',
routes: PUBLIC_ROUTES.filter(menuItem => menuItem)
}
this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res});
this.groupMenuItems.push(this.publicItems);
}
public principalHasAvatar(): boolean { public principalHasAvatar(): boolean {
return this.authentication.current().avatarUrl != null; return this.authentication.current().avatarUrl != null;
@ -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,

3
dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
View File

@ -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;