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

login/userMini.component.ts

@@ -15,20 +15,26 @@ declare var logoutClicked;
 <ul *ngIf="!mobileView"  class="uk-navbar-nav">
    <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 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) {

sharedComponents/navigationBar.component.html

@@ -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-->
-                     <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">
                            <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>

sharedComponents/navigationBar.component.ts

@@ -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;