[DSC-2017] Fix problem with link in the item page navbar

Author: atarix83

src/app/cris-layout/cris-layout-loader/cris-layout-horizontal/cris-layout-navbar/cris-layout-navbar.component.html

@@ -11,11 +11,11 @@
             <div id="collapsingNav">
                 <ul class="navbar-nav mr-auto shadow-none">
                     <ng-container *ngIf="!!(activeTab$ |async)">
-                        <ds-cris-layout-sidebar-item *ngFor="let tab of tabs;" [tab]="tab" [layout]="'horizontal'" [activeTab]="(activeTab$ |async)"
+                        <ds-cris-layout-sidebar-item *ngFor="let tab of tabs;" [itemBaseUrl]="itemBaseUrl" [tab]="tab" [layout]="'horizontal'" [activeTab]="(activeTab$ |async)"
                             (tabSelectedChange)="setActiveTab($event)"></ds-cris-layout-sidebar-item>
                     </ng-container>
                 </ul>
             </div>
         </div>
     </div>
-</nav>
+</nav>

src/app/cris-layout/cris-layout-loader/cris-layout-vertical/cris-layout-sidebar/cris-layout-sidebar.component.html

@@ -4,7 +4,7 @@
     <div>
       <ul class="list-unstyled components mb-5">
         <ng-container *ngIf="!!(activeTab$ |async)">
-          <ds-cris-layout-sidebar-item *ngFor="let tab of tabs;" [tab]="tab" [layout]="'vertical'" [activeTab]="(activeTab$ |async)"
+          <ds-cris-layout-sidebar-item *ngFor="let tab of tabs;" [itemBaseUrl]="itemBaseUrl" [tab]="tab" [layout]="'vertical'" [activeTab]="(activeTab$ |async)"
             (tabSelectedChange)="setActiveTab($event)"></ds-cris-layout-sidebar-item>
         </ng-container>
       </ul>

src/app/cris-layout/cris-layout-loader/shared/cris-layout-tabs/cris-layout-tabs.component.ts

@@ -47,11 +47,16 @@ export abstract class CrisLayoutTabsComponent {
    */
   @Output() selectedTab = new EventEmitter<CrisLayoutTab>();
 
+  /**
+   * The item base url
+   */
+  itemBaseUrl: string;
 
   constructor(public location: Location, public router: Router, public route: ActivatedRoute) {
   }
 
   init(): void {
+    this.itemBaseUrl = getItemPageRoute(this.item) + '/';
     if (this.tabs && this.tabs.length > 0) {
       if (isNotNull(this.route.snapshot.paramMap.get('tab'))) {
         this.parseTabs(this.route.snapshot.paramMap.get('tab'));

src/app/cris-layout/cris-layout-loader/shared/sidebar-item/cris-layout-sidebar-item.component.html

@@ -1,9 +1,12 @@
 <li class="sidebar-section h-100" [ngClass]="{ 'active' : !!tab && !!activeTab && (tab.isActive || tab.id == activeTab.id), 'expanded': expanded, 'vertical': layout == 'vertical', 'horizontal': layout == 'horizontal' }">
     <div class="icon-wrapper" *ngIf="!tab.children || tab.children.length == 0 ">
-        <a class="nav-item shortcut-icon" href="javascript:;" [ngClass]="{ 'px-4 justify-content-between' : layout == 'vertical' }"
-            [title]="getTabHeader(tab)" (click)="$event.preventDefault();selectTab(tab)" [innerHTML]="getTabHeader(tab)">
-
-        </a>
+        <a class="nav-item shortcut-icon"
+           href="javascript:void(0);"
+           [ngClass]="{ 'px-4 justify-content-between' : layout == 'vertical' }"
+           [title]="getTabHeader(tab)"
+           [routerLink]="itemBaseUrl + tab.shortname"
+           (click)="$event.stopPropagation();$event.preventDefault();selectTab(tab)"
+           [innerHTML]="getTabHeader(tab)"></a>
     </div>
     <div *ngIf="!!tab.children && tab.children.length > 0 " class="sidebar-collapsible h-100">
         <a class="nav-item shortcut-icon" href="javascript:;" [ngClass]="{ 'px-4 justify-content-between' : layout == 'vertical' }"
@@ -19,10 +22,14 @@
         </a>
         <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="expanded">
             <li *ngFor="let subTab of tab.children" [ngClass]="{'active' : !!subTab && !!activeTab && subTab.id == activeTab.id}">
-                <a class="nav-item shortcut-icon" href="javascript:;" [ngClass]="{ 'px-4 justify-content-between' : layout == 'vertical' }"
-                    (click)="$event.preventDefault();selectTab(subTab)">
-                    <span id="sidebarName-{{subTab.id}}" class="pl-3 section-header-text" [innerHTML]="getTabHeader(subTab)">
-                    </span>
+                <a class="nav-item shortcut-icon"
+                   href="javascript:void(0);"
+                   [ngClass]="{ 'px-4 justify-content-between' : layout == 'vertical' }"
+                   [routerLink]="itemBaseUrl + subTab.shortname"
+                   (click)="$event.stopPropagation();$event.preventDefault();selectTab(subTab)">
+                  <span id="sidebarName-{{subTab.id}}"
+                        class="pl-3 section-header-text"
+                        [innerHTML]="getTabHeader(subTab)"></span>
                 </a>
             </li>
         </ul>

src/app/cris-layout/cris-layout-loader/shared/sidebar-item/cris-layout-sidebar-item.component.ts

@@ -4,6 +4,8 @@ import { CrisLayoutTab } from '../../../../core/layout/models/tab.model';
 import { rotate, rotateNavbar } from '../../../../shared/animations/rotate';
 import { slide } from '../../../../shared/animations/slide';
 import { TranslateService } from '@ngx-translate/core';
+import { Item } from '../../../../core/shared/item.model';
+import { getItemPageRoute } from '../../../../item-page/item-page-routing-paths';
 
 /**
  * This component defines the default layout for all tabs of DSpace Items.
@@ -17,6 +19,11 @@ import { TranslateService } from '@ngx-translate/core';
   animations: [rotate, slide, rotateNavbar]
 })
 export class CrisLayoutSidebarItemComponent {
+  /**
+   * Contains the items base url
+   */
+  @Input() itemBaseUrl: string;
+
   /**
    * The tab that will be shown
    */