[DURACOM-445] add nav tabs to authority-related-entities-search, fix old module import

Author: FrancescoMolinaro

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -61,7 +61,7 @@
     @if (areAuthorityRelationsEnabled) {
       <ds-authority-related-entities-search
         [item]="object"
-        [configuration]="'RELATION.Person.publication'"
+        [configurations]="['RELATION.Person.researchoutputs', 'RELATION.Person.projects']"
       ></ds-authority-related-entities-search>
     } @else {
       <ds-tabbed-related-entities-search  [item]="object"

src/app/item-page/simple/related-entities/authority-related-entities-search/authority-related-entities-search.component.html

@@ -1,10 +1,41 @@
-@if (configuration) {
-  <ds-configuration-search-page class="w-100"
-                                [fixedFilterQuery]="searchFilter"
-                                [configuration]="configuration"
-                                [searchEnabled]="searchEnabled"
-                                [showScopeSelector]="false"
-  ></ds-configuration-search-page>
+@if (configurations.length > 1) {
+  <ul ngbNav #tabs="ngbNav"
+      [destroyOnHide]="true"
+      [activeId]="activeTab$ | async"
+      (navChange)="onTabChange($event)"
+      class="nav-tabs">
+
+    @for (config of configurations; track config) {
+      <li [ngbNavItem]="config">
+        <a ngbNavLink>
+          {{('item.page.relationships.' + config) | translate}}
+        </a>
+
+        <ng-template ngbNavContent>
+          <div class="mt-4">
+            <ds-configuration-search-page
+              class="w-100"
+              [fixedFilterQuery]="searchFilter"
+              [configuration]="config"
+              [searchEnabled]="searchEnabled"
+              [showScopeSelector]="false">
+            </ds-configuration-search-page>
+          </div>
+        </ng-template>
+      </li>
+    }
+  </ul>
+
+  <div [ngbNavOutlet]="tabs"></div>
 }
 
 
+@if (configurations.length === 1) {
+  <ds-configuration-search-page
+    class="w-100"
+    [fixedFilterQuery]="searchFilter"
+    [configuration]="configurations[0]"
+    [searchEnabled]="searchEnabled"
+    [showScopeSelector]="false">
+  </ds-configuration-search-page>
+}

src/app/item-page/simple/related-entities/authority-related-entities-search/authority-related-entities-search.component.spec.ts

@@ -4,8 +4,14 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { Item } from '@dspace/core/shared/item.model';
+import { RouterMock } from '@dspace/core/testing/router.mock';
 import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
 
 import { ThemedConfigurationSearchPageComponent } from '../../../../search-page/themed-configuration-search-page.component';
 import { AuthorityRelatedEntitiesSearchComponent } from './authority-related-entities-search.component';
@@ -18,11 +24,27 @@ describe('AuthorityRelatedEntitiesSearchComponent', () => {
   const mockItem = {
     id: 'test-id-123',
   } as Item;
+  const router = new RouterMock();
+
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), AuthorityRelatedEntitiesSearchComponent],
-      providers: [],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: of({ tab: 'relations-configuration' }),
+            snapshot: {
+              queryParams: {
+                scope: 'collection-uuid',
+                query: 'test',
+              },
+            },
+          },
+        },
+        { provide: Router, useValue: router },
+      ],
       schemas: [NO_ERRORS_SCHEMA],
     })
       .overrideComponent(AuthorityRelatedEntitiesSearchComponent, {
@@ -39,7 +61,7 @@ describe('AuthorityRelatedEntitiesSearchComponent', () => {
     fixture = TestBed.createComponent(AuthorityRelatedEntitiesSearchComponent);
     component = fixture.componentInstance;
     component.item = mockItem;
-    component.configuration = 'relations-configuration';
+    component.configurations = ['relations-configuration'];
     fixture.detectChanges();
   });
 
@@ -56,7 +78,7 @@ describe('AuthorityRelatedEntitiesSearchComponent', () => {
 
   it('should render configuration search page when configuration is provided', () => {
     component.item = mockItem;
-    component.configuration = 'test-config';
+    component.configurations = ['test-config'];
 
     fixture.detectChanges();
 
@@ -66,7 +88,7 @@ describe('AuthorityRelatedEntitiesSearchComponent', () => {
 
   it('should NOT render configuration search page when configuration is missing', () => {
     component.item = mockItem;
-    component.configuration = undefined;
+    component.configurations = [];
 
     fixture.detectChanges();
 

src/app/item-page/simple/related-entities/authority-related-entities-search/authority-related-entities-search.component.ts

@@ -1,42 +1,52 @@
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Input,
   OnInit,
 } from '@angular/core';
-import { Item } from '@dspace/core/shared/item.model';
+import {
+  NgbNav,
+  NgbNavContent,
+  NgbNavItem,
+  NgbNavLink,
+  NgbNavOutlet,
+} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { ThemedConfigurationSearchPageComponent } from '../../../../search-page/themed-configuration-search-page.component';
+import { TabbedRelatedEntitiesSearchComponent } from '../tabbed-related-entities-search/tabbed-related-entities-search.component';
 
 @Component({
   selector: 'ds-authority-related-entities-search',
   templateUrl: './authority-related-entities-search.component.html',
   imports: [
+    AsyncPipe,
+    NgbNav,
+    NgbNavContent,
+    NgbNavItem,
+    NgbNavLink,
+    NgbNavOutlet,
     ThemedConfigurationSearchPageComponent,
+    TranslateModule,
   ],
 })
 /**
  * A component to show related items as search results, based on authority value
  */
-export class AuthorityRelatedEntitiesSearchComponent implements OnInit {
+export class AuthorityRelatedEntitiesSearchComponent extends TabbedRelatedEntitiesSearchComponent implements OnInit {
   /**
    * Filter used for set scope in discovery invocation
    */
   searchFilter: string;
   /**
-   * Name of configuration for this box
-   */
-  @Input() configuration: string;
-  /**
-   * flag for enable/disable search bar
+   * Discovery configurations for search page
    */
-  @Input() searchEnabled = true;
+  @Input() configurations: string[] = [];
 
 
-  @Input() item: Item;
-
 
   ngOnInit() {
+    super.ngOnInit();
     this.searchFilter = `scope=${this.item.id}`;
   }
-
 }

src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html

@@ -1,6 +1,6 @@
 @if (relationTypes.length > 1) {
   <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs" role="tablist">
-    @for (relationType of relationTypes; track relationType) {
+    @for (relationType of relationTypes; track relationType.configuration) {
       <li [ngbNavItem]="relationType.filter" role="presentation">
         <a ngbNavLink role="tab">
           {{'item.page.relationships.' + relationType.label | translate}}

src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.ts

@@ -9,7 +9,13 @@ import {
   Router,
 } from '@angular/router';
 import { Item } from '@dspace/core/shared/item.model';
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbNav,
+  NgbNavContent,
+  NgbNavItem,
+  NgbNavLink,
+  NgbNavOutlet,
+} from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -22,7 +28,11 @@ import { RelatedEntitiesSearchComponent } from '../related-entities-search/relat
   templateUrl: './tabbed-related-entities-search.component.html',
   imports: [
     AsyncPipe,
-    NgbNavModule,
+    NgbNav,
+    NgbNavContent,
+    NgbNavItem,
+    NgbNavLink,
+    NgbNavOutlet,
     RelatedEntitiesSearchComponent,
     TranslateModule,
     VarDirective,
@@ -66,8 +76,8 @@ export class TabbedRelatedEntitiesSearchComponent implements OnInit {
    */
   activeTab$: Observable<string>;
 
-  constructor(private route: ActivatedRoute,
-              private router: Router) {
+  constructor(protected route: ActivatedRoute,
+              protected router: Router) {
   }
 
   /**

src/assets/i18n/en.json5

@@ -3005,6 +3005,10 @@
 
   "item.page.relationships.isOrgUnitOfProject": "Research Projects",
 
+  "item.page.relationships.RELATION.Person.researchoutputs": "Publications",
+
+  "item.page.relationships.RELATION.Person.projects": "Projects",
+
   "item.page.subject": "Keywords",
 
   "item.page.uri": "URI",
@@ -4621,6 +4625,10 @@
 
   "resource-policies.table.headers.title.for.collection": "Policies for Collection",
 
+  "RELATION.Person.researchoutputs.search.results.head": "Research Output",
+
+  "RELATION.Person.projects.search.results.head": "Projects",
+
   "root.skip-to-content": "Skip to main content",
 
   "search.description": "",