[DSC-1520] subtype identfier configuration

Author: alisaismailati

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html

@@ -1,5 +1,10 @@
 <div [class]="field.styleValue">
-  <span class="text-value">
-    <a [target]="target" href="{{identifier?.href}}">{{ identifier?.text }}</a>
-  </span>
-</div>
+  <div class="d-flex align-items-center identifier-container-{{iconPosition}}">
+    <a href="{{iconLink}}" [ngbTooltip]="iconLink" target="_blank" *ngIf="subTypeIcon && iconPosition !== iconPositionEnum.NONE">
+      <img class="source-icon" [src]="subTypeIcon" alt="source-icon" >
+    </a>
+    <span class="text-value">
+      <a [target]="target" href="{{identifier?.href}}">{{ identifier?.text }}</a>
+    </span>
+  </div>
+</div>

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.scss

@@ -0,0 +1,20 @@
+.source-icon {
+  height: var(--ds-identifier-sybetype-icon-height);
+  min-height: 16px;
+  width: auto;
+}
+
+.identifier-container-LEFT {
+  flex-direction: row;
+  .source-icon {
+    margin-right: 0.2em;
+  }
+}
+
+.identifier-container-RIGHT {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  .source-icon {
+    margin-left: 0.2em;
+  }
+}

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

@@ -1,13 +1,15 @@
+import { IdentifierSubtypesConfig, IdentifierSubtypesIconPositionEnum } from './../../../../../../../../config/identifier-subtypes-config.interface';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
 import { ResolverStrategyService } from '../../../../../../services/resolver-strategy.service';
-import { hasValue, isNotEmpty } from '../../../../../../../shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from '../../../../../../../shared/empty.util';
 import { MetadataLinkValue } from '../../../../../../models/cris-layout-metadata-link-value.model';
 import { RenderingTypeValueModelComponent } from '../rendering-type-value.model';
 import { Item } from '../../../../../../../core/shared/item.model';
 import { TranslateService } from '@ngx-translate/core';
 import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { environment } from 'src/environments/environment';
 
 /**
  * This component renders the identifier metadata fields.
@@ -37,6 +39,31 @@ export class IdentifierComponent extends RenderingTypeValueModelComponent implem
    */
   target = '_blank';
 
+  /**
+   * The identifier subtype configurations
+   */
+  identifierSubtypeConfig: IdentifierSubtypesConfig[] = environment.identifierSubtypes;
+
+  /**
+   * The icon to display for the identifier subtype
+   */
+  subTypeIcon: string;
+
+  /**
+   * The position of the icon relative to the identifier
+   */
+  iconPosition: IdentifierSubtypesIconPositionEnum = IdentifierSubtypesIconPositionEnum.NONE;
+
+  /**
+   * The link to navigate to when the icon is clicked
+   */
+  iconLink = '';
+
+  /**
+   * The identifier subtype to render
+   */
+  iconPositionEnum = IdentifierSubtypesIconPositionEnum;
+
   constructor(
     @Inject('fieldProvider') public fieldProvider: LayoutField,
     @Inject('itemProvider') public itemProvider: Item,
@@ -102,5 +129,28 @@ export class IdentifierComponent extends RenderingTypeValueModelComponent implem
 
   ngOnInit(): void {
     this.identifier = this.getIdentifierFromValue();
+    this.getSubtypeValue();
+  }
+
+  /**
+   * Retrieves the subtype value for the identifier component.
+   * If the identifier subtype is not empty, it searches for the subtype with a matching name to the rendering subtype.
+   * If a matching subtype is found, it sets the icon position, subtype icon, and icon link based on the subtype's properties.
+   */
+  private getSubtypeValue() {
+    if (isNotEmpty(this.identifierSubtypeConfig)) {
+      const subtypeVal = this.identifierSubtypeConfig.find((subtype) => subtype.name === this.renderingSubType);
+      if (hasNoValue(subtypeVal)) {
+        return;
+      }
+
+      this.iconPosition = subtypeVal.iconPosition;
+      this.subTypeIcon = subtypeVal.iconPosition !== IdentifierSubtypesIconPositionEnum.NONE ? subtypeVal?.icon : '';
+      this.iconLink = subtypeVal?.link;
+    }
   }
+
+  // TODO: Check the internal | external link
+  // TODO: UNIT TESTs
+
 }

src/config/app-config.interface.ts

@@ -34,6 +34,7 @@ import { SearchResultConfig } from './search-result-config.interface';
 import { MiradorConfig } from './mirador-config.interfaces';
 import { LoaderConfig } from './loader-config.interfaces';
 import { MetaTagsConfig } from './meta-tags.config';
+import { IdentifierSubtypesConfig } from './identifier-subtypes-config.interface';
 
 interface AppConfig extends Config {
   ui: UIServerConfig;
@@ -74,6 +75,7 @@ interface AppConfig extends Config {
   mirador: MiradorConfig;
   loader: LoaderConfig;
   metaTags: MetaTagsConfig;
+  identifierSubtypes: IdentifierSubtypesConfig[];
 }
 
 /**

src/config/default-app-config.ts

@@ -37,6 +37,7 @@ import { SearchResultConfig } from './search-result-config.interface';
 import { MiradorConfig } from './mirador-config.interfaces';
 import { LoaderConfig } from './loader-config.interfaces';
 import { MetaTagsConfig } from './meta-tags.config';
+import { IdentifierSubtypesConfig, IdentifierSubtypesIconPositionEnum } from './identifier-subtypes-config.interface';
 
 export class DefaultAppConfig implements AppConfig {
   production = false;
@@ -803,4 +804,13 @@ export class DefaultAppConfig implements AppConfig {
       'It is compliant with and supports key international standards, facilitating interoperability and data transfer.\n' +
       'DSpace-CRIS enables secure, integrated and interoperable research information and data management – in a single solution.'
   };
+
+  identifierSubtypes: IdentifierSubtypesConfig[] = [
+    {
+      name: 'ror',
+      icon: 'assets/images/ror.logo.icon.svg',
+      iconPosition: IdentifierSubtypesIconPositionEnum.LEFT,
+      link: 'https://ror.org'
+    }
+  ];
 }

src/config/identifier-subtypes-config.interface.ts

@@ -0,0 +1,15 @@
+/**
+ * Represents the configuration for identifier subtypes.
+ */
+export interface IdentifierSubtypesConfig {
+  name: string; // The name of the identifier subtype
+  icon: string; // The icon to display for the identifier subtype
+  iconPosition: IdentifierSubtypesIconPositionEnum; // The position of the icon relative to the identifier
+  link: string; // The link to navigate to when the icon is clicked
+}
+
+export enum IdentifierSubtypesIconPositionEnum {
+  NONE = 'NONE',
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT',
+}

src/styles/_custom_variables.scss

@@ -145,4 +145,6 @@
 
   --ds-comcol-logo-max-width: 500px;
   --ds-comcol-logo-max-height: 500px;
+
+  --ds-identifier-sybetype-icon-height: 24px;
 }