[DURACOM-426] add vocabulary template in item field, adapt tests

FrancescoMolinaro · FrancescoMolinaro · commit e316b115fe09 · 2026-01-22T16:04:57.000+01:00
diff --git a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.spec.ts b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.spec.ts
@@ -11,6 +11,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
 import { isNotEmpty } from '@dspace/shared/utils/empty.util';
 import {
@@ -23,6 +24,10 @@ import { MetadataUriValuesComponent } from './metadata-uri-values.component';
 
 let comp: MetadataUriValuesComponent;
 let fixture: ComponentFixture<MetadataUriValuesComponent>;
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
+
 
 const mockMetadata = [
   {
@@ -38,6 +43,7 @@ const mockSeperator = '<br/>';
 const mockLabel = 'fake.message';
 const mockLinkText = 'fake link text';
 
+
 describe('MetadataUriValuesComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -49,6 +55,7 @@ describe('MetadataUriValuesComponent', () => {
       }), MetadataUriValuesComponent],
       providers: [
         { provide: APP_CONFIG, useValue: environment },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(MetadataUriValuesComponent, {
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.html b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
@@ -1,10 +1,11 @@
 <ds-metadata-field-wrapper [label]="label | translate">
   @for (mdValue of mdValues; track mdValue; let last = $last) {
+    @let isVocabulary = isControlledVocabulary(mdValue);
     <!--
-    Choose a template. Priority: markdown, link, browse link.
+    Choose a template. Priority: vocabulary, markdown, link, browse link.
     -->
-      <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? browselink : simple)));
-        context: {value: mdValue.value, img}">
+      <ng-container *ngTemplateOutlet="(isVocabulary ? controlledVocabulary : (renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? browselink : simple))));
+        context: {value: (isVocabulary ? mdValue : mdValue.value), img}">
     </ng-container>
     @if (!last) {
       <span class="separator" [innerHTML]="separator"></span>
@@ -50,3 +51,14 @@
     [routerLink]="['/browse', browseDefinition.id]"
   [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
 </ng-template>
+
+
+<!-- Render translated valueof vocabulary entry -->
+<ng-template #controlledVocabulary let-value="value">
+  @let label = getVocabularyValue(value) | async;
+  @if (hasBrowseDefinition()) {
+    <ng-container *ngTemplateOutlet="browselink; context: {value: label}"></ng-container>
+  } @else {
+    <span class="dont-break-out preserve-line-breaks">{{label}}</span>
+  }
+</ng-template>
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts b/src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts
@@ -9,12 +9,17 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { buildPaginatedList } from '@dspace/core/data/paginated-list.model';
 import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { PageInfo } from '@dspace/core/shared/page-info.model';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject } from '@dspace/core/utilities/remote-data.utils';
 import {
   TranslateLoader,
   TranslateModule,
 } from '@ngx-translate/core';
+import { of } from 'rxjs';
 
 import { environment } from '../../../../environments/environment';
 import { MetadataValuesComponent } from './metadata-values.component';
@@ -37,6 +42,18 @@ const mockMetadata = [
   }] as MetadataValue[];
 const mockSeperator = '<br/>';
 const mockLabel = 'fake.message';
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
+
+const controlledMetadata = {
+  value: 'Original Value',
+  authority: 'srsc:1234',
+  uuid: 'metadata-uuid-1',
+  language: 'en_US',
+  place: null,
+  confidence: 600,
+} as MetadataValue;
 
 describe('MetadataValuesComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -49,6 +66,7 @@ describe('MetadataValuesComponent', () => {
       }), MetadataValuesComponent],
       providers: [
         { provide: APP_CONFIG, useValue: environment },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(MetadataValuesComponent, {
@@ -99,4 +117,29 @@ describe('MetadataValuesComponent', () => {
     expect(result.rel).toBe('noopener noreferrer');
   });
 
+  it('should detect controlled vocabulary metadata', () => {
+    const result = comp.isControlledVocabulary(controlledMetadata);
+    expect(result).toBeTrue();
+  });
+
+  it('should return translated vocabulary value when available', (done) => {
+    const vocabEntry = {
+      display: 'Translated Value',
+    };
+
+    vocabularyServiceMock.getPublicVocabularyEntryByID.and.returnValue(
+      of(
+        createSuccessfulRemoteDataObject(
+          buildPaginatedList(new PageInfo(), [vocabEntry]),
+        ),
+      ),
+    );
+
+    comp.getVocabularyValue(controlledMetadata).subscribe((value) => {
+      expect(value).toBe('Translated Value');
+      done();
+    });
+  });
+
+
 });
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts b/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
@@ -1,4 +1,7 @@
-import { NgTemplateOutlet } from '@angular/common';
+import {
+  AsyncPipe,
+  NgTemplateOutlet,
+} from '@angular/common';
 import {
   Component,
   Inject,
@@ -13,9 +16,20 @@ import {
 } from '@dspace/config/app-config.interface';
 import { BrowseDefinition } from '@dspace/core/shared/browse-definition.model';
 import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import {
+  getFirstCompletedRemoteData,
+  getPaginatedListPayload,
+  getRemoteDataPayload,
+} from '@dspace/core/shared/operators';
 import { VALUE_LIST_BROWSE_DEFINITION } from '@dspace/core/shared/value-list-browse-definition.resource-type';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { hasValue } from '@dspace/shared/utils/empty.util';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import {
+  map,
+  take,
+} from 'rxjs/operators';
 
 import { environment } from '../../../../environments/environment';
 import { MetadataFieldWrapperComponent } from '../../../shared/metadata-field-wrapper/metadata-field-wrapper.component';
@@ -31,6 +45,7 @@ import { ImageField } from '../../simple/field-components/specific-field/image-f
   styleUrls: ['./metadata-values.component.scss'],
   templateUrl: './metadata-values.component.html',
   imports: [
+    AsyncPipe,
     MarkdownDirective,
     MetadataFieldWrapperComponent,
     NgTemplateOutlet,
@@ -41,6 +56,7 @@ import { ImageField } from '../../simple/field-components/specific-field/image-f
 export class MetadataValuesComponent implements OnChanges {
 
   constructor(
+    protected vocabularyService: VocabularyService,
     @Inject(APP_CONFIG) private appConfig: AppConfig,
   ) {
   }
@@ -110,6 +126,30 @@ export class MetadataValuesComponent implements OnChanges {
     return false;
   }
 
+  /**
+   * Whether the metadata is a controlled vocabulary
+   * @param value A MetadataValue being displayed
+   */
+  isControlledVocabulary(metadataValue: MetadataValue): boolean {
+    const vocabularyId = this.getVocabularyIdFromAuthorityValue(metadataValue);
+    return hasValue(this.getVocabularyName(vocabularyId));
+  }
+
+  /**
+   * Return configured vocabulary name for this metadata value
+   */
+  getVocabularyName(vocabularyId: string): string | null {
+    return this.appConfig.vocabularies.find(vocabulary => vocabulary.vocabulary === vocabularyId)?.vocabulary;
+  }
+
+  /**
+   * Get value from authority for vocabulary lookup
+   */
+  getVocabularyIdFromAuthorityValue(metadataValue: MetadataValue): string {
+    const authority = metadataValue.authority ? metadataValue.authority.split(':') : undefined;
+    return authority?.length > 1 ? authority[0] : null;
+  }
+
   /**
    * Return a queryparams object for use in a link, with the key dependent on whether this browse
    * definition is metadata browse, or item browse
@@ -146,4 +186,21 @@ export class MetadataValuesComponent implements OnChanges {
       return { target: '_blank', rel: 'noopener noreferrer' };
     }
   }
+
+  /**
+   * Get vocabulary translated value from metadata value
+   */
+  getVocabularyValue(metadataValue: MetadataValue): Observable<string> {
+    const vocabularyId = this.getVocabularyIdFromAuthorityValue(metadataValue);
+    const vocabularyName = this.getVocabularyName(vocabularyId);
+
+    return this.vocabularyService.getPublicVocabularyEntryByID(vocabularyName, metadataValue.authority.split(':')[1]).pipe(
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      getPaginatedListPayload(),
+      map((res) => res?.length > 0 ? res[0] : null),
+      map((res) => res?.display ?? metadataValue.value),
+      take(1),
+    );
+  }
 }
diff --git a/src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.spec.ts
@@ -11,6 +11,7 @@ import { By } from '@angular/platform-browser';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { BrowseService } from '@dspace/core/browse/browse.service';
 import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
 import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
@@ -24,6 +25,9 @@ import { ItemPageAbstractFieldComponent } from './item-page-abstract-field.compo
 
 let comp: ItemPageAbstractFieldComponent;
 let fixture: ComponentFixture<ItemPageAbstractFieldComponent>;
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
 
 describe('ItemPageAbstractFieldComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -41,6 +45,7 @@ describe('ItemPageAbstractFieldComponent', () => {
         { provide: APP_CONFIG, useValue: environment },
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(ItemPageAbstractFieldComponent, {
diff --git a/src/app/item-page/simple/field-components/specific-field/author/item-page-author-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/author/item-page-author-field.component.spec.ts
@@ -11,6 +11,7 @@ import { ActivatedRoute } from '@angular/router';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { BrowseService } from '@dspace/core/browse/browse.service';
 import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
@@ -30,6 +31,9 @@ let fixture: ComponentFixture<ItemPageAuthorFieldComponent>;
 
 const mockFields = ['dc.contributor.author', 'dc.creator', 'dc.contributor'];
 const mockValue = 'test value';
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
 
 describe('ItemPageAuthorFieldComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -45,6 +49,7 @@ describe('ItemPageAuthorFieldComponent', () => {
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(ItemPageAuthorFieldComponent, {
diff --git a/src/app/item-page/simple/field-components/specific-field/date/item-page-date-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/date/item-page-date-field.component.spec.ts
@@ -11,6 +11,7 @@ import { ActivatedRoute } from '@angular/router';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { BrowseService } from '@dspace/core/browse/browse.service';
 import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
@@ -28,8 +29,12 @@ import { ItemPageDateFieldComponent } from './item-page-date-field.component';
 let comp: ItemPageDateFieldComponent;
 let fixture: ComponentFixture<ItemPageDateFieldComponent>;
 
+
 const mockField = 'dc.date.issued';
 const mockValue = 'test value';
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
 
 describe('ItemPageDateFieldComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -45,6 +50,7 @@ describe('ItemPageDateFieldComponent', () => {
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(ItemPageDateFieldComponent, {
diff --git a/src/app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component.spec.ts
@@ -11,6 +11,7 @@ import { ActivatedRoute } from '@angular/router';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { BrowseService } from '@dspace/core/browse/browse.service';
 import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
@@ -32,6 +33,10 @@ const mockValue = 'test value';
 const mockField = 'dc.test';
 const mockLabel = 'test label';
 const mockFields = [mockField];
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
+
 
 describe('GenericItemPageFieldComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -47,6 +52,7 @@ describe('GenericItemPageFieldComponent', () => {
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(GenericItemPageFieldComponent, {
diff --git a/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts
@@ -10,6 +10,7 @@ import { By } from '@angular/platform-browser';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
 import { BrowseService } from '@dspace/core/browse/browse.service';
 import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
 import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
@@ -37,6 +38,10 @@ const mockImg = {
   alt: 'item.page.image.alt.ROR',
   heightVar: '--ds-item-page-img-field-ror-inline-height',
 } as ImageField;
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
+
 
 describe('ItemPageImgFieldComponent', () => {
 
@@ -52,6 +57,7 @@ describe('ItemPageImgFieldComponent', () => {
         { provide: APP_CONFIG, useValue: environment },
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     })
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
@@ -18,6 +18,7 @@ import {
   MetadataMap,
   MetadataValue,
 } from '@dspace/core/shared/metadata.models';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
 import { BrowseDefinitionDataServiceStub } from '@dspace/core/testing/browse-definition-data-service.stub';
 import { BrowseServiceStub } from '@dspace/core/testing/browse-service.stub';
 import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
@@ -43,6 +44,9 @@ const mockLabel = 'test label';
 const mockAuthorField = 'dc.contributor.author';
 const mockDateIssuedField = 'dc.date.issued';
 const mockFields = [mockField, mockAuthorField, mockDateIssuedField];
+const vocabularyServiceMock = {
+  getPublicVocabularyEntryByID: jasmine.createSpy('getPublicVocabularyEntryByID'),
+};
 
 describe('ItemPageFieldComponent', () => {
 
@@ -70,6 +74,7 @@ describe('ItemPageFieldComponent', () => {
         { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
         { provide: BrowseService, useValue: BrowseServiceStub },
         { provide: MathService, useValue: {} },
+        { provide: VocabularyService, useValue: vocabularyServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(ItemPageFieldComponent, {
diff --git a/src/app/item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/uri/item-page-uri-field.component.spec.ts
