[DURACOM-426] improve title configurability in popover, add link view in item preview

Author: FrancescoMolinaro

src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.html

@@ -7,7 +7,7 @@
         [entityType]="item.entityType"
       ></ds-metadata-link-view-avatar-popover>
     }
-    <span class="font-weight-bold h4 text-truncate"> {{item.firstMetadataValue('dc.title')}} </span>
+    <div class="font-weight-bold h4 text-truncate"> {{title}} </div>
   </div>
 
   @for (metadata of entityMetdataFields; track metadata) {

src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.spec.ts

@@ -92,7 +92,8 @@ describe('MetadataLinkViewPopoverComponent', () => {
       .withArgs('dc.identifier.uri').and.returnValue('http://example.com')
       .withArgs('dc.description.abstract').and.returnValue('Long text description')
       .withArgs('organization.identifier.ror').and.returnValue('https://ror.org/1234')
-      .withArgs('person.identifier.orcid').and.returnValue('https://orcid.org/0000-0000-0000-0000');
+      .withArgs('person.identifier.orcid').and.returnValue('https://orcid.org/0000-0000-0000-0000')
+      .withArgs('dc.nonexistent').and.returnValue(null);
 
     fixture.detectChanges();
   });
@@ -138,4 +139,40 @@ describe('MetadataLinkViewPopoverComponent', () => {
     const avatarPopoverElement = fixture.debugElement.query(By.css('ds-metadata-link-view-avatar-popover'));
     expect(avatarPopoverElement).toBeTruthy();
   });
+
+  describe('getTitleFromMetadataList', () => {
+
+    it('should return title from configured metadata when available', () => {
+      component.metadataLinkViewPopoverData = {
+        entityDataConfig: [
+          {
+            entityType: 'Publication',
+            metadataList: ['dc.title', 'dc.identifier.uri'],
+            titleMetadataList: ['dc.title', 'dc.identifier.uri'],
+          },
+        ],
+        fallbackMetdataList: [],
+      };
+
+      const title = component.getTitleFromMetadataList();
+      expect(title).toBe('Test Title, http://example.com');
+    });
+
+    it('should fallback to defaultTitleMetadataList when no configured title is present', () => {
+      component.metadataLinkViewPopoverData = {
+        entityDataConfig: [
+          {
+            entityType: 'Publication',
+            metadataList: ['dc.title', 'dc.identifier.uri'],
+            titleMetadataList: ['dc.nonexistent'],
+          },
+        ],
+        fallbackMetdataList: [],
+      };
+
+      const title = component.getTitleFromMetadataList();
+      expect(title).toBe('Test Title');
+    });
+  });
+
 });

src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.ts

@@ -80,6 +80,14 @@ export class MetadataLinkViewPopoverComponent implements OnInit {
    */
   isOtherEntityType = false;
 
+  /**
+   * The title to be displayed
+   */
+  title: string;
+
+  private readonly titleSeparator = ', ';
+  private readonly defaultTitleMetadataList = ['dc.title'];
+
   /**
    * If `metadataLinkViewPopoverData` is provided, it retrieves the metadata fields based on the entity type.
    * If no metadata fields are found for the entity type, it falls back to the fallback metadata list.
@@ -89,6 +97,7 @@ export class MetadataLinkViewPopoverComponent implements OnInit {
       const metadataFields = this.metadataLinkViewPopoverData.entityDataConfig.find((config) => config.entityType === this.item.entityType);
       this.entityMetdataFields = hasValue(metadataFields) ? metadataFields.metadataList : this.metadataLinkViewPopoverData.fallbackMetdataList;
       this.isOtherEntityType = hasNoValue(metadataFields);
+      this.title = this.getTitleFromMetadataList();
     }
   }
 
@@ -119,4 +128,15 @@ export class MetadataLinkViewPopoverComponent implements OnInit {
     const identifierSubtype = this.identifierSubtypeConfig.find((config) => config.name === subtype);
     return identifierSubtype;
   }
+
+  /**
+   * Generates the title for the popover based on the title metadata list.
+   * @returns The generated title as a string.
+   */
+  getTitleFromMetadataList(): string {
+    const titleMetadataList = this.metadataLinkViewPopoverData.entityDataConfig.find((config) => config.entityType === this.item.entityType)?.titleMetadataList;
+    const itemHasConfiguredTitle = titleMetadataList?.length && titleMetadataList.map(metadata => this.item.firstMetadataValue(metadata)).some(value => hasValue(value));
+    return (itemHasConfiguredTitle ? titleMetadataList : this.defaultTitleMetadataList)
+      .map(metadataField => this.item.firstMetadataValue(metadataField)).join(this.titleSeparator);
+  }
 }

