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
parent
27794606e8
commit
7be97877c6
|
|
@ -15,20 +15,26 @@ declare var logoutClicked;
|
|||
<ul *ngIf="!mobileView" class="uk-navbar-nav">
|
||||
<li class="uk-parent">
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
<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-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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue