parameterize menu items & login/out urls

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@50286 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2018-01-11 15:20:43 +00:00
parent 27794606e8
commit 7be97877c6
3 changed files with 201 additions and 35 deletions

View File

@ -26,9 +26,15 @@ declare var logoutClicked;
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="" >My profile</a></li>
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route.length > 0" routerLinkActive="uk-link" routerLink="{{item.route}}" >{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0"routerLinkActive="uk-link" href="{{submenu.url}}" >{{item.title}}</a>
</li>
</ng-container>
<li><a (click)="logOut()" id="logout" >Log out</a></li>
</ul>
</div>
@ -48,9 +54,15 @@ declare var logoutClicked;
</span>
<ul *ngIf="loggedIn" class="uk-nav-sub">
<li><a href="" >My profile</a></li>
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route.length > 0" routerLinkActive="uk-link" routerLink="{{item.route}}" >{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0"routerLinkActive="uk-link" href="{{submenu.url}}" >{{item.title}}</a>
</li>
</ng-container>
<li><a (click)="logOut()" id="logout" >Log out</a></li>
</ul>
</li>
@ -65,7 +77,9 @@ export class UserMiniComponent {
@Input() public mobileView:boolean = false ;
public server: boolean = true;
public routerHelper:RouterHelper = new RouterHelper();
@Input() userMenuItems;
@Input() logInUrl;
@Input() logOutUrl;
public redirectUrl: string = "";
private baseUrl = "user-info";
sub:any;
@ -125,7 +139,7 @@ export class UserMiniComponent {
// });
logoutClicked();
console.log("Redirect to "+location.href);
window.location.href = OpenaireProperties.getLogoutURL()+ StringUtils.URIEncode(location.href);
window.location.href = (this.logOutUrl)?this.logOutUrl:OpenaireProperties.getLogoutURL()+ StringUtils.URIEncode(location.href);
}
this.loggedIn = false;
@ -136,7 +150,7 @@ export class UserMiniComponent {
logIn(){
Session.setCurrentUrl(location.pathname);
Session.setCurrentParameters(location.search);
window.location.href = OpenaireProperties.getLoginURL();
window.location.href = (this.logInUrl)?this.logInUrl:OpenaireProperties.getLoginURL();
}
onClick(id: string) {

View File

@ -1,6 +1,6 @@
<div class="tm-header-mobile uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div *ngIf="!onlyTop" class="uk-navbar-left">
<div *ngIf="!onlyTop || usermenu" class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"> </div>
</a>
@ -13,14 +13,23 @@
<user-mini></user-mini>
</div-->
</nav>
<div *ngIf="!onlyTop" id="tm-mobile" uk-offcanvas="" mode="slide" overlay="" class="uk-offcanvas" >
<div id="tm-mobile" uk-offcanvas="" mode="slide" overlay="" class="uk-offcanvas" >
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<div class="uk-child-width-1-1 uk-grid" uk-grid="">
<div>
<div *ngIf= "isClient" class="uk-panel" id="module-0">
<ul class="uk-nav uk-nav-default">
<li class="uk-nav-header uk-parent">
<li *ngIf="!onlyTop" class="uk-nav-header uk-parent" *ngFor="let menu of menuItems">
<a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub">
<li *ngFor="let submenu of menu.items">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" routerLink="{{submenu.route}}" class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"routerLinkActive="uk-link" href="{{submenu.url}}" class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
</li>
</ul>
</li>
<!--li class="uk-nav-header uk-parent">
<a routerLinkActive="uk-link" routerLink="/search/find" class="uk-offcanvas-close custom-offcanvas-close">Search</a>
<ul class="uk-nav-sub">
<li *ngIf="showPublications"><a routerLinkActive="uk-link" routerLink="/search/find/publications" class="uk-offcanvas-close custom-offcanvas-close">Publications</a></li>
@ -38,15 +47,15 @@
<li *ngIf="showDepositPublications" ><a routerLinkActive="uk-link" routerLink="/participate/deposit-publications" class="uk-offcanvas-close custom-offcanvas-close" >Publications</a></li>
<li *ngIf="showDepositDatasets"><a routerLinkActive="uk-link" routerLink="/participate/deposit-datasets" class="uk-offcanvas-close custom-offcanvas-close" >Research Data</a></li>
</ul>
</li>
<li *ngIf="showLinking" class="uk-nav-header uk-parent">
<a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a>
</li-->
<!--li *ngIf="showLinking" class="uk-nav-header uk-parent">
<a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a-->
<!--ul class="uk-nav-sub">
<li><a routerLinkActive="uk-link" routerLink="/participate/claim" class="uk-offcanvas-close custom-offcanvas-close" >Link</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims" class="uk-offcanvas-close custom-offcanvas-close">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims" class="uk-offcanvas-close custom-offcanvas-close">Manage all Claims</a></li>
</ul-->
</li>
<!--/li>
<li *ngIf="showDataProviders" class="uk-nav-header uk-parent">
Content Providers
<ul class="uk-nav-sub">
@ -56,9 +65,9 @@
<li><a routerLinkActive="uk-link" routerLink="/search/entity-registries" class="uk-offcanvas-close custom-offcanvas-close" >Registries/ Databases</a></li>
<li><a routerLinkActive="uk-link" routerLink="/search/find/dataproviders" class="uk-offcanvas-close custom-offcanvas-close" >Browse all</a></li>
</ul>
</li>
</li-->
<ng-container *ngIf="userMenu">
<user-mini mobileView=true></user-mini>
<user-mini mobileView=true [userMenuItems]=userMenuItems [logInUrl]=logInUrl [logOutUrl]=logOutUrl></user-mini>
</ng-container>
</ul>
</div>
@ -110,7 +119,23 @@
</div>
<div *ngIf="!onlyTop" class="uk-navbar-center">
<ul *ngIf= "isClient" class="uk-navbar-nav">
<li class="uk-parent">
<li class="uk-parent" *ngFor="let menu of menuItems">
<a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" class="" aria-expanded="false">{{menu.rootItem.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" style="top: 80px; left: 0px;" id="{{menu.id}}" (click)="onClick(menu.id)">
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li *ngFor="let submenu of menu.items">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" routerLink="{{submenu.route}}" >{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" href="{{submenu.url}}" >{{submenu.title}}</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!--li class="uk-parent">
<a routerLinkActive="uk-link" routerLink="/search/find" class="" aria-expanded="false">Search</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" style="top: 80px; left: 0px;" id="searchMenu" (click)="onClick('searchMenu')">
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
@ -143,17 +168,7 @@
</li>
<li *ngIf="showLinking" class="uk-parent">
<a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a>
<!--div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" style="top: 80px; left: 358px;" id="linkingMenu" (click)="onClick('linkingMenu')" >
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a routerLinkActive="uk-link" routerLink="/participate/claim">Link</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li>
</ul>
</div>
</div>
</div-->
</li>
<li *ngIf="showDataProviders" class="uk-parent">
<a routerLinkActive="uk-link" routerLink="/search/content-providers" class="" aria-expanded="false">Content Providers</a>
@ -171,11 +186,11 @@
</div>
</div>
</div>
</li>
</li-->
</ul>
</div>
<div *ngIf="userMenu" class="uk-navbar-right">
<user-mini ></user-mini>
<user-mini [userMenuItems]=userMenuItems [logInUrl]=logInUrl [logOutUrl]=logOutUrl></user-mini>
</div>
</nav>

View File

@ -15,6 +15,142 @@ export class NavigationBarComponent {
@Input() onlyTop ;
@Input() logoPath:string = "assets/";
@Input() userMenu;
@Input() logInUrl;
@Input() logOutUrl;
@Input() userMenuItems = [
{title: "My profile",
url:"",
route:"",
needsAuthorization:false},
{title: "My claims",
url:"",
route:"/myclaims",
needsAuthorization:false},
{title: "Manage all claims",
url:"",
route:"/claims",
needsAuthorization:true
}
];
@Input() menuItems = [
{rootItem:{
title: "Search",
url:"",
route:"/search/find"
},items:[
{title: "Publications",
url:"",
route:"/search/find/publications",
entitiesRequired:["publication"],
routeRequired:["/search/find/publications"]},
{title: "Research Data",
url:"",
route:"/search/find/datasets",
entitiesRequired:["dataset"],
routeRequired:["/search/find/datasets"]},
{title: "Software",
url:"",
route:"/search/find/software",
entitiesRequired:["software"],
routeRequired:["/search/find/software"]},
{title: "Projects",
url:"",
route:"/search/find/projects",
entitiesRequired:["projects"],
routeRequired:["/search/find/projects"]},
{title: "Content Providers",
url:"",
route:"/search/find/dataproviders",
entitiesRequired:["projects"],
routeRequired:["/search/find/projects"]},
{title: "Organizations",
url:"",
route:"/search/find/organizations",
entitiesRequired:["projects"],
routeRequired:["/search/find/projects"]},
]
},
{rootItem:{
title: "Share",
url:"",
route:""
},items:[
{title: "Publications",
url:"",
route:"/participate/deposit-publications",
entitiesRequired:["publication"],
routeRequired:["/participate/deposit-publications"]},
{title: "Research Data",
url:"",
route:"/participate/deposit-datasets",
entitiesRequired:["dataset"],
routeRequired:["/participate/deposit-datasets"]}
]
},
{rootItem:{
title: "Link",
url:"",
route:"/participate/claim",
entitiesRequired:[],
routeRequired:["/participate/claim"]
},items:[]
},
{rootItem:{
title: "Content Providers",
url:"",
route:""
},items:[
{title: "Data Policies",
url:"https://beta.openaire.eu/oa-policies-mandates",
route:"",
entitiesRequired:[],
routeRequired:[]},
{title: "Repositories",
url:"",
route:"/search/content-providers",
entitiesRequired:[],
routeRequired:["/search/content-providers"]},
{title: "Journals",
url:"",
route:"/search/journals",
entitiesRequired:[],
routeRequired:["/search/journals"]},
{title: "Registries",
url:"",
route:"/search/entity-registries",
entitiesRequired:[],
routeRequired:["/search/entity-registries"]},
{title: "Browse all",
url:"",
route:"/search/find/dataproviders",
entitiesRequired:[],
routeRequired:["/search/find/dataproviders"]}
]
}
];
/*
<li *ngIf="showDataProviders" class="uk-nav-header uk-parent">
Content Providers
<ul class="uk-nav-sub">
<li><a href="https://beta.openaire.eu/oa-policies-mandates" class="uk-offcanvas-close custom-offcanvas-close" >Data Policies</a></li>
<li><a routerLinkActive="uk-link" routerLink="/search/content-providers" class="uk-offcanvas-close custom-offcanvas-close" >Repositories</a></li>
<li><a routerLinkActive="uk-link" routerLink="/search/journals" class="uk-offcanvas-close custom-offcanvas-close" >Journals</a></li>
<li><a routerLinkActive="uk-link" routerLink="/search/entity-registries" class="uk-offcanvas-close custom-offcanvas-close" >Registries/ Databases</a></li>
<li><a routerLinkActive="uk-link" routerLink="/search/find/dataproviders" class="uk-offcanvas-close custom-offcanvas-close" >Browse all</a></li>
</ul>
</li>*/
public isAuthorized: boolean = false;
sub:any;
isClient:boolean = false;
@ -34,6 +170,7 @@ export class NavigationBarComponent {
constructor( private router: Router, private route: ActivatedRoute, private config: ConfigurationService) {}
ngOnInit() {
console.log(this.menuItems);
if (typeof document !== 'undefined') {
try{
this.isClient = true;