[Trunk|Library]: 1. Add a sideBarMenuItem class in menu.ts. 2. Create a new component for sidebar menu.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@55405 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
eb5dad3b66
commit
d9733cbf66
|
|
@ -1,25 +1,33 @@
|
|||
export class MenuItem {
|
||||
id:string = ""; // for root menu in order to close the dropdown when clicked
|
||||
title: string = "";
|
||||
url:string = ""; // external url
|
||||
route:string = ""; // internal url - using angular routing and components
|
||||
needsAuthorization:boolean = false; // needs admin rights - mainly for user menu at this point
|
||||
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
|
||||
params:any = {};
|
||||
constructor(id:string, title:string, url:string, route:string, needsAuthorization:boolean, entitiesRequired:string[],routeRequired:string[], params){
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.url = url;
|
||||
this.route = route;
|
||||
this.needsAuthorization = needsAuthorization;
|
||||
this.entitiesRequired = entitiesRequired;
|
||||
this.routeRequired = routeRequired;
|
||||
this.params = params;
|
||||
}
|
||||
id: string = ""; // for root menu in order to close the dropdown when clicked
|
||||
title: string = "";
|
||||
url: string = ""; // external url
|
||||
route: string = ""; // internal url - using angular routing and components
|
||||
needsAuthorization: boolean = false; // needs admin rights - mainly for user menu at this point
|
||||
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
|
||||
params: any = {};
|
||||
|
||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.url = url;
|
||||
this.route = route;
|
||||
this.needsAuthorization = needsAuthorization;
|
||||
this.entitiesRequired = entitiesRequired;
|
||||
this.routeRequired = routeRequired;
|
||||
this.params = params;
|
||||
}
|
||||
export class RootMenuItem {
|
||||
rootItem:MenuItem;
|
||||
items:MenuItem[]=[];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class RootMenuItem {
|
||||
rootItem: MenuItem;
|
||||
items: MenuItem[] = [];
|
||||
}
|
||||
|
||||
export class SideMenuItem {
|
||||
rootItem: MenuItem;
|
||||
items: RootMenuItem[] = [];
|
||||
ukIcon: string = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<ul class="uk-nav uk-nav-default sidebar">
|
||||
<li class="uk-nav-header uk-parent" *ngFor="let menu of menuItems">
|
||||
<a *ngIf="menu.rootItem.route && menu.rootItem.route != ''"
|
||||
[routerLink]="menu.rootItem.route" routerLinkActive="active" [queryParams]=menu.rootItem.params>
|
||||
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!menu.rootItem.route || menu.rootItem.route == '') && (menu.rootItem.url && menu.rootItem.url != '')"
|
||||
[href]="menu.rootItem.url" routerLinkActive="active" target="_blank">
|
||||
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
</a>
|
||||
<span *ngIf="!menu.rootItem.route || menu.rootItem.route == ''"><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
|
||||
<li *ngFor="let item of menu.items">
|
||||
<a *ngIf="item.rootItem.route && item.rootItem.route != ''" [routerLink]="item.rootItem.route" routerLinkActive="active" [queryParams]=item.rootItem.params>
|
||||
<span>{{item.rootItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!item.rootItem.route || item.rootItem.route == '') && (item.rootItem.url && item.rootItem.url != '')"
|
||||
[href]="item.rootItem.url" routerLinkActive="active" target="_blank">
|
||||
<span>{{item.rootItem.title}}</span>
|
||||
</a>
|
||||
<ul *ngIf="item.items.length > 0" class="uk-nav-sub">
|
||||
<li *ngFor="let subItem of item.items">
|
||||
<a *ngIf="subItem.route && subItem.route != ''" [routerLink]="subItem.route" routerLinkActive="active" [queryParams]=subItem.params>
|
||||
<span>{{subItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!subItem.route || subItem.route == '') && (subItem.url && subItem.url != '')"
|
||||
[href]="subItem.url" routerLinkActive="active" target="_blank">
|
||||
<span>{{subItem.title}}</span>
|
||||
</a>
|
||||
<span *ngIf="!subItem.route || subItem.route == ''">{{subItem.title}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {SideMenuItem} from "../menu";
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar',
|
||||
templateUrl: 'sideBar.component.html'
|
||||
})
|
||||
export class SideBarComponent {
|
||||
@Input() communityId: string = '';
|
||||
@Input() menuItems: SideMenuItem[] = [];
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
import {SideBarComponent} from './sideBar.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule
|
||||
],
|
||||
declarations: [
|
||||
SideBarComponent
|
||||
],
|
||||
providers: [],
|
||||
exports: [
|
||||
SideBarComponent
|
||||
]
|
||||
})
|
||||
export class SideBarModule {
|
||||
}
|
||||
Loading…
Reference in New Issue