src/app/shared/metadata-link-view/metadata-link-view.component.ts

@@ -131,7 +131,7 @@ export class MetadataLinkViewComponent implements OnInit {
    * @returns The created MetadataView object.
    */
   private createMetadataView(itemRD: RemoteData<Item>, metadataValue: MetadataValue): MetadataView {
-    if (itemRD.hasSucceeded) {
+    if (itemRD.hasSucceeded && itemRD.payload) {
       this.relatedItem = itemRD.payload;
       this.relatedDsoRoute = this.getItemPageRoute(this.relatedItem);
       return {

src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.html

@@ -30,10 +30,9 @@ <h2 [innerHTML]="dsoTitle" [ngClass]="{'lead': true,'text-muted': !item.hasMetad
                       >{{'mydspace.results.no-authors'
                     | translate}}</span>
                   }
-                  @for (author of item.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'], undefined, true); track author; let last = $last) {
-                    <span
-                      >
-                      <span [innerHTML]="author"><span [innerHTML]="author"></span></span>
+                  @for (author of authorMetadataList; track author.uuid; let last = $last) {
+                    <span class="item-list-authors">
+                      <ds-metadata-link-view [metadata]="author"></ds-metadata-link-view>
                       @if (!last) {
                         <span>; </span>
                       }

src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts

@@ -19,6 +19,7 @@ import {
 import { of } from 'rxjs';
 
 import { ThemedThumbnailComponent } from '../../../../thumbnail/themed-thumbnail.component';
+import { MetadataLinkViewComponent } from '../../../metadata-link-view/metadata-link-view.component';
 import { ThemedBadgesComponent } from '../../../object-collection/shared/badges/themed-badges.component';
 import { ItemCollectionComponent } from '../../../object-collection/shared/mydspace-item-collection/item-collection.component';
 import { ItemSubmitterComponent } from '../../../object-collection/shared/mydspace-item-submitter/item-submitter.component';
@@ -119,6 +120,7 @@ describe('ItemListPreviewComponent', () => {
           ThemedThumbnailComponent, ThemedBadgesComponent,
           TruncatableComponent, TruncatablePartComponent,
           ItemSubmitterComponent, ItemCollectionComponent,
+          MetadataLinkViewComponent,
         ],
       },
     }).compileComponents();
@@ -127,66 +129,44 @@ describe('ItemListPreviewComponent', () => {
   beforeEach(waitForAsync(() => {
     fixture = TestBed.createComponent(ItemListPreviewComponent);
     component = fixture.componentInstance;
-
-  }));
-
-  beforeEach(() => {
     component.object = { hitHighlights: {} } as any;
-  });
+    component.item = mockItemWithAuthorAndDate;
+    fixture.detectChanges();
+  }));
 
   describe('When showThumbnails is true', () => {
-    beforeEach(() => {
-      component.item = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
     it('should add the thumbnail element', () => {
       const thumbnail = fixture.debugElement.query(By.css('ds-thumbnail'));
       expect(thumbnail).toBeTruthy();
     });
   });
 
   describe('When the item has an author', () => {
-    beforeEach(() => {
-      component.item = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
-
     it('should show the author paragraph', () => {
-      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors ds-metadata-link-view'));
       expect(itemAuthorField).not.toBeNull();
     });
   });
 
   describe('When the item has no author', () => {
-    beforeEach(() => {
+    beforeEach(waitForAsync(() => {
       component.item = mockItemWithoutAuthorAndDate;
       fixture.detectChanges();
-    });
-
+    }));
     it('should not show the author paragraph', () => {
-      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors'));
+      const itemAuthorField = fixture.debugElement.query(By.css('span.item-list-authors ds-metadata-link-view'));
       expect(itemAuthorField).toBeNull();
     });
   });
 
   describe('When the item has an issuedate', () => {
-    beforeEach(() => {
-      component.item = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
-
     it('should show the issuedate span', () => {
       const dateField = fixture.debugElement.query(By.css('span.item-list-date'));
       expect(dateField).not.toBeNull();
     });
   });
 
   describe('When the item has no issuedate', () => {
-    beforeEach(() => {
-      component.item = mockItemWithoutAuthorAndDate;
-      fixture.detectChanges();
-    });
-
     it('should show the issuedate empty placeholder', () => {
       const dateField = fixture.debugElement.query(By.css('span.item-list-date'));
       expect(dateField).not.toBeNull();
@@ -205,54 +185,3 @@ describe('ItemListPreviewComponent', () => {
     });
   });
 });
-
-describe('ItemListPreviewComponent', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock,
-          },
-        }),
-        NoopAnimationsModule,
-        ItemListPreviewComponent, TruncatePipe,
-      ],
-      providers: [
-        { provide: 'objectElementProvider', useValue: { mockItemWithAuthorAndDate } },
-        { provide: APP_CONFIG, useValue: enviromentNoThumbs },
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).overrideComponent(ItemListPreviewComponent, {
-      add: { changeDetection: ChangeDetectionStrategy.Default },
-      remove: {
-        imports: [
-          ThemedThumbnailComponent, ThemedBadgesComponent,
-          TruncatableComponent, TruncatablePartComponent,
-          ItemSubmitterComponent, ItemCollectionComponent,
-        ],
-      },
-    }).compileComponents();
-  }));
-  beforeEach(waitForAsync(() => {
-    fixture = TestBed.createComponent(ItemListPreviewComponent);
-    component = fixture.componentInstance;
-
-  }));
-
-  beforeEach(() => {
-    component.object = { hitHighlights: {} } as any;
-  });
-
-  describe('When showThumbnails is true', () => {
-    beforeEach(() => {
-      component.item = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
-    it('should add the thumbnail element', () => {
-      const thumbnail = fixture.debugElement.query(By.css('ds-thumbnail'));
-      expect(thumbnail).toBeFalsy();
-    });
-  });
-});

src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts

@@ -15,12 +15,14 @@ import {
 import { DSONameService } from '@dspace/core/breadcrumbs/dso-name.service';
 import { Context } from '@dspace/core/shared/context.model';
 import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
 import { SearchResult } from '@dspace/core/shared/search/models/search-result.model';
 import { WorkflowItem } from '@dspace/core/submission/models/workflowitem.model';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ThemedThumbnailComponent } from '../../../../thumbnail/themed-thumbnail.component';
 import { fadeInOut } from '../../../animations/fade';
+import { MetadataLinkViewComponent } from '../../../metadata-link-view/metadata-link-view.component';
 import { ThemedBadgesComponent } from '../../../object-collection/shared/badges/themed-badges.component';
 import { ItemCollectionComponent } from '../../../object-collection/shared/mydspace-item-collection/item-collection.component';
 import { ItemSubmitterComponent } from '../../../object-collection/shared/mydspace-item-submitter/item-submitter.component';
@@ -39,6 +41,7 @@ import { TruncatablePartComponent } from '../../../truncatable/truncatable-part/
     AsyncPipe,
     ItemCollectionComponent,
     ItemSubmitterComponent,
+    MetadataLinkViewComponent,
     NgClass,
     ThemedBadgesComponent,
     ThemedThumbnailComponent,
@@ -81,6 +84,8 @@ export class ItemListPreviewComponent implements OnInit {
 
   dsoTitle: string;
 
+  authorMetadataList: MetadataValue[] = [];
+
   constructor(
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     public dsoNameService: DSONameService,
@@ -90,6 +95,7 @@ export class ItemListPreviewComponent implements OnInit {
   ngOnInit(): void {
     this.showThumbnails = this.appConfig.browseBy.showThumbnails;
     this.dsoTitle = this.dsoNameService.getHitHighlights(this.object, this.item, true);
+    this.authorMetadataList = this.item.allMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'], undefined, true);
   }
 
 

src/config/default-app-config.ts

@@ -732,6 +732,7 @@ export class DefaultAppConfig implements AppConfig {
       {
         entityType: 'Person',
         metadataList: ['person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract'],
+        titleMetadataList: ['person.givenName', 'person.familyName' ],
       },
       {
         entityType: 'OrgUnit',

src/config/metadata-link-view-popoverdata-config.interface.ts

@@ -20,4 +20,8 @@ export interface EntityDataConfig {
    * The list of metadata keys to display
    */
   metadataList: string[];
+  /**
+  * The list of title metadata keys to display as title (optional as default is on dc.title)
+  **/
+  titleMetadataList?: string[];
 }

src/environments/environment.test.ts

@@ -529,6 +529,7 @@ export const environment: BuildConfig = {
       {
         entityType: 'Person',
         metadataList: ['person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract'],
+        titleMetadataList: ['person.givenName', 'person.familyName' ],
       },
       {
         entityType: 'OrgUnit',