Merged dspace-cris-2023_02_x into task/dspace-cris-2023_02_x/DSC-1745

Author: Andrea Barbasso

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

@@ -32,7 +32,12 @@ export abstract class MetadataGroupComponent extends RenderingTypeStructuredMode
   /**
    * The prefix used for box field label's i18n key
    */
-  fieldI18nPrefix = 'layout.field.label.';
+  readonly fieldI18nPrefix = 'layout.field.label';
+
+  /**
+   * The prefix used for box field label's
+   */
+  readonly nestedMetadataPrefix = 'NESTED';
 
   /**
    * A boolean representing if component is initialized
@@ -80,17 +85,23 @@ export abstract class MetadataGroupComponent extends RenderingTypeStructuredMode
   }
 
   /**
-   * Returns a string representing the label of field if exists
+   * Returns the translated label, if exists, otherwiuse returns a fallback value
    */
   getLabel(field: LayoutField): string {
-    const fieldLabelI18nKey = this.fieldI18nPrefix + field.label;
-    const header: string = this.translateService.instant(fieldLabelI18nKey);
-    if (header === fieldLabelI18nKey) {
-      // if translation does not exist return the value present in the header property
-      return this.translateService.instant(field.label);
-    } else {
-      return header;
-    }
+    return this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.${this.nestedMetadataPrefix}[${field.metadata}]}`) ??
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.[${field.metadata}]`) ??
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.${field.metadata}`) ?? // old syntax - do not use
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.[${field.metadata}]`) ??
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.${field.label}`) ?? // old syntax - do not use
+      field.label; // the untranslated value from the CRIS layout
+  }
+
+  /**
+   * Return the translated label, if exists, otherwise returns null
+   */
+  getTranslationIfExists(key: string): string {
+    const translation: string = this.translateService.instant(key);
+    return translation !== key ? translation : null;
   }
 
   ngOnDestroy(): void {

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="metadataFieldRenderOptions" class="{{containerStyle}}">
   <div class="d-flex" [class.flex-column]="field.labelAsHeading">
   <span *ngIf="hasLabel"
-        class="{{labelStyle}}" [innerHTML]="label">
+        class="{{labelStyle}}" [innerHTML]="getLabel()">
   </span>
 
     <div *ngIf="!isStructured" class="d-flex col flex-wrap" [class.flex-column]="!field.valuesInline">

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.ts

@@ -4,7 +4,7 @@ import { CrisLayoutBox, LayoutField, LayoutFieldType } from '../../../../../../.
 import {
   FieldRenderingType,
   getMetadataBoxFieldRendering,
-  MetadataBoxFieldRenderOptions
+  MetadataBoxFieldRenderOptions,
 } from '../../rendering-types/metadata-box.decorator';
 import { hasValue, isEmpty, isNotEmpty } from '../../../../../../../shared/empty.util';
 import { TranslateService } from '@ngx-translate/core';
@@ -13,11 +13,11 @@ import { MetadataValue } from '../../../../../../../core/shared/metadata.models'
 import { Bitstream } from '../../../../../../../core/shared/bitstream.model';
 import { getFirstCompletedRemoteData } from '../../../../../../../core/shared/operators';
 import { map, take } from 'rxjs/operators';
-import { BitstreamDataService } from '../../../../../../../core/data/bitstream-data.service';
-import { MetadataFilter } from '../../../../../../../core/data/bitstream-data.service';
+import { BitstreamDataService, MetadataFilter } from '../../../../../../../core/data/bitstream-data.service';
 import { RemoteData } from '../../../../../../../core/data/remote-data';
 import { PaginatedList } from '../../../../../../../core/data/paginated-list.model';
 import { Observable } from 'rxjs';
+import { inject } from '@angular/core';
 
 @Component({
   selector: 'ds-metadata-container',
@@ -46,7 +46,7 @@ export class MetadataContainerComponent implements OnInit {
   /**
    * The prefix used for box field label's i18n key
    */
-  fieldI18nPrefix = 'layout.field.label.';
+  readonly fieldI18nPrefix = 'layout.field.label';
 
   /**
    * A boolean representing if metadata rendering type is structured or not
@@ -58,12 +58,9 @@ export class MetadataContainerComponent implements OnInit {
    */
   metadataFieldRenderOptions: MetadataBoxFieldRenderOptions;
 
-  constructor(
-    protected bitstreamDataService: BitstreamDataService,
-    protected translateService: TranslateService,
-    protected cd: ChangeDetectorRef
-  ) {
-  }
+  protected readonly bitstreamDataService = inject(BitstreamDataService);
+  protected readonly translateService = inject(TranslateService);
+  protected readonly cd = inject(ChangeDetectorRef);
 
   /**
    * Returns all metadata values in the item
@@ -82,17 +79,29 @@ export class MetadataContainerComponent implements OnInit {
   /**
    * Returns a string representing the label of field if exists
    */
-  get label(): string {
-    const fieldLabelI18nKey = this.fieldI18nPrefix + this.item.entityType + '.' + this.field.metadata;
-    const header: string = this.translateService.instant(fieldLabelI18nKey);
-    if (header === fieldLabelI18nKey) {
-      // if translation does not exist return the value present in the header property
-      return this.translateService.instant(this.field.label);
+  getLabel(): string {
+    if (this.field.fieldType === LayoutFieldType.BITSTREAM) {
+      return (hasValue(this.field.bitstream.metadataValue) ?
+        this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.BITSTREAM[${this.field.bitstream.metadataValue}]`) :
+        this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.BITSTREAM`)
+      ) ?? this.field.label;
     } else {
-      return header;
+      return this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.[${this.field.metadata}]`) ??
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.item.entityType}.${this.field.metadata}`) ?? // old syntax - do not use
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.[${this.field.metadata}]`) ??
+      this.getTranslationIfExists(`${this.fieldI18nPrefix}.${this.field.label}`) ?? // old syntax - do not use
+      this.field.label; // the untranslated value from the CRIS layout
     }
   }
 
