[DSpace#2719][CST-12825] Refactors item-page-img-field component

Author: vins01-4science

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -25,7 +25,7 @@
 
 <!-- Render value as a link with icon -->
 <ng-template #linkImg let-img="img" let-value="value">
-  <a class="link-anchor" [href]="value" class="dont-break-out ds-simple-metadata-link" target="_blank">
+  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank">
     <img class="link-logo"
       [alt]="img.alt | translate"
       [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -4,7 +4,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
 import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
 import { hasValue } from '../../../shared/empty.util';
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
-import { ImageField } from '../../simple/field-components/specific-field/img/item-page-img-field.component';
+import { ImageField } from '../../simple/field-components/specific-field/item-page-field.component';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageField, ItemPageImgFieldComponent } from './item-page-img-field.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
+import { BrowseDefinitionDataService } from '../../../../../core/browse/browse-definition-data.service';
+import { BrowseDefinitionDataServiceStub } from '../../../../../shared/testing/browse-definition-data-service.stub';
+import { GenericItemPageFieldComponent } from '../generic/generic-item-page-field.component';
+import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { mockItemWithMetadataFieldsAndValue } from '../item-page-field.component.spec';
+import { By } from '@angular/platform-browser';
+
+let component: ItemPageImgFieldComponent;
+let fixture: ComponentFixture<ItemPageImgFieldComponent>;
+
+const mockField = 'organization.identifier.ror';
+const mockValue = 'http://ror.org/awesome-identifier';
+const mockLabel = 'ROR label';
+const mockUrlRegex = '(.*)ror.org';
+const mockImg = {
+  URI: './assets/images/ror-icon.svg',
+  alt: 'item.page.image.alt.ROR',
+  heightVar: '--ds-item-page-img-field-ror-inline-height'
+} as ImageField;
+
+describe('ItemPageImgFieldComponent', () => {
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub }
+      ],
+      declarations: [ItemPageImgFieldComponent, GenericItemPageFieldComponent, MetadataValuesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .overrideComponent(GenericItemPageFieldComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItemPageImgFieldComponent);
+    component = fixture.componentInstance;
+    component.item = mockItemWithMetadataFieldsAndValue([mockField], mockValue);
+    component.fields = [mockField];
+    component.label = mockLabel;
+    component.urlRegex = mockUrlRegex;
+    component.img = mockImg;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display display img tag', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image).not.toBeNull();
+  });
+
+  it('should have right attributes', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image.attributes.src).toEqual(mockImg.URI);
+    expect(image.attributes.alt).toEqual(mockImg.alt);
+
+    const imageEl = image.nativeElement;
+    expect(imageEl.style.height).toContain(mockImg.heightVar);
+  });
+
+  it('should have the right value', () => {
+    const imageAnchor = fixture.debugElement.query(By.css('a.link-anchor'));
+    const anchorEl = imageAnchor.nativeElement;
+    expect(anchorEl.innerHTML).toContain(mockValue);
+  });
+});

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { ImageField, ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from '../../../../../core/shared/item.model';
+
+@Component({
+  selector: 'ds-item-page-img-field',
+  templateUrl: '../item-page-field.component.html'
+})
+/**
+ * Component that renders an inline image for a given field.
+ * This component uses a given {@code ImageField} configuration to correctly render the img.
+ */
+export class ItemPageImgFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+
+  /**
+   * Separator string between multiple values of the metadata fields defined
+   * @type {string}
+   */
+  @Input() separator: string;
+
+  /**
+   * Fields (schema.element.qualifier) used to render their values.
+   */
+  @Input() fields: string[];
+
+  /**
+   * Label i18n key for the rendered metadata
+   */
+  @Input() label: string;
+
+  /**
+   * Image Configuration
+   */
+  @Input() img: ImageField;
+
+  /**
+   * Whether any valid HTTP(S) URL should be rendered as a link
+   */
+  @Input() urlRegex?: string;
+
+}

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

@@ -6,5 +6,6 @@
     [enableMarkdown]="enableMarkdown"
     [urlRegex]="urlRegex"
     [browseDefinition]="browseDefinition|async"
+    [img]="img"
   ></ds-metadata-values>
 </div>

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

@@ -6,6 +6,25 @@ import { BrowseDefinition } from '../../../../core/shared/browse-definition.mode
 import { BrowseDefinitionDataService } from '../../../../core/browse/browse-definition-data.service';
 import { getRemoteDataPayload } from '../../../../core/shared/operators';
 
+/**
+ * Interface that encapsulate Image configuration for this component.
+ */
+export interface ImageField {
+  /**
+   * URI that is used to retrieve the image.
+   */
+  URI: string;
+  /**
+   * i18n Key that represents the alt text to display
+   */
+  alt: string;
+  /**
+   * CSS variable that contains the height of the inline image.
+   */
+  heightVar: string;
+}
+
+
 /**
  * This component can be used to represent metadata on a simple item page.
  * It expects one input parameter of type Item to which the metadata belongs.
@@ -51,6 +70,11 @@ export class ItemPageFieldComponent {
      */
     urlRegex?: string;
 
+    /**
+     * Image Configuration
+     */
+    img: ImageField;
+
     /**
      * Return browse definition that matches any field used in this component if it is configured as a browse
      * link in dspace.cfg (webui.browse.link.<n>)

src/assets/i18n/en.json5

@@ -2564,19 +2564,19 @@
 
   "item.preview.oaire.fundingStream": "Funding Stream:",
 
-  "item.preview.oairecerif.identifier.url" : "URL",
+  "item.preview.oairecerif.identifier.url": "URL",
 
-  "item.preview.organization.address.addressCountry" : "Country",
+  "item.preview.organization.address.addressCountry": "Country",
 
-  "item.preview.organization.foundingDate" : "Founding Date",
+  "item.preview.organization.foundingDate": "Founding Date",
 
-  "item.preview.organization.identifier.crossrefid" : "CrossRef ID",
+  "item.preview.organization.identifier.crossrefid": "CrossRef ID",
 
-  "item.preview.organization.identifier.isni" : "ISNI",
+  "item.preview.organization.identifier.isni": "ISNI",
 
-  "item.preview.organization.identifier.ror" : "ROR ID",
+  "item.preview.organization.identifier.ror": "ROR ID",
 
-  "item.preview.organization.legalName" : "Legal Name",
+  "item.preview.organization.legalName": "Legal Name",
 
   "item.select.confirm": "Confirm selected",