66-FE/clickable-metadata-item-view

cypress/integration/submission-ui.spec.ts

@@ -416,52 +416,6 @@ describe('Create a new submission', () => {
     createItemProcess.checkAuthorLastnameField();
   });
 
-  it('should show warning messages if was selected non-supported license', {
-    retries: {
-      runMode: 6,
-      openMode: 6,
-    },
-    defaultCommandTimeout: 10000
-  },() => {
-    createItemProcess.checkLicenseResourceStep();
-    // check default value in the license dropdown selection
-    createItemProcess.checkLicenseSelectionValue('Select a License ...');
-    // check step status - it should be as warning
-    createItemProcess.checkResourceLicenseStatus('Warnings');
-    // select `Select a License ...` from the selection - this license is not supported
-    createItemProcess.selectValueFromLicenseSelection('Select a License ...');
-    // selected value should be seen as selected value in the selection
-    createItemProcess.checkLicenseSelectionValue('Select a License ...');
-    // check step status - it should an error
-    createItemProcess.checkResourceLicenseStatus('Errors');
-    // error messages should be popped up
-    createItemProcess.showErrorMustChooseLicense();
-    createItemProcess.showErrorNotSupportedLicense();
-  });
-
-  it('the submission should have the Notice Step', {
-    retries: {
-      runMode: 6,
-      openMode: 6,
-    },
-    defaultCommandTimeout: 10000
-  },() => {
-    createItemProcess.checkLicenseResourceStep();
-    // check default value in the license dropdown selection
-    createItemProcess.checkLicenseSelectionValue('Select a License ...');
-    // check step status - it should be as warning
-    createItemProcess.checkResourceLicenseStatus('Warnings');
-    // select `Select a License ...` from the selection - this license is not supported
-    createItemProcess.selectValueFromLicenseSelection('Select a License ...');
-    // selected value should be seen as selected value in the selection
-    createItemProcess.checkLicenseSelectionValue('Select a License ...');
-    // check step status - it should an error
-    createItemProcess.checkResourceLicenseStatus('Errors');
-    // error messages should be popped up
-    createItemProcess.showErrorMustChooseLicense();
-    createItemProcess.showErrorNotSupportedLicense();
-  });
-
   it('The submission should not have the Notice Step', {
     retries: {
       runMode: 6,

src/app/item-page/simple/field-components/clarin-collections-item-field/clarin-collections-item-field.component.html

@@ -1,9 +1,9 @@
 <div class="row clarin-item-page-field">
-  <div class="col-md-2 d-flex">
+  <div class="col-lg-2 d-flex">
     <div><i [class]="'fas ' + iconName + ' fa-xs'"></i></div>
     <div class="pl-1"><b>{{'item.page.collections' | translate}}</b></div>
   </div>
-  <div class="col-md-10">
+  <div class="col-lg-10">
     <div class="collections">
       <a *ngFor="let collection of (this.collections$ | async); let last=last;" [routerLink]="['/collections', collection.id]">
         <span>{{collection?.name}}</span><span *ngIf="!last" [innerHTML]="separator"></span>

src/app/item-page/simple/field-components/clarin-generic-item-field/clarin-generic-item-field.component.html

@@ -1,16 +1,27 @@
 <div class="row clarin-item-page-field" *ngIf="hasMetadataValue()">
-  <div class="col-md-2 d-flex">
+  <div class="col-lg-2 d-flex">
     <div><i [class]="'fas ' + iconName + ' fa-xs'"></i></div>
     <div class="pl-1"><b>{{label | translate}}</b></div>
   </div>
-  <div class="col-md-10">
+  <div class="col-lg-10">
     <div>
-      <span class="dont-break-out" *ngFor="let mdValue of item?.allMetadata(fields); let last=last;">
+      <div *ngIf="type === 'author'" class="d-inline">
+        <ds-clarin-item-author-preview [item]="item"></ds-clarin-item-author-preview>
+      </div>
+      <div class="dont-break-out d-inline" *ngFor="let mdValue of item?.allMetadata(fields); let last=last; let i = index">
         <a *ngIf="type === 'hyperlink'" [href]="mdValue.value">{{mdValue.value}}</a>
+        <a *ngIf="type === 'search'" [href]="getLinkToSearch(i)">{{mdValue.value}}</a>
+        <span *ngIf="type === 'subject'">
+          <a class="badge badge-info text-white cursor-pointer"
+             *ngFor="let subject of mdValue.value.split(separator);"
+             [href]="getLinkToSearch(-1, subject)">
+            {{subject}}
+          </a>
+        </span>
         <span *ngIf="type == null">
           {{mdValue.value}}<span *ngIf="!last" [innerHTML]="separator"></span>
         </span>
-      </span>
+      </div>
     </div>
   </div>
 </div>

src/app/item-page/simple/field-components/clarin-generic-item-field/clarin-generic-item-field.component.ts

@@ -1,6 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Item } from '../../../../core/shared/item.model';
-import { isNotUndefined } from '../../../../shared/empty.util';
+import { isEmpty, isNotUndefined } from '../../../../shared/empty.util';
+import { ConfigurationProperty } from '../../../../core/shared/configuration-property.model';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { convertMetadataFieldIntoSearchType, getBaseUrl } from '../../../../shared/clarin-shared-util';
+import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
 
 @Component({
   selector: 'ds-clarin-generic-item-field',
@@ -40,15 +44,73 @@ export class ClarinGenericItemFieldComponent implements OnInit {
    */
   @Input() label: string;
 
+  /**
+   * UI URL loaded from the server.
+   */
+  baseUrl = '';
+
   // tslint:disable-next-line:no-empty
-  constructor() { }
+  constructor(protected dsoNameService: DSONameService,
+              protected configurationService: ConfigurationDataService) { }
 
   // tslint:disable-next-line:no-empty
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
+    await this.assignBaseUrl();
   }
 
+  /**
+   * If the metadata fields has some metadata value - show nothing if the field do not have any value.
+   */
   public hasMetadataValue() {
     return isNotUndefined(this.item.firstMetadataValue(this.fields));
   }
 
+  /**
+   * Return current metadata value. The metadata field could have more metadata values, often the metadata
+   * field has only one metadata value - index is 0, but sometimes it has more values e.g. `Author`.
+   * @param index
+   */
+  public getLinkToSearch(index, value = '') {
+    let metadataValue = 'Error: value is empty';
+    if (isEmpty(value)) {
+      // Get metadata value from the Item's metadata field
+      metadataValue = this.getMetadataValue(index);
+    } else {
+      // The metadata value is passed from the parameter.
+      metadataValue = value;
+    }
+
+    const searchType = convertMetadataFieldIntoSearchType(this.fields);
+    return this.baseUrl + '/search/objects?f.' + searchType + '=' + metadataValue + ',equals';
+  }
+
+  /**
+   * If the metadata field has more than 1 value return the value based on the index.
+   * @param index of the metadata value
+   */
+  public getMetadataValue(index) {
+    let metadataValue = '';
+    if (index === 0) {
+      // Return first metadata value.
+      return this.item.firstMetadataValue(this.fields);
+    }
+    // The metadata field has more metadata values - get the actual one
+    this.item.allMetadataValues(this.fields)?.forEach((metadataValueArray, arrayIndex) => {
+      if (index !== arrayIndex) {
+        return metadataValue;
+      }
+      metadataValue = metadataValueArray;
+    });
+    return metadataValue;
+  }
+
+  /**
+   * Load base url from the configuration from the BE.
+   */
+  async assignBaseUrl() {
+    this.baseUrl = await getBaseUrl(this.configurationService)
+      .then((baseUrlResponse: ConfigurationProperty) => {
+        return baseUrlResponse?.values?.[0];
+      });
+  }
 }

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -29,7 +29,8 @@ <h2 class="item-page-title-field mr-auto">
                                   [fields]="['dc.contributor.author', 'dc.creator']"
                                   [label]="'relationships.isAuthorOf'"
                                   [iconName]="'fa-pen'"
-                                  [separator]="','">
+                                  [separator]="','"
+                                  [type]="'author'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['dc.identifier.uri']"
@@ -40,7 +41,8 @@ <h2 class="item-page-title-field mr-auto">
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['dc.source.uri']"
                                   [label]="'item.page.project-url'"
-                                  [iconName]="'fa-link'">
+                                  [iconName]="'fa-link'"
+                                  [type]="'hyperlink'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['dc.relation.isreferencedby']"
@@ -55,7 +57,8 @@ <h2 class="item-page-title-field mr-auto">
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['dc.type']"
                                   [label]="'item.page.type'"
-                                  [iconName]="'fa-tag'">
+                                  [iconName]="'fa-tag'"
+                                  [type]="'search'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['local.size.info']"
@@ -66,17 +69,19 @@ <h2 class="item-page-title-field mr-auto">
                                   [fields]="['dc.language.iso']"
                                   [label]="'item.page.language'"
                                   [iconName]="'fa-flag'"
-                                  [separator]="','">
+                                  [separator]="','"
+                                  [type]="'search'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['dc.description']"
                                   [label]="'item.page.description'"
                                   [iconName]="'fa-file-alt'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
-                                  [fields]="['dc.publisher']"
+                                  [fields]="['dc.publisher', 'creativework.publisher']"
                                   [label]="'item.page.publisher'"
-                                  [iconName]="'fa-copy'">
+                                  [iconName]="'fa-copy'"
+                                  [type]="'search'">
     </ds-clarin-generic-item-field>
     <ds-clarin-generic-item-field [item]="object"
                                   [fields]="['local.sponsor']"
@@ -87,7 +92,8 @@ <h2 class="item-page-title-field mr-auto">
                                   [fields]="['dc.subject']"
                                   [label]="'item.page.subject'"
                                   [iconName]="'fa-tags'"
-                                  [separator]="','">
+                                  [separator]="','"
+                                  [type]="'subject'">
     </ds-clarin-generic-item-field>
     <ds-clarin-collections-item-field
                                   [item]="object"

src/app/shared/clarin-item-author-preview/clarin-item-author-preview.component.html

@@ -0,0 +1,29 @@
+<div>
+  <div *ngIf="itemAuthors.value.length <= 5" class="item-author-wrapper pb-1">
+            <span *ngFor="let author of (itemAuthors | async); let i = index">
+              <span *ngIf="i > 0 && i < itemAuthors.value.length -1"> ; </span>
+              <span *ngIf="i == itemAuthors.value.length -1 && itemAuthors.value.length > 1"> and </span>
+              <a [href]="author.url" class="item-author">{{ author.name }}</a>
+            </span>
+  </div>
+  <div *ngIf="itemAuthors.value.length > 5">
+    <div *ngFor="let author of (itemAuthors | async); let i = index">
+      <span *ngIf="i == 0" ><a [href]="author.url" class="item-author">{{ author.name }}</a> ; et al.</span>
+    </div>
+    <div class="item-author-wrapper">
+              <span (click)="toggleShowEveryAuthor()" class="clarin-font-size">
+                <i [hidden]="showEveryAuthor | async" class="fas fa-caret-right"></i>
+                <i [hidden]="!(showEveryAuthor | async)" class="fas fa-caret-down"></i>
+                Show everyone
+              </span>
+
+      <div [hidden]="!(showEveryAuthor | async)">
+                <span *ngFor="let author of (itemAuthors | async); let i = index">
+                  <span *ngIf="i > 1 && i < itemAuthors.value.length -1"> ; </span>
+                  <span *ngIf="i == itemAuthors.value.length -1"> and </span>
+                  <a *ngIf="i > 0" [href]="author.url" class="item-author">{{author.name}}</a>
+                </span>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/clarin-item-author-preview/clarin-item-author-preview.component.scss

@@ -0,0 +1,3 @@
+/**
+This is a styling file for the clarin-item-author-preview component.
+ */

src/app/shared/clarin-item-author-preview/clarin-item-author-preview.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClarinItemAuthorPreviewComponent } from './clarin-item-author-preview.component';
+import {of} from 'rxjs';
+import {ConfigurationDataService} from '../../core/data/configuration-data.service';
+
+describe('ClarinItemAuthorPreviewComponent', () => {
+  let component: ClarinItemAuthorPreviewComponent;
+  let fixture: ComponentFixture<ClarinItemAuthorPreviewComponent>;
+
+  const configurationServiceSpy = jasmine.createSpyObj('configurationService', {
+    findByPropertyName: of(true),
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ClarinItemAuthorPreviewComponent ],
+      providers: [
+        { provide: ConfigurationDataService, useValue: configurationServiceSpy }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClarinItemAuthorPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/clarin-item-author-preview/clarin-item-author-preview.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { AuthorNameLink } from '../clarin-item-box-view/clarin-item-box-view.component';
+import { getBaseUrl, loadItemAuthors } from '../clarin-shared-util';
+import { Item } from '../../core/shared/item.model';
+import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
+import { ConfigurationDataService } from '../../core/data/configuration-data.service';
+
+@Component({
+  selector: 'ds-clarin-item-author-preview',
+  templateUrl: './clarin-item-author-preview.component.html',
+  styleUrls: ['./clarin-item-author-preview.component.scss']
+})
+export class ClarinItemAuthorPreviewComponent implements OnInit {
+
+  @Input() item: Item;
+
+  /**
+   * Authors of the Item.
+   */
+  itemAuthors: BehaviorSubject<AuthorNameLink[]> = new BehaviorSubject<AuthorNameLink[]>([]);
+
+  /**
+   * If the Item have a lot of authors do not show them all.
+   */
+  showEveryAuthor: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * UI URL loaded from the server.
+   */
+  baseUrl = '';
+
+  constructor(protected configurationService: ConfigurationDataService) { }
+
+  async ngOnInit(): Promise<void> {
+    await this.assignBaseUrl();
+    loadItemAuthors(this.item, this.itemAuthors, this.baseUrl);
+  }
+  toggleShowEveryAuthor() {
+    this.showEveryAuthor.next(!this.showEveryAuthor.value);
+  }
+
+  /**
+   * Load base url from the configuration from the BE.
+   */
+  async assignBaseUrl() {
+    this.baseUrl = await getBaseUrl(this.configurationService)
+      .then((baseUrlResponse: ConfigurationProperty) => {
+        return baseUrlResponse?.values?.[0];
+      });
+  }
+}