Merged in dspacecris7-DSC-99 (pull request #39)

[DSC-99] Provide a valuepair rendering type for the item detail

Approved-by: Giuseppe Digilio

Author: Davide Negretti

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

@@ -209,6 +209,24 @@ export class VocabularyService {
 
   }
 
+  /**
+   * Get the display value for a vocabulary item, given the vocabulary name and the item value
+   * @param vocabularyName
+   * @param value
+   */
+  getPublicVocabularyEntryByValue(vocabularyName: string, value: string): Observable<RemoteData<PaginatedList<VocabularyEntryDetail>>> {
+    const params: RequestParam[] = [
+      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.findAllByHref(href$);
+  }
+
   /**
    * Return the {@link VocabularyEntry} list for a given value
    *

src/app/layout/default-layout/boxes/components/metadata-box.decorator.ts

@@ -12,6 +12,7 @@ export enum FieldRenderingType {
   INLINE = 'INLINE',
   ORCID = 'ORCID',
   TAG = 'TAG',
+  VALUEPAIR = 'VALUEPAIR',
 }
 
 const fieldType = new Map();

src/app/layout/default-layout/boxes/components/valuepair/valuepair.component.html

@@ -0,0 +1,11 @@
+<div class="{{containerStyle}}">
+  <span *ngIf="!nested" class="{{labelStyle}}">
+    {{label}}
+  </span>
+  <div [class]="'d-flex flex-column ' + valueStyle">
+    <span *ngFor="let value of (values | async)">
+      {{ value }}
+    </span>
+  </div>
+
+</div>

src/app/layout/default-layout/boxes/components/valuepair/valuepair.component.scss

@@ -0,0 +1 @@
+// TODO to be implemented

src/app/layout/default-layout/boxes/components/valuepair/valuepair.component.spec.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, from, interval, race } from 'rxjs';
+import { map, mapTo, mergeMap, reduce, take } from 'rxjs/operators';
+
+import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeModelComponent } from '../rendering-type.model';
+import { VocabularyService } from '../../../../../core/submission/vocabularies/vocabulary.service';
+import { getFirstSucceededRemoteDataPayload, getPaginatedListPayload } from '../../../../../core/shared/operators';
+import { AuthService } from '../../../../../core/auth/auth.service';
+
+/**
+ * This component renders the valuepair (value + display) metadata fields.
+ */
+@Component({
+  // tslint:disable-next-line: component-selector
+  selector: 'span[ds-valuepair]',
+  templateUrl: './valuepair.component.html',
+  styleUrls: ['./valuepair.component.scss']
+})
+@MetadataBoxFieldRendering(FieldRenderingType.VALUEPAIR)
+export class ValuepairComponent extends RenderingTypeModelComponent implements OnInit {
+
+  /**
+   * list of values
+   */
+  values: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+
+  constructor(
+    protected translateService: TranslateService,
+    protected vocabularyService: VocabularyService,
+    protected authService: AuthService,) {
+    super(translateService);
+  }
+
+  ngOnInit(): void {
+    let itemsToBeRendered = [];
+    if (this.indexToBeRendered >= 0) {
+      itemsToBeRendered.push(this.metadataValues[this.indexToBeRendered]);
+    } else {
+      itemsToBeRendered = [...this.metadataValues];
+    }
+
+    const entries$ = from(itemsToBeRendered).pipe(
+      mergeMap((metadataValue) => {
+        return this.vocabularyService.getPublicVocabularyEntryByValue('common_iso_languages', metadataValue).pipe(
+          getFirstSucceededRemoteDataPayload(),
+          getPaginatedListPayload(),
+          map((res) => res[0]?.display ?? metadataValue),
+        );
+      }),
+      reduce((acc: any, value: any) => [...acc, value], []),
+    );
+
+    this.vocabularyService.getPublicVocabularyEntryByValue('common_iso_languages', 'it').pipe(
+      getFirstSucceededRemoteDataPayload(),
+      getPaginatedListPayload(),
+    );
+
+    const initValues$ = interval(5000).pipe(mapTo(itemsToBeRendered));
+
+    race([entries$, initValues$]).pipe(take(1)).subscribe((values: string[]) => {
+      this.values.next(values);
+    });
+
+  }
+
+}

src/app/layout/default-layout/boxes/components/valuepair/valuepair.component.ts

@@ -66,7 +66,7 @@ export class RowComponent implements OnInit {
       .filter(field => this.hasFieldMetadataComponent(field))
       .forEach((field) => {
         const rendering = this.computeRendering(field);
-        const subtype = this.computeSubType(rendering);
+        const subtype = this.computeSubType(field);
         const factory = this.computeComponentFactory(rendering);
         const metadataComponentRef = this.generateComponentRef(factory, field, rendering);
         this.populateComponent(metadataComponentRef, field, subtype);
@@ -87,9 +87,11 @@ export class RowComponent implements OnInit {
       (field.fieldType === 'METADATA' && this.item.firstMetadataValue(field.metadata));
   }
 
-  computeSubType(rendering: string | FieldRenderingType): string {
+  computeSubType(field: LayoutField): string | FieldRenderingType {
+    const rendering = field.rendering;
     let subtype: string;
-    if (rendering.indexOf('.') > -1) {
+
+    if (rendering?.indexOf('.') > -1) {
       const values = rendering.split('.');
       subtype = values[1];
     }
@@ -99,7 +101,6 @@ export class RowComponent implements OnInit {
   computeRendering(field: LayoutField): string | FieldRenderingType {
     let rendering = hasValue(field.rendering) ? field.rendering : FieldRenderingType.TEXT;
 
-
     if (rendering.indexOf('.') > -1) {
       const values = rendering.split('.');
       rendering = values[0];

src/app/layout/default-layout/boxes/metadata/row/row.component.ts

@@ -31,6 +31,7 @@ import { ContextMenuModule } from '../shared/context-menu/context-menu.module';
 import { TableComponent } from './default-layout/boxes/components/table/table.component';
 import { InlineComponent } from './default-layout/boxes/components/inline/inline.component';
 import { OrcidComponent } from './default-layout/boxes/components/orcid/orcid.component';
+import { ValuepairComponent } from './default-layout/boxes/components/valuepair/valuepair.component';
 import { CrisLayoutSidebarItemComponent } from './default-layout/sidebar/sidebar-item/cris-layout-sidebar-item.component';
 import { TagComponent } from './default-layout/boxes/components/tag/tag.component';
 
@@ -54,7 +55,8 @@ const ENTRY_COMPONENTS = [
   OrcidSyncSettingsComponent,
   OrcidSyncQueueComponent,
   OrcidAuthorizationsComponent,
-  TagComponent
+  TagComponent,
+  ValuepairComponent,
 ];
 @NgModule({
   declarations: [
@@ -85,7 +87,8 @@ const ENTRY_COMPONENTS = [
     TableComponent,
     InlineComponent,
     CrisLayoutSidebarItemComponent,
-    TagComponent
+    TagComponent,
+    ValuepairComponent,
   ],
   imports: [
     CommonModule,