[Library|Trunk]

user component:
	show user info only when there is no error code
navBar:
	mark as active the current route
	add markAsActive property in  class MenuItem and mark root menu item only when it is set true.
	mark by default


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56199 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2019-06-25 13:26:24 +00:00
parent 0fe32acf58
commit 84f7929b67
4 changed files with 30 additions and 2 deletions

View File

@ -4,7 +4,7 @@
<div *ngIf="!server" class="uk-container uk-container-small uk-position-relative"> <div *ngIf="!server" class="uk-container uk-container-small uk-position-relative">
<div *ngIf="loggedIn" class=""> <div *ngIf="loggedIn && !errorCode" class="">
<div class="uk-h2 uk-text-center">User Information</div> <div class="uk-h2 uk-text-center">User Information</div>
<div> <div>
<span class="uk-text-muted"> Full name </span> <span> {{user.fullname}} </span> <span class="uk-text-muted"> Full name </span> <span> {{user.fullname}} </span>

View File

@ -7,6 +7,8 @@ export class MenuItem {
entitiesRequired: string[] = []; // openaire entities used in page "publication, dataset, organization, software, project, datasource" entitiesRequired: string[] = []; // openaire entities used in page "publication, dataset, organization, software, project, datasource"
routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense
params: any = {}; params: any = {};
markAsActive:boolean;
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params) { constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params) {
this.id = id; this.id = id;
@ -17,6 +19,10 @@ export class MenuItem {
this.entitiesRequired = entitiesRequired; this.entitiesRequired = entitiesRequired;
this.routeRequired = routeRequired; this.routeRequired = routeRequired;
this.params = params; this.params = params;
this.markAsActive = true;
}
public setMarkAsActive(showActive:boolean){
this.markAsActive = showActive;
} }
} }

View File

@ -165,7 +165,8 @@
<a routerLinkActive="uk-link" routerLink="/">Home</a> <a routerLinkActive="uk-link" routerLink="/">Home</a>
</li> </li>
<ng-container *ngFor="let menu of menuItems"> <ng-container *ngFor="let menu of menuItems">
<li class="uk-parent" *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)"> <li [class]="(isTheActiveMenu(menu)?'uk-active':'')+' uk-parent'"
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a--> <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )" routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params > {{menu.rootItem.title}}</a> <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )" routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params > {{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="_blank" aria-expanded="false">{{menu.rootItem.title}}</a> <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="_blank" aria-expanded="false">{{menu.rootItem.title}}</a>

View File

@ -38,6 +38,7 @@ export class NavigationBarComponent {
showEntity ={}; showEntity ={};
showPage ={}; showPage ={};
specialAnnouncementContent:string= null; specialAnnouncementContent:string= null;
activeRouteEnabled = false;
constructor( private router: Router, private route: ActivatedRoute, private config: ConfigurationService) { constructor( private router: Router, private route: ActivatedRoute, private config: ConfigurationService) {
@ -51,6 +52,7 @@ export class NavigationBarComponent {
}catch (e) { }catch (e) {
} }
} }
this.activeRouteEnabled = false;
this.sub = this.route.queryParams.subscribe(params => { this.sub = this.route.queryParams.subscribe(params => {
this.initialize(); this.initialize();
}); });
@ -60,6 +62,7 @@ export class NavigationBarComponent {
this.sub.unsubscribe(); this.sub.unsubscribe();
} }
initialize(){ initialize(){
this.activeRouteEnabled = false;
if(Session.isLoggedIn() && (Session.isClaimsCurator() || Session.isPortalAdministrator())){ if(Session.isLoggedIn() && (Session.isClaimsCurator() || Session.isPortalAdministrator())){
this.isAuthorized = true; this.isAuthorized = true;
}else { }else {
@ -121,4 +124,22 @@ if( this.properties.adminToolsAPIURL && this.communityId ){
getCurrentRoute(){ getCurrentRoute(){
return this.router.url.split('?')[0]; return this.router.url.split('?')[0];
} }
isTheActiveMenu(menu:RootMenuItem):boolean{
let currentRoute = this.getCurrentRoute();
if(!menu.rootItem.markAsActive){
return false;
}
if( currentRoute == menu.rootItem.route){
this.activeRouteEnabled = true;
return true;
}else if(menu.items.length >0){
for (let menuItem of menu.items){
if(menuItem.route == currentRoute){
this.activeRouteEnabled = true;
return true;
}
}
}
return false;
}
} }