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

@ -15,20 +15,26 @@ declare var logoutClicked;
<ul *ngIf="!mobileView" class="uk-navbar-nav"> <ul *ngIf="!mobileView" class="uk-navbar-nav">
<li class="uk-parent"> <li class="uk-parent">
<a *ngIf="loggedIn" > <a *ngIf="loggedIn" >
<span>{{user.fullname+" "}} <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span> <span>{{user.fullname+" "}} <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span>
</a> </a>
<a *ngIf="!loggedIn" class="loginLink" (click)="logIn()" >Sign in | Register <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span> <a *ngIf="!loggedIn" class="loginLink" (click)="logIn()" >Sign in | Register <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
</a> </a>
<div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" (click)="onClick('userMenu')" > <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" (click)="onClick('userMenu')" >
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid=""> <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column"> <div class="uk-first-column">
<ul class="uk-nav uk-navbar-dropdown-nav"> <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><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> <li><a (click)="logOut()" id="logout" >Log out</a></li>
</ul> </ul>
</div> </div>
@ -48,9 +54,15 @@ declare var logoutClicked;
</span> </span>
<ul *ngIf="loggedIn" class="uk-nav-sub"> <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><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> <li><a (click)="logOut()" id="logout" >Log out</a></li>
</ul> </ul>
</li> </li>
@ -65,7 +77,9 @@ export class UserMiniComponent {
@Input() public mobileView:boolean = false ; @Input() public mobileView:boolean = false ;
public server: boolean = true; public server: boolean = true;
public routerHelper:RouterHelper = new RouterHelper(); public routerHelper:RouterHelper = new RouterHelper();
@Input() userMenuItems;
@Input() logInUrl;
@Input() logOutUrl;
public redirectUrl: string = ""; public redirectUrl: string = "";
private baseUrl = "user-info"; private baseUrl = "user-info";
sub:any; sub:any;
@ -125,7 +139,7 @@ export class UserMiniComponent {
// }); // });
logoutClicked(); logoutClicked();
console.log("Redirect to "+location.href); 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; this.loggedIn = false;
@ -136,7 +150,7 @@ export class UserMiniComponent {
logIn(){ logIn(){
Session.setCurrentUrl(location.pathname); Session.setCurrentUrl(location.pathname);
Session.setCurrentParameters(location.search); Session.setCurrentParameters(location.search);
window.location.href = OpenaireProperties.getLoginURL(); window.location.href = (this.logInUrl)?this.logInUrl:OpenaireProperties.getLoginURL();
} }
onClick(id: string) { onClick(id: string) {

View File

@ -1,6 +1,6 @@
<div class="tm-header-mobile uk-hidden@m"> <div class="tm-header-mobile uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar=""> <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;"> <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> <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"> </div>
</a> </a>
@ -13,14 +13,23 @@
<user-mini></user-mini> <user-mini></user-mini>
</div--> </div-->
</nav> </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"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button> <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 class="uk-child-width-1-1 uk-grid" uk-grid="">
<div> <div>
<div *ngIf= "isClient" class="uk-panel" id="module-0"> <div *ngIf= "isClient" class="uk-panel" id="module-0">
<ul class="uk-nav uk-nav-default"> <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> <a routerLinkActive="uk-link" routerLink="/search/find" class="uk-offcanvas-close custom-offcanvas-close">Search</a>
<ul class="uk-nav-sub"> <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> <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="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> <li *ngIf="showDepositDatasets"><a routerLinkActive="uk-link" routerLink="/participate/deposit-datasets" class="uk-offcanvas-close custom-offcanvas-close" >Research Data</a></li>
</ul> </ul>
</li> </li-->
<li *ngIf="showLinking" class="uk-nav-header uk-parent"> <!--li *ngIf="showLinking" class="uk-nav-header uk-parent">
<a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a> <a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a-->
<!--ul class="uk-nav-sub"> <!--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="/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><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> <li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims" class="uk-offcanvas-close custom-offcanvas-close">Manage all Claims</a></li>
</ul--> </ul-->
</li> <!--/li>
<li *ngIf="showDataProviders" class="uk-nav-header uk-parent"> <li *ngIf="showDataProviders" class="uk-nav-header uk-parent">
Content Providers Content Providers
<ul class="uk-nav-sub"> <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/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> <li><a routerLinkActive="uk-link" routerLink="/search/find/dataproviders" class="uk-offcanvas-close custom-offcanvas-close" >Browse all</a></li>
</ul> </ul>
</li> </li-->
<ng-container *ngIf="userMenu"> <ng-container *ngIf="userMenu">
<user-mini mobileView=true></user-mini> <user-mini mobileView=true [userMenuItems]=userMenuItems [logInUrl]=logInUrl [logOutUrl]=logOutUrl></user-mini>
</ng-container> </ng-container>
</ul> </ul>
</div> </div>
@ -110,7 +119,23 @@
</div> </div>
<div *ngIf="!onlyTop" class="uk-navbar-center"> <div *ngIf="!onlyTop" class="uk-navbar-center">
<ul *ngIf= "isClient" class="uk-navbar-nav"> <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> <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 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=""> <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
@ -143,17 +168,7 @@
</li> </li>
<li *ngIf="showLinking" class="uk-parent"> <li *ngIf="showLinking" class="uk-parent">
<a routerLinkActive="uk-link" routerLink="/participate/claim" class="" aria-expanded="false">Link</a> <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>
<li *ngIf="showDataProviders" class="uk-parent"> <li *ngIf="showDataProviders" class="uk-parent">
<a routerLinkActive="uk-link" routerLink="/search/content-providers" class="" aria-expanded="false">Content Providers</a> <a routerLinkActive="uk-link" routerLink="/search/content-providers" class="" aria-expanded="false">Content Providers</a>
@ -171,11 +186,11 @@
</div> </div>
</div> </div>
</div> </div>
</li> </li-->
</ul> </ul>
</div> </div>
<div *ngIf="userMenu" class="uk-navbar-right"> <div *ngIf="userMenu" class="uk-navbar-right">
<user-mini ></user-mini> <user-mini [userMenuItems]=userMenuItems [logInUrl]=logInUrl [logOutUrl]=logOutUrl></user-mini>
</div> </div>
</nav> </nav>

View File

@ -15,6 +15,142 @@ export class NavigationBarComponent {
@Input() onlyTop ; @Input() onlyTop ;
@Input() logoPath:string = "assets/"; @Input() logoPath:string = "assets/";
@Input() userMenu; @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; public isAuthorized: boolean = false;
sub:any; sub:any;
isClient:boolean = false; isClient:boolean = false;
@ -34,6 +170,7 @@ export class NavigationBarComponent {
constructor( private router: Router, private route: ActivatedRoute, private config: ConfigurationService) {} constructor( private router: Router, private route: ActivatedRoute, private config: ConfigurationService) {}
ngOnInit() { ngOnInit() {
console.log(this.menuItems);
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
try{ try{
this.isClient = true; this.isClient = true;