+  /**
+   * Return the translated label, if exists, otherwise returns null
+   */
+  getTranslationIfExists(key: string): string {
+    const translation: string = this.translateService.instant(key);
+    return translation !== key ? translation : null;
+  }
+
   /**
    * Returns a string representing the style of field container if exists
    */

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

@@ -0,0 +1,17 @@
+<div class="thumbnail" [class.limit-width]="limitWidth" *ngVar="(isLoading$ | async) as isLoading">
+  <div *ngIf="isLoading" class="thumbnail-content outer">
+    <div class="inner">
+      <div class="centered">
+        <ds-themed-loading [spinner]="true"></ds-themed-loading>
+      </div>
+    </div>
+  </div>
+  <ng-container *ngVar="(src$ | async) as src">
+    <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
+    <img *ngIf="src !== null" class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading}"
+         [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
+    <div *ngIf="src === null && !isLoading" class="thumbnail-content outer" #thumbnailBox>
+      <img [src]="fallbackImage" [alt]="placeholder | translate">
+    </div>
+  </ng-container>
+</div>

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.scss

@@ -0,0 +1,9 @@
+:host{
+  img {
+    height: 80px;
+    width: 80px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}

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

@@ -0,0 +1,47 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view-avatar-popover.component';
+import { of as observableOf } from 'rxjs';
+import { AuthService } from '../../../core/auth/auth.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FileService } from '../../../core/shared/file.service';
+
+describe('MetadataLinkViewAvatarPopoverComponent', () => {
+  let component: MetadataLinkViewAvatarPopoverComponent;
+  let fixture: ComponentFixture<MetadataLinkViewAvatarPopoverComponent>;
+  let authService;
+  let authorizationService;
+  let fileService;
+
+  beforeEach(async(() => {
+    authService = jasmine.createSpyObj('AuthService', {
+      isAuthenticated: observableOf(true),
+    });
+    authorizationService = jasmine.createSpyObj('AuthorizationService', {
+      isAuthorized: observableOf(true),
+    });
+    fileService = jasmine.createSpyObj('FileService', {
+      retrieveFileDownloadLink: null
+    });
+    TestBed.configureTestingModule({
+      declarations: [ MetadataLinkViewAvatarPopoverComponent ],
+      providers: [
+        { provide: AuthService, useValue: authService },
+        { provide: AuthorizationDataService, useValue: authorizationService },
+        { provide: FileService, useValue: fileService }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataLinkViewAvatarPopoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
+
+@Component({
+  selector: 'ds-metadata-link-view-avatar-popover',
+  templateUrl: './metadata-link-view-avatar-popover.component.html',
+  styleUrls: ['./metadata-link-view-avatar-popover.component.scss']
+})
+export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent {
+
+  /**
+   * The fallback image to use when the thumbnail is not available
+   */
+  fallbackImage = 'assets/images/person-placeholder.svg';
+}

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

@@ -0,0 +1,15 @@
+<span class="d-flex align-items-center txt-value">
+  <a *ngIf="(orcidUrl$ | async); else noOrcidUrl" href="{{(orcidUrl$ | async)}}/{{metadataValue}}" target="_blank">
+    {{ metadataValue }}
+  </a>
+
+  <ng-template #noOrcidUrl>{{ metadataValue }}</ng-template>
+
+  <img *ngIf="hasOrcidBadge()"
+        placement="top"
+        ngbTooltip="{{ 'orcid.badge.tooltip' | translate }}"
+        class="orcid-icon"
+        alt="orcid-logo"
+        src="assets/images/orcid.logo.icon.svg"/>
+
+</span>

src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.scss

@@ -0,0 +1,4 @@
+.orcid-icon {
+  height: 1.2rem;
+  padding-left: 0.3rem;
+}

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

@@ -0,0 +1,69 @@
+import { ConfigurationDataService } from './../../../core/data/configuration-data.service';
+import { Item } from 'src/app/core/shared/item.model';
+import { TranslateLoaderMock } from './../../testing/translate-loader.mock';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataLinkViewOrcidComponent } from './metadata-link-view-orcid.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MetadataValue } from 'src/app/core/shared/metadata.models';
+import { createSuccessfulRemoteDataObject$ } from '../../remote-data.utils';
+
+describe('MetadataLinkViewOrcidComponent', () => {
+  let component: MetadataLinkViewOrcidComponent;
+  let fixture: ComponentFixture<MetadataLinkViewOrcidComponent>;
+
+  const configurationDataService = jasmine.createSpyObj('configurationDataService', {
+    findByPropertyName: createSuccessfulRemoteDataObject$({ values: ['https://sandbox.orcid.org'] })
+  });
+
+
+  const metadataValue = Object.assign(new MetadataValue(), {
+    'value': '0000-0001-8918-3592',
+    'language': 'en_US',
+    'authority': null,
+    'confidence': -1,
+    'place': 0
+  });
+
+  const testItem = Object.assign(new Item(),
+    {
+      type: 'item',
+      metadata: {
+        'person.identifier.orcid': [metadataValue],
+        'dspace.orcid.authenticated': [
+          {
+            language: null,
+            value: 'authenticated'
+          }
+        ]
+      },
+      uuid: 'test-item-uuid',
+    }
+  );
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetadataLinkViewOrcidComponent ],
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      }), BrowserAnimationsModule],
+      providers: [
+        { provide: ConfigurationDataService, useValue: configurationDataService}
+      ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MetadataLinkViewOrcidComponent);
+    component = fixture.componentInstance;
+    component.itemValue = testItem;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});