Merged in task/dspace-cris-2023_02_x/DSC-1708 (pull request DSpace#1736)

Task/dspace cris 2023 02 x/DSC-1708

Approved-by: Francesco Molinaro

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();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { ConfigurationProperty } from './../../../core/shared/configuration-property.model';
+import { getFirstSucceededRemoteDataPayload } from './../../../core/shared/operators';
+import { ConfigurationDataService } from './../../../core/data/configuration-data.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { Observable, map } from 'rxjs';
+
+@Component({
+  selector: 'ds-metadata-link-view-orcid',
+  templateUrl: './metadata-link-view-orcid.component.html',
+  styleUrls: ['./metadata-link-view-orcid.component.scss'],
+})
+export class MetadataLinkViewOrcidComponent implements OnInit {
+  /**
+   * Item value to display the metadata for
+   */
+  @Input() itemValue: Item;
+
+  metadataValue: string;
+
+  orcidUrl$: Observable<string>;
+
+  constructor(protected configurationService: ConfigurationDataService) {}
+
+  ngOnInit(): void {
+    this.orcidUrl$ = this.configurationService
+      .findByPropertyName('orcid.domain-url')
+      .pipe(
+        getFirstSucceededRemoteDataPayload(),
+        map((property: ConfigurationProperty) =>
+          property?.values?.length > 0 ? property.values[0] : null
+        )
+      );
+    this.metadataValue = this.itemValue.firstMetadataValue(
+      'person.identifier.orcid'
+    );
+  }
+
+  public hasOrcid(): boolean {
+    return this.itemValue.hasMetadata('person.identifier.orcid');
+  }
+
+  public hasOrcidBadge(): boolean {
+    return this.itemValue.hasMetadata('dspace.orcid.authenticated');
+  }
+}

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

@@ -0,0 +1,62 @@
+<div class="view-container">
+
+  <div class="d-flex flex-row align-items-center gap-4 mb-2">
+    <ds-metadata-link-view-avatar-popover
+      *ngIf="item.thumbnail | async"
+      [thumbnail]="item.thumbnail | async"
+    ></ds-metadata-link-view-avatar-popover>
+    <span class="font-weight-bold h4"> {{item.firstMetadataValue('dc.title')}} </span>
+  </div>
+
+  <ng-container *ngFor="let metadata of entityMetdataFields">
+    <div class="row" *ngIf="item.hasMetadata(metadata)">
+      <div class="col-4">
+        <span class="font-weight-bold">{{ "metadata-link-view.popover.label." +  (isOtherEntityType ? "other" : item.entityType) + "." +  metadata | translate }}</span>
+      </div>
+      <div class="col-8">
+        <span class="ellipsis-y-3" *ngIf="longTextMetadataList.includes(metadata)">
+          {{ item.firstMetadataValue(metadata) }}
+        </span>
+        <a [href]="item.firstMetadataValue(metadata)" target="_blank" *ngIf="isLink(item.firstMetadataValue(metadata)) && !getSourceSubTypeIdentifier(metadata)">
+          {{ item.firstMetadataValue(metadata) }}
+        </a>
+
+        <div *ngIf="getSourceSubTypeIdentifier(metadata)" class="d-flex align-items-center">
+          <ng-container *ngVar="item.firstMetadataValue(metadata) as rorValue">
+            <a *ngIf="isLink(rorValue)" [href]="item.firstMetadataValue(metadata)" target="_blank" >
+              {{ item.firstMetadataValue(metadata) }}
+            </a>
+            <a *ngIf="!isLink(rorValue)" [href]="getSourceSubTypeIdentifier(metadata)?.link + '/' + item.firstMetadataValue(metadata)" target="_blank" >
+              {{ item.firstMetadataValue(metadata) }}
+            </a>
+          </ng-container>
+          <img
+            placement="top"
+            [ngbTooltip]="getSourceSubTypeIdentifier(metadata)?.link"
+            class="source-icon"
+            alt="source-logo"
+            [src]="getSourceSubTypeIdentifier(metadata)?.icon"
+            data-test="sourceIcon"
+          />
+        </div>
+
+        <div class="d-flex" *ngIf="!isLink(item.firstMetadataValue(metadata)) && !longTextMetadataList.includes(metadata)">
+          <ds-metadata-link-view-orcid [itemValue]="item" *ngIf="metadata === 'person.identifier.orcid'; else textType"></ds-metadata-link-view-orcid>
+          <ng-template #textType>
+            <span>{{ item.firstMetadataValue(metadata) }}</span>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="d-flex">
+    <a
+      class="font-weight-bold"
+      [routerLink]="[getItemPageRoute()]"
+      data-test="more-info-link"
+    >
+      {{ "metadata-link-view.popover.label.more-info" | translate }}
+    </a>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+.source-icon {
+  height: var(--ds-identifier-sybetype-icon-height);
+  min-height: 16px;
+  width: auto;
+  padding-left: 0.3rem;
+}