[DSC-1021] Fixed Hierarchical vocabulary rendering in item-detail.

Author: vins01-4science

src/app/core/submission/vocabularies/vocabulary.service.ts

@@ -1,17 +1,14 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { first, map, mergeMap, switchMap } from 'rxjs/operators';
-import { FollowLinkConfig, followLink } from '../../../shared/utils/follow-link-config.model';
+import { followLink, FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { RequestService } from '../../data/request.service';
 import { RemoteData } from '../../data/remote-data';
 import { PaginatedList } from '../../data/paginated-list.model';
 import { Vocabulary } from './models/vocabulary.model';
 import { VocabularyEntry } from './models/vocabulary-entry.model';
 import { hasValue, isNotEmpty } from '../../../shared/empty.util';
-import {
-  getFirstSucceededRemoteDataPayload,
-  getFirstSucceededRemoteListPayload
-} from '../../shared/operators';
+import { getFirstSucceededRemoteDataPayload, getFirstSucceededRemoteListPayload } from '../../shared/operators';
 import { VocabularyFindOptions } from './models/vocabulary-find-options.model';
 import { VocabularyEntryDetail } from './models/vocabulary-entry-detail.model';
 import { RequestParam } from '../../cache/models/request-param.model';
@@ -153,8 +150,27 @@ export class VocabularyService {
    */
   getPublicVocabularyEntryByValue(vocabularyName: string, value: string): Observable<RemoteData<PaginatedList<VocabularyEntryDetail>>> {
     const params: RequestParam[] = [
-      new RequestParam('filter',value),
-      new RequestParam('exact','true')
+      new RequestParam('filter', value),
+      new RequestParam('exact', 'true')
+    ];
+    const options = Object.assign(new FindListOptions(), {
+      searchParams: params,
+      elementsPerPage: 1,
+    });
+    const href$ = this.vocabularyDataService.getFindAllHref(options, vocabularyName + '/entries');
+    return this.vocabularyEntryDetailDataService.findListByHref(href$);
+  }
+
+  /**
+   * Get the display value for a hierarchical vocabulary item,
+   * given the vocabulary name and the entryID of that vocabulary-entry
+   *
+   * @param vocabularyName
+   * @param entryID
+   */
+  getPublicVocabularyEntryByID(vocabularyName: string, entryID: string): Observable<RemoteData<PaginatedList<VocabularyEntryDetail>>> {
+    const params: RequestParam[] = [
+      new RequestParam('entryID', entryID)
     ];
     const options = Object.assign(new FindListOptions(), {
       searchParams: params,

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.spec.ts

@@ -6,8 +6,8 @@ import { TranslateLoaderMock } from '../../../../../../../shared/mocks/translate
 import { VocabularyService } from '../../../../../../../core/submission/vocabularies/vocabulary.service';
 import { Item } from '../../../../../../../core/shared/item.model';
 import { EMPTY, of } from 'rxjs';
-import {AuthService} from '../../../../../../../core/auth/auth.service';
-import {AuthServiceStub} from '../../../../../../../shared/testing/auth-service.stub';
+import { AuthService } from '../../../../../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../../../../../shared/testing/auth-service.stub';
 import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { DsDatePipe } from '../../../../../../pipes/ds-date.pipe';
 
@@ -76,14 +76,18 @@ describe('ValuepairComponent', () => {
         return of('Italian');
       case 'common_iso_languages/en':
         return of('English');
-      case 'types':
+      case 'types/types:asd':
         return of('Value');
       default:
         return EMPTY;
     }
   };
 
-  const vocabularyServiceSpy = jasmine.createSpyObj('vocabularyService', { getPublicVocabularyEntryByValue: EMPTY });
+  const vocabularyServiceSpy =
+    jasmine.createSpyObj(
+      'vocabularyService',
+      { getPublicVocabularyEntryByValue: EMPTY, getPublicVocabularyEntryByID: EMPTY }
+    );
 
   describe('when the vocabulary has no authority', () => {
 
@@ -162,7 +166,7 @@ describe('ValuepairComponent', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(ValuepairComponent);
       component = fixture.componentInstance;
-      vocabularyServiceSpy.getPublicVocabularyEntryByValue.and.callFake(vocabularyEntriesMock);
+      vocabularyServiceSpy.getPublicVocabularyEntryByID.and.callFake(vocabularyEntriesMock);
       fixture.detectChanges();
     });
 
@@ -172,7 +176,7 @@ describe('ValuepairComponent', () => {
 
 
     it('should ...', () => {
-      expect(vocabularyService.getPublicVocabularyEntryByValue).toHaveBeenCalledWith(VOCABULARY_NAME_2, 'asd');
+      expect(vocabularyService.getPublicVocabularyEntryByID).toHaveBeenCalledWith(VOCABULARY_NAME_2, `${VOCABULARY_NAME_2}:asd`);
     });
 
 

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.ts

@@ -1,14 +1,15 @@
 import { Component, Inject, OnInit } from '@angular/core';
 
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, interval, race } from 'rxjs';
-import { map, mapTo, take } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, take } from 'rxjs/operators';
 
 import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
 import { VocabularyService } from '../../../../../../../core/submission/vocabularies/vocabulary.service';
 import {
-  getFirstSucceededRemoteDataPayload,
-  getPaginatedListPayload
+  getFirstCompletedRemoteData,
+  getPaginatedListPayload,
+  getRemoteDataPayload
 } from '../../../../../../../core/shared/operators';
 import { AuthService } from '../../../../../../../core/auth/auth.service';
 import { RenderingTypeValueModelComponent } from '../rendering-type-value.model';
@@ -49,21 +50,23 @@ export class ValuepairComponent extends RenderingTypeValueModelComponent impleme
 
     const vocabularyName = this.renderingSubType;
     const authority = this.metadataValue.authority ? this.metadataValue.authority.split(':') : undefined;
-    const isControlledVocabulary =  authority?.length > 1 && authority[0] === vocabularyName;
-    const metadataValue = isControlledVocabulary ? authority[1] : this.metadataValue.value;
+    const isControlledVocabulary = authority?.length > 1 && authority[0] === vocabularyName;
 
-    const entry$ = this.vocabularyService.getPublicVocabularyEntryByValue(vocabularyName, metadataValue).pipe(
-      getFirstSucceededRemoteDataPayload(),
-      getPaginatedListPayload(),
-      map((res) => res[0]?.display ?? this.metadataValue.value),
-    );
-
-    // fallback values to be shown if the display value cannot be retrieved
-    const initValue$ = interval(5000).pipe(mapTo(this.metadataValue.value));
+    let vocabularyEntry$ =
+      this.vocabularyService.getPublicVocabularyEntryByValue(vocabularyName, this.metadataValue.value);
+    if (!!isControlledVocabulary) {
+      vocabularyEntry$ =
+        this.vocabularyService.getPublicVocabularyEntryByID(vocabularyName, this.metadataValue.authority);
+    }
 
-    race([entry$, initValue$]).pipe(take(1)).subscribe((value: string) => {
-      this.value$.next(value);
-    });
+    vocabularyEntry$.pipe(
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      getPaginatedListPayload(),
+      map((res) => res?.length > 0 ? res[0] : null),
+      map((res) => res?.display ?? this.metadataValue.value),
+      take(1)
+    ).subscribe(value => this.value$.next(value));
 
   }