+
+
+ }
+
+
+
+
- @for (sectionDTO of (sectionDTOs$ | async); track sectionDTO) {
+ @for (sectionDTO of (sectionDTOs$ | async); track sectionDTO.menuSection.id) {
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 8511f17dc00..1712d6d4c62 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -64,6 +64,7 @@ const initialState = {
export function getMockLocaleService(): LocaleService {
return jasmine.createSpyObj('LocaleService', {
setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode'),
+ getCurrentLanguageCode: jasmine.createSpy('getCurrentLanguageCode'),
});
}
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
index 826bb39a032..d387825d651 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
@@ -282,7 +282,7 @@ describe('EditBitstreamPageComponent', () => {
});
it('should fill in the media type', () => {
- expect(rawForm.mediaInfoContainer.mediaType).toEqual('audio');
+ expect(rawForm.mediaInfoContainer.fileType).toEqual('audio');
});
it('should fill in the audio transcript', () => {
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index aa7f48ef10c..1da2f94bf11 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -345,26 +345,38 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
/**
* The Dynamic Select Model for the media type
*/
- mediaTypeModel = new DynamicSelectModel({
- id: 'mediaType',
- name: 'mediaType',
+ fileTypeModel = new DynamicSelectModel({
+ id: 'fileType',
+ name: 'fileType',
options: [
{
- label: this.translate.instant('bitstream.edit.form.mediaType.option.neither'),
+ label: this.translate.instant('bitstream.edit.form.fileType.option.neither'),
value: 'neither',
},
{
- label: this.translate.instant('bitstream.edit.form.mediaType.option.audio'),
+ label: this.translate.instant('bitstream.edit.form.fileType.option.audio'),
value: 'audio',
},
{
- label: this.translate.instant('bitstream.edit.form.mediaType.option.video'),
+ label: this.translate.instant('bitstream.edit.form.fileType.option.video'),
value: 'video',
},
{
- label: this.translate.instant('bitstream.edit.form.mediaType.option.audio-video'),
+ label: this.translate.instant('bitstream.edit.form.fileType.option.audio-video'),
value: 'audio+video',
},
+ {
+ label: this.translate.instant('bitstream.edit.form.fileType.option.logo'),
+ value: 'logo',
+ },
+ {
+ label: this.translate.instant('bitstream.edit.form.fileType.option.main-article'),
+ value: 'main article',
+ },
+ {
+ label: this.translate.instant('bitstream.edit.form.fileType.option.personal-picture'),
+ value: 'personal picture',
+ },
],
value: 'neither',
});
@@ -383,11 +395,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
operator: OR_OPERATOR,
when: [
{
- id: 'mediaType',
+ id: 'fileType',
value: 'audio',
},
{
- id: 'mediaType',
+ id: 'fileType',
value: 'audio+video',
},
],
@@ -409,11 +421,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
operator: OR_OPERATOR,
when: [
{
- id: 'mediaType',
+ id: 'fileType',
value: 'video',
},
{
- id: 'mediaType',
+ id: 'fileType',
value: 'audio+video',
},
],
@@ -425,7 +437,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
/**
* All input models in a simple array for easier iterations
*/
- inputModels = [this.primaryBitstreamModel, this.fileNameModel, this.descriptionModel, this.mediaTypeModel,
+ inputModels = [this.primaryBitstreamModel, this.fileNameModel, this.descriptionModel, this.fileTypeModel,
this.audioTranscriptModel, this.videoDescriptionModel, this.selectedFormatModel, this.newFormatModel];
/**
@@ -453,7 +465,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
new DynamicFormGroupModel({
id: 'mediaInfoContainer',
group: [
- this.mediaTypeModel,
+ this.fileTypeModel,
this.audioTranscriptModel,
this.videoDescriptionModel,
],
@@ -513,7 +525,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
host: this.newFormatBaseLayout + ' invisible',
},
},
- mediaType: {
+ fileType: {
grid: {
host: 'col-12 d-inline-block',
},
@@ -739,7 +751,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
description: bitstream.firstMetadataValue('dc.description'),
},
mediaInfoContainer: {
- mediaType: bitstream.firstMetadataValue('dc.type') ?? 'neither',
+ fileType: bitstream.firstMetadataValue('dc.type') ?? 'neither',
audioTranscript: bitstream.firstMetadataValue('dspace.bitstream.transcript'),
videoDescription: bitstream.firstMetadataValue('dspace.bitstream.textalternative'),
},
@@ -921,11 +933,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
} else {
Metadata.setFirstValue(newMetadata, 'dc.description', rawForm.descriptionContainer.description);
}
- const mediaType = rawForm.mediaInfoContainer?.mediaType;
- if (isEmpty(mediaType) || mediaType === 'neither') {
+ const fileType = rawForm.mediaInfoContainer?.fileType;
+ if (isEmpty(fileType) || fileType === 'neither') {
delete newMetadata['dc.type'];
} else {
- Metadata.setFirstValue(newMetadata, 'dc.type', mediaType);
+ Metadata.setFirstValue(newMetadata, 'dc.type', fileType);
}
if (isEmpty(rawForm.mediaInfoContainer?.audioTranscript)) {
delete newMetadata['dspace.bitstream.transcript'];
diff --git a/src/app/core/data-services-map.ts b/src/app/core/data-services-map.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/core/data/bitstream-data.service.ts b/src/app/core/data/bitstream-data.service.ts
index 9697ad655fd..e52971f3b1b 100644
--- a/src/app/core/data/bitstream-data.service.ts
+++ b/src/app/core/data/bitstream-data.service.ts
@@ -67,6 +67,13 @@ import {
} from './request.models';
import { RequestService } from './request.service';
+/**
+ * Filter for metadata value to be used for rest API
+ */
+export interface MetadataFilter {
+ metadataName: string;
+ metadataValue: string;
+}
/**
* A service to retrieve {@link Bitstream}s from the REST API
*/
@@ -382,4 +389,152 @@ export class BitstreamDataService extends IdentifiableDataService imp
return this.rdbService.buildFromRequestUUIDAndAwait(requestId, () => observableCombineLatest(bitstreams.map((bitstream: Bitstream) => this.invalidateByHref(bitstream._links.self.href))));
}
+ /**
+ * Returns an observable of {@link RemoteData} of a {@link Bitstream} that is not marked
+ * hidden (that hasn't got the metadata `bitstream.hide` or its value is not true/yes).
+ * resolve {@link HALLink}s of the object
+ *
+ * @param uuid The item UUID to retrieve bitstreams from
+ * @param bundlename Bundle type of the bitstreams
+ * @param metadataFilters Array of object we want to filter by
+ * @param options The {@link FindListOptions} for the request
+ * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+ * no valid cached version. Defaults to true
+ * @param reRequestOnStale Whether or not the request should automatically be re-
+ * requested after the response becomes stale
+ * @param linksToFollow List of {@link FollowLinkConfig} that indicate which
+ * {@link HALLink}s should be automatically resolved
+ */
+ findShowableBitstreamsByItem(
+ uuid: string,
+ bundlename: string,
+ metadataFilters: MetadataFilter[],
+ options: FindListOptions = {},
+ useCachedVersionIfAvailable = true,
+ reRequestOnStale = true,
+ ...linksToFollow: FollowLinkConfig[]
+ ): Observable>> {
+ const searchParams = [];
+ searchParams.push(new RequestParam('uuid', uuid));
+ searchParams.push(new RequestParam('name', bundlename));
+
+ metadataFilters.forEach((entry: MetadataFilter) => {
+ searchParams.push(new RequestParam('filterMetadata', entry.metadataName));
+ searchParams.push(new RequestParam('filterMetadataValue', entry.metadataValue));
+ });
+
+ const hrefObs = this.getSearchByHref(
+ 'showableByItem',
+ { searchParams },
+ ...linksToFollow,
+ );
+
+ return this.findListByHref(
+ hrefObs,
+ options,
+ useCachedVersionIfAvailable,
+ reRequestOnStale,
+ ...linksToFollow,
+ );
+ }
+
+
+ /**
+ * Returns an observable of {@link RemoteData} of a {@link Bitstream}, based on a handle and an
+ * optional sequenceId or filename, with a list of {@link FollowLinkConfig}, to automatically
+ * resolve {@link HALLink}s of the object
+ *
+ * @param uuid The item UUID to retrieve bitstreams from
+ * @param bundlename Bundle type of the bitstreams
+ * @param metadataFilters Array of object we want to filter by
+ * @param options The {@link FindListOptions} for the request
+ * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+ * no valid cached version. Defaults to true
+ * @param reRequestOnStale Whether or not the request should automatically be re-
+ * requested after the response becomes stale
+ * @param linksToFollow List of {@link FollowLinkConfig} that indicate which
+ * {@link HALLink}s should be automatically resolved
+ */
+ findByItem(
+ uuid: string,
+ bundlename: string,
+ metadataFilters: MetadataFilter[],
+ options: FindListOptions,
+ useCachedVersionIfAvailable = true,
+ reRequestOnStale = true,
+ ...linksToFollow: FollowLinkConfig[]
+ ): Observable>> {
+ const searchParams = [];
+ searchParams.push(new RequestParam('uuid', uuid));
+ searchParams.push(new RequestParam('name', bundlename));
+
+ metadataFilters.forEach((entry: MetadataFilter) => {
+ searchParams.push(new RequestParam('filterMetadata', entry.metadataName));
+ searchParams.push(new RequestParam('filterMetadataValue', entry.metadataValue));
+ });
+
+ const hrefObs = this.getSearchByHref(
+ 'byItemId',
+ { searchParams },
+ ...linksToFollow,
+ );
+
+ return this.findListByHref(
+ hrefObs,
+ options,
+ useCachedVersionIfAvailable,
+ reRequestOnStale,
+ ...linksToFollow,
+ );
+ }
+
+ /**
+ * Returns an observable of {@link RemoteData} of a {@link Bitstream} that is not marked
+ * hidden (that hasn't got the metadata `bitstream.hide` or its value is not true/yes).
+ * resolve {@link HALLink}s of the object
+ *
+ * @param uuid The item UUID to retrieve bitstreams from
+ * @param bundlename Bundle type of the bitstreams
+ * @param metadataFilters Array of object we want to filter by
+ * @param options The {@link FindListOptions} for the request
+ * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+ * no valid cached version. Defaults to true
+ * @param reRequestOnStale Whether or not the request should automatically be re-
+ * requested after the response becomes stale
+ * @param linksToFollow List of {@link FollowLinkConfig} that indicate which
+ * {@link HALLink}s should be automatically resolved
+ */
+ showableByItem(
+ uuid: string,
+ bundlename: string,
+ metadataFilters: MetadataFilter[],
+ options: FindListOptions,
+ useCachedVersionIfAvailable = true,
+ reRequestOnStale = true,
+ ...linksToFollow: FollowLinkConfig[]
+ ): Observable>> {
+ const searchParams = [];
+ searchParams.push(new RequestParam('uuid', uuid));
+ searchParams.push(new RequestParam('name', bundlename));
+
+ metadataFilters.forEach((entry: MetadataFilter) => {
+ searchParams.push(new RequestParam('filterMetadata', entry.metadataName));
+ searchParams.push(new RequestParam('filterMetadataValue', entry.metadataValue));
+ });
+
+ const hrefObs = this.getSearchByHref(
+ 'showableByItem',
+ { searchParams },
+ ...linksToFollow,
+ );
+
+ return this.findListByHref(
+ hrefObs,
+ options,
+ useCachedVersionIfAvailable,
+ reRequestOnStale,
+ ...linksToFollow,
+ );
+ }
+
}
diff --git a/src/app/core/layout/models/box.model.ts b/src/app/core/layout/models/box.model.ts
new file mode 100644
index 00000000000..59dfb4fb000
--- /dev/null
+++ b/src/app/core/layout/models/box.model.ts
@@ -0,0 +1,170 @@
+/**
+ * Defines a metadata group within a layout field, grouping related metadata entries.
+ */
+export interface MetadataGroup {
+ /** The leading metadata key that acts as the group heading. */
+ leading: string;
+ /** Array of layout fields within this group. */
+ elements: LayoutField[];
+}
+
+/**
+ * Configuration for bitstream-related rendering in a layout field.
+ */
+export interface LayoutBitstream {
+ /** The bundle name to filter bitstreams from. */
+ bundle: string;
+ /** The metadata field used to identify the bitstream. */
+ metadataField: string;
+ /** The metadata value to match for selecting the bitstream. */
+ metadataValue: string;
+}
+
+/**
+ * Enum of layout field types that determine how a field is rendered.
+ */
+export enum LayoutFieldType {
+ METADATA = 'METADATA',
+ METADATAGROUP = 'METADATAGROUP',
+ BITSTREAM = 'BITSTREAM'
+}
+
+/**
+ * Describes a single renderable field within a metadata box row.
+ * Contains the metadata key, rendering type, and styling options.
+ */
+export interface LayoutField {
+ /** The metadata key to display (e.g., 'dc.title', 'dc.contributor.author'). */
+ metadata?: string;
+ /** Bitstream configuration if this field renders a bitstream. */
+ bitstream?: LayoutBitstream;
+ /** i18n label key for the field. */
+ label?: string;
+ /** The rendering type identifier (e.g., 'text', 'link', 'date', 'thumbnail'). */
+ rendering: string;
+ /** The field type discriminator. */
+ fieldType: LayoutFieldType | string;
+ /** CSS classes for the overall field container. */
+ style?: string;
+ /** CSS classes for the label column. */
+ styleLabel?: string;
+ /** CSS classes for the value column. */
+ styleValue?: string;
+ /** Nested metadata group configuration if fieldType is METADATAGROUP. */
+ metadataGroup?: MetadataGroup;
+ /** Whether to render the label as a heading element. */
+ labelAsHeading: boolean;
+ /** Whether to render multiple values inline (comma-separated) rather than stacked. */
+ valuesInline: boolean;
+}
+
+/**
+ * Configuration for a metadata-type box containing rows of metadata fields.
+ */
+export interface MetadataBoxConfiguration extends BoxConfiguration {
+ /** Unique identifier for this box configuration. */
+ id: string;
+ /** Array of rows within the metadata box. */
+ rows: MetadataBoxRow[];
+}
+
+/**
+ * Base interface for all box configurations.
+ */
+export interface BoxConfiguration {
+ /** The box type discriminator. */
+ type: string;
+}
+
+/**
+ * Configuration for a relation-type box that displays related items via a discovery search.
+ */
+export interface RelationBoxConfiguration extends BoxConfiguration {
+ /** The discovery configuration name used to find related items. */
+ 'discovery-configuration': string;
+}
+
+/**
+ * Configuration for a metrics-type box displaying item-level metrics.
+ */
+export interface MetricsBoxConfiguration extends BoxConfiguration {
+ /** Maximum number of columns for metrics display (null for unlimited). */
+ maxColumns: null;
+ /** Array of metric type identifiers to display. */
+ metrics: string[];
+}
+
+/**
+ * A cell within a metadata box row, containing layout fields.
+ */
+export interface MetadataBoxCell {
+ /** CSS classes applied to the cell element. */
+ style: string;
+ /** Array of fields rendered within this cell. */
+ fields: LayoutField[];
+}
+
+/**
+ * A row within a metadata box configuration.
+ */
+export interface MetadataBoxRow {
+ /** CSS classes applied to the row element. */
+ style: string;
+ /** Array of cells within this row. */
+ cells: MetadataBoxCell[];
+}
+
+/**
+ * Model representing a box in the dynamic layout system.
+ *
+ * A box is a configurable content container within a tab's cell. It defines what type of
+ * content to render (metadata, relations, metrics, collections, IIIF viewer, versioning)
+ * and provides styling, security, and collapsibility settings.
+ */
+export class DynamicLayoutBox {
+
+ /**
+ * The numeric identifier of this box.
+ */
+ id: number;
+
+ /** Short identifier name for this box. */
+ shortname: string;
+
+ /** i18n key or plain text for the box header. */
+ header: string;
+
+ /** The entity type this box belongs to. */
+ entityType: string;
+
+ /** Whether the box starts collapsed. */
+ collapsed: boolean;
+
+ /** Whether this box is a minor box (can be filtered out by TabDataService). */
+ minor: boolean;
+
+ /** CSS classes applied to the box container. */
+ style: string;
+
+ /** Whether to insert a clear element after this box. */
+ clear: boolean;
+
+ /** Maximum number of columns for this box's content. */
+ maxColumn: number;
+
+ /** Whether this box acts as a container for other elements. */
+ container: boolean;
+
+ /** Metadata fields that have security restrictions. */
+ metadataSecurityFields?: string[];
+
+ /** Security level required to view this box. */
+ security: number;
+
+ /** The box type discriminator (METADATA, RELATION, METRICS, etc.). */
+ boxType: string;
+
+ /** Type-specific configuration for the box content. */
+ configuration?: RelationBoxConfiguration | MetadataBoxConfiguration | MetricsBoxConfiguration;
+
+}
diff --git a/src/app/core/layout/models/metrics-component.model.ts b/src/app/core/layout/models/metrics-component.model.ts
new file mode 100644
index 00000000000..3e3fce2674b
--- /dev/null
+++ b/src/app/core/layout/models/metrics-component.model.ts
@@ -0,0 +1,43 @@
+import {
+ autoserialize,
+ deserialize,
+} from 'cerialize';
+
+import { typedObject } from '../../cache/builders/build-decorators';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+import { HALLink } from '../../shared/hal-link.model';
+import { ResourceType } from '../../shared/resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { METRICSCOMPONENT } from './metrics-component.resource-type';
+
+/**
+ * Describes a type of metricscomponent
+ */
+@typedObject
+export class MetricsComponent extends CacheableObject {
+ static type = METRICSCOMPONENT;
+
+ /**
+ * The object type
+ */
+ @excludeFromEquals
+ @autoserialize
+ type: ResourceType;
+
+ /**
+ * The identifier of the related DynamicLayoutBox (shortname)
+ */
+ @autoserialize
+ id: string;
+
+ @autoserialize
+ metrics: string[];
+
+ /**
+ * The {@link HALLink}s for this metricscomponent
+ */
+ @deserialize
+ _links: {
+ self: HALLink
+ };
+}
diff --git a/src/app/core/layout/models/metrics-component.resource-type.ts b/src/app/core/layout/models/metrics-component.resource-type.ts
new file mode 100644
index 00000000000..ef5c9a51fc2
--- /dev/null
+++ b/src/app/core/layout/models/metrics-component.resource-type.ts
@@ -0,0 +1,10 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for boxmetricsconfiguration
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+
+export const METRICSCOMPONENT = new ResourceType('boxmetricsconfiguration');
diff --git a/src/app/core/layout/models/section.model.ts b/src/app/core/layout/models/section.model.ts
new file mode 100644
index 00000000000..96e0a40a731
--- /dev/null
+++ b/src/app/core/layout/models/section.model.ts
@@ -0,0 +1,110 @@
+import {
+ autoserialize,
+ deserialize,
+} from 'cerialize';
+
+import { typedObject } from '../../cache/builders/build-decorators';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+import { HALLink } from '../../shared/hal-link.model';
+import { ResourceType } from '../../shared/resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { SECTION } from './section.resource-type';
+
+/**
+ * Describes a type of Section.
+ */
+@typedObject
+export class Section extends CacheableObject {
+ static type = SECTION;
+
+ /**
+ * The object type
+ */
+ @excludeFromEquals
+ @autoserialize
+ type: ResourceType;
+
+ /**
+ * The identifier of this Section.
+ */
+ @autoserialize
+ id: string;
+
+ @autoserialize
+ componentRows: SectionComponent[][];
+
+ @autoserialize
+ nestedSections: Section[];
+
+ /**
+ * The {@link HALLink}s for this section
+ */
+ @deserialize
+ _links: {
+ self: HALLink,
+ };
+
+}
+
+export interface SectionComponent {
+ componentType: string;
+ style: string;
+}
+
+export interface BrowseSection extends SectionComponent {
+ browseNames: string[];
+ componentType: 'browse';
+}
+
+export interface TopSection extends SectionComponent {
+ discoveryConfigurationName: string;
+ sortField: string;
+ order: string;
+ titleKey: string;
+ componentType: 'top';
+ numberOfItems: number;
+ showThumbnails: boolean;
+ template: TopSectionTemplateType;
+}
+
+export interface SearchSection extends SectionComponent {
+ discoveryConfigurationName: string;
+ componentType: 'search';
+ searchType: string;
+ initialStatements: number;
+ displayTitle: boolean;
+}
+
+export interface FacetSection extends SectionComponent {
+ discoveryConfigurationName: string;
+ componentType: 'facet';
+ facetsPerRow: number;
+}
+
+export interface TextRowSection extends SectionComponent {
+ content: string;
+ contentType: string;
+ componentType: 'text-row';
+}
+
+export interface MultiColumnTopSection extends SectionComponent {
+ discoveryConfigurationName: string;
+ sortField: string;
+ order: string;
+ titleKey: string;
+ columnList: TopSectionColumn[];
+ componentType: 'multi-column-top';
+}
+
+export interface TopSectionColumn {
+ style: string;
+ metadataField: string;
+ titleKey: string;
+}
+
+/**
+ * Represents the type of template to use for the section
+ */
+export enum TopSectionTemplateType {
+ DEFAULT = 'default', // default template
+}
diff --git a/src/app/core/layout/models/section.resource-type.ts b/src/app/core/layout/models/section.resource-type.ts
new file mode 100644
index 00000000000..3632eb0391b
--- /dev/null
+++ b/src/app/core/layout/models/section.resource-type.ts
@@ -0,0 +1,10 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for Section
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+
+export const SECTION = new ResourceType('section');
diff --git a/src/app/core/layout/models/tab.model.ts b/src/app/core/layout/models/tab.model.ts
new file mode 100644
index 00000000000..885ad74cdfe
--- /dev/null
+++ b/src/app/core/layout/models/tab.model.ts
@@ -0,0 +1,111 @@
+import {
+ autoserialize,
+ deserialize,
+ deserializeAs,
+} from 'cerialize';
+
+import { typedObject } from '../../cache/builders/build-decorators';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+import { IDToUUIDSerializer } from '../../cache/id-to-uuid-serializer';
+import { HALLink } from '../../shared/hal-link.model';
+import { ResourceType } from '../../shared/resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { DynamicLayoutBox } from './box.model';
+import { TAB } from './tab.resource-type';
+
+/**
+ * Model representing a layout tab in the dynamic item page system.
+ *
+ * A tab defines a named section of an item's detail page. Tabs contain rows and cells
+ * forming a grid layout, and may be marked as "leading" (rendered above the main content).
+ * Tabs are fetched from the REST API via the `/tabs` endpoint.
+ */
+@typedObject
+export class DynamicLayoutTab extends CacheableObject {
+ static type = TAB;
+
+ /**
+ * The object type
+ */
+ @excludeFromEquals
+ @autoserialize
+ type: ResourceType;
+
+ /**
+ * The identifier of this DynamicLayoutTab
+ */
+ @autoserialize
+ id: number;
+
+ @autoserialize
+ shortname: string;
+
+ @autoserialize
+ header: string;
+
+ @autoserialize
+ entityType: string;
+
+ @autoserialize
+ priority: number;
+
+ @autoserialize
+ security: number;
+
+ /**
+ * This property is used from navbar for highlight
+ * the active tab
+ */
+ isActive?: boolean;
+
+ /**
+ * This property is used from leading component
+ */
+ @autoserialize
+ leading?: boolean;
+
+ @autoserialize
+ rows?: DynamicLayoutRow[];
+ /**
+ * The universally unique identifier of this DynamicLayoutTab
+ * This UUID is generated client-side and isn't used by the backend.
+ * It is based on the ID, so it will be the same for each refresh.
+ */
+ @deserializeAs(new IDToUUIDSerializer(DynamicLayoutTab.type.value), 'id')
+ uuid: string;
+
+ /**
+ * The {@link HALLink}s for this DynamicLayoutTab
+ */
+ @deserialize
+ _links: {
+ self: HALLink,
+ };
+
+ /**
+ * Contains nested tabs if exist
+ */
+ children?: DynamicLayoutTab[];
+}
+
+
+/**
+ * A row within a tab's layout grid. Contains cells arranged horizontally.
+ */
+export interface DynamicLayoutRow {
+ /** CSS classes applied to the row element (e.g., Bootstrap grid row classes). */
+ style: string;
+ /** Array of cells within this row. */
+ cells: DynamicLayoutCell[];
+}
+
+/**
+ * A cell within a layout row. Contains one or more boxes.
+ */
+export interface DynamicLayoutCell {
+ /** CSS classes applied to the cell element (e.g., Bootstrap column classes). */
+ style: string;
+ /** Array of boxes rendered within this cell. */
+ boxes: DynamicLayoutBox[];
+}
+
diff --git a/src/app/core/layout/models/tab.resource-type.ts b/src/app/core/layout/models/tab.resource-type.ts
new file mode 100644
index 00000000000..054c80833c9
--- /dev/null
+++ b/src/app/core/layout/models/tab.resource-type.ts
@@ -0,0 +1,10 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for DynamicLayoutTab
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+
+export const TAB = new ResourceType('tab');
diff --git a/src/app/core/layout/section-data.service.ts b/src/app/core/layout/section-data.service.ts
new file mode 100644
index 00000000000..6f17f618f2d
--- /dev/null
+++ b/src/app/core/layout/section-data.service.ts
@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { dataService } from '@dspace/core/cache/builders/build-decorators';
+import { SECTION } from '@dspace/core/layout/models/section.resource-type';
+import { Observable } from 'rxjs';
+
+import { DSONameService } from '../breadcrumbs/dso-name.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { FindAllData } from '../data/base/find-all-data';
+import { IdentifiableDataService } from '../data/base/identifiable-data.service';
+import { SearchDataImpl } from '../data/base/search-data';
+import { FindListOptions } from '../data/find-list-options.model';
+import { PaginatedList } from '../data/paginated-list.model';
+import { RemoteData } from '../data/remote-data';
+import { RequestService } from '../data/request.service';
+import { NotificationsService } from '../notification-system/notifications.service';
+import { FollowLinkConfig } from '../shared/follow-link-config.model';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { Section } from './models/section.model';
+
+/**
+ * A service responsible for fetching data from the REST API on the sections endpoint.
+ */
+@Injectable({ providedIn: 'root' })
+@dataService(SECTION)
+export class SectionDataService extends IdentifiableDataService {
+
+ protected linkPath = 'sections';
+ private findAllData: FindAllData;
+ private searchData: SearchDataImpl;
+
+ constructor(
+ protected requestService: RequestService,
+ protected rdbService: RemoteDataBuildService,
+ protected objectCache: ObjectCacheService,
+ protected halService: HALEndpointService,
+ protected notificationsService: NotificationsService,
+ protected dsoNameService: DSONameService,
+ ) {
+ super('sections', requestService, rdbService, objectCache, halService);
+
+ this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+ }
+
+ /**
+ * Find all the configured sections.
+ */
+ findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+ return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+ }
+
+ /**
+ * Find all the configured sections.
+ */
+ findVisibleSections(): Observable>> {
+ return this.searchData.searchBy('visibleTopBarSections');
+ }
+
+}
diff --git a/src/app/core/layout/tab-data.service.spec.ts b/src/app/core/layout/tab-data.service.spec.ts
new file mode 100644
index 00000000000..384c9152046
--- /dev/null
+++ b/src/app/core/layout/tab-data.service.spec.ts
@@ -0,0 +1,694 @@
+import { HttpClient } from '@angular/common/http';
+import {
+ cold,
+ getTestScheduler,
+ hot,
+} from 'jasmine-marbles';
+import { of } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { RequestParam } from '../cache/models/request-param.model';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { RestResponse } from '../cache/response.models';
+import { FindListOptions } from '../data/find-list-options.model';
+import { RequestService } from '../data/request.service';
+import { RequestEntry } from '../data/request-entry.model';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DynamicLayoutTab } from './models/tab.model';
+import { TAB } from './models/tab.resource-type';
+import { TabDataService } from './tab-data.service';
+import objectContaining = jasmine.objectContaining;
+import arrayContaining = jasmine.arrayContaining;
+import { NotificationsService } from '../notification-system/notifications.service';
+import { createPaginatedList } from '../testing/utils.test';
+import { createSuccessfulRemoteDataObject } from '../utilities/remote-data.utils';
+
+describe('TabDataService', () => {
+ let scheduler: TestScheduler;
+ let service: TabDataService;
+ let requestService: RequestService;
+ let rdbService: RemoteDataBuildService;
+ let objectCache: ObjectCacheService;
+ let halService: HALEndpointService;
+ let responseCacheEntry: RequestEntry;
+
+ const tabPersonProfile: DynamicLayoutTab = {
+ type: TAB,
+ id: 1,
+ shortname: 'person-profile',
+ header: 'person-profile-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-profile-1',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/1',
+ },
+ },
+ };
+
+ const tabPersonBiography: DynamicLayoutTab = {
+ type: TAB,
+ id: 2,
+ shortname: 'person-biography',
+ header: 'person-biography-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-biography-2',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/2',
+ },
+ },
+ };
+
+ const tabPersonBibliometrics: DynamicLayoutTab = {
+ type: TAB,
+ id: 3,
+ shortname: 'person-bibliometrics',
+ header: 'person-bibliometrics-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-bibliometrics-3',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/3',
+ },
+ },
+ };
+
+ const tabWithOnlyMinors: DynamicLayoutTab = {
+ type: TAB,
+ id: 4,
+ shortname: 'person-bibliometrics',
+ header: 'person-bibliometrics-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ boxes: [
+ {
+ id: 3418,
+ shortname: 'heading',
+ header: null,
+ entityType: 'Person',
+ collapsed: false,
+ minor: true,
+ style: null,
+ security: 0,
+ boxType: 'METADATA',
+ maxColumn: null,
+ clear: false,
+ configuration: {
+ id: '1',
+ type: 'boxmetadataconfiguration',
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ fields: [
+ {
+ metadata: 'dc.title',
+ label: null,
+ rendering: 'heading',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ metadataSecurityFields: [],
+ container: false,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ boxes: [
+ {
+ id: 3419,
+ shortname: 'namecard',
+ header: 'Name Card',
+ entityType: 'Person',
+ collapsed: false,
+ minor: true,
+ style: null,
+ security: 0,
+ boxType: 'METADATA',
+ maxColumn: null,
+ clear: false,
+ configuration: {
+ id: '0',
+ type: 'boxmetadataconfiguration',
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: 'col-3',
+ fields: [
+ {
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'personal pictur',
+ },
+ label: null,
+ rendering: 'thumbnail',
+ fieldType: 'BITSTREAM',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ {
+ style: 'px-2',
+ fields: [
+ {
+ metadata: 'dc.title',
+ label: 'Preferred name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name',
+ label: 'Official Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name.translated',
+ label: 'Translated Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name.variant',
+ label: 'Alternative Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.affiliation.name',
+ label: 'Main Affiliation',
+ rendering: 'dynamicref',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.workgroup',
+ label: null,
+ rendering: 'dynamicref',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'oairecerif.identifier.url',
+ label: 'Web Site',
+ rendering: 'link',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.email',
+ label: 'Email',
+ rendering: 'dynamicref.email',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.orcid',
+ label: 'ORCID',
+ rendering: 'orcid',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.scopus-author-id',
+ label: 'Scopus Author ID',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.rid',
+ label: 'Researcher ID',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ metadataSecurityFields: [],
+ container: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ uuid: 'person-bibliometrics-4',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/3',
+ },
+ },
+ };
+
+ const tabWithSomeMinors: DynamicLayoutTab = {
+ type: TAB,
+ id: 5,
+ shortname: 'person-bibliometrics',
+ header: 'person-bibliometrics-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ boxes: [
+ {
+ id: 3418,
+ shortname: 'heading',
+ header: null,
+ entityType: 'Person',
+ collapsed: false,
+ minor: false,
+ style: null,
+ security: 0,
+ boxType: 'METADATA',
+ maxColumn: null,
+ clear: false,
+ configuration: {
+ id: '3',
+ type: 'boxmetadataconfiguration',
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ fields: [
+ {
+ metadata: 'dc.title',
+ label: null,
+ rendering: 'heading',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ metadataSecurityFields: [],
+ container: false,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ style: '',
+ cells: [
+ {
+ style: '',
+ boxes: [
+ {
+ id: 3419,
+ shortname: 'namecard',
+ header: 'Name Card',
+ entityType: 'Person',
+ collapsed: false,
+ minor: true,
+ style: null,
+ security: 0,
+ boxType: 'METADATA',
+ maxColumn: null,
+ clear: false,
+ configuration: {
+ id: '0',
+ type: 'boxmetadataconfiguration',
+ rows: [
+ {
+ style: '',
+ cells: [
+ {
+ style: 'col-3',
+ fields: [
+ {
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'personal pictur',
+ },
+ label: null,
+ rendering: 'thumbnail',
+ fieldType: 'BITSTREAM',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ {
+ style: 'px-2',
+ fields: [
+ {
+ metadata: 'dc.title',
+ label: 'Preferred name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name',
+ label: 'Official Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name.translated',
+ label: 'Translated Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.name.variant',
+ label: 'Alternative Name',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.affiliation.name',
+ label: 'Main Affiliation',
+ rendering: 'dynamicref',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'crisrp.workgroup',
+ label: null,
+ rendering: 'dynamicref',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'oairecerif.identifier.url',
+ label: 'Web Site',
+ rendering: 'link',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.email',
+ label: 'Email',
+ rendering: 'dynamicref.email',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.orcid',
+ label: 'ORCID',
+ rendering: 'orcid',
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.scopus-author-id',
+ label: 'Scopus Author ID',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ {
+ metadata: 'person.identifier.rid',
+ label: 'Researcher ID',
+ rendering: null,
+ fieldType: 'METADATA',
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ metadataSecurityFields: [],
+ container: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ uuid: 'person-bibliometrics-5',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/3',
+ },
+ },
+ };
+
+ const endpointURL = `https://rest.api/rest/api/tabs`;
+ const requestURL = `https://rest.api/rest/api/tabs/${tabPersonProfile.id}`;
+ const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+ const itemUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+ const entityType = 'Person';
+ const tabId = '1';
+
+ const array = [tabPersonProfile, tabPersonBiography, tabPersonBibliometrics, tabWithOnlyMinors, tabWithSomeMinors];
+ const paginatedList = createPaginatedList(array);
+ const tabRD = createSuccessfulRemoteDataObject(tabPersonProfile);
+ const paginatedListRD = createSuccessfulRemoteDataObject(paginatedList);
+ const noMinorsList =
+ createPaginatedList([tabPersonProfile, tabPersonBiography, tabPersonBibliometrics, tabWithSomeMinors]);
+ const paginatedListWithoutMinorsRD = createSuccessfulRemoteDataObject(noMinorsList);
+
+ beforeEach(() => {
+ scheduler = getTestScheduler();
+
+ halService = jasmine.createSpyObj('halService', {
+ getEndpoint: cold('a', { a: endpointURL }),
+ });
+
+ responseCacheEntry = new RequestEntry();
+ responseCacheEntry.request = { href: 'https://rest.api/' } as any;
+ responseCacheEntry.response = new RestResponse(true, 200, 'Success');
+
+ requestService = jasmine.createSpyObj('requestService', {
+ generateRequestId: requestUUID,
+ send: true,
+ removeByHrefSubstring: {},
+ getByHref: of(responseCacheEntry),
+ getByUUID: of(responseCacheEntry),
+ });
+
+ rdbService = jasmine.createSpyObj('rdbService', {
+ buildSingle: hot('a|', {
+ a: tabRD,
+ }),
+ buildList: hot('a|', {
+ a: paginatedListRD,
+ }),
+ });
+ objectCache = {} as ObjectCacheService;
+ const notificationsService = {} as NotificationsService;
+ const http = {} as HttpClient;
+ const comparator = {} as any;
+
+ service = new TabDataService(
+ requestService,
+ rdbService,
+ objectCache,
+ halService,
+ notificationsService,
+ );
+
+ spyOn((service as any), 'findById').and.callThrough();
+ spyOn((service as any).searchData, 'searchBy').and.callThrough();
+ });
+
+ describe('findById', () => {
+ it('should proxy the call to dataservice.findById', () => {
+ scheduler.schedule(() => service.findById(tabId));
+ scheduler.flush();
+
+ expect((service as any).findById).toHaveBeenCalledWith(tabId);
+ });
+
+ it('should return a RemoteData for the object with the given id', () => {
+ const result = service.findById(tabId);
+ const expected = cold('a|', {
+ a: tabRD,
+ });
+ expect(result).toBeObservable(expected);
+ });
+ });
+
+ describe('searchByItem', () => {
+ it('should proxy the call to dataservice.searchBy', () => {
+ const options = new FindListOptions();
+ options.searchParams = [
+ new RequestParam('uuid', itemUUID),
+ ];
+ scheduler.schedule(() => service.findByItem(itemUUID, true));
+ scheduler.flush();
+
+ expect((service as any).searchData.searchBy).toHaveBeenCalledWith((service as any).searchFindByItem, options, true);
+ });
+
+ it('should return a RemoteData> for the search', () => {
+ const result = service.findByItem(itemUUID, true);
+ const expected = cold('a|', {
+ a: paginatedListRD,
+ });
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should remove tab with minor cells', () => {
+ const result = service.findByItem(itemUUID, true, true);
+ result.subscribe(tabs => {
+ expect(tabs.payload.page).toHaveSize(4);
+ expect(tabs.payload.page).not.toEqual(
+ arrayContaining([objectContaining({ id: tabWithOnlyMinors.id })]),
+ );
+ expect(tabs.payload.page).toEqual(
+ arrayContaining([objectContaining({ id: tabWithSomeMinors.id })]),
+ );
+ });
+ });
+
+ });
+
+ describe('searchByEntityType', () => {
+ it('should proxy the call to dataservice.searchBy', () => {
+ const options = new FindListOptions();
+ options.searchParams = [
+ new RequestParam('type', entityType),
+ ];
+ scheduler.schedule(() => service.findByEntityType(entityType));
+ scheduler.flush();
+
+ expect((service as any).searchData.searchBy).toHaveBeenCalledWith((service as any).searchFindByEntityType, options);
+ });
+
+ it('should return a RemoteData> for the search', () => {
+ const result = service.findByEntityType(entityType);
+ const expected = cold('a|', {
+ a: paginatedListRD,
+ });
+ expect(result).toBeObservable(expected);
+ });
+
+ });
+});
diff --git a/src/app/core/layout/tab-data.service.ts b/src/app/core/layout/tab-data.service.ts
new file mode 100644
index 00000000000..5b0919c0bb1
--- /dev/null
+++ b/src/app/core/layout/tab-data.service.ts
@@ -0,0 +1,145 @@
+import { Injectable } from '@angular/core';
+import { dataService } from '@dspace/core/cache/builders/build-decorators';
+import { TAB } from '@dspace/core/layout/models/tab.resource-type';
+import { NotificationsService } from '@dspace/core/notification-system/notifications.service';
+import {
+ hasNoValue,
+ hasValue,
+} from '@dspace/shared/utils/empty.util';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { RequestParam } from '../cache/models/request-param.model';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { IdentifiableDataService } from '../data/base/identifiable-data.service';
+import { SearchDataImpl } from '../data/base/search-data';
+import { FindListOptions } from '../data/find-list-options.model';
+import { PaginatedList } from '../data/paginated-list.model';
+import { RemoteData } from '../data/remote-data';
+import { RequestService } from '../data/request.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DynamicLayoutBox } from './models/box.model';
+import {
+ DynamicLayoutCell,
+ DynamicLayoutRow,
+ DynamicLayoutTab,
+} from './models/tab.model';
+
+/**
+ * A service responsible for fetching layout tabs from the REST API's `/tabs` endpoint.
+ *
+ * Provides methods to find tabs by item UUID or entity type, with support for
+ * filtering out tabs that contain only minor (secondary) boxes.
+ */
+@Injectable({ providedIn: 'root' })
+@dataService(TAB)
+export class TabDataService extends IdentifiableDataService {
+ protected searchFindByItem = 'findByItem';
+ protected searchFindByEntityType = 'findByEntityType';
+ private searchData: SearchDataImpl;
+
+ constructor(
+ protected requestService: RequestService,
+ protected rdbService: RemoteDataBuildService,
+ protected objectCache: ObjectCacheService,
+ protected halService: HALEndpointService,
+ protected notificationsService: NotificationsService) {
+ super('tabs', requestService, rdbService, objectCache, halService);
+
+ this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+ }
+
+ /**
+ * It returns the tabs that are available for the specified item. The tabs are sorted by
+ * priority ascending. This are filtered based on the permission of the current user and
+ * available data. Empty tabs are filter out.
+ * @param itemUuid UUID of the Item
+ * @param useCachedVersionIfAvailable
+ */
+ findByItem(
+ itemUuid: string, useCachedVersionIfAvailable: boolean, excludeMinors?: boolean,
+ ): Observable>> {
+ const options = new FindListOptions();
+ options.searchParams = [new RequestParam('uuid', itemUuid)];
+
+ return this.searchData.searchBy(this.searchFindByItem, options, useCachedVersionIfAvailable)
+ .pipe(
+ map((data) => {
+ if (hasValue(data?.payload?.page) && excludeMinors) {
+ data.payload.page = this.filterTabWithOnlyMinor(data.payload.page);
+ }
+ return data;
+ }));
+ }
+
+ /**
+ * Filters out tabs where every box is marked as minor.
+ *
+ * @param tabs the full list of tabs to filter
+ * @returns tabs that contain at least one non-minor box
+ */
+ filterTabWithOnlyMinor(tabs: DynamicLayoutTab[]): DynamicLayoutTab[] {
+ return tabs.filter(tab => !this.hasTabOnlyMinor(tab));
+ }
+
+ /**
+ * Checks whether all boxes within a tab are minor.
+ *
+ * @param tab the tab to inspect
+ * @returns true if every box in every cell in every row is minor
+ */
+ hasTabOnlyMinor(tab: DynamicLayoutTab): boolean {
+ if (hasNoValue(tab?.rows)) {
+ return false;
+ }
+ return tab.rows.every(row => this.hasRowOnlyMinor(row));
+ }
+
+ /**
+ * Checks whether all cells within a row contain only minor boxes.
+ *
+ * @param row the row to inspect
+ * @returns true if every cell in the row has only minor boxes
+ */
+ hasRowOnlyMinor(row: DynamicLayoutRow): boolean {
+ if (hasNoValue(row?.cells)) {
+ return false;
+ }
+ return row.cells.every(cell => this.hasCellOnlyMinor(cell));
+ }
+
+ /**
+ * Checks whether all boxes within a cell are minor.
+ *
+ * @param cell the cell to inspect
+ * @returns true if every box in the cell is marked as minor
+ */
+ hasCellOnlyMinor(cell: DynamicLayoutCell): boolean {
+ if (hasNoValue(cell?.boxes)) {
+ return false;
+ }
+ return cell.boxes.every(box => this.isMinor(box));
+ }
+
+ /**
+ * Determines whether a given box is minor (secondary/auxiliary content).
+ *
+ * @param box the box to check
+ * @returns true if the box is flagged as minor
+ */
+ isMinor(box: DynamicLayoutBox): boolean {
+ return box.minor === true;
+ }
+
+ /**
+ * It returns the tabs that are available for the items of the specified type.
+ * This endpoint is reserved to system administrators
+ * @param entityType label of the entity type
+ */
+ findByEntityType(entityType: string): Observable>> {
+ const options = new FindListOptions();
+ options.searchParams = [new RequestParam('type', entityType)];
+ return this.searchData.searchBy(this.searchFindByEntityType, options);
+ }
+}
diff --git a/src/app/core/provide-core.ts b/src/app/core/provide-core.ts
index 2b83615c0c1..b5cea601197 100644
--- a/src/app/core/provide-core.ts
+++ b/src/app/core/provide-core.ts
@@ -4,6 +4,8 @@ import {
makeEnvironmentProviders,
} from '@angular/core';
import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
import { SubmissionCustomUrl } from '@dspace/core/submission/models/submission-custom-url.model';
import { Audit } from './audit/model/audit.model';
@@ -232,4 +234,6 @@ export const models =
CorrectionType,
SupervisionOrder,
SubmissionCustomUrl,
+ DynamicLayoutTab,
+ DynamicLayoutBox,
];
diff --git a/src/app/core/testing/attachments.mock.ts b/src/app/core/testing/attachments.mock.ts
new file mode 100644
index 00000000000..ac60554da52
--- /dev/null
+++ b/src/app/core/testing/attachments.mock.ts
@@ -0,0 +1,176 @@
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { MetadataValue } from '../shared/metadata.models';
+
+export const attachmentWithUnspecified = Object.assign(new Bitstream(), {
+ id: 'bitstream1',
+ uuid: 'bitstream1',
+ bundle: undefined,
+ bundleName: 'ORIGINAL',
+ format: undefined,
+ sizeBytes: 130423,
+ thumbnail: undefined,
+ type: 'bitstream',
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Unspecified description',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'test-unspecified.pdf',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Unspecified',
+ } as MetadataValue,
+ ],
+ },
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7',
+ },
+ },
+});
+
+export const attachmentMainArticle = Object.assign(new Bitstream(), {
+ id: 'bitstream2',
+ uuid: 'bitstream2',
+ bundle: undefined,
+ bundleName: 'ORIGINAL',
+ format: undefined,
+ sizeBytes: 130423,
+ thumbnail: undefined,
+ type: 'bitstream',
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Main article description',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'main.pdf',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Main Article',
+ } as MetadataValue,
+ ],
+ },
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7',
+ },
+ },
+});
+
+
+export const attachmentRegex = Object.assign(new Bitstream(), {
+ id: 'bitstream3',
+ uuid: 'bitstream3',
+ bundle: undefined,
+ bundleName: 'ORIGINAL',
+ format: undefined,
+ sizeBytes: 130423,
+ thumbnail: undefined,
+ type: 'bitstream',
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Main article regex description',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'main-regex.pdf',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ value: 'Test Article',
+ } as MetadataValue,
+ ],
+ },
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/c3eaeb39-aa76-4cb7-ab35-b2f2fa8db2a7',
+ },
+ },
+});
+
+export const attachmentsMock = [attachmentWithUnspecified, attachmentMainArticle, attachmentRegex];
diff --git a/src/app/core/testing/bitstreams.mock.ts b/src/app/core/testing/bitstreams.mock.ts
new file mode 100644
index 00000000000..fb07798297e
--- /dev/null
+++ b/src/app/core/testing/bitstreams.mock.ts
@@ -0,0 +1,293 @@
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { MetadataValue } from '../shared/metadata.models';
+import { createSuccessfulRemoteDataObject$ } from '../utilities/remote-data.utils';
+
+export const mockThumbnail = Object.assign(new Bitstream(), {
+ id: 'thumbnail1',
+ uuid: 'thumbnail1',
+ sizeBytes: 7798,
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: 'f7a94983-aaa2-45b4-8fa4-554566734fb5',
+ value: 'Generated Thumbnail',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '392bb9b3-7de4-41e4-881f-e72b221cfefd',
+ value: 'Written by FormatFilter org.dspace.app.mediafilter.JPEGFilter on 2022-05-24T15:12:12Z (GMT).',
+ } as MetadataValue,
+ ],
+ 'dc.source': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'young-waiter-2021-08-26-15-47-22-utc-2-pjv2sebbckijc4ix63skyzmskmq00l3p5d9ms2zvqo.jpg',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'Test',
+ } as MetadataValue,
+ ],
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(null),
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b',
+ },
+ },
+});
+
+export const bitstreamWithThumbnail = Object.assign(new Bitstream(), {
+ id: 'bitstream2',
+ uuid: 'bitstream2',
+ thumbnail: createSuccessfulRemoteDataObject$(mockThumbnail),
+});
+
+export const bitstreamWithoutThumbnail = Object.assign(new Bitstream(), {
+ id: 'bitstream1',
+ uuid: 'bitstream1',
+ sizeBytes: 7798,
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: 'f7a94983-aaa2-45b4-8fa4-554566734fb5',
+ value: 'Generated Thumbnail',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '392bb9b3-7de4-41e4-881f-e72b221cfefd',
+ value: 'Written by FormatFilter org.dspace.app.mediafilter.JPEGFilter on 2022-05-24T15:12:12Z (GMT).',
+ } as MetadataValue,
+ ],
+ 'dc.source': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'young-waiter-2021-08-26-15-47-22-utc-2-pjv2sebbckijc4ix63skyzmskmq00l3p5d9ms2zvqo.jpg',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'Test',
+ } as MetadataValue,
+ ],
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(null),
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b',
+ },
+ },
+
+});
+
+export const mockThumbnailWithType = Object.assign(new Bitstream(), {
+ id: 'thumbnail1',
+ uuid: 'thumbnail1',
+ sizeBytes: 7798,
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: 'f7a94983-aaa2-45b4-8fa4-554566734fb5',
+ value: 'Generated Thumbnail',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '392bb9b3-7de4-41e4-881f-e72b221cfefd',
+ value: 'Written by FormatFilter org.dspace.app.mediafilter.JPEGFilter on 2022-05-24T15:12:12Z (GMT).',
+ } as MetadataValue,
+ ],
+ 'dc.source': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'young-waiter-2021-08-26-15-47-22-utc-2-pjv2sebbckijc4ix63skyzmskmq00l3p5d9ms2zvqo.jpg',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'Personal Picture',
+ } as MetadataValue,
+ ],
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(null),
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/thumbnail-6df9-40ef-9009-b3c90a4e6d5b',
+ },
+ },
+});
+
+export const bitstreamWithThumbnailWithMetadata = Object.assign(new Bitstream(), {
+ id: 'bitstream2',
+ uuid: 'bitstream2',
+ metadata: {
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'Personal Picture',
+ } as MetadataValue,
+ ],
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(mockThumbnailWithType),
+});
+
+export const bitstreamOrignialWithMetadata = Object.assign(new Bitstream(), {
+ id: 'bitstream1',
+ uuid: 'bitstream1',
+ sizeBytes: 7798,
+ metadata: {
+ 'dc.description': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: 'f7a94983-aaa2-45b4-8fa4-554566734fb5',
+ value: 'Generated Thumbnail',
+ } as MetadataValue,
+ ],
+ 'dc.title': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '392bb9b3-7de4-41e4-881f-e72b221cfefd',
+ value: 'Written by FormatFilter org.dspace.app.mediafilter.JPEGFilter on 2022-05-24T15:12:12Z (GMT).',
+ } as MetadataValue,
+ ],
+ 'dc.source': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'young-waiter-2021-08-26-15-47-22-utc-2-pjv2sebbckijc4ix63skyzmskmq00l3p5d9ms2zvqo.jpg',
+ } as MetadataValue,
+ ],
+ 'dc.type': [
+ {
+ authority: null,
+ confidence: -1,
+ language: null,
+ place: 0,
+ uuid: '5f1933f7-670c-43f0-beab-f3ea9e753e94',
+ value: 'Personal Picture',
+ } as MetadataValue,
+ ],
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(null),
+ _links: {
+ 'content': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/content',
+ },
+ 'bundle': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/bundle',
+ },
+ 'format': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/format',
+ },
+ 'thumbnail': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b/thumbnail',
+ },
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/core/bitstreams/bitstream-6df9-40ef-9009-b3c90a4e6d5b',
+ },
+ },
+
+});
diff --git a/src/app/core/testing/box-configurations.mock.ts b/src/app/core/testing/box-configurations.mock.ts
new file mode 100644
index 00000000000..b53501e9e3c
--- /dev/null
+++ b/src/app/core/testing/box-configurations.mock.ts
@@ -0,0 +1,249 @@
+import {
+ MetadataBoxConfiguration,
+ MetricsBoxConfiguration,
+ RelationBoxConfiguration,
+} from '../../core/layout/models/box.model';
+
+export const relationBoxConfigurationMock: RelationBoxConfiguration = {
+ type: 'boxrelationconfiguration',
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+};
+
+export const metricsBoxConfigurationMock: MetricsBoxConfiguration = {
+ type: 'boxmetricsconfiguration',
+ maxColumns: null,
+ metrics: ['view', 'embedded-view'],
+};
+
+export const metadataBoxConfigurationMock: MetadataBoxConfiguration = {
+ 'id': 'mockBoxConfiguration',
+ 'type': 'boxmetadataconfiguration',
+ 'rows': [
+ {
+ 'style': 'row-style',
+ 'cells': [
+ {
+ 'style': 'col-3',
+ 'fields': [
+ {
+ 'bitstream': {
+ 'bundle': 'ORIGINAL',
+ 'metadataField': 'dc.type',
+ 'metadataValue': 'personal picture',
+ },
+ 'label': null,
+ 'rendering': 'thumbnail',
+ 'fieldType': 'BITSTREAM',
+ 'style': null,
+ 'styleLabel': null,
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ ],
+ },
+ {
+ 'style': 'cell-style',
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Preferred name',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.name',
+ 'label': 'Official Name',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.name.translated',
+ 'label': 'Translated Name',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.name.variant',
+ 'label': 'Alternative Name',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'oairecerif.identifier.url',
+ 'label': 'Web Site',
+ 'rendering': 'link',
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'row-style',
+ 'cells': [
+ {
+ 'style': 'cell-style',
+ 'fields': [
+ {
+ 'metadata': 'dc.description.abstract',
+ 'label': 'Biography',
+ 'rendering': 'longtext',
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'oairecerif.person.affiliation',
+ 'label': 'Affiliation',
+ 'rendering': 'table',
+ 'fieldType': 'METADATAGROUP',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'metadataGroup': {
+ 'leading': 'oairecerif.person.affiliation',
+ 'elements': [
+ {
+ 'metadata': 'oairecerif.affiliation.role',
+ 'label': 'Role',
+ 'rendering': 'text',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'oairecerif.person.affiliation',
+ 'label': 'Organisation',
+ 'rendering': 'dynamicref',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'oairecerif.affiliation.startDate',
+ 'label': 'Start',
+ 'rendering': 'date',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'oairecerif.affiliation.endDate',
+ 'label': 'End',
+ 'rendering': 'date',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ ],
+ },
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.education',
+ 'label': 'Education',
+ 'rendering': 'inline',
+ 'fieldType': 'METADATAGROUP',
+ 'style': null,
+ 'styleLabel': 'fw-bold',
+ 'styleValue': null,
+ 'metadataGroup': {
+ 'leading': 'crisrp.education',
+ 'elements': [
+ {
+ 'metadata': 'crisrp.education.role',
+ 'label': 'Role',
+ 'rendering': 'text',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.education',
+ 'label': 'Organisation',
+ 'rendering': 'dynamicref',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.education.start',
+ 'label': 'Start',
+ 'rendering': 'date',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ {
+ 'metadata': 'crisrp.education.end',
+ 'label': 'End',
+ 'rendering': 'date',
+ 'fieldType': 'METADATA',
+ 'style': 'row',
+ 'styleLabel': 'col',
+ 'styleValue': 'col',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ ],
+ },
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/app/core/testing/box.mock.ts b/src/app/core/testing/box.mock.ts
new file mode 100644
index 00000000000..f55d4746a90
--- /dev/null
+++ b/src/app/core/testing/box.mock.ts
@@ -0,0 +1,59 @@
+import { DynamicLayoutBox } from '../../core/layout/models/box.model';
+import {
+ metadataBoxConfigurationMock,
+ metricsBoxConfigurationMock,
+ relationBoxConfigurationMock,
+} from './box-configurations.mock';
+
+export const boxMetadata: DynamicLayoutBox = {
+ id: 1,
+ shortname: 'shortname-box-1',
+ header: 'header-box-1',
+ entityType: 'Box',
+ collapsed: false,
+ minor: false,
+ style: 'col-md-4',
+ clear: false,
+ maxColumn: null,
+ container: true,
+ security: 0,
+ boxType: 'metadata',
+ metadataSecurityFields: [],
+ configuration: metadataBoxConfigurationMock,
+};
+
+export const boxSearch: DynamicLayoutBox = {
+ id: 2,
+ shortname: 'shortname-box-2',
+ header: 'header-box-2',
+ entityType: 'Box',
+ collapsed: false,
+ minor: false,
+ style: 'col-md-10',
+ clear: false,
+ maxColumn: null,
+ container: true,
+ security: 0,
+ boxType: 'relation',
+ metadataSecurityFields: [],
+ configuration: relationBoxConfigurationMock,
+};
+
+export const boxMetrics: DynamicLayoutBox = {
+ id: 3,
+ shortname: 'shortname-box-3',
+ header: 'header-box-3',
+ entityType: 'Box',
+ collapsed: false,
+ minor: false,
+ style: 'col-md-2',
+ clear: false,
+ maxColumn: null,
+ container: true,
+ security: 0,
+ boxType: 'metrics',
+ metadataSecurityFields: [],
+ configuration: metricsBoxConfigurationMock,
+};
+
+export const boxes = [boxMetadata, boxSearch, boxMetrics];
diff --git a/src/app/core/testing/layout-tab.mocks.ts b/src/app/core/testing/layout-tab.mocks.ts
new file mode 100644
index 00000000000..c574fb378e2
--- /dev/null
+++ b/src/app/core/testing/layout-tab.mocks.ts
@@ -0,0 +1,1068 @@
+import { DynamicLayoutTab } from '../../core/layout/models/tab.model';
+import { TAB } from '../../core/layout/models/tab.resource-type';
+
+export const tabPersonProfile: DynamicLayoutTab = {
+ type: TAB,
+ id: 1,
+ shortname: 'person-profile',
+ header: 'person-profile-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-profile-1',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/1',
+ },
+ },
+};
+
+export const tabPersonBiography: DynamicLayoutTab = {
+ type: TAB,
+ id: 2,
+ shortname: 'person-biography',
+ header: 'person-biography-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-biography-2',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/2',
+ },
+ },
+};
+
+export const tabPersonBibliometrics: DynamicLayoutTab = {
+ type: TAB,
+ id: 3,
+ shortname: 'person-bibliometrics',
+ header: 'person-bibliometrics-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-bibliometrics-3',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/3',
+ },
+ },
+};
+
+export const tabPersonTest: DynamicLayoutTab = {
+ type: TAB,
+ id: 4,
+ shortname: 'person-test',
+ header: 'person-test-header',
+ entityType: 'Person',
+ priority: 0,
+ security: 0,
+ uuid: 'person-test-3',
+ _links: {
+ self: {
+ href: 'https://rest.api/rest/api/tabs/3',
+ },
+ },
+};
+
+export const tabs = [tabPersonProfile, tabPersonBiography, tabPersonBibliometrics];
+export const leadingTabs: DynamicLayoutTab[] = [
+ Object.assign(new DynamicLayoutTab(), {
+ 'id': 1,
+ 'shortname': 'info',
+ 'header': 'Profile',
+ 'entityType': 'Person',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': true,
+ 'rows': [
+ {
+ 'style': 'test-class',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'cells': [
+ {
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ }),
+];
+export const loaderTabs: DynamicLayoutTab[] = [Object.assign(new DynamicLayoutTab(), {
+ 'id': 2,
+ 'shortname': 'info',
+ 'header': 'Profile',
+ 'entityType': 'Person',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': false,
+ 'rows': [
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+}),
+Object.assign(new DynamicLayoutTab(), {
+ 'id': 3,
+ 'shortname': 'info',
+ 'header': 'Profile',
+ 'entityType': 'Person',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': false,
+ 'rows': [
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': true,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': true,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+}),
+];
+
+export const bothTabs = [...leadingTabs, ...loaderTabs];
+
+export const loaderMultilevelTabs: DynamicLayoutTab[] = [
+ Object.assign(new DynamicLayoutTab(), {
+ 'id': 2,
+ 'shortname': 'info',
+ 'header': 'Profile',
+ 'entityType': 'Person',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': false,
+ 'rows': [
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ }),
+ Object.assign(new DynamicLayoutTab(), {
+ 'id': 2,
+ 'shortname': 'Projects::info',
+ 'header': 'Projects::info',
+ 'entityType': 'Project',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': false,
+ 'rows': [
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ }),
+ Object.assign(new DynamicLayoutTab(), {
+ 'id': 2,
+ 'shortname': 'Projects::detail',
+ 'header': 'Projects::detail',
+ 'entityType': 'Project',
+ 'priority': 1,
+ 'security': 0,
+ 'type': 'tab',
+ 'leading': false,
+ 'rows': [
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'primary',
+ 'header': 'Primary Information',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'container': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 1,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'dc.title',
+ 'label': 'Name',
+ 'fieldType': 'metadata',
+ },
+ {
+ 'metadata': 'person.email',
+ 'label': 'Email',
+ 'fieldType': 'metadata',
+ 'valuesInline': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ 'shortname': 'other',
+ 'header': 'Other Informations',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METADATA',
+ 'type': 'box',
+ 'metadataSecurityFields': [
+ 'cris.policy.eperson',
+ ],
+ 'configuration': {
+ 'id': 2,
+ 'rows': [
+ {
+ 'fields': [
+ {
+ 'metadata': 'person.birthDate',
+ 'label': 'Birth date',
+ 'fieldType': 'metadata',
+ 'labelAsHeading': 'true',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-6',
+ 'boxes': [
+ {
+ 'shortname': 'researchoutputs',
+ 'header': 'Research outputs',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': 'col-md-6',
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'RELATION',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 3,
+ 'discovery-configuration': 'RELATION.Person.researchoutputs',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ 'style': 'col-md-12',
+ 'cells': [
+ {
+ 'style': 'col-md-12',
+ 'boxes': [
+ {
+ 'shortname': 'metrics',
+ 'header': 'Metrics',
+ 'entityType': 'Person',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'clear': true,
+ 'maxColumn': 2,
+ 'security': 0,
+ 'boxType': 'METRICS',
+ 'type': 'box',
+ 'metadataSecurityFields': [],
+ 'configuration': {
+ 'id': 4,
+ 'numColumns': 2,
+ 'metrics': ['views', 'downloads'],
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ }),
+];
+export const tabDetailsTest: DynamicLayoutTab = {
+ 'id': 395,
+ 'shortname': 'details',
+ 'header': 'Informations',
+ 'entityType': 'OrgUnit',
+ 'priority': 0,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/395',
+ },
+ },
+};
+export const tabPublicationsTest: DynamicLayoutTab = {
+ 'id': 396,
+ 'shortname': 'publications',
+ 'header': 'Publications',
+ 'entityType': 'OrgUnit',
+ 'priority': 2,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/396',
+ },
+ },
+};
+export const tabRpPublicationsTest: DynamicLayoutTab = {
+ 'id': 397,
+ 'shortname': 'rp::publications',
+ 'header': 'Researchers::Publications',
+ 'entityType': 'OrgUnit',
+ 'priority': 4,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/397',
+ },
+ },
+};
+export const tabProjectsTest: DynamicLayoutTab = {
+ 'id': 398,
+ 'shortname': 'projects',
+ 'header': 'Projects',
+ 'entityType': 'OrgUnit',
+ 'priority': 6,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/398',
+ },
+ },
+};
+export const tabRpProjectsTest: DynamicLayoutTab = {
+ 'id': 399,
+ 'shortname': 'rp::projects',
+ 'header': 'Researchers::Projects',
+ 'entityType': 'OrgUnit',
+ 'priority': 8,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/399',
+ },
+ },
+};
+export const tabPeoplesTest: DynamicLayoutTab = {
+ 'id': 400,
+ 'shortname': 'people',
+ 'header': 'Peoples',
+ 'entityType': 'OrgUnit',
+ 'priority': 10,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/400',
+ },
+ },
+};
+export const tabFundingsTest: DynamicLayoutTab = {
+ 'id': 395,
+ 'shortname': 'outputs::fundings',
+ 'header': 'Fundings',
+ 'entityType': 'OrgUnit',
+ 'priority': 0,
+ 'security': 0,
+ 'type': TAB,
+ 'uuid': '123123123123',
+ '_links': {
+ 'self': {
+ 'href': 'http://localhost:8080/server/api/layout/tabs/401',
+ },
+ },
+};
+export const tabsWithNestedLevel = [tabDetailsTest, tabPublicationsTest, tabRpPublicationsTest, tabProjectsTest, tabRpProjectsTest, tabPeoplesTest];
diff --git a/src/app/core/testing/router.stub.ts b/src/app/core/testing/router.stub.ts
index 3fe64c481c8..ed2ebb5a82c 100644
--- a/src/app/core/testing/router.stub.ts
+++ b/src/app/core/testing/router.stub.ts
@@ -16,4 +16,8 @@ export class RouterStub {
serializeUrl(commands, navExtras = {}) {
return '/testing-url';
}
+
+ public setNavigateReturnValue(value = true) {
+ this.navigate.and.returnValue(Promise.resolve(value));
+ }
}
diff --git a/src/app/decorators.ts b/src/app/decorators.ts
index 7a5458a0070..c8f5886f835 100644
--- a/src/app/decorators.ts
+++ b/src/app/decorators.ts
@@ -137,4 +137,23 @@ export const DECORATORS: DecoratorConfig[] = [
{ name: 'theme', default: '*' },
],
},
+ {
+ name: 'metadataBoxFieldRendering',
+ params: [
+ { name: 'renderingType' },
+ { name: 'structured', default: false },
+ ],
+ },
+ {
+ name: 'renderDynamicLayoutBoxFor',
+ params: [
+ { name: 'boxType' },
+ ],
+ },
+ {
+ name: 'dynamicLayoutPage',
+ params: [
+ { name: 'orientation' },
+ ],
+ },
];
diff --git a/src/app/dynamic-item-page/dynamic-item-page.component.html b/src/app/dynamic-item-page/dynamic-item-page.component.html
new file mode 100644
index 00000000000..651f04fb48c
--- /dev/null
+++ b/src/app/dynamic-item-page/dynamic-item-page.component.html
@@ -0,0 +1,14 @@
+;
+
+ const mockRoute = Object.assign(new ActivatedRouteStub(), {
+ data: of({ dso: createSuccessfulRemoteDataObject(mockItem) }),
+ });
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, DynamicItemPageComponent, VarDirective],
+ providers: [
+ { provide: AuthorizationDataService, useValue: authorizationService },
+ { provide: ActivatedRoute, useValue: mockRoute },
+ { provide: ItemDataService, useValue: {} },
+ { provide: Router, useValue: {} },
+ { provide: AuthService, useValue: authService },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ })
+ .overrideComponent(DynamicItemPageComponent, { remove: { imports: [ThemedLoadingComponent, ThemedItemAlertsComponent, DynamicLayoutComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicItemPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ describe('when the item is loading', () => {
+ beforeEach(() => {
+ component.itemRD$ = createPendingRemoteDataObject$(undefined);
+ fixture.detectChanges();
+ });
+
+ it('should display a loading component', () => {
+ const loading = fixture.debugElement.query(By.css('ds-loading'));
+ expect(loading.nativeElement).toBeDefined();
+ });
+ });
+
+ describe('when the item is loaded', () => {
+ beforeEach(() => {
+ component.itemRD$ = createSuccessfulRemoteDataObject$(mockItem);
+ fixture.detectChanges();
+ });
+
+ it('should display the dynamic layout component', () => {
+ const layout = fixture.debugElement.query(By.css('ds-dynamic-layout'));
+ expect(layout.nativeElement).toBeDefined();
+ });
+ });
+
+ describe('when the item is no content', () => {
+ beforeEach(() => {
+ const itemRD = createNoContentRemoteDataObject- ();
+ itemRD.statusCode = 204;
+ component.itemRD$ = of(itemRD);
+ fixture.detectChanges();
+ });
+
+ it('should not display the dynamic layout component', () => {
+ const layout = fixture.debugElement.query(By.css('ds-dynamic-layout'));
+ expect(layout).toBeNull();
+ });
+ });
+});
diff --git a/src/app/dynamic-item-page/dynamic-item-page.component.ts b/src/app/dynamic-item-page/dynamic-item-page.component.ts
new file mode 100644
index 00000000000..a984e294fc7
--- /dev/null
+++ b/src/app/dynamic-item-page/dynamic-item-page.component.ts
@@ -0,0 +1,62 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
+import { RemoteData } from '../core/data/remote-data';
+import { Item } from '../core/shared/item.model';
+import { DynamicLayoutComponent } from '../dynamic-layout/dynamic-layout.component';
+import { ThemedItemAlertsComponent } from '../item-page/alerts/themed-item-alerts.component';
+import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
+
+/**
+ * Entry point component for the dynamic item page.
+ *
+ * Resolves the item from route data and passes it to {@link DynamicLayoutComponent},
+ * which handles tab resolution and layout rendering. Also checks admin authorization
+ * for displaying admin-specific UI elements.
+ */
+@Component({
+ selector: 'ds-dynamic-item-page',
+ templateUrl: './dynamic-item-page.component.html',
+ styleUrls: ['./dynamic-item-page.component.scss'],
+ imports: [
+ AsyncPipe,
+ DynamicLayoutComponent,
+ ThemedItemAlertsComponent,
+ ThemedLoadingComponent,
+ TranslateModule,
+ ],
+})
+export class DynamicItemPageComponent implements OnInit {
+
+ /**
+ * Whether the current user is an admin or not
+ */
+ isAdmin$: Observable
;
+
+ itemRD$: Observable>;
+
+ constructor(
+ private authorizationService: AuthorizationDataService,
+ private route: ActivatedRoute,
+ ) {
+
+ }
+
+ ngOnInit() {
+ this.itemRD$ = this.route.data.pipe(
+ map((data) => data.dso as RemoteData- ),
+ );
+
+ this.isAdmin$ = this.authorizationService.isAuthorized(FeatureID.AdministratorOf);
+ }
+
+}
diff --git a/src/app/dynamic-layout/decorators/dynamic-layout-box.decorator.ts b/src/app/dynamic-layout/decorators/dynamic-layout-box.decorator.ts
new file mode 100644
index 00000000000..52b105c0318
--- /dev/null
+++ b/src/app/dynamic-layout/decorators/dynamic-layout-box.decorator.ts
@@ -0,0 +1,49 @@
+import { hasValue } from '@dspace/shared/utils/empty.util';
+
+import { RENDER_DYNAMIC_LAYOUT_BOX_FOR_MAP } from '../../../decorator-registries/render-dynamic-layout-box-for-registry';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { LayoutBox } from '../enums/layout-box.enum';
+
+/**
+ * The type of component a layout box can be rendered with.
+ *
+ * The registry is heterogeneous: most boxes extend {@link DynamicLayoutBoxDirective},
+ * but some (e.g. VERSIONING) are rendered with a standalone component that does not,
+ * so a generic constructor type is used here.
+ */
+type DynamicLayoutBoxComponent = GenericConstructor
;
+
+/**
+ * Marker decorator used to register a component as the renderer for a given {@link LayoutBox} type.
+ *
+ * The actual registry ({@link RENDER_DYNAMIC_LAYOUT_BOX_FOR_MAP}) is generated at build time by
+ * `scripts/generate-decorator-registries.ts` from these decorator usages, so this function is a no-op
+ * at runtime and only serves as metadata for the generator.
+ *
+ * Components extending {@link DynamicLayoutBoxDirective} inherit a static
+ * `hasOwnContainer` flag (default `false`). If a component provides its own
+ * wrapping container (e.g. accordion), override it with
+ * `static override hasOwnContainer = true;` in the component class.
+ *
+ * @param boxType the layout box type the decorated component renders
+ */
+export function renderDynamicLayoutBoxFor(boxType: LayoutBox) {
+ return function decorator(component: DynamicLayoutBoxComponent) {
+ };
+}
+
+/**
+ * Resolves the rendering component for a given box type.
+ *
+ * @param boxType the layout box type to look up
+ * @param registry the registry containing all the box rendering components
+ * @returns a promise resolving to the component constructor for the box type,
+ * or undefined if not registered
+ */
+export function getDynamicLayoutBox(
+ boxType: LayoutBox,
+ registry: Map Promise> = RENDER_DYNAMIC_LAYOUT_BOX_FOR_MAP,
+): Promise {
+ const loader = registry.get(boxType);
+ return hasValue(loader) ? loader() : undefined;
+}
diff --git a/src/app/dynamic-layout/decorators/dynamic-layout-page.decorator.ts b/src/app/dynamic-layout/decorators/dynamic-layout-page.decorator.ts
new file mode 100644
index 00000000000..a30a311585c
--- /dev/null
+++ b/src/app/dynamic-layout/decorators/dynamic-layout-page.decorator.ts
@@ -0,0 +1,42 @@
+import { hasValue } from '@dspace/shared/utils/empty.util';
+
+import { DYNAMIC_LAYOUT_PAGE_MAP } from '../../../decorator-registries/dynamic-layout-page-registry';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+ DEFAULT_LAYOUT_PAGE,
+ LayoutPage,
+} from '../enums/layout-page.enum';
+
+/**
+ * Marker decorator used to register a component as the renderer for a given {@link LayoutPage} orientation.
+ *
+ * The actual registry ({@link DYNAMIC_LAYOUT_PAGE_MAP}) is generated at build time by
+ * `scripts/generate-decorator-registries.ts` from these decorator usages, so this function is a no-op
+ * at runtime and only serves as metadata for the generator.
+ *
+ * @param orientation the layout page orientation the decorated component renders
+ */
+export function dynamicLayoutPage(orientation: LayoutPage) {
+ return function decorator(component: GenericConstructor) {
+ /* intentionally empty: the registry is generated at build time */
+ };
+}
+
+/**
+ * Resolves the page layout component for the given orientation.
+ * Falls back to {@link DEFAULT_LAYOUT_PAGE} if orientation is null or not registered.
+ *
+ * @param orientation the layout page orientation (horizontal or vertical)
+ * @param registry the registry containing all the layout page components
+ * @returns a promise resolving to the component constructor for the requested orientation,
+ * or undefined if neither the orientation nor the default is registered
+ */
+export function getDynamicLayoutPage(
+ orientation: LayoutPage,
+ registry: Map Promise>> = DYNAMIC_LAYOUT_PAGE_MAP,
+): Promise> {
+ const loader = (hasValue(orientation) && hasValue(registry.get(orientation)))
+ ? registry.get(orientation)
+ : registry.get(DEFAULT_LAYOUT_PAGE);
+ return hasValue(loader) ? loader() : undefined;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.html b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.html
new file mode 100644
index 00000000000..370ed7af9f2
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.html
@@ -0,0 +1,11 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DynamicLayoutLeadingComponent],
+ })
+ .overrideComponent(DynamicLayoutLeadingComponent, { remove: { imports: [DynamicLayoutMatrixComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutLeadingComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.ts b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.ts
new file mode 100644
index 00000000000..8517d97de77
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.ts
@@ -0,0 +1,41 @@
+
+import {
+ Component,
+ Input,
+} from '@angular/core';
+
+import { DynamicLayoutTab } from '../../core/layout/models/tab.model';
+import { Item } from '../../core/shared/item.model';
+import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { DynamicLayoutMatrixComponent } from '../dynamic-layout-matrix/dynamic-layout-matrix.component';
+
+/**
+ * Component that renders leading tabs (summary/overview panels displayed above the main tabbed content).
+ * Delegates box rendering to {@link DynamicLayoutMatrixComponent} and optionally shows the edit menu.
+ */
+@Component({
+ selector: 'ds-dynamic-layout-leading',
+ templateUrl: './dynamic-layout-leading.component.html',
+ styleUrls: ['./dynamic-layout-leading.component.scss'],
+ imports: [
+ DsoEditMenuComponent,
+ DynamicLayoutMatrixComponent,
+ ],
+})
+export class DynamicLayoutLeadingComponent {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tab: DynamicLayoutTab;
+
+ /**
+ * The related item
+ */
+ @Input() item: Item;
+
+ /**
+ * A boolean representing if to show context menu or not
+ */
+ @Input() showContextMenu: boolean;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.html b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.html
new file mode 100644
index 00000000000..222a21f631b
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.html
@@ -0,0 +1,15 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DynamicLayoutHorizontalComponent],
+ providers: [
+ { provide: Router, useValue: new RouterMock() },
+ { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+ ],
+ })
+ .overrideComponent(DynamicLayoutHorizontalComponent, { remove: { imports: [DynamicLayoutNavbarComponent, DynamicLayoutMatrixComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutHorizontalComponent);
+ component = fixture.componentInstance;
+ component.leadingTabs = [];
+ component.tabs = loaderTabs;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show navbar', () => {
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-navbar'))).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.ts
new file mode 100644
index 00000000000..f105f93662c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.ts
@@ -0,0 +1,56 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Input,
+} from '@angular/core';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { BehaviorSubject } from 'rxjs';
+
+import { DsoEditMenuComponent } from '../../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { dynamicLayoutPage } from '../../decorators/dynamic-layout-page.decorator';
+import { DynamicLayoutMatrixComponent } from '../../dynamic-layout-matrix/dynamic-layout-matrix.component';
+import { LayoutPage } from '../../enums/layout-page.enum';
+import { DynamicLayoutPageDirective } from '../../models/dynamic-layout-page.directive';
+import { DynamicLayoutNavbarComponent } from './dynamic-layout-navbar/dynamic-layout-navbar.component';
+
+/**
+ * Horizontal layout page component for the dynamic item page.
+ * Renders tabs as a horizontal top navbar, with the selected tab's content
+ * displayed below via {@link DynamicLayoutMatrixComponent}.
+ */
+@dynamicLayoutPage(LayoutPage.HORIZONTAL)
+@Component({
+ selector: 'ds-dynamic-layout-horizontal',
+ templateUrl: './dynamic-layout-horizontal.component.html',
+ styleUrls: ['./dynamic-layout-horizontal.component.scss'],
+ imports: [
+ AsyncPipe,
+ DsoEditMenuComponent,
+ DynamicLayoutMatrixComponent,
+ DynamicLayoutNavbarComponent,
+ ],
+})
+export class DynamicLayoutHorizontalComponent extends DynamicLayoutPageDirective {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tabs: DynamicLayoutTab[];
+
+ /**
+ * A boolean representing if to show context menu or not
+ */
+ @Input() showContextMenu: boolean;
+
+ /**
+ * leadingTabs to understand if to show navbar
+ */
+ @Input() leadingTabs: DynamicLayoutTab[];
+
+
+ selectedTab$: BehaviorSubject = new BehaviorSubject(null);
+
+ selectedTabChanged(tab: DynamicLayoutTab) {
+ this.selectedTab$.next(tab);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.html b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.html
new file mode 100644
index 00000000000..fb246962113
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.html
@@ -0,0 +1,24 @@
+@if ((isXsOrSm$ | async) && showNav) {
+
+}
+
+@if (showNav) {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.scss b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.scss
new file mode 100644
index 00000000000..0c7f5a35f1e
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.scss
@@ -0,0 +1,64 @@
+.dynamic-layout-navbar {
+ z-index: 1025;
+}
+.navbar-nav{
+ justify-content: flex-start;
+ height: 60px;
+ align-items: center;
+}
+
+.nav-item{
+ height: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+nav.navbar {
+ align-items: baseline;
+ background-color: var(--ds-dynamic-layout-navbar-background-color);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+ .navbar {
+ width: 100vw;
+ background-color: var(--bs-white);
+ overflow: hidden;
+ height: 0;
+ &.open {
+ height: auto !important;
+ }
+ &.ng-animating {
+ height: auto !important;
+ }
+ }
+ .navbar-nav{
+ height: auto;
+ }
+ .sidebar-section{
+ width: 100%;
+ }
+ :host{
+ width: 100%;
+ }
+
+ nav.navbar {
+ border-bottom: 1px var(--bs-gray-400) solid;
+ align-items: baseline;
+ }
+
+ .navbar-toggler .navbar-toggler-icon {
+ background-image: none !important;
+ line-height: 1.5;
+ color: var(--bs-link-color);
+ }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+ .reset-padding-md {
+ margin-left: calc(var(--bs-spacer) / -2);
+ margin-right: calc(var(--bs-spacer) / -2);
+ }
+}
+
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.spec.ts
new file mode 100644
index 00000000000..d9a3318b826
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.spec.ts
@@ -0,0 +1,149 @@
+import { DebugElement } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
+import { HostWindowServiceStub } from '@dspace/core/testing/host-window-service.stub';
+import { loaderMultilevelTabs } from '@dspace/core/testing/layout-tab.mocks';
+import { RouterStub } from '@dspace/core/testing/router.stub';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import {
+ BehaviorSubject,
+ of,
+} from 'rxjs';
+
+import { HostWindowService } from '../../../../shared/host-window.service';
+import { DynamicLayoutSidebarItemComponent } from '../../shared/sidebar-item/dynamic-layout-sidebar-item.component';
+import { DynamicLayoutNavbarComponent } from './dynamic-layout-navbar.component';
+
+
+describe('DynamicLayoutNavbarComponent', () => {
+ let component: DynamicLayoutNavbarComponent;
+ let fixture: ComponentFixture;
+ let de: DebugElement;
+ let router: RouterStub;
+
+ const windowServiceStub = new HostWindowServiceStub(1000);
+
+ const activatedRouteStub = new ActivatedRouteStub();
+
+ const mockItem = Object.assign(new Item(), {
+ id: 'fake-id',
+ handle: 'fake/handle',
+ lastModified: '2018',
+ metadata: {
+ 'dc.title': [
+ {
+ language: null,
+ value: 'test',
+ },
+ ],
+ 'dspace.entity.type': [
+ {
+ language: null,
+ value: 'Person',
+ },
+ ],
+ },
+ });
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ BrowserAnimationsModule,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ DynamicLayoutNavbarComponent,
+ ],
+ providers: [
+ { provide: HostWindowService, useValue: windowServiceStub },
+ { provide: Router, useClass: RouterStub },
+ { provide: ActivatedRoute, useValue: activatedRouteStub },
+ ],
+ })
+ .overrideComponent(DynamicLayoutNavbarComponent, { remove: { imports: [DynamicLayoutSidebarItemComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutNavbarComponent);
+ router = TestBed.inject(Router) as unknown as RouterStub;
+ router.setNavigateReturnValue(true);
+ component = fixture.componentInstance;
+ component.item = mockItem;
+ component.tabs = [];
+ component.showNav = true;
+ de = fixture.debugElement;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+
+ describe('when there are tabs', () => {
+
+ beforeEach(() => {
+ component.tabs = loaderMultilevelTabs;
+ component.item = mockItem;
+ component.activeTab$ = new BehaviorSubject(loaderMultilevelTabs[0]);
+ component.isXsOrSm$ = of(true);
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('navbar should be collapsed', () => {
+ expect(de.query(By.css('.dynamic-layout-navbar.collapsed'))).toBeTruthy();
+ expect(de.query(By.css('.dynamic-layout-navbar.expanded'))).toBeNull();
+ });
+
+ describe('when small screens < 576', () => {
+
+ beforeEach(() => {
+ windowServiceStub.setWidth(400);
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ xit('should show navbar items', () => {
+ expect(de.query(By.css('.dynamic-layout-navbar')).nativeElement.clientHeight).toEqual(0);
+ });
+
+ it('should not show navbar-toggler', () => {
+ expect(de.query(By.css('.navbar-toggler'))).toBeTruthy();
+ });
+
+ it('when click navbar-toggler should be expanded', () => {
+
+ const navbarToggler = de.query(By.css('.navbar-toggler'));
+ navbarToggler.nativeElement.click();
+ fixture.detectChanges();
+
+ expect(de.query(By.css('.dynamic-layout-navbar.expanded'))).toBeTruthy();
+ expect(de.query(By.css('.dynamic-layout-navbar.collapsed'))).toBeNull();
+ });
+
+ });
+ });
+
+
+
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.ts
new file mode 100644
index 00000000000..261d7866bdf
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component.ts
@@ -0,0 +1,70 @@
+import {
+ AsyncPipe,
+ NgClass,
+} from '@angular/common';
+import {
+ Component,
+ EventEmitter,
+ inject,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+
+import { HostWindowService } from '../../../../shared/host-window.service';
+import { DynamicLayoutTabsComponent } from '../../shared/dynamic-layout-tabs/dynamic-layout-tabs.component';
+import { DynamicLayoutSidebarItemComponent } from '../../shared/sidebar-item/dynamic-layout-sidebar-item.component';
+
+@Component({
+ selector: 'ds-dynamic-layout-navbar',
+ templateUrl: './dynamic-layout-navbar.component.html',
+ styleUrls: ['./dynamic-layout-navbar.component.scss'],
+ imports: [
+ AsyncPipe,
+ DynamicLayoutSidebarItemComponent,
+ NgClass,
+ TranslateModule,
+ ],
+})
+export class DynamicLayoutNavbarComponent extends DynamicLayoutTabsComponent implements OnInit {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tabs: DynamicLayoutTab[];
+
+ /**
+ * Item that is being viewed
+ */
+ @Input() item: Item;
+
+ @Input() showNav: boolean;
+
+ menuCollapsed = true;
+
+ /**
+ * Item that is being viewed
+ */
+ @Output() selectedTabChange = new EventEmitter();
+
+ windowService = inject(HostWindowService);
+
+ isXsOrSm$: Observable;
+
+ ngOnInit(): void {
+ this.init();
+ this.isXsOrSm$ = this.windowService.isXsOrSm();
+ }
+
+ emitSelected(selectedTab) {
+ this.selectedTabChange.emit(selectedTab);
+ }
+
+ toggleNavbar() {
+ this.menuCollapsed = !this.menuCollapsed;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.spec.ts
new file mode 100644
index 00000000000..7f10576d8e1
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.spec.ts
@@ -0,0 +1,147 @@
+import { CommonModule } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+ ActivatedRoute,
+ provideRouter,
+} from '@angular/router';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { HostWindowServiceStub } from '@dspace/core/testing/host-window-service.stub';
+import { loaderTabs } from '@dspace/core/testing/layout-tab.mocks';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { Item } from '../../core/shared/item.model';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { HostWindowService } from '../../shared/host-window.service';
+import { getMockThemeService } from '../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { DynamicLayoutHorizontalComponent } from './dynamic-layout-horizontal/dynamic-layout-horizontal.component';
+import { DynamicLayoutLoaderComponent } from './dynamic-layout-loader.component';
+import { DynamicLayoutVerticalComponent } from './dynamic-layout-vertical/dynamic-layout-vertical.component';
+
+describe('DynamicLayoutLoaderComponent', () => {
+ let component: DynamicLayoutLoaderComponent;
+ let fixture: ComponentFixture;
+ const windowServiceStub = new HostWindowServiceStub(1200);
+
+ const mockItem = Object.assign(new Item(), {
+ id: 'fake-id',
+ handle: 'fake/handle',
+ lastModified: '2018',
+ metadata: {
+ 'dc.title': [
+ {
+ language: null,
+ value: 'test',
+ },
+ ],
+ 'dspace.entity.type': [
+ {
+ language: null,
+ value: 'Person',
+ },
+ ],
+ },
+ });
+
+ function configureTestBed(orientation: string) {
+ return TestBed.configureTestingModule({
+ imports: [
+ CommonModule,
+ TranslateModule.forRoot({
+ loader: { provide: TranslateLoader, useClass: TranslateLoaderMock },
+ }),
+ DynamicLayoutLoaderComponent,
+ DynamicComponentLoaderDirective,
+ DynamicLayoutVerticalComponent,
+ DynamicLayoutHorizontalComponent,
+ ],
+ providers: [
+ provideRouter([]),
+ { provide: ActivatedRoute, useValue: { snapshot: {
+ paramMap: {
+ get: (key: string) => {
+ const params = { tab: 'test-tab' };
+ return params[key];
+ },
+ },
+ } } },
+ { provide: HostWindowService, useValue: windowServiceStub },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ { provide: APP_CONFIG, useValue: {
+ layout: {
+ itemPage: {
+ default: {
+ orientation,
+ },
+ },
+ },
+ } },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).compileComponents();
+ }
+
+ describe('with horizontal orientation', () => {
+ beforeEach(async () => {
+ await configureTestBed('horizontal');
+ });
+
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(DynamicLayoutLoaderComponent);
+ component = fixture.componentInstance;
+ component.item = mockItem;
+ component.leadingTabs = [];
+ component.tabs = loaderTabs;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show horizontal component', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('.horizontal-layout'))).toBeTruthy();
+ });
+ });
+
+ describe('with vertical orientation', () => {
+ beforeEach(async () => {
+ await configureTestBed('vertical');
+ });
+
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(DynamicLayoutLoaderComponent);
+ component = fixture.componentInstance;
+ component.item = mockItem;
+ component.leadingTabs = [];
+ component.tabs = loaderTabs;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show vertical component', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('.vertical-layout'))).toBeTruthy();
+ });
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.ts
new file mode 100644
index 00000000000..9dfcce78ce4
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-loader.component.ts
@@ -0,0 +1,105 @@
+import {
+ Component,
+ Inject,
+ Input,
+} from '@angular/core';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { DynamicLayoutTypeConfig } from '@dspace/config/layout-config.interfaces';
+
+import { DynamicLayoutTab } from '../../core/layout/models/tab.model';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { Item } from '../../core/shared/item.model';
+import { AbstractComponentLoaderComponent } from '../../shared/abstract-component-loader/abstract-component-loader.component';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { getDynamicLayoutPage } from '../decorators/dynamic-layout-page.decorator';
+import { LayoutPage } from '../enums/layout-page.enum';
+
+/**
+ * Loader component that dynamically instantiates the correct layout page component
+ * (horizontal or vertical) based on the entity type's configuration in the app config.
+ *
+ * Extends {@link AbstractComponentLoaderComponent} to leverage automatic input/output
+ * wiring and re-instantiation when dependent inputs change.
+ */
+@Component({
+ selector: 'ds-dynamic-layout-loader',
+ templateUrl: '../../shared/abstract-component-loader/abstract-component-loader.component.html',
+ imports: [
+ DynamicComponentLoaderDirective,
+ ],
+})
+export class DynamicLayoutLoaderComponent extends AbstractComponentLoaderComponent {
+
+ /**
+ * DSpace Item to render
+ */
+ @Input() item: Item;
+
+ /**
+ * Tabs to render
+ */
+ @Input() tabs: DynamicLayoutTab[];
+
+ /**
+ * A boolean representing if to show context menu or not
+ */
+ @Input() showContextMenu: boolean;
+
+ /**
+ * Leading tabs passed through to the dynamic child component
+ */
+ @Input() leadingTabs: DynamicLayoutTab[];
+
+ /**
+ * Input names that should be passed down to the dynamically created component.
+ */
+ protected inputNames: (keyof this & string)[] = [
+ 'item', 'tabs', 'showContextMenu', 'leadingTabs',
+ ];
+
+ /**
+ * When `item` changes, the component must be re-evaluated because
+ * the layout orientation depends on the item's entity type.
+ */
+ protected inputNamesDependentForComponent: (keyof this & string)[] = [
+ 'item',
+ ];
+
+ constructor(
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ protected themeService: ThemeService,
+ ) {
+ super(themeService);
+ }
+
+ /**
+ * Resolve the layout configuration for the current item's entity type.
+ * Falls back to the 'default' configuration if no entity-specific config is found.
+ *
+ * @returns The layout type configuration for the item
+ */
+ getConfiguration(): DynamicLayoutTypeConfig {
+ const itemType = this.item?.firstMetadataValue('dspace.entity.type');
+ const def = 'default';
+
+ if (this.appConfig.layout?.itemPage?.[itemType]) {
+ return this.appConfig.layout.itemPage[itemType];
+ }
+ return this.appConfig.layout.itemPage[def];
+ }
+
+ /**
+ * Fetch the component depending on the item's entity type layout configuration.
+ * Called by the abstract base class when instantiating or re-instantiating the component.
+ *
+ * @returns The constructor of the layout page component (horizontal or vertical)
+ */
+ public getComponent(): Promise> {
+ const configuration = this.getConfiguration();
+ return getDynamicLayoutPage(configuration.orientation as LayoutPage);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.html b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.html
new file mode 100644
index 00000000000..955ead8b07a
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.html
@@ -0,0 +1,35 @@
+;
+ let de: DebugElement;
+ const tabs = [tabPersonProfile, tabPersonBiography, tabPersonBibliometrics];
+
+ const mockItem = Object.assign(new Item(), {
+ id: 'fake-id',
+ handle: 'fake/handle',
+ lastModified: '2018',
+ metadata: {
+ 'dc.title': [
+ {
+ language: null,
+ value: 'test',
+ },
+ ],
+ 'dspace.entity.type': [
+ {
+ language: null,
+ value: 'Person',
+ },
+ ],
+ },
+ });
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ RouterTestingModule,
+ DynamicLayoutSidebarComponent,
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ })
+ .overrideComponent(DynamicLayoutSidebarComponent, { remove: { imports: [DynamicLayoutSidebarItemComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutSidebarComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ });
+
+ describe('when no tabs', () => {
+
+ beforeEach(() => {
+ component.tabs = [];
+ component.item = mockItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should not show sidebar', () => {
+ expect(de.query(By.css('#sidebar'))).toBeNull();
+ });
+
+ it('should not show sidebar show/hide button', () => {
+ expect(de.query(By.css('.menu-toggle'))).toBeNull();
+ });
+
+ });
+
+ describe('when there are tabs', () => {
+ beforeEach(() => {
+ component.item = mockItem;
+ component.tabs = tabs;
+ component.showNav = true;
+ component.activeTab$ = new BehaviorSubject(tabs[0]);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show sidebar', () => {
+ expect(de.query(By.css('#sidebar'))).toBeTruthy();
+ });
+
+ it('should show sidebar show/hide button', () => {
+ expect(de.query(By.css('.menu-toggle'))).toBeTruthy();
+ });
+
+ it('should show 3 sidebar items', () => {
+ expect(de.queryAll(By.css('ds-dynamic-layout-sidebar-item')).length).toEqual(3);
+ });
+
+ it('when first click show/hide button should hide sidebar', () => {
+ const btn = de.query(By.css('.menu-toggle'));
+ btn.nativeElement.click();
+ fixture.detectChanges();
+ expect(de.query(By.css('#sidebar'))).toBeNull();
+ });
+
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.ts
new file mode 100644
index 00000000000..e0dce19c2b8
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.ts
@@ -0,0 +1,116 @@
+import {
+ AsyncPipe,
+ NgClass,
+} from '@angular/common';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ BehaviorSubject,
+ Observable,
+} from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { DynamicLayoutTabsComponent } from '../../shared/dynamic-layout-tabs/dynamic-layout-tabs.component';
+import { DynamicLayoutSidebarItemComponent } from '../../shared/sidebar-item/dynamic-layout-sidebar-item.component';
+
+@Component({
+ selector: 'ds-dynamic-layout-sidebar',
+ templateUrl: './dynamic-layout-sidebar.component.html',
+ styleUrls: ['./dynamic-layout-sidebar.component.scss'],
+ imports: [
+ AsyncPipe,
+ DynamicLayoutSidebarItemComponent,
+ NgClass,
+ ],
+})
+export class DynamicLayoutSidebarComponent extends DynamicLayoutTabsComponent implements OnInit {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tabs: DynamicLayoutTab[];
+
+ /**
+ * Item that is being viewed
+ */
+ @Input() item: Item;
+
+ /**
+ * If the navigation bar should be visible or not
+ */
+ @Input() showNav: boolean;
+
+ /**
+ * The new tab selection event
+ */
+ @Output() selectedTabChange = new EventEmitter();
+
+ /**
+ * A boolean representing if to render or not the sidebar menu
+ */
+ hasSidebar$: BehaviorSubject = new BehaviorSubject(false);
+
+ /**
+ * This parameter define the status of sidebar (hide/show)
+ */
+ private sidebarStatus$: BehaviorSubject = new BehaviorSubject(false);
+
+ isSideBarHidden$: Observable;
+
+ ngOnInit(): void {
+ this.init();
+ // Check if to show sidebar
+ this.hasSidebar$.next(!!this.tabs && this.tabs.length > 1);
+
+ if (!this.hasSidebar$.value && !!this.tabs && this.tabs.length === 1) {
+ this.selectTabEv(this.tabs[0]);
+ }
+
+ // Init the sidebar status
+ this.sidebarStatus$.next(this.hasSidebar$.value);
+ this.isSideBarHidden$ = this.isSideBarHidden();
+ }
+
+ /**
+ * Emit a new selectedTabChange Event
+ * @param tab
+ */
+ selectTabEv(tab: DynamicLayoutTab) {
+ this.setActiveTab(tab);
+ }
+
+ emitSelected(selectedTab) {
+ this.selectedTabChange.emit(selectedTab);
+ }
+
+ /**
+ * Check if sidebar is present
+ */
+ hasSidebar(): Observable {
+ return this.hasSidebar$.asObservable();
+ }
+
+ /**
+ * Return the sidebar status
+ */
+ isSideBarHidden(): Observable {
+ return this.sidebarStatus$.asObservable().pipe(
+ map((status: boolean) => !status),
+ );
+ }
+
+
+ /**
+ * It is used for hide/show the left sidebar
+ */
+ toggleSidebar(): void {
+ this.sidebarStatus$.next(!this.sidebarStatus$.value);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.html b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.html
new file mode 100644
index 00000000000..4f55803c912
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.html
@@ -0,0 +1,24 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DynamicLayoutVerticalComponent],
+ providers: [
+ { provide: HostWindowService, useValue: new HostWindowServiceStub(1200) },
+ { provide: Router, useValue: new RouterMock() },
+ { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+ ],
+ })
+ .overrideComponent(DynamicLayoutVerticalComponent, { remove: { imports: [DynamicLayoutSidebarComponent, DynamicLayoutMatrixComponent, DynamicLayoutNavbarComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutVerticalComponent);
+ component = fixture.componentInstance;
+ component.tabs = loaderTabs;
+ component.leadingTabs = [];
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show sidebar', () => {
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-sidebar'))).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.ts
new file mode 100644
index 00000000000..9690c8a5e5b
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.ts
@@ -0,0 +1,68 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Input,
+} from '@angular/core';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import {
+ BehaviorSubject,
+ Observable,
+} from 'rxjs';
+
+import { DsoEditMenuComponent } from '../../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { HostWindowService } from '../../../shared/host-window.service';
+import { dynamicLayoutPage } from '../../decorators/dynamic-layout-page.decorator';
+import { DynamicLayoutMatrixComponent } from '../../dynamic-layout-matrix/dynamic-layout-matrix.component';
+import { LayoutPage } from '../../enums/layout-page.enum';
+import { DynamicLayoutPageDirective } from '../../models/dynamic-layout-page.directive';
+import { DynamicLayoutNavbarComponent } from '../dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component';
+import { DynamicLayoutSidebarComponent } from './dynamic-layout-sidebar/dynamic-layout-sidebar.component';
+
+/**
+ * Vertical layout page component for the dynamic item page.
+ * Renders tabs as a vertical sidebar on larger screens (falling back to a horizontal
+ * navbar on small screens), with the selected tab's content displayed alongside.
+ */
+@dynamicLayoutPage(LayoutPage.VERTICAL)
+@Component({
+ selector: 'ds-dynamic-layout-vertical',
+ templateUrl: './dynamic-layout-vertical.component.html',
+ styleUrls: ['./dynamic-layout-vertical.component.scss'],
+ imports: [
+ AsyncPipe,
+ DsoEditMenuComponent,
+ DynamicLayoutMatrixComponent,
+ DynamicLayoutNavbarComponent,
+ DynamicLayoutSidebarComponent,
+ ],
+})
+export class DynamicLayoutVerticalComponent extends DynamicLayoutPageDirective {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tabs: DynamicLayoutTab[];
+
+ /**
+ * A boolean representing if to show context menu or not
+ */
+ @Input() showContextMenu: boolean;
+
+ /**
+ * leadingTabs to understand if to show navbar
+ */
+ @Input() leadingTabs: DynamicLayoutTab[];
+
+
+ selectedTab$: BehaviorSubject = new BehaviorSubject(null);
+ isXsOrSm$: Observable;
+
+ constructor(public windowService: HostWindowService) {
+ super();
+ this.isXsOrSm$ = this.windowService.isXsOrSm();
+ }
+
+ selectedTabChanged(tab: DynamicLayoutTab) {
+ this.selectedTab$.next(tab);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/shared/dynamic-layout-tabs/dynamic-layout-tabs.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/shared/dynamic-layout-tabs/dynamic-layout-tabs.component.ts
new file mode 100644
index 00000000000..2cae98e0c81
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/shared/dynamic-layout-tabs/dynamic-layout-tabs.component.ts
@@ -0,0 +1,136 @@
+import { Location } from '@angular/common';
+import {
+ Component,
+ EventEmitter,
+ inject,
+ Input,
+ Output,
+} from '@angular/core';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { getItemPageRoute } from '@dspace/core/router/utils/dso-route.utils';
+import { Item } from '@dspace/core/shared/item.model';
+import { isNotNull } from '@dspace/shared/utils/empty.util';
+import { BehaviorSubject } from 'rxjs';
+
+/**
+ * This component render the sidebar of the tabs layout
+ */
+@Component({
+ selector: 'ds-dynamic-layout-tabs-sidebar',
+ template: '',
+})
+export abstract class DynamicLayoutTabsComponent {
+
+ /**
+ * The item object related to the page
+ */
+ @Input() item: Item;
+ /**
+ * Representing if sidebar should be displayed or not
+ */
+ @Input() sidebarActive: boolean;
+ /**
+ * hide/show the sidebar
+ */
+ @Input() sidebarStatus: boolean;
+ /**
+ * tabs list
+ */
+ tabs: DynamicLayoutTab[] = [];
+
+
+ /**
+ * A boolean representing if a request operation is pending
+ * @type {BehaviorSubject}
+ */
+ public activeTab$ = new BehaviorSubject(undefined);
+
+
+ /**
+ * used for notify tab selection
+ */
+ @Output() selectedTab = new EventEmitter();
+
+ /**
+ * The item base url
+ */
+ itemBaseUrl: string;
+
+ location = inject(Location);
+ route = inject(ActivatedRoute);
+ router = inject(Router);
+
+ init(): void {
+ this.itemBaseUrl = getItemPageRoute(this.item) + '/';
+ if (this.tabs && this.tabs.length > 0) {
+ if (isNotNull(this.route.snapshot.paramMap.get('tab'))) {
+ this.parseTabs(this.route.snapshot.paramMap.get('tab'));
+ } else {
+ this.parseTabs(this.tabs[0].shortname);
+ }
+ }
+ }
+
+ public parseTabs(shortname): void {
+ const tabs = [];
+ this.tabs.forEach((tab) => {
+ // create children where tab has "::"
+ if (tab.shortname.includes('::')) {
+ const splitedTabs = tab.shortname.split('::');
+ const splitedHeaderTabs = tab.header.split('::');
+ const previousTab = tabs.find((seltab) => seltab.shortname === splitedTabs[0]);
+
+ if (!previousTab) {
+ const parentTab = Object.assign({}, tab);
+ parentTab.header = splitedHeaderTabs[0];
+ parentTab.shortname = splitedTabs[0];
+ const childTab = Object.assign(tab, {
+ header: splitedHeaderTabs[1],
+ shortname: splitedTabs[1],
+ });
+ parentTab.children = [];
+ parentTab.children.push(childTab);
+ tabs.push(parentTab);
+ if (shortname === parentTab.shortname) {
+ this.setActiveTab(parentTab);
+ }
+ if (shortname === childTab.shortname) {
+ this.setActiveTab(childTab);
+ }
+ } else {
+ tab.header = splitedHeaderTabs[1];
+ tab.shortname = splitedTabs[1];
+ previousTab.children.push(tab);
+ }
+ if (shortname === tab.shortname) {
+ this.setActiveTab(tab);
+ }
+ } else {
+ tabs.push(tab);
+ if (shortname === tab.shortname) {
+ this.setActiveTab(tab);
+ }
+ }
+ });
+ this.tabs = tabs;
+ }
+
+ abstract emitSelected(selectedTab): void;
+
+ setActiveTab(tab) {
+ this.activeTab$.next(tab);
+ this.emitSelected(tab);
+ }
+
+ navigateToTab(tab: DynamicLayoutTab): void {
+ this.activeTab$.next(tab);
+ const itemPageRoute = (getItemPageRoute(this.item) + '/' + tab.shortname);
+ this.router.navigateByUrl(itemPageRoute, { onSameUrlNavigation: 'ignore' }).then(() => {
+ this.location.replaceState(itemPageRoute);
+ });
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.html b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.html
new file mode 100644
index 00000000000..4c4a8ebe575
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.html
@@ -0,0 +1,44 @@
+
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.scss b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.scss
new file mode 100644
index 00000000000..55ec3a243c5
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.scss
@@ -0,0 +1,102 @@
+
+:host ::ng-deep {
+
+ a{
+ cursor: pointer;
+ }
+
+ height: 100%;
+
+ .fa-chevron-right {
+ padding: calc(var(--bs-spacer) / 2);
+ font-size: 0.5rem;
+ }
+
+ .sidebar-sub-level-items {
+ list-style: none;
+ overflow: hidden;
+
+ .nav-item {
+ background: transparent;
+ }
+ }
+
+ .sidebar-collapsible {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .sidebar-section.expanded {
+ display: block;
+ color: rgba(0, 0, 0, 0.5);
+ }
+
+ ul .active > .nav-item, .sidebar-section.active > div > .nav-item {
+ color: var(--ds-dynamic-layout-sidebar-menu-active-color);
+ background: var(--ds-dynamic-layout-sidebar-menu-active-background);
+ }
+
+ .sidebar-section.active > .sidebar-collapsible > .nav-item {
+ background-color: transparent;
+ }
+
+}
+
+.nav-item {
+ padding: 10px 0;
+ color: var(--ds-dynamic-layout-navbar-link-color);
+ background-color: var(--ds-dynamic-layout-sidebar-background-color);
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
+
+.vertical {
+ .icon-wrapper {
+ border-bottom: var(--ds-dynamic-layout-sidebar-link-border-bottom);
+ }
+
+ .sidebar-collapsible {
+ border-bottom: var(--ds-dynamic-layout-sidebar-link-border-bottom);
+ }
+
+ .nav-item:hover{
+ background-color: var(--ds-dynamic-layout-sidebar-tab-color-hover);
+ }
+}
+
+.horizontal {
+ .icon-wrapper {
+ border-bottom: var(--ds-dynamic-layout-navbar-link-border-bottom);
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .nav-item {
+ padding: 10px;
+ }
+
+ .sidebar-collapsible {
+ display: block;
+ }
+
+ .sidebar-sub-level-items {
+ background-color: var(--ds-dynamic-layout-navbar-sub-level-backround-color);
+ }
+
+ ul .active > .nav-item, .sidebar-section.active > div > .nav-item {
+ color: var(--ds-dynamic-layout-sidebar-menu-active-color);
+ background: var(--ds-dynamic-layout-sidebar-menu-active-background);
+ }
+
+ .nav-item:hover{
+ background-color: var(--ds-dynamic-layout-navbar-tab-color-hover);
+ }
+
+}
+
+.active.horizontal {
+ border-bottom: 2px solid var(--ds-dynamic-layout-navbar-tab-color-active);
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.spec.ts
new file mode 100644
index 00000000000..e7195051f7d
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.spec.ts
@@ -0,0 +1,47 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { tabPersonTest } from '@dspace/core/testing/layout-tab.mocks';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { DynamicComponentLoaderDirective } from '../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { DynamicLayoutSidebarItemComponent } from './dynamic-layout-sidebar-item.component';
+
+describe('DynamicLayoutSidebarItemComponent', () => {
+ let component: DynamicLayoutSidebarItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ NoopAnimationsModule, DynamicLayoutSidebarItemComponent,
+ DynamicComponentLoaderDirective],
+ providers: [
+ { provide: BitstreamDataService, useValue: {} },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutSidebarItemComponent);
+ component = fixture.componentInstance;
+ component.tab = tabPersonTest;
+ fixture.detectChanges();
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.ts b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.ts
new file mode 100644
index 00000000000..40b58a33203
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/shared/sidebar-item/dynamic-layout-sidebar-item.component.ts
@@ -0,0 +1,119 @@
+import { NgClass } from '@angular/common';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { TranslateService } from '@ngx-translate/core';
+
+import {
+ rotate,
+ rotateNavbar,
+} from '../../../../shared/animations/rotate';
+import { slide } from '../../../../shared/animations/slide';
+
+/**
+ * This component defines the default layout for all tabs of DSpace Items.
+ * This component can be overwritten for a specific Item type using
+ * DynamicLayoutTabModelDirective decorator
+ */
+@Component({
+ selector: 'ds-dynamic-layout-sidebar-item',
+ templateUrl: './dynamic-layout-sidebar-item.component.html',
+ styleUrls: ['./dynamic-layout-sidebar-item.component.scss'],
+ animations: [rotate, slide, rotateNavbar],
+ imports: [
+ NgClass,
+ ],
+})
+export class DynamicLayoutSidebarItemComponent implements OnInit {
+ /**
+ * Contains the items base url
+ */
+ @Input() itemBaseUrl: string;
+
+ /**
+ * The tab that will be shown
+ */
+ @Input() tab: DynamicLayoutTab;
+
+ /**
+ * used for notify tab selection
+ */
+ @Input() selectedTab: DynamicLayoutTab;
+
+ /**
+ * used for specifying type of layout
+ */
+ @Input() layout: string;
+
+ /**
+ * The prefix used for box header's i18n key
+ */
+ tabI18nPrefix = 'layout.tab.header.';
+
+ /**
+ * used for notify tab selection
+ */
+ @Output() tabSelectedChange = new EventEmitter();
+
+
+ @Input() activeTab: DynamicLayoutTab;
+
+ /**
+ * Emits true when the menu section is expanded, else emits false
+ * This is true when the section is active AND either the sidebar or it's preview is open
+ */
+ expanded = false;
+
+ constructor(protected translateService: TranslateService) {
+ }
+
+ ngOnInit() {
+ if (!!this.tab && !!this.tab.children && this.tab.children.length > 0) {
+ this.tab.isActive = false;
+ this.expanded = false;
+ this.tab.children.forEach((subtab) => {
+ if (subtab.id === this.activeTab.id) {
+ if (this.layout !== 'horizontal') {
+ this.expanded = true;
+ }
+ this.tab.isActive = true;
+ return;
+ }
+ });
+ }
+ }
+
+ /**
+ * get the translation for the i18n key
+ * @param key the i18n key
+ */
+ getTranslation(key: string): string {
+ const value = this.translateService.instant(key);
+ return value === key ? null : value;
+ }
+
+ getTabHeader(tab: DynamicLayoutTab): string {
+ const tabHeaderI18nKey = this.tabI18nPrefix + this.tab.entityType + '.' + tab.shortname;
+ const tabHeaderGenericI18nKey = this.tabI18nPrefix + tab.shortname;
+
+ return this.getTranslation(tabHeaderI18nKey) ??
+ this.getTranslation(tabHeaderGenericI18nKey) ??
+ this.getTranslation(tab.header) ??
+ tab.header ??
+ '';
+ }
+
+ toggleSection(event): void {
+ this.expanded = !this.expanded;
+ }
+
+ selectTab(tab): void {
+ this.tabSelectedChange.emit(tab);
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.html
new file mode 100644
index 00000000000..897ce700b38
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.html
@@ -0,0 +1,44 @@
+@let owningCollection = owningCollection$ | async;
+@let mappedCollections = mappedCollections$ | async;
+
+@if (owningCollection || (mappedCollections?.length ?? 0) > 0) {
+ ;
+
+ const createMockCollection = (id: string) => Object.assign(new Collection(), {
+ id: id,
+ name: `collection-${id}`,
+ });
+
+ const testBox = Object.assign(new DynamicLayoutBox(), {
+ 'id': 1,
+ 'shortname': 'collections',
+ 'header': 'Collections',
+ 'entityType': 'Publication',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'security': 0,
+ 'boxType': 'COLLECTIONS',
+ 'maxColumns': null,
+ 'configuration': null,
+ 'metadataSecurityFields': [],
+ 'container': false,
+ });
+ let collectionDataService;
+ let mockCollection1: Collection;
+ let mockPage1: PaginatedList;
+
+ const owningCollection = Object.assign(new Collection(), { uuid: 'test-collection-uuid' });
+
+ const owningCollection$ = createSuccessfulRemoteDataObject$(owningCollection);
+
+ const testItem = Object.assign(new Item(), {
+ type: 'item',
+ owningCollection: owningCollection$,
+ uuid: 'test-item-uuid',
+ });
+
+ mockCollection1 = createMockCollection('c1');
+
+ beforeEach(async () => {
+ collectionDataService = jasmine.createSpyObj([
+ 'findOwningCollectionFor',
+ 'findMappedCollectionsFor',
+ ]);
+
+ await TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot(),
+ DynamicLayoutCollectionBoxComponent,
+ ],
+ providers: [
+ { provide: 'boxProvider', useValue: testBox },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: CollectionDataService, useValue: collectionDataService },
+ { provide: ActivatedRoute, useValue: {} },
+ { provide: APP_CONFIG, useValue: environment },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ ],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutCollectionBoxComponent);
+ component = fixture.componentInstance;
+ mockPage1 = buildPaginatedList(Object.assign(new PageInfo(), {
+ currentPage: 1,
+ elementsPerPage: 2,
+ totalPages: 0,
+ totalElements: 0,
+ }), []);
+ collectionDataService.findOwningCollectionFor.and.returnValue(createSuccessfulRemoteDataObject$(mockCollection1));
+ collectionDataService.findMappedCollectionsFor.and.returnValue(createSuccessfulRemoteDataObject$(mockPage1));
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render container', () => {
+ expect(fixture.debugElement.query(By.css('.container'))).not.toBeNull();
+ });
+
+ describe('without collections', () => {
+ beforeEach(() => {
+ component.owningCollection$ = of(null);
+ fixture.detectChanges();
+ });
+
+ it('should not render container', () => {
+ expect(fixture.debugElement.query(By.css('.container'))).toBeNull();
+ });
+ });
+
+ describe('without owning collections', () => {
+ beforeEach(() => {
+ component.owningCollection$ = of(null);
+ fixture.detectChanges();
+ });
+
+ it('should not render owning collection row', () => {
+ expect(fixture.debugElement.query(By.css('div[data-test="owningCollection"]'))).toBeNull();
+ });
+ });
+
+ describe('with owning collections', () => {
+ beforeEach(() => {
+ component.owningCollection$ = of(mockCollection1);
+ fixture.detectChanges();
+ });
+
+ it('should render owning collection row', () => {
+ expect(fixture.debugElement.query(By.css('div[data-test="owningCollection"]'))).not.toBeNull();
+ });
+ });
+
+ describe('without mapped collections', () => {
+ beforeEach(() => {
+ component.mappedCollections$ = of([]);
+ fixture.detectChanges();
+ });
+
+ it('should not render mapped collections row', () => {
+ expect(fixture.debugElement.query(By.css('div[data-test="mappedCollections"]'))).toBeNull();
+ });
+ });
+
+ describe('with mapped collections', () => {
+ beforeEach(() => {
+ component.mappedCollections$ = of([mockCollection1]);
+ fixture.detectChanges();
+ });
+
+ it('should render mapped collection row', () => {
+ expect(fixture.debugElement.query(By.css('div[data-test="mappedCollections"]'))).not.toBeNull();
+ });
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.ts
new file mode 100644
index 00000000000..76620996307
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.ts
@@ -0,0 +1,167 @@
+import {
+ AsyncPipe,
+ NgClass,
+} from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { CollectionDataService } from '@dspace/core/data/collection-data.service';
+import { FindListOptions } from '@dspace/core/data/find-list-options.model';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { Collection } from '@dspace/core/shared/collection.model';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ getFirstCompletedRemoteData,
+ getFirstSucceededRemoteDataPayload,
+ getPaginatedListPayload,
+} from '@dspace/core/shared/operators';
+import { hasValue } from '@dspace/shared/utils/empty.util';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+import {
+ BehaviorSubject,
+ combineLatest,
+ Observable,
+ of,
+} from 'rxjs';
+import {
+ map,
+ shareReplay,
+ tap,
+} from 'rxjs/operators';
+
+import { renderDynamicLayoutBoxFor } from '../../../../decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../../../enums/layout-box.enum';
+import { DynamicLayoutBoxDirective } from '../../../../models/dynamic-layout-box-component.directive';
+
+@renderDynamicLayoutBoxFor(LayoutBox.COLLECTIONS)
+@Component({
+ selector: 'ds-dynamic-layout-collection-box',
+ templateUrl: './dynamic-layout-collection-box.component.html',
+ styleUrls: ['./dynamic-layout-collection-box.component.scss'],
+ imports: [
+ AsyncPipe,
+ NgClass,
+ RouterLink,
+ TranslateModule,
+ ],
+})
+export class DynamicLayoutCollectionBoxComponent extends DynamicLayoutBoxDirective implements OnInit {
+
+ isInline = this.appConfig.layout.collectionsBox.isInline;
+
+ /**
+ * Amount of mapped collections that should be fetched at once.
+ */
+ pageSize = 5;
+
+ /**
+ * Last page of the mapped collections that has been fetched.
+ */
+ lastPage = 0;
+
+ /**
+ * Whether or not a page of mapped collections is currently being loaded.
+ */
+ isLoading$: BehaviorSubject = new BehaviorSubject(true);
+
+ /**
+ * Whether or not more pages of mapped collections are available.
+ */
+ hasMore$: BehaviorSubject = new BehaviorSubject(true);
+
+ /**
+ * This includes the owning collection
+ */
+ owningCollection$: Observable;
+
+ /**
+ * This includes the mapped collection
+ */
+ mappedCollections$: Observable = of([]);
+
+ constructor(
+ protected translateService: TranslateService,
+ @Inject('boxProvider') public boxProvider: DynamicLayoutBox,
+ @Inject('itemProvider') public itemProvider: Item,
+ private cds: CollectionDataService,
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ ) {
+ super(translateService, boxProvider, itemProvider);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+
+ this.owningCollection$ = this.item.owningCollection.pipe(
+ getFirstSucceededRemoteDataPayload(),
+ shareReplay({ refCount: false, bufferSize: 1 }),
+ );
+
+ this.handleLoadMore();
+ }
+
+ handleLoadMore() {
+ this.isLoading$.next(true);
+ const newMappedCollections$ = this.loadMappedCollectionPage();
+ this.mappedCollections$ = combineLatest([this.mappedCollections$, newMappedCollections$]).pipe(
+ map(([mappedCollections, newMappedCollections]: [Collection[], Collection[]]) => {
+ return [...mappedCollections, ...newMappedCollections].filter(collection => hasValue(collection));
+ }),
+ );
+ }
+
+ loadMappedCollectionPage(): Observable {
+ return this.cds.findMappedCollectionsFor(this.item, Object.assign(new FindListOptions(), {
+ elementsPerPage: this.pageSize,
+ currentPage: this.lastPage + 1,
+ })).pipe(
+ getFirstCompletedRemoteData>(),
+
+ // update isLoading$
+ tap(() => this.isLoading$.next(false)),
+
+ getFirstSucceededRemoteDataPayload(),
+
+ // update lastPage
+ tap((response: PaginatedList) => this.lastPage = response.currentPage),
+
+ // update hasMore$
+ tap((response: PaginatedList) => this.hasMore$.next(this.lastPage < response.totalPages)),
+
+ getPaginatedListPayload(),
+ );
+ }
+
+ /**
+ * Returns a string representing the style of field label if exists
+ */
+ get labelStyle(): string {
+ return this.appConfig.layout.collectionsBox.defaultCollectionsLabelColStyle;
+ }
+
+ /**
+ * Returns a string representing the style of field value if exists
+ */
+ get valueStyle(): string {
+ return this.appConfig.layout.collectionsBox.defaultCollectionsValueColStyle;
+ }
+
+ /**
+ * Returns a string representing the style of row if exists
+ */
+ get rowStyle(): string {
+ return this.appConfig.layout.collectionsBox.defaultCollectionsRowStyle;
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.html
new file mode 100644
index 00000000000..46bcbe39d02
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.html
@@ -0,0 +1,8 @@
+;
+
+ const testItem = Object.assign(new Item(), {
+ type: 'item',
+ entityType: 'Publication',
+ metadata: {
+ 'dc.title': [{
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ }],
+ 'dspace.iiif.enabled': [{
+ 'value': 'true',
+ 'language': null,
+ 'authority': null,
+ 'confidence': 0,
+ 'place': 0,
+ 'securityLevel': 0,
+ }],
+ },
+ uuid: 'test-item-uuid',
+ });
+
+ const testBox = Object.assign(new DynamicLayoutBox(), {
+ 'id': 1,
+ 'shortname': 'iiifviewer',
+ 'header': 'IIIF Viewer',
+ 'entityType': 'Publication',
+ 'collapsed': false,
+ 'minor': false,
+ 'style': null,
+ 'security': 0,
+ 'boxType': 'IIIFVIEWER',
+ 'maxColumns': null,
+ 'configuration': null,
+ 'metadataSecurityFields': [],
+ 'container': false,
+ });
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ DynamicLayoutIiifViewerBoxComponent,
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ { provide: 'boxProvider', useValue: testBox },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: AuthService, useValue: new AuthServiceMock() },
+ { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+ { provide: RouteService, useValue: routeServiceStub },
+ ],
+ }).overrideComponent(DynamicLayoutIiifViewerBoxComponent, { remove: { imports: [MiradorViewerComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutIiifViewerBoxComponent);
+ component = fixture.componentInstance;
+ component.box = testBox;
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.ts
new file mode 100644
index 00000000000..0639f9364df
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.ts
@@ -0,0 +1,54 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { RouteService } from '@dspace/core/services/route.service';
+import { Item } from '@dspace/core/shared/item.model';
+import { getDSpaceQuery } from '@dspace/core/utilities/item-iiif-utils';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+
+import { MiradorViewerComponent } from '../../../../../item-page/mirador-viewer/mirador-viewer.component';
+import { renderDynamicLayoutBoxFor } from '../../../../decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../../../enums/layout-box.enum';
+import { DynamicLayoutBoxDirective } from '../../../../models/dynamic-layout-box-component.directive';
+
+@renderDynamicLayoutBoxFor(LayoutBox.IIIFVIEWER)
+@Component({
+ selector: 'ds-dynamic-layout-iiif-viewer-box',
+ templateUrl: './dynamic-layout-iiif-viewer-box.component.html',
+ styleUrls: ['./dynamic-layout-iiif-viewer-box.component.scss'],
+ imports: [
+ AsyncPipe,
+ MiradorViewerComponent,
+ ],
+})
+export class DynamicLayoutIiifViewerBoxComponent extends DynamicLayoutBoxDirective implements OnInit {
+
+ isSearchable: boolean;
+ query$: Observable;
+
+ constructor(
+ protected translateService: TranslateService,
+ public authService: AuthService,
+ protected routeService: RouteService,
+ @Inject('boxProvider') public boxProvider: DynamicLayoutBox,
+ @Inject('itemProvider') public itemProvider: Item,
+ ) {
+ super(translateService, boxProvider, itemProvider);
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.isSearchable = this.item.firstMetadataValue('iiif.search.enabled') === 'true';
+ // Search is not working: error 501 "Not Implemented"
+ if (this.isSearchable) {
+ this.query$ = getDSpaceQuery(this.item, this.routeService);
+ }
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.html
new file mode 100644
index 00000000000..094de3a7abe
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.html
@@ -0,0 +1,11 @@
+;
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [{
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ }],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ BrowserAnimationsModule,
+ DynamicLayoutMetadataBoxComponent,
+ DynamicComponentLoaderDirective,
+ RowComponent,
+ TextComponent],
+ providers: [
+ { provide: 'boxProvider', useValue: boxMetadata },
+ { provide: 'itemProvider', useValue: testItem },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(DynamicLayoutMetadataBoxComponent, { remove: { imports: [RowComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutMetadataBoxComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('check rows rendering', (done) => {
+ const rowsFound = fixture.debugElement.queryAll(By.css('div[ds-row]'));
+
+ expect(rowsFound.length).toEqual(2);
+ done();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.ts
new file mode 100644
index 00000000000..dd9c8c4ee85
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.ts
@@ -0,0 +1,67 @@
+
+import {
+ ChangeDetectorRef,
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import {
+ DynamicLayoutBox,
+ MetadataBoxConfiguration,
+} from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateService } from '@ngx-translate/core';
+
+import { renderDynamicLayoutBoxFor } from '../../../../decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../../../enums/layout-box.enum';
+import { DynamicLayoutBoxDirective } from '../../../../models/dynamic-layout-box-component.directive';
+import { RowComponent } from './row/row.component';
+
+/**
+ * This component renders the metadata boxes of items
+ */
+@renderDynamicLayoutBoxFor(LayoutBox.METADATA)
+@Component({
+ selector: 'ds-dynamic-layout-metadata-box',
+ templateUrl: './dynamic-layout-metadata-box.component.html',
+ styleUrls: ['./dynamic-layout-metadata-box.component.scss'],
+ imports: [
+ RowComponent,
+ ],
+})
+/**
+ * For overwrite this component create a new one that extends DynamicLayoutBoxObj and
+ * add the DynamicLayoutBoxModelComponent decorator indicating the type of box to overwrite
+ */
+export class DynamicLayoutMetadataBoxComponent extends DynamicLayoutBoxDirective implements OnInit {
+
+ /**
+ * Contains the fields configuration for current box
+ */
+ metadataBoxConfiguration: MetadataBoxConfiguration;
+
+
+ constructor(
+ public cdr: ChangeDetectorRef,
+ protected translateService: TranslateService,
+ @Inject('boxProvider') public boxProvider: DynamicLayoutBox,
+ @Inject('itemProvider') public itemProvider: Item,
+ ) {
+ super(translateService, boxProvider, itemProvider);
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.setMetadataComponents(this.box.configuration as MetadataBoxConfiguration);
+ }
+
+ /**
+ * Set the metadataBoxConfiguration.
+ * @param metadatacomponents
+ */
+ setMetadataComponents(metadatacomponents: MetadataBoxConfiguration) {
+ this.metadataBoxConfiguration = metadatacomponents;
+ this.cdr.detectChanges();
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.html
new file mode 100644
index 00000000000..a7737d33de1
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.html
@@ -0,0 +1,12 @@
+;
+ let de: DebugElement;
+
+ const testItem = Object.assign(new Item(), {
+ bundles: of({}),
+ metadata: {
+ 'dc.identifier.doi': [
+ {
+ value: 'doi:10.1392/dironix',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ uuid: 'item-uuid',
+ });
+
+ const mockField: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ADVANCEDATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: null,
+ metadataValue: null,
+ },
+ };
+
+ const mockFieldWithMetadata: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ADVANCEDATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'main article',
+ },
+ };
+
+ const mockFieldWithRegexMetadata: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ADVANCEDATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: '(/^Test Article/i)',
+ },
+ };
+
+ const bitstream1 = Object.assign(new Bitstream(), {
+ id: 'bitstream4',
+ uuid: 'bitstream4',
+ metadata: {
+ 'dc.title': [
+ {
+ value: 'test',
+ },
+ ],
+ 'dc.type': [
+ {
+ value: 'test',
+ },
+ ],
+ 'dc.description': [
+ {
+ value: 'test',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+ const bitstream2 = Object.assign(new Bitstream(), {
+ id: 'bitstream4',
+ uuid: 'bitstream4',
+ metadata: {},
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+
+ const mockBitstreamDataService: any = jasmine.createSpyObj('BitstreamDataService', {
+ getThumbnailFor(item: Item): Observable> {
+ return createSuccessfulRemoteDataObject$(new Bitstream());
+ },
+ findAllByItemAndBundleName: jasmine.createSpy('findAllByItemAndBundleName'),
+ findByItem: jasmine.createSpy('findByItem'),
+ });
+
+ const mockAuthorizedService = jasmine.createSpyObj('AuthorizationDataService', {
+ isAuthorized: jasmine.createSpy('isAuthorized'),
+ });
+
+ const getDefaultTestBedConf = () => {
+ return {
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ AdvancedAttachmentComponent,
+ RouterTestingModule,
+ FileSizePipe,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+ { provide: AuthorizationDataService, useValue: mockAuthorizedService },
+ { provide: APP_CONFIG, useValue: environment },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ };
+ };
+
+ describe('when metadata configuration is present', () => {
+
+ describe('and pagination is disabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AdvancedAttachmentComponent, {
+ remove: {
+ imports: [
+ BitstreamAttachmentComponent,
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AdvancedAttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = false;
+ mockBitstreamDataService.findAllByItemAndBundleName.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ mockBitstreamDataService.findByItem.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList(attachmentsMock)));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should retrieve bitstreams without pagination', fakeAsync(() => {
+ flush();
+ expect(component.getBitstreamsByItem).toHaveBeenCalled();
+ }));
+
+ it('should not show view more button', fakeAsync(() => {
+ flush();
+ expect(fixture.debugElement.query(By.css('button[data-test="view-more"]'))).toBeNull();
+ }));
+
+ it('should render the proper entry number', fakeAsync(() => {
+ flush();
+ const valueFound = fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]'));
+ expect(valueFound.length).toBe(3);
+ }));
+
+ });
+
+ describe('when pagination is enabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AdvancedAttachmentComponent, {
+ remove: {
+ imports: [
+ BitstreamAttachmentComponent,
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AdvancedAttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = true;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should show view more button', () => {
+ expect(fixture.debugElement.query(By.css('button[data-test="view-more"]'))).toBeTruthy();
+ });
+
+ it('should show 2 elements', () => {
+ expect(fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]')).length).toEqual(2);
+ });
+
+ it('and view more button is clicked it should show 4 elements', () => {
+ (component.getBitstreamsByItem as any).and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ const btn = fixture.debugElement.query(By.css('button[data-test="view-more"]'));
+ fixture.detectChanges();
+ btn.nativeElement.click();
+ fixture.detectChanges();
+ expect(fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]')).length).toEqual(4);
+ });
+
+ });
+ });
+
+ describe('when metadata configuration is not present', () => {
+
+ describe('and pagination is disabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AdvancedAttachmentComponent, {
+ remove: {
+ imports: [
+ BitstreamAttachmentComponent,
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AdvancedAttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = false;
+ component.envMetadata = [];
+ mockBitstreamDataService.findAllByItemAndBundleName.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList(attachmentsMock)));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should retrieve bitstreams without pagination', fakeAsync(() => {
+ flush();
+ expect(component.getBitstreamsByItem).toHaveBeenCalled();
+ }));
+
+ it('should not show view more button', fakeAsync(() => {
+ flush();
+ expect(fixture.debugElement.query(By.css('button[data-test="view-more"]'))).toBeNull();
+ }));
+
+ it('should render the proper entry number', fakeAsync(() => {
+ flush();
+ const valueFound = fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]'));
+ expect(valueFound.length).toBe(3);
+ }));
+
+ });
+
+ describe('when pagination is enabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AdvancedAttachmentComponent, {
+ remove: {
+ imports: [
+ BitstreamAttachmentComponent,
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AdvancedAttachmentComponent);
+ component = fixture.componentInstance;
+ component.envMetadata = [];
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = true;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should show view more button', () => {
+ expect(fixture.debugElement.query(By.css('button[data-test="view-more"]'))).toBeTruthy();
+ });
+
+ it('should show 2 elements', () => {
+ expect(fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]')).length).toEqual(2);
+ });
+
+ it('and view more button is clicked it should show 4 elements', () => {
+ const btn = fixture.debugElement.query(By.css('button[data-test="view-more"]'));
+ (component.getBitstreamsByItem as any).and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ fixture.detectChanges();
+ btn.nativeElement.click();
+ fixture.detectChanges();
+ expect(fixture.debugElement.queryAll(By.css('[data-test="attachment-info"]')).length).toEqual(4);
+ });
+
+ });
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.ts
new file mode 100644
index 00000000000..50d48ab0ddc
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.ts
@@ -0,0 +1,83 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { FindListOptions } from '@dspace/core/data/find-list-options.model';
+import {
+ buildPaginatedList,
+ PaginatedList,
+} from '@dspace/core/data/paginated-list.model';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { followLink } from '@dspace/core/shared/follow-link-config.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AttachmentComponent } from '../attachment/attachment.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { BitstreamAttachmentComponent } from './bitstream-attachment/bitstream-attachment.component';
+
+@metadataBoxFieldRendering(FieldRenderingType.ADVANCEDATTACHMENT)
+@Component({
+ selector: 'ds-advanced-attachment',
+ templateUrl: './advanced-attachment.component.html',
+ styleUrls: ['./advanced-attachment.component.scss'],
+ imports: [
+ AsyncPipe,
+ BitstreamAttachmentComponent,
+ TranslateModule,
+ ],
+})
+/**
+ * This component renders the attachment with an advanced layout.
+ */
+export class AdvancedAttachmentComponent extends AttachmentComponent implements OnInit {
+
+ /**
+ * Environment variables configuring the fields to be viewed
+ */
+ envMetadata = this.appConfig.layout.advancedAttachmentRendering.metadata;
+
+ /**
+ * Environment variables configuring pagination
+ */
+ envPagination = this.appConfig.layout.advancedAttachmentRendering.pagination;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected bitstreamDataService: BitstreamDataService,
+ protected translateService: TranslateService,
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, bitstreamDataService, translateService, appConfig);
+ }
+
+ getBitstreamsByItem(options?: FindListOptions): Observable> {
+ return this.bitstreamDataService
+ .showableByItem(this.item.uuid, this.field.bitstream.bundle, this.getMetadataFilters(), options, false, false, followLink('thumbnail'), followLink('format'))
+ .pipe(
+ getFirstCompletedRemoteData(),
+ map((response: RemoteData>) => {
+ return response.hasSucceeded ? response.payload : buildPaginatedList(null, []);
+ }),
+ );
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.spec.ts
new file mode 100644
index 00000000000..4b29940757c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.spec.ts
@@ -0,0 +1,66 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import { ConfigurationProperty } from '@dspace/core/shared/configuration-property.model';
+import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
+import { AuthorizationDataServiceStub } from '@dspace/core/testing/authorization-service.stub';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { getMockThemeService } from '../../../../../../../../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../../../../../../../shared/theme-support/theme.service';
+import { AttachmentRenderComponent } from './attachment-render.component';
+
+describe('AttachmentRenderComponent', () => {
+ let component: AttachmentRenderComponent;
+ let fixture: ComponentFixture;
+ let configurationDataService: ConfigurationDataService;
+
+ beforeEach(async () => {
+ configurationDataService = jasmine.createSpyObj('configurationDataService', {
+ findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
+ name: 'request.item.type',
+ values: [],
+ })),
+ });
+
+ await TestBed.configureTestingModule({
+ imports: [
+ AttachmentRenderComponent,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ],
+ providers: [
+ { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
+ { provide: ConfigurationDataService, useValue: configurationDataService },
+ { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AttachmentRenderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.ts
new file mode 100644
index 00000000000..f5aa7b1f319
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/attachment-render.component.ts
@@ -0,0 +1,80 @@
+import {
+ Component,
+ Input,
+} from '@angular/core';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { GenericConstructor } from '@dspace/core/shared/generic-constructor';
+import { Item } from '@dspace/core/shared/item.model';
+
+import { AbstractComponentLoaderComponent } from '../../../../../../../../../shared/abstract-component-loader/abstract-component-loader.component';
+import { DynamicComponentLoaderDirective } from '../../../../../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { ThemeService } from '../../../../../../../../../shared/theme-support/theme.service';
+import {
+ AttachmentRenderingType,
+ getAttachmentTypeRendering,
+} from '../attachment-type.decorator';
+
+/**
+ * Component that dynamically loads the correct attachment rendering component
+ * based on the bitstream's rendering type.
+ *
+ * Extends {@link AbstractComponentLoaderComponent} to leverage automatic input wiring
+ * and re-instantiation when the rendering type changes.
+ */
+@Component({
+ selector: 'ds-attachment-render',
+ templateUrl: '../../../../../../../../../shared/abstract-component-loader/abstract-component-loader.component.html',
+ imports: [
+ DynamicComponentLoaderDirective,
+ ],
+})
+export class AttachmentRenderComponent extends AbstractComponentLoaderComponent {
+
+ /**
+ * Current DSpace Item
+ */
+ @Input() item: Item;
+
+ /**
+ * The bitstream to render
+ */
+ @Input() bitstream: Bitstream;
+
+ /**
+ * The rendering type for the attachment
+ */
+ @Input() renderingType: AttachmentRenderingType | string;
+
+ /**
+ * Input names that should be passed down to the dynamically created component.
+ */
+ protected inputNames: (keyof this & string)[] = [
+ 'item', 'bitstream',
+ ];
+
+ /**
+ * When the renderingType changes, the component must be re-evaluated.
+ * The bitstream value does not affect which component is chosen, so it is
+ * passed down as a regular @Input() instead of triggering re-instantiation.
+ */
+ protected inputNamesDependentForComponent: (keyof this & string)[] = [
+ 'renderingType',
+ ];
+
+ constructor(
+ protected themeService: ThemeService,
+ ) {
+ super(themeService);
+ }
+
+ /**
+ * Fetch the component depending on the attachment rendering type.
+ * Called by the abstract base class when instantiating or re-instantiating the component.
+ *
+ * @returns The constructor of the matching attachment render component
+ */
+ public getComponent(): Promise> {
+ const rendering = this.renderingType || AttachmentRenderingType.DOWNLOAD;
+ return Promise.resolve(getAttachmentTypeRendering(rendering));
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.html
new file mode 100644
index 00000000000..77c206e5dac
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.html
@@ -0,0 +1,21 @@
+@if (!hasNoDownload) {
+ @if (bitstreamPath$ | async; as bitstreamLink) {
+ @if (canDownload$ | async) {
+
+ {{ 'dynamic-layout.advanced-attachment.download' | translate }}
+
+ } @else {
+
+ {{ 'dynamic-layout.advanced-attachment.requestACopy' | translate }}
+
+ }
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.spec.ts
new file mode 100644
index 00000000000..5a0b960d035
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.spec.ts
@@ -0,0 +1,118 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { ConfigurationProperty } from '@dspace/core/shared/configuration-property.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { AuthorizationDataService } from 'src/app/core/data/feature-authorization/authorization-data.service';
+import { Bitstream } from 'src/app/core/shared/bitstream.model';
+import { Item } from 'src/app/core/shared/item.model';
+
+import { FileDownloadButtonComponent } from './file-download-button.component';
+
+describe('FileDownloadButtonComponent', () => {
+ let component: FileDownloadButtonComponent;
+ let fixture: ComponentFixture;
+
+ let authorizationService: AuthorizationDataService;
+
+ let bitstream: Bitstream;
+ let item: Item;
+ let configurationDataService: ConfigurationDataService;
+
+ function init() {
+ authorizationService = jasmine.createSpyObj('authorizationService', {
+ isAuthorized: jasmine.createSpy('isAuthorized'),
+ });
+ bitstream = Object.assign(new Bitstream(), {
+ uuid: 'bitstreamUuid',
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+ item = Object.assign(new Item(), {
+ uuid: 'itemUuid',
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+ configurationDataService = jasmine.createSpyObj('configurationDataService', {
+ findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
+ name: 'request.item.type',
+ values: [],
+ })),
+ });
+ }
+
+
+ beforeEach(async () => {
+
+ init();
+
+ await TestBed.configureTestingModule({
+ imports: [
+ RouterTestingModule,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ FileDownloadButtonComponent,
+ ],
+ providers: [
+ { provide: AuthorizationDataService, useValue: authorizationService },
+ { provide: ConfigurationDataService, useValue: configurationDataService },
+ ],
+ })
+ .compileComponents();
+ });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FileDownloadButtonComponent);
+ component = fixture.componentInstance;
+ component.bitstream = bitstream;
+ component.item = item;
+ (authorizationService.isAuthorized as jasmine.Spy).and.returnValue(of(true));
+ component.bitstreamPath$ = of({
+ routerLink: 'test',
+ queryParams: {},
+ });
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should show download button', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="download"]'))).toBeTruthy();
+ expect(fixture.debugElement.query(By.css('[data-test="requestACopy"]'))).toBeFalsy();
+ });
+
+ it('should show can request a copy button', () => {
+ (authorizationService.isAuthorized as jasmine.Spy).and.returnValue(of(false));
+ component.ngOnInit();
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('[data-test="download"]'))).toBeFalsy();
+ expect(fixture.debugElement.query(By.css('[data-test="requestACopy"]'))).toBeTruthy();
+ });
+
+ it('should show a disabled can request a copy button when request.item.type has no value', () => {
+ (authorizationService.isAuthorized as jasmine.Spy).and.returnValue(of(false));
+ component.ngOnInit();
+ fixture.detectChanges();
+ const btn = fixture.debugElement.query(By.css('[data-test="requestACopy"]'));
+ expect(btn.nativeNode.getAttribute('aria-disabled')).toBe('true');
+ expect(btn.nativeNode.classList.contains('disabled')).toBeTrue();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.ts
new file mode 100644
index 00000000000..2d0b24d449c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/file-download-button/file-download-button.component.ts
@@ -0,0 +1,40 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { BtnDisabledDirective } from 'src/app/shared/btn-disabled.directive';
+
+import { FileDownloadLinkComponent } from '../../../../../../../../../../../shared/file-download-link/file-download-link.component';
+import {
+ AttachmentRenderingType,
+ attachmentTypeRendering,
+} from '../../../attachment-type.decorator';
+
+@attachmentTypeRendering(AttachmentRenderingType.DOWNLOAD)
+@Component({
+ selector: 'ds-file-download-button',
+ templateUrl: './file-download-button.component.html',
+ styleUrls: ['./file-download-button.component.scss'],
+ imports: [
+ AsyncPipe,
+ BtnDisabledDirective,
+ RouterLink,
+ TranslateModule,
+ ],
+})
+/**
+ * Component displaying a download button or the request a copy button depending on authorization
+ */
+export class FileDownloadButtonComponent extends FileDownloadLinkComponent implements OnInit {
+
+ hasNoDownload = true;
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.hasNoDownload = this.bitstream?.allMetadataValues('bitstream.viewer.provider').includes('nodownload');
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-type.decorator.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-type.decorator.ts
new file mode 100644
index 00000000000..e2d4df037c0
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-type.decorator.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { GenericConstructor } from '@dspace/core/shared/generic-constructor';
+
+export enum AttachmentRenderingType {
+ DOWNLOAD = 'DOWNLOAD',
+ IIIF = 'IIIF',
+ PDF = 'PDF'
+}
+
+/**
+ * Registry of attachment rendering types to their corresponding component constructors.
+ *
+ * Entries are added dynamically at class-definition time by the
+ * {@link attachmentTypeRendering} decorator, instead of being hardcoded here.
+ */
+const attachmentComponentMap = new Map>();
+
+/**
+ * Decorator that registers a component as the renderer for a given attachment type.
+ *
+ * @param objectType The attachment rendering type this component handles
+ */
+export function attachmentTypeRendering(objectType: AttachmentRenderingType) {
+ return function decorator(component: any) {
+ if (objectType) {
+ attachmentComponentMap.set(objectType, component);
+ }
+ };
+}
+
+/**
+ * Retrieve the component registered for a given attachment rendering type.
+ *
+ * @param objectType The rendering type string (case-insensitive)
+ * @returns The component constructor, or undefined if not registered
+ */
+export function getAttachmentTypeRendering(objectType: string): GenericConstructor | undefined {
+ return attachmentComponentMap.get(objectType.toUpperCase());
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.html
new file mode 100644
index 00000000000..372c8a766dd
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.html
@@ -0,0 +1,83 @@
+@if (attachment) {
+ ;
+ const attachmentMock: any = Object.assign(new Bitstream(),
+ {
+ checkSum: {
+ checkSumAlgorithm: 'MD5',
+ value: 'checksum',
+ },
+ thumbnail: createSuccessfulRemoteDataObject$(new Bitstream()),
+ },
+ );
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ BitstreamAttachmentComponent,
+ BitstreamRenderingDirective,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ],
+ providers: [
+ provideRouter([]),
+ { provide: 'fieldProvider', useValue: {} },
+ { provide: 'itemProvider', useValue: {} },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: BitstreamDataService, useValue: {} },
+ { provide: APP_CONFIG, useValue: environment },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ })
+ .overrideComponent(BitstreamAttachmentComponent, { remove: { imports: [ThemedThumbnailComponent, AttachmentRenderComponent, TruncatableComponent, TruncatablePartComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BitstreamAttachmentComponent);
+ component = fixture.componentInstance;
+ component.attachment = attachmentMock;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.ts
new file mode 100644
index 00000000000..bfa694fe33c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.ts
@@ -0,0 +1,134 @@
+import {
+ AsyncPipe,
+ TitleCasePipe,
+} from '@angular/common';
+import {
+ Component,
+ Inject,
+ Input,
+ OnInit,
+} from '@angular/core';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { AdvancedAttachmentElementType } from '@dspace/config/advanced-attachment-rendering.config';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import {
+ Bitstream,
+ ChecksumInfo,
+} from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+import {
+ BehaviorSubject,
+ Observable,
+} from 'rxjs';
+
+import { TruncatableComponent } from '../../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { FileSizePipe } from '../../../../../../../../shared/utils/file-size-pipe';
+import { ThemedThumbnailComponent } from '../../../../../../../../thumbnail/themed-thumbnail.component';
+import { BitstreamRenderingDirective } from '../../bitstream-rendering.directive';
+import { AttachmentRenderComponent } from './attachment-render/attachment-render.component';
+import { AttachmentRenderingType } from './attachment-type.decorator';
+
+@Component({
+ selector: 'ds-bitstream-attachment',
+ templateUrl: './bitstream-attachment.component.html',
+ styleUrls: ['./bitstream-attachment.component.scss'],
+ imports: [
+ AsyncPipe,
+ AttachmentRenderComponent,
+ FileSizePipe,
+ ThemedThumbnailComponent,
+ TitleCasePipe,
+ TranslateModule,
+ TruncatableComponent,
+ TruncatablePartComponent,
+ ],
+})
+export class BitstreamAttachmentComponent extends BitstreamRenderingDirective implements OnInit {
+
+ /**
+ * Environment variables configuring the fields to be viewed
+ */
+ envMetadata = this.appConfig.layout.advancedAttachmentRendering.metadata;
+
+ /**
+ * Configuration type enum
+ */
+ AdvancedAttachmentElementType = AdvancedAttachmentElementType;
+
+ /**
+ * Configuration type enum
+ */
+ AttachmentRenderingType = AttachmentRenderingType;
+
+ /**
+ * All item providers to show buttons of
+ */
+ allAttachmentProviders: string[] = [];
+
+ /**
+ * Attachment metadata to be displayed in title case
+ */
+ attachmentTypeMetadata = 'dc.type';
+
+ /**
+ * Attachment to be displayed
+ */
+ @Input() attachment: Bitstream;
+
+ /**
+ * Format of the bitstream
+ */
+ bitstreamFormat$: Observable;
+
+ /**
+ * Size of the bitstream
+ */
+ bitstreamSize: number;
+ /**
+ * Checksum info of the bitstream
+ */
+ checksumInfo: ChecksumInfo;
+
+ thumbnail$: BehaviorSubject> = new BehaviorSubject>(null);
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected readonly bitstreamDataService: BitstreamDataService,
+ protected readonly translateService: TranslateService,
+ protected readonly router: Router,
+ protected readonly route: ActivatedRoute,
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, bitstreamDataService, translateService);
+ }
+
+ ngOnInit() {
+ this.attachment.thumbnail.pipe(
+ getFirstCompletedRemoteData(),
+ ).subscribe((thumbnail: RemoteData) => {
+ this.thumbnail$.next(thumbnail);
+ });
+ this.allAttachmentProviders = this.attachment?.allMetadataValues('bitstream.viewer.provider');
+ this.bitstreamFormat$ = this.getFormat(this.attachment);
+ this.bitstreamSize = this.getSize(this.attachment);
+ this.checksumInfo = this.getChecksum(this.attachment);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.html
new file mode 100644
index 00000000000..26da168d5fe
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.html
@@ -0,0 +1,26 @@
+;
+ let de: DebugElement;
+ let localeService: any;
+
+ const languageList = ['en;q=1', 'it;q=0.9', 'de;q=0.8', 'fr;q=0.7'];
+
+ const testItem = Object.assign(new Item(), {
+ bundles: of({}),
+ metadata: {
+ 'dc.identifier.doi': [
+ {
+ value: 'doi:10.1392/dironix',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ uuid: 'item-uuid',
+ });
+
+ const mockField: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: null,
+ metadataValue: null,
+ },
+ };
+
+ const mockFieldWithMetadata: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'main article',
+ },
+ };
+
+ const mockFieldWithRegexMetadata: LayoutField = {
+ metadata: '',
+ label: 'Files',
+ rendering: FieldRenderingType.ATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: '(/^Test Article/i)',
+ },
+ };
+
+ const mockLocaleService = jasmine.createSpyObj('LocaleService', [
+ 'getCurrentLanguageCode',
+ 'getLanguageCodeList',
+ ]);
+
+
+ const bitstream1 = Object.assign(new Bitstream(), {
+ id: 'bitstream4',
+ uuid: 'bitstream4',
+ metadata: {
+ 'dc.title': [
+ {
+ value: 'test',
+ },
+ ],
+ 'dc.type': [
+ {
+ value: 'test',
+ },
+ ],
+ 'dc.description': [
+ {
+ value: 'test',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+ const bitstream2 = Object.assign(new Bitstream(), {
+ id: 'bitstream4',
+ uuid: 'bitstream4',
+ metadata: {
+ },
+ _links: {
+ self: { href: 'obj-selflink' },
+ },
+ });
+
+ const mockBitstreamDataService: any = jasmine.createSpyObj('BitstreamDataService', {
+ getThumbnailFor(item: Item): Observable> {
+ return createSuccessfulRemoteDataObject$(new Bitstream());
+ },
+ findAllByItemAndBundleName: jasmine.createSpy('findAllByItemAndBundleName'),
+ findByItem: jasmine.createSpy('findByItem'),
+ });
+
+ const mockAuthorizedService = jasmine.createSpyObj('AuthorizationDataService', {
+ isAuthorized: jasmine.createSpy('isAuthorized'),
+ });
+ const getDefaultTestBedConf = () => {
+ return {
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ RouterTestingModule,
+ AttachmentComponent,
+ FileSizePipe,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+ { provide: AuthorizationDataService, useValue: mockAuthorizedService },
+ { provide: LocaleService, useValue: mockLocaleService },
+ { provide: APP_CONFIG, useValue: environment },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ };
+ };
+
+ describe('when pagination is disabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = false;
+ mockBitstreamDataService.findAllByItemAndBundleName.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ mockBitstreamDataService.findByItem.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ localeService = TestBed.inject(LocaleService);
+ localeService.getCurrentLanguageCode.and.returnValue(of('en'));
+ localeService.getLanguageCodeList.and.returnValue(of(languageList));
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList(attachmentsMock)));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should retrieve bitstreams without pagination', fakeAsync(() => {
+ flush();
+ expect(component.getBitstreamsByItem).toHaveBeenCalled();
+ }));
+
+ it('should not show view more button', fakeAsync(() => {
+ flush();
+ expect(fixture.debugElement.query(By.css('a[data-test="view-more"]'))).toBeNull();
+ }));
+
+ it('check metadata rendering', fakeAsync(() => {
+ flush();
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-file-download-link'));
+ expect(valueFound.length).toBe(3);
+ }));
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+ it('should show information properly', () => {
+ const titles = de.queryAll(By.css('[data-test="title"]'));
+ expect(titles.length).toBe(3);
+ expect(titles[0].nativeElement.innerHTML).toContain('test-unspecified.pdf (127.37 KB)');
+ expect(titles[1].nativeElement.innerHTML).toContain('main.pdf (127.37 KB)');
+ expect(titles[2].nativeElement.innerHTML).toContain('main-regex.pdf (127.37 KB)');
+ });
+
+ describe('and the field has metadata key and value set as value', () => {
+ beforeEach(() => {
+ // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ TestBed.overrideProvider('fieldProvider', { useValue: mockFieldWithMetadata });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([attachmentsMock[1]])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should show main article attachment', () => {
+ expect(de.query(By.css('[data-test="title"]')).nativeElement.innerHTML).toContain('main.pdf (127.37 KB)');
+ });
+
+ });
+
+ describe('when the field has metadata key and value set as regex', () => {
+ beforeEach(() => {
+ // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ TestBed.overrideProvider('fieldProvider', { useValue: mockFieldWithRegexMetadata });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([attachmentsMock[2]])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should show regex article attachment', () => {
+ expect(de.query(By.css('[data-test="title"]')).nativeElement.innerHTML).toContain('main-regex.pdf (127.37 KB)');
+ });
+
+ });
+
+ describe('and attachment has no metadata', () => {
+
+ beforeEach(() => {
+ // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstream2])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('Should not render title part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="title"]'))).toBeFalsy();
+ });
+ it('Should not render type part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="type"]'))).toBeFalsy();
+ });
+ it('Should not render description part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="description"]'))).toBeFalsy();
+ });
+
+ });
+
+ describe('and attachment has dc.title,dc.type and dc.description', () => {
+
+ beforeEach(() => {
+ // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstream1])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('Should render title part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="title"]'))).toBeTruthy();
+ });
+ it('Should render type part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="type"]'))).toBeTruthy();
+ });
+ it('Should render description part', () => {
+ expect(fixture.debugElement.query(By.css('[data-test="description"]'))).toBeTruthy();
+ });
+ });
+ });
+
+ describe('when pagination is enabled', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule(getDefaultTestBedConf())
+ .overrideComponent(AttachmentComponent, {
+ remove: {
+ imports: [
+ TruncatableComponent,
+ ThemedFileDownloadLinkComponent,
+ TruncatablePartComponent,
+ ],
+ },
+ });
+ fixture = TestBed.createComponent(AttachmentComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockAuthorizedService.isAuthorized.and.returnValues(of(true), of(true));
+ component.envPagination.enabled = true;
+ localeService = TestBed.inject(LocaleService);
+ localeService.getCurrentLanguageCode.and.returnValue(of('en'));
+ localeService.getLanguageCodeList.and.returnValue(of(languageList));
+ let spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should show view more button', () => {
+ expect(fixture.debugElement.query(By.css('button[data-test="view-more"]'))).toBeTruthy();
+ });
+
+ it('should show 2 elements', () => {
+ expect(fixture.debugElement.queryAll(By.css('ds-file-download-link')).length).toEqual(2);
+ });
+
+ it('and view more button is clicked it should show 4 elements', () => {
+ const btn = fixture.debugElement.query(By.css('button[data-test="view-more"]'));
+ (component.getBitstreamsByItem as any).and.returnValue(of(createPaginatedList([bitstream1, bitstream1])));
+ fixture.detectChanges();
+ btn.nativeElement.click();
+ fixture.detectChanges();
+ expect(fixture.debugElement.queryAll(By.css('ds-file-download-link')).length).toEqual(4);
+ });
+
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.ts
new file mode 100644
index 00000000000..68c375e287d
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.ts
@@ -0,0 +1,138 @@
+import {
+ AsyncPipe,
+ TitleCasePipe,
+} from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { FindListOptions } from '@dspace/core/data/find-list-options.model';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
+import {
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { ThemedFileDownloadLinkComponent } from '../../../../../../../shared/file-download-link/themed-file-download-link.component';
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { FileSizePipe } from '../../../../../../../shared/utils/file-size-pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { BitstreamAttachmentRenderingDirective } from './bitstream-attachment-rendering.directive';
+
+@metadataBoxFieldRendering(FieldRenderingType.ATTACHMENT)
+@Component({
+ selector: 'ds-attachment',
+ templateUrl: './attachment.component.html',
+ styleUrls: ['./attachment.component.scss'],
+ imports: [
+ AsyncPipe,
+ FileSizePipe,
+ ThemedFileDownloadLinkComponent,
+ TitleCasePipe,
+ TranslateModule,
+ TruncatableComponent,
+ TruncatablePartComponent,
+ ],
+})
+/**
+ * The component for displaying a thumbnail rendered metadata box
+ */
+export class AttachmentComponent extends BitstreamAttachmentRenderingDirective implements OnInit {
+
+ /**
+ * List of bitstreams to show
+ */
+ bitstreams$: BehaviorSubject = new BehaviorSubject([]);
+
+ /**
+ * If the list should show view more button
+ */
+ canViewMore = false;
+
+ /**
+ * Environment variables configuring pagination
+ */
+ envPagination = this.appConfig.layout.advancedAttachmentRendering.pagination;
+
+ /**
+ * Pagination configuration object
+ */
+ /**
+ * Pagination configuration object
+ */
+ pageOptions: FindListOptions;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected bitstreamDataService: BitstreamDataService,
+ protected translateService: TranslateService,
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, bitstreamDataService, translateService);
+ }
+
+ /**
+ * On init check if we want to show the attachment list with pagination or show all attachments
+ */
+ ngOnInit() {
+ this.initPageOptions();
+ this.retrieveBitstreams();
+ }
+
+ /**
+ * Retrieve the list of bitstream to show
+ */
+ retrieveBitstreams(): void {
+ this.getBitstreamsByItem(this.pageOptions).pipe(
+ map((bitstreamList: PaginatedList) => {
+ this.canViewMore = this.envPagination.enabled && this.pageOptions?.currentPage !== bitstreamList?.pageInfo?.totalPages;
+ return bitstreamList.page;
+ }),
+ take(1),
+ ).subscribe((bitstreams: Bitstream[]) => {
+ if (this.envPagination.enabled) {
+ this.bitstreams$.next([...this.bitstreams$.value, ...bitstreams]);
+ } else {
+ this.bitstreams$.next(bitstreams);
+ }
+ });
+ }
+
+ /**
+ * When view more is clicked show the next page and check if view more button should be shown
+ */
+ viewMore() {
+ this.pageOptions.currentPage++;
+ this.retrieveBitstreams();
+ }
+
+ /**
+ * Init page option according to configuration
+ * @protected
+ */
+ protected initPageOptions(): void {
+ this.pageOptions = Object.assign(new FindListOptions(), {
+ elementsPerPage: this.envPagination.enabled ? this.envPagination.elementsPerPage : 100,
+ currentPage: 1,
+ });
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/bitstream-attachment-rendering.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/bitstream-attachment-rendering.directive.ts
new file mode 100644
index 00000000000..3b4491a5ea2
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/bitstream-attachment-rendering.directive.ts
@@ -0,0 +1,52 @@
+import {
+ Directive,
+ Inject,
+} from '@angular/core';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { FindListOptions } from '@dspace/core/data/find-list-options.model';
+import {
+ buildPaginatedList,
+ PaginatedList,
+} from '@dspace/core/data/paginated-list.model';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { followLink } from '@dspace/core/shared/follow-link-config.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { BitstreamRenderingDirective } from '../bitstream-rendering.directive';
+
+/**
+ * This class defines the basic model to extends for create a new
+ * bitstream-attachment field render component.
+ * This will render all bitstreams that aren't marked hidden.
+ */
+@Directive()
+export abstract class BitstreamAttachmentRenderingDirective extends BitstreamRenderingDirective {
+ constructor(
+ @Inject('fieldProvider') fieldProvider: LayoutField,
+ @Inject('itemProvider') itemProvider: Item,
+ @Inject('renderingSubTypeProvider') renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ bitstreamDataService: BitstreamDataService,
+ translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, bitstreamDataService, translateService);
+ }
+
+ getBitstreamsByItem(options?: FindListOptions): Observable> {
+ return this.bitstreamDataService
+ .findShowableBitstreamsByItem(this.item.uuid, this.field.bitstream.bundle, this.getMetadataFilters(), options,
+ false, false, followLink('thumbnail'), followLink('format'))
+ .pipe(
+ getFirstCompletedRemoteData(),
+ map((response: RemoteData>) => {
+ return response.hasSucceeded ? response.payload : buildPaginatedList(null, []);
+ }),
+ );
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/bitstream-rendering.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/bitstream-rendering.directive.ts
new file mode 100644
index 00000000000..cec7e9a8f20
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/bitstream-rendering.directive.ts
@@ -0,0 +1,179 @@
+import {
+ Directive,
+ Inject,
+} from '@angular/core';
+import {
+ BitstreamDataService,
+ MetadataFilter,
+} from '@dspace/core/data/bitstream-data.service';
+import { FindListOptions } from '@dspace/core/data/find-list-options.model';
+import {
+ buildPaginatedList,
+ PaginatedList,
+} from '@dspace/core/data/paginated-list.model';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import {
+ Bitstream,
+ ChecksumInfo,
+} from '@dspace/core/shared/bitstream.model';
+import { BitstreamFormat } from '@dspace/core/shared/bitstream-format.model';
+import { followLink } from '@dspace/core/shared/follow-link-config.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import {
+ hasValue,
+ isNotEmpty,
+} from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import {
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { RenderingTypeStructuredDirective } from './rendering-type-structured.directive';
+
+/**
+ * This class defines the basic model to extends for create a new
+ * bitstream field render component
+ */
+@Directive()
+export abstract class BitstreamRenderingDirective extends RenderingTypeStructuredDirective {
+
+ private TITLE_METADATA = 'dc.title';
+ private SOURCE_METADATA = 'dc.source';
+ private TYPE_METADATA = 'dc.type';
+ private DESCRIPTION_METADATA = 'dc.description';
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected bitstreamDataService: BitstreamDataService,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ /**
+ * Returns the list of original bitstreams according to BUNDLE configured in the rendering
+ *
+ * @param options The {@link FindListOptions} for the request
+ */
+ getBitstreams(options?: FindListOptions): Observable> {
+ return this.bitstreamDataService
+ .findAllByItemAndBundleName(this.item, this.field.bitstream.bundle, options, false, false, followLink('thumbnail'))
+ .pipe(
+ getFirstCompletedRemoteData(),
+ map((response: RemoteData>) => {
+ return response.hasSucceeded ? response.payload : buildPaginatedList(null, []);
+ }),
+ );
+ }
+
+ /**
+ * Returns the filename of given bitstream
+ * @param bitstream
+ */
+ fileName(bitstream: Bitstream): string {
+ const title = bitstream.firstMetadataValue(this.TITLE_METADATA);
+ return hasValue(title) ? title : bitstream.firstMetadataValue(this.SOURCE_METADATA);
+ }
+
+ /**
+ * Returns the size of given bitstreams in bytes
+ * @param bitstream
+ */
+ getChecksum(bitstream: Bitstream): ChecksumInfo {
+ return bitstream.checkSum;
+ }
+
+ /**
+ * Returns the size of given bitstreams in bytes
+ * @param bitstream
+ */
+ getSize(bitstream: Bitstream): number {
+ return bitstream.sizeBytes;
+ }
+
+ /**
+ * Returns type of given bistream
+ * @param bitstream
+ */
+ getType(bitstream: Bitstream): string {
+ return bitstream.firstMetadataValue(this.TYPE_METADATA);
+ }
+
+ /**
+ * Returns link of given bistream
+ * @param bitstream
+ */
+ getLink(bitstream: Bitstream): string {
+ return bitstream._links.content.href;
+ }
+
+ /**
+ * Returns format of given bistream
+ * @param bitstream
+ */
+ getFormat(bitstream: Bitstream): Observable {
+ return bitstream.format?.pipe(
+ map((rd: RemoteData) => {
+ return rd.payload?.shortDescription;
+ }),
+ take(1),
+ );
+ }
+
+ /**
+ * Returns description of given bistream
+ * @param bitstream
+ */
+ getDescription(bitstream: Bitstream): string {
+ return bitstream.firstMetadataValue(this.DESCRIPTION_METADATA);
+ }
+
+ /**
+ * Returns the list of bitstreams according to BUNDLE configured in the rendering and filtering by the field configuration
+ *
+ * @param options The {@link FindListOptions} for the request
+ */
+ getBitstreamsByItem(options?: FindListOptions): Observable> {
+ return this.bitstreamDataService
+ .findByItem(
+ this.item.uuid,
+ this.field.bitstream.bundle,
+ this.getMetadataFilters(),
+ options,
+ false,
+ false,
+ followLink('thumbnail'),
+ )
+ .pipe(
+ getFirstCompletedRemoteData(),
+ map((response: RemoteData>) => {
+ return response.hasSucceeded ? response.payload : buildPaginatedList(null, []);
+ }),
+ );
+ }
+
+ /**
+ * Composes the {@link MetadataFilter} array used as filter
+ * while retrieving bitstream from remote services.
+ *
+ * @protected
+ */
+ protected getMetadataFilters(): MetadataFilter[] {
+ const filters: MetadataFilter[] = [];
+ if (isNotEmpty(this.field.bitstream.metadataValue)) {
+ filters.push({
+ metadataName: this.field.bitstream.metadataField,
+ metadataValue: this.field.bitstream.metadataValue,
+ });
+ }
+ return filters;
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.html
new file mode 100644
index 00000000000..f4a5501e215
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.html
@@ -0,0 +1,7 @@
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.spec.ts
new file mode 100644
index 00000000000..efaff466388
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.spec.ts
@@ -0,0 +1,59 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ItemPageCcLicenseFieldComponent } from '../../../../../../../item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component';
+import { CcLicenseLargeComponent } from './cc-license-large.component';
+
+describe('CcLicenseLargeComponent', () => {
+ let component: CcLicenseLargeComponent;
+ let fixture: ComponentFixture;
+
+ const mockItem = {
+ firstMetadataValue: jasmine.createSpy('firstMetadataValue').and.returnValue(''),
+ metadata: {},
+ findMetadataSortedByPlace: jasmine.createSpy('findMetadataSortedByPlace').and.returnValue([]),
+ };
+
+ const mockField = {
+ metadataGroup: { elements: [] },
+ styleValue: '',
+ };
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ CcLicenseLargeComponent,
+ TranslateModule.forRoot(),
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: mockItem },
+ { provide: 'metadataValueProvider', useValue: {} },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).overrideComponent(CcLicenseLargeComponent, {
+ remove: {
+ imports: [ItemPageCcLicenseFieldComponent],
+ },
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(CcLicenseLargeComponent);
+ component = fixture.componentInstance;
+
+ component.componentsToBeRenderedMap.set(0, [
+ { field: { metadata: 'dc.rights' } as any, value: {} as any },
+ { field: { metadata: 'dc.rights.uri' } as any, value: {} as any },
+ ] as any);
+
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.ts
new file mode 100644
index 00000000000..98a6709d843
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-large/cc-license-large.component.ts
@@ -0,0 +1,46 @@
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { LayoutField } from '../../../../../../../core/layout/models/box.model';
+import { Item } from '../../../../../../../core/shared/item.model';
+import { ItemPageCcLicenseFieldComponent } from '../../../../../../../item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadataGroup/metadata-group.component';
+
+@metadataBoxFieldRendering(FieldRenderingType.CCLICENSEFULL)
+@Component({
+ selector: 'ds-cc-license-large',
+ imports: [
+ ItemPageCcLicenseFieldComponent,
+ ],
+ templateUrl: './cc-license-large.component.html',
+ styleUrl: './cc-license-large.component.scss',
+})
+export class CcLicenseLargeComponent extends MetadataGroupComponent implements OnInit {
+
+ static override structured = false;
+
+ dcRights: any;
+ dcRightsUri: any;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+ ngOnInit(): void {
+ super.ngOnInit();
+ const ccLicenseEntryMetadata = this.componentsToBeRenderedMap.get(0);
+ [this.dcRights, this.dcRightsUri] = ccLicenseEntryMetadata.map((entryMeta) => entryMeta.field.metadata);
+
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.html
new file mode 100644
index 00000000000..5688dec06ba
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.html
@@ -0,0 +1,7 @@
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.spec.ts
new file mode 100644
index 00000000000..1170c29ea35
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.spec.ts
@@ -0,0 +1,60 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ItemPageCcLicenseFieldComponent } from '../../../../../../../item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component';
+import { CcLicenseSmallComponent } from './cc-license-small.component';
+
+describe('CcLicenseSmallComponent', () => {
+ let component: CcLicenseSmallComponent;
+ let fixture: ComponentFixture;
+
+ const mockItem = {
+ firstMetadataValue: jasmine.createSpy('firstMetadataValue').and.returnValue(''),
+ metadata: {},
+ findMetadataSortedByPlace: jasmine.createSpy('findMetadataSortedByPlace').and.returnValue([]),
+ };
+
+ const mockField = {
+ metadataGroup: { elements: [] },
+ styleValue: '',
+ };
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ CcLicenseSmallComponent,
+ TranslateModule.forRoot(),
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: mockItem },
+ { provide: 'metadataValueProvider', useValue: {} },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).overrideComponent(CcLicenseSmallComponent, {
+ remove: {
+ imports: [ItemPageCcLicenseFieldComponent],
+ },
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(CcLicenseSmallComponent);
+ component = fixture.componentInstance;
+
+ component.componentsToBeRenderedMap.set(0, [
+ { field: { metadata: 'dc.rights' } as any, value: {} as any },
+ { field: { metadata: 'dc.rights.uri' } as any, value: {} as any },
+ ] as any);
+
+ fixture.detectChanges();
+
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.ts
new file mode 100644
index 00000000000..f5aa84553c8
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/cc-license-small/cc-license-small.component.ts
@@ -0,0 +1,46 @@
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { LayoutField } from '../../../../../../../core/layout/models/box.model';
+import { Item } from '../../../../../../../core/shared/item.model';
+import { ItemPageCcLicenseFieldComponent } from '../../../../../../../item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadataGroup/metadata-group.component';
+
+@metadataBoxFieldRendering(FieldRenderingType.CCLICENSE)
+@Component({
+ selector: 'ds-cc-license-small',
+ imports: [
+ ItemPageCcLicenseFieldComponent,
+ ],
+ templateUrl: './cc-license-small.component.html',
+ styleUrl: './cc-license-small.component.scss',
+})
+export class CcLicenseSmallComponent extends MetadataGroupComponent implements OnInit {
+
+ static override structured = false;
+
+ dcRights: any;
+ dcRightsUri: any;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+ ngOnInit(): void {
+ super.ngOnInit();
+ const ccLicenseEntryMetadata = this.componentsToBeRenderedMap.get(0);
+ [this.dcRights, this.dcRightsUri] = ccLicenseEntryMetadata.map((entryMeta) => entryMeta.field.metadata);
+
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.html
new file mode 100644
index 00000000000..f4001aaf7ad
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.html
@@ -0,0 +1,5 @@
+;
+ let localeService: LocaleService;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': '2020-08-24',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const localeServiceMock = Object.assign({
+ getCurrentLanguageCode: () => of('en'),
+ });
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.date',
+ 'label': 'Date',
+ 'rendering': FieldRenderingType.DATE,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, DateComponent, ToDatePipe],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: LocaleService, useValue: localeServiceMock },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DateComponent);
+ component = fixture.componentInstance;
+ localeService = TestBed.inject(LocaleService);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+ expect(spanValueFound[0].nativeElement.textContent).toContain('August 24, 2020');
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.ts
new file mode 100644
index 00000000000..b825ade7a2c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the date metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.DATE)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-date]',
+ templateUrl: './date.component.html',
+ styleUrls: ['./date.component.scss'],
+ imports: [
+ ToDatePipe,
+ ],
+})
+export class DateComponent extends RenderingTypeValueDirective {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.html
new file mode 100644
index 00000000000..af4f8522cf7
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.html
@@ -0,0 +1,5 @@
+;
+
+ const itemService = jasmine.createSpyObj('ItemDataService', {
+ findByIdWithProjections: jasmine.createSpy('findByIdWithProjections'),
+ });
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': '1',
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.author': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const testPerson = Object.assign(new Item(), {
+ id: '1',
+ bundles: of({}),
+ metadata: {
+ 'dspace.entity.type': [
+ {
+ value: 'Person',
+ },
+ ],
+ 'person.orgunit.id': [
+ {
+ value: 'OrgUnit',
+ authority: '2',
+ },
+ ],
+ 'person.identifier.orcid': [
+ {
+ language: 'en_US',
+ value: '0000-0001-8918-3592',
+ },
+ ],
+ 'dspace.orcid.authenticated': [
+ {
+ language: null,
+ value: 'authenticated',
+ },
+ ],
+ },
+ });
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.title',
+ 'label': 'Title',
+ 'rendering': FieldRenderingType.DYNAMICREF,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, DynamicrefComponent, MetadataLinkViewComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ItemDataService, useValue: itemService },
+ ],
+ })
+ .overrideComponent(DynamicrefComponent, { remove: { imports: [MetadataLinkViewComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicrefComponent);
+ component = fixture.componentInstance;
+ itemService.findByIdWithProjections.and.returnValue(createSuccessfulRemoteDataObject$(testPerson));
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', fakeAsync(() => {
+ flush();
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-link-view'));
+ expect(valueFound.length).toBe(1);
+ }));
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+});
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.ts
new file mode 100644
index 00000000000..7870963ffbc
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { MetadataLinkViewComponent } from '../../../../../../../shared/metadata-link-view/metadata-link-view.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the dynamicref metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.DYNAMICREF)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-dynamicref]',
+ templateUrl: './dynamicref.component.html',
+ styleUrls: ['./dynamicref.component.scss'],
+ imports: [
+ MetadataLinkViewComponent,
+ ],
+})
+export class DynamicrefComponent extends RenderingTypeValueDirective {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/field-rendering-type.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/field-rendering-type.ts
new file mode 100644
index 00000000000..f0f4d3be432
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/field-rendering-type.ts
@@ -0,0 +1,25 @@
+export enum FieldRenderingType {
+ TEXT = 'TEXT',
+ HEADING = 'HEADING',
+ LONGTEXT = 'LONGTEXT',
+ DATE = 'DATE',
+ LINK = 'LINK',
+ IDENTIFIER = 'IDENTIFIER',
+ DYNAMICREF = 'DYNAMICREF',
+ THUMBNAIL = 'THUMBNAIL',
+ ATTACHMENT = 'ATTACHMENT',
+ TABLE = 'TABLE',
+ INLINE = 'INLINE',
+ ORCID = 'ORCID',
+ TAG = 'TAG',
+ VALUEPAIR = 'VALUEPAIR',
+ HTML = 'HTML',
+ LONGHTML = 'LONGHTML',
+ ADVANCEDATTACHMENT = 'ADVANCEDATTACHMENT',
+ SIMPLEATTACHMENT = 'SIMPLEATTACHMENT',
+ AUTHORITYLINK = 'AUTHORITYLINK',
+ CCLICENSEFULL = 'CCLICENSEFULL',
+ CCLICENSE = 'CCLICENSE',
+ OSMAP = 'OPENSTREETMAP',
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.html
new file mode 100644
index 00000000000..7c6e4770c87
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.html
@@ -0,0 +1,4 @@
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.spec.ts
new file mode 100644
index 00000000000..5601a792d19
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.spec.ts
@@ -0,0 +1,49 @@
+/*
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeadingComponent } from './heading.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../../../../shared/mocks/translate-loader.mock';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Item } from '../../../../../../../core/shared/item.model';
+import { By } from '@angular/platform-browser';
+import { medataBoxConfigurationMock } from 'src/app/shared/testing/box-configurations.mock';
+
+class TestItem {
+ allMetadataValues(key: string): string[] {
+ return ['This is the title'];
+ }
+}
+
+describe('HeadingComponent', () => {
+ let component: HeadingComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock
+ }
+ }), BrowserAnimationsModule],
+ declarations: [HeadingComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeadingComponent);
+ component = fixture.componentInstance;
+ component.item = new TestItem() as Item;
+ component.field = medataBoxConfigurationMock.rows[0].fields[0];
+ fixture.detectChanges();
+ });
+
+ xit('check heading rendering', () => {
+ const divFound = fixture.debugElement.queryAll(By.css('div.h2'));
+ expect(divFound.length).toBe(1);
+ expect(divFound[0].nativeElement.textContent).toContain((new TestItem()).allMetadataValues('')[0]);
+ });
+});
+*/
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.ts
new file mode 100644
index 00000000000..74833c9d8ee
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/heading/heading.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+import { ComcolPageHeaderComponent } from '../../../../../../../shared/comcol/comcol-page-header/comcol-page-header.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the heading metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.HEADING)
+@Component({
+ selector: 'ds-heading-row',
+ templateUrl: './heading.component.html',
+ styleUrls: ['./heading.component.scss'],
+ imports: [
+ ComcolPageHeaderComponent,
+ ],
+})
+export class HeadingComponent extends RenderingTypeValueDirective {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.html
new file mode 100644
index 00000000000..bbfac72d38f
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.html
@@ -0,0 +1,3 @@
+;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.title',
+ 'label': 'Title',
+ 'rendering': 'html',
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ BrowserAnimationsModule,
+ HtmlComponent,
+ ToDatePipe,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ declarations: [],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HtmlComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+ expect(spanValueFound[0].nativeElement.textContent).toContain(metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.ts
new file mode 100644
index 00000000000..2d1878147ec
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.ts
@@ -0,0 +1,50 @@
+import {
+ Component,
+ OnChanges,
+ OnInit,
+ SimpleChanges,
+} from '@angular/core';
+
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the text metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.HTML)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-html]',
+ templateUrl: './html.component.html',
+ styleUrls: ['./html.component.scss'],
+})
+export class HtmlComponent extends RenderingTypeValueDirective implements OnInit, OnChanges {
+
+ /**
+ * The processed HTML value to render
+ */
+ processedHtml: string;
+
+ ngOnInit(): void {
+ this.processedHtml = this.processHtml(this.metadataValue?.value);
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.metadataValue) {
+ this.processedHtml = this.processHtml(this.metadataValue?.value);
+ }
+ }
+
+ /**
+ * If the metadata value does not contain HTML tags then replace newline character with
+ * @param text + */ + processHtml(text: string): string { + const htmlTagRegex = /<.*?>/; + return htmlTagRegex.test(text) + ? text.replace(/\n/g, '
') + : text; + } + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html new file mode 100644 index 00000000000..ff164876374 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html @@ -0,0 +1,12 @@ +;
+ let service: ResolverStrategyService;
+
+ const doiMetadataValueWithoutSubType = Object.assign(new MetadataValue(), {
+ 'value': 'doi:10.1392/dironix',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+ const doiMetadataValueWithSubType = Object.assign(new MetadataValue(), {
+ 'value': '10.1392/dironix',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+ const hdlMetadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'hdl:2434/690937',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+ const emailMetadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'mailto:danilo.dinuzzo@4science.it',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.identifier.doi': [doiMetadataValueWithoutSubType],
+ 'dc.identifier.hdl': [hdlMetadataValue],
+ 'person.email': [emailMetadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.identifier',
+ 'label': 'Identifier',
+ 'rendering': FieldRenderingType.IDENTIFIER,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, IdentifierComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: doiMetadataValueWithoutSubType },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ResolverStrategyService, useClass: ResolverStrategyService },
+ { provide: APP_CONFIG, useValue: environment },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(IdentifierComponent);
+ component = fixture.componentInstance;
+ service = TestBed.inject(ResolverStrategyService);
+ });
+
+ describe('doi identifier rendering', () => {
+ describe('without sub-type', () => {
+ beforeEach(() => {
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ const expectedContent = doiMetadataValueWithoutSubType.value.replace('doi:', '');
+ const expectedHref = service.getBaseUrl('doi') + expectedContent;
+ expect(valueFound[0].nativeElement.textContent).toBe(expectedContent);
+ expect(valueFound[0].nativeElement.href).toBe(expectedHref);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('with sub-type', () => {
+ beforeEach(() => {
+ component.metadataValue = doiMetadataValueWithSubType;
+ component.renderingSubType = 'doi';
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ const expectedContent = doiMetadataValueWithSubType.value.replace('doi:', '');
+ const expectedHref = service.getBaseUrl('doi') + expectedContent;
+ expect(valueFound[0].nativeElement.textContent).toBe(expectedContent);
+ expect(valueFound[0].nativeElement.href).toBe(expectedHref);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+ });
+ });
+
+ describe('hdl identifier rendering', () => {
+ beforeEach(() => {
+ component.metadataValue = hdlMetadataValue;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ const expectedContent = hdlMetadataValue.value.replace('hdl:', '');
+ const expectedHref = service.getBaseUrl('hdl') + expectedContent;
+ expect(valueFound[0].nativeElement.textContent).toBe(expectedContent);
+ expect(valueFound[0].nativeElement.href).toBe(expectedHref);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('email identifier rendering', () => {
+ beforeEach(() => {
+ component.metadataValue = emailMetadataValue;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ const expectedContent = emailMetadataValue.value.replace('mailto:', '');
+ const expectedHref = service.getBaseUrl('mailto') + expectedContent;
+ expect(valueFound[0].nativeElement.textContent).toBe(expectedContent);
+ expect(valueFound[0].nativeElement.href).toBe(expectedHref);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ it('should keep white space in metadata value if shouldKeepWhiteSpaces is true', () => {
+ expect(component.composeLink('keep my white spaces', 'keepMyWhiteSpaces')).toEqual({
+ href: 'https://keepmywhitespaces.com/keep my white spaces',
+ text: 'keep my white spaces',
+ });
+ });
+
+ it('should not keep white space in metadata value if shouldKeepWhiteSpaces is false', () => {
+ expect(component.composeLink('do not keep my white spaces', 'doi')).toEqual({
+ href: 'https://doi.org/donotkeepmywhitespaces',
+ text: 'do not keep my white spaces',
+ });
+ });
+
+ describe('validateLink method', () => {
+ describe('with http/https URLs', () => {
+ it('should validate http URL', () => {
+ const link = 'http://example.com';
+ // Access private method through component instance (for testing purposes)
+ expect((component as any).validateLink(link)).toBe(true);
+ });
+
+ it('should validate https URL', () => {
+ const link = 'https://example.com';
+ expect((component as any).validateLink(link)).toBe(true);
+ });
+
+ it('should validate https URL with path', () => {
+ const link = 'https://example.com/path/to/resource';
+ expect((component as any).validateLink(link)).toBe(true);
+ });
+
+ it('should reject invalid URL with spaces', () => {
+ const link = 'https://example.com/path with spaces';
+ expect((component as any).validateLink(link)).toBe(false);
+ });
+
+ it('should reject invalid URL with quotes', () => {
+ const link = 'https://example.com/path"quoted"';
+ expect((component as any).validateLink(link)).toBe(false);
+ });
+ });
+
+ describe('with subtypeValue.link prefix', () => {
+ beforeEach(() => {
+ component.renderingSubType = 'ror';
+ fixture.detectChanges();
+ });
+
+ it('should validate link that already starts with subtypeValue.link', () => {
+ const link = 'https://ror.org/123abc';
+ expect((component as any).validateLink(link)).toBe(true);
+ });
+
+ it('should validate link that is exactly subtypeValue.link', () => {
+ const link = 'https://ror.org';
+ expect((component as any).validateLink(link)).toBe(true);
+ });
+
+ it('should reject link that does not start with subtypeValue.link', () => {
+ const link = '123abc';
+ expect((component as any).validateLink(link)).toBe(false);
+ });
+
+ it('should not validate partial match of subtypeValue.link', () => {
+ const link = 'ror.example.com';
+ expect((component as any).validateLink(link)).toBe(false);
+ });
+ });
+
+ describe('composeLink with validateLink', () => {
+ beforeEach(() => {
+ component.renderingSubType = 'ror';
+ fixture.detectChanges();
+ });
+
+ it('should not prepend subtypeValue.link if link already has it', () => {
+ const link = 'https://ror.org/123abc';
+ const result = component.composeLink(link, 'ror');
+ expect(result.href).toBe('https://ror.org/123abc');
+ expect(result.text).toBe('https://ror.org/123abc');
+ });
+
+ it('should prepend subtypeValue.link if link does not have it', () => {
+ const link = '123abc';
+ const result = component.composeLink(link, 'ror');
+ expect(result.href).toBe('https://ror.org/123abc');
+ expect(result.text).toBe('123abc');
+ });
+
+ it('should handle complete URLs with different domain', () => {
+ const link = 'https://example.com/123abc';
+ const result = component.composeLink(link, 'ror');
+ expect(result.href).toBe('https://example.com/123abc');
+ expect(result.text).toBe('https://example.com/123abc');
+ });
+ });
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.ts
new file mode 100644
index 00000000000..197203937da
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.ts
@@ -0,0 +1,213 @@
+
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import {
+ IdentifierSubtypesConfig,
+ IdentifierSubtypesIconPositionEnum,
+} from '@dspace/config/identifier-subtypes-config.interface';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import {
+ hasNoValue,
+ hasValue,
+ isNotEmpty,
+} from '@dspace/shared/utils/empty.util';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataLinkValue } from '../../../../../../models/dynamic-layout-metadata-link-value.model';
+import { ResolverStrategyService } from '../../../../../../services/resolver-strategy.service';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the identifier metadata fields.
+ */
+@metadataBoxFieldRendering(FieldRenderingType.IDENTIFIER)
+@Component({
+ selector: 'ds-identifier',
+ templateUrl: './identifier.component.html',
+ styleUrls: ['./identifier.component.scss'],
+ imports: [
+ NgbTooltipModule,
+ ],
+})
+export class IdentifierComponent extends RenderingTypeValueDirective implements OnInit {
+
+ /**
+ * The identifier to render
+ */
+ identifier: MetadataLinkValue;
+ /**
+ * value of href anchor
+ */
+ href: string[];
+ /**
+ * text to show in the anchor
+ */
+ text: string[];
+ /**
+ * specifies where to open the linked document
+ */
+ target = '_blank';
+
+ /**
+ * The identifier subtype configurations
+ */
+ identifierSubtypeConfig: IdentifierSubtypesConfig[] = this.appConfig.item.metadataLinkViewPopoverData.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,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ @Inject(APP_CONFIG) protected appConfig: AppConfig,
+ protected resolver: ResolverStrategyService,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ getIdentifierFromValue() {
+ let identifier: MetadataLinkValue;
+ if (isNotEmpty(this.renderingSubType)) {
+ identifier = this.composeLink(this.metadataValue.value, this.renderingSubType);
+ } else {
+ // Check if the value is a link (http, https, ftp or ftps)
+ // otherwise resolve link with managed urn
+ if (this.resolver.checkLink(this.metadataValue.value)) {
+ identifier = {
+ href: this.metadataValue.value,
+ text: this.metadataValue.value,
+ };
+ } else {
+ for (const urn of this.resolver.managedUrn) {
+ if (hasValue(this.metadataValue.value) && this.metadataValue.value.toLowerCase().startsWith(urn)) {
+ identifier = this.composeLink(this.metadataValue.value, urn);
+ break;
+ }
+ }
+ if (!identifier) {
+ identifier = {
+ href: this.metadataValue.value,
+ text: this.metadataValue.value,
+ };
+ }
+ }
+ }
+
+ return identifier;
+ }
+
+ /**
+ * Create a MetadataLinkValue object with the given href and text
+ * @param href the href value
+ * @param text the text value
+ * @returns MetadataLinkValue object
+ */
+ private createMetadataLinkValue(href: string, text: string): MetadataLinkValue {
+ text = text.trim() !== '' ? text : href;
+ return { href, text };
+ }
+
+ /**
+ * Set href and text of the component based on urn
+ * and the given metadata value.
+ * Is handling the case when the urn is configured in the default-app-config
+ * and the link is pre-configured.
+ * @param metadataValue the metadata value
+ * @param urn URN type (doi, hdl, mailto)
+ */
+ composeLink(metadataValue: string, urn: string): MetadataLinkValue {
+ const subtypeValue = this.getIdentifierSubtypeValue();
+
+ if (hasValue(subtypeValue)) {
+ const href = this.validateLink(metadataValue) ? metadataValue : `${subtypeValue.link}/${metadataValue}`;
+ return this.createMetadataLinkValue(href, metadataValue);
+ }
+
+ let value = metadataValue;
+ const rep = `${urn}:`;
+ if (metadataValue.startsWith(rep)) {
+ value = metadataValue.replace(rep, '');
+ }
+ const shouldKeepWhiteSpaces = this.appConfig.layout
+ .urn?.find((urnConfig) => urnConfig.name === urn)?.shouldKeepWhiteSpaces;
+ const href = this.resolver.getBaseUrl(urn) + (shouldKeepWhiteSpaces ? value : value.replace(/\s/g, ''));
+ return this.createMetadataLinkValue(href, value);
+ }
+
+ ngOnInit(): void {
+ this.identifier = this.getIdentifierFromValue();
+ this.setIconDetails();
+ }
+
+ /**
+ * Sets the icon details based on the identifier subtype configuration.
+ * 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 setIconDetails() {
+ const subtypeVal = this.getIdentifierSubtypeValue();
+ if (hasNoValue(subtypeVal)) {
+ return;
+ }
+ this.iconPosition = subtypeVal.iconPosition;
+ this.subTypeIcon = subtypeVal.iconPosition !== IdentifierSubtypesIconPositionEnum.NONE ? subtypeVal?.icon : '';
+ this.iconLink = subtypeVal?.link;
+ }
+
+ /**
+ * Retrieves the value of the identifier subtype configuration based on the rendering subtype.
+ * @returns The identifier subtype configuration object.
+ */
+ private getIdentifierSubtypeValue(): IdentifierSubtypesConfig {
+ if (isNotEmpty(this.identifierSubtypeConfig)) {
+ const subtypeVal = this.identifierSubtypeConfig.find((subtype) => subtype.name === this.renderingSubType);
+ return subtypeVal;
+ }
+ }
+
+ /**
+ * Check if the given link is valid
+ * @param link the link to check
+ * @returns true if the link is valid, false otherwise
+ */
+ private validateLink(link: string): boolean {
+ const urlRegex = /^(http|https):\/\/[^ "]+$/;
+ const subtypeValue = this.getIdentifierSubtypeValue();
+ return urlRegex.test(link) || (hasValue(subtypeValue) && link.startsWith(subtypeValue.link));
+ }
+}
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.html
new file mode 100644
index 00000000000..daf9ed0ce22
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.html
@@ -0,0 +1,8 @@
+;
+ let translateService;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'http://rest.api/item/link/id',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.link': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.title',
+ 'label': 'Title',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ const i18nLabel = 'Default Label';
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, LinkComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LinkComponent);
+ component = fixture.componentInstance;
+ translateService = TestBed.inject(TranslateService);
+ });
+
+ describe('without sub-type', () => {
+ beforeEach(() => {
+ fixture.detectChanges();
+ });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.link-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ expect(valueFound[0].nativeElement.textContent).toContain(metadataValue.value);
+ expect(valueFound[0].nativeElement.href).toBe(metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const valueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('with sub-type label', () => {
+ beforeEach(() => {
+ component.renderingSubType = 'LABEL';
+ component.metadataValueProvider = Object.assign(new MetadataValue(), metadataValue, {
+ value: '[Default Label](http://rest.api/item/link/id)',
+ });
+ component.metadataValue = component.metadataValueProvider;
+ spyOn(translateService, 'instant').and.returnValue(i18nLabel);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.link-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ expect(valueFound[0].nativeElement.textContent).toContain(i18nLabel);
+ expect(valueFound[0].nativeElement.href).toBe(metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const valueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('with sub-type email', () => {
+ beforeEach(() => {
+ component.renderingSubType = 'EMAIL';
+ spyOn(translateService, 'instant').and.returnValue(i18nLabel);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.link-value'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(valueFound.length).toBe(1);
+
+ expect(valueFound[0].nativeElement.textContent).toContain(metadataValue.value);
+ expect(valueFound[0].nativeElement.href).toBe('mailto:' + metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const valueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('URL validation and conditional rendering', () => {
+
+ describe('valid URLs', () => {
+ it('should render link for URL with http protocol', () => {
+ component.metadataValue = { value: 'http://test.com' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(true);
+ const linkElement = fixture.debugElement.query(By.css('span.link-value a'));
+ expect(linkElement).toBeTruthy();
+ expect(linkElement.nativeElement.href).toBe('http://test.com/');
+ });
+
+ it('should render link for URL with https protocol', () => {
+ component.metadataValue = { value: 'https://test.com' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(true);
+ const linkElement = fixture.debugElement.query(By.css('span.link-value a'));
+ expect(linkElement).toBeTruthy();
+ });
+
+ it('should render link for URL with www prefix', () => {
+ component.metadataValue = { value: 'www.test.com' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(true);
+ const linkElement = fixture.debugElement.query(By.css('span.link-value a'));
+ expect(linkElement).toBeTruthy();
+ expect(linkElement.nativeElement.href).toBe('http://www.test.com/');
+ });
+
+ it('should render link for URL with path', () => {
+ component.metadataValue = { value: 'https://test.com/path/to/page' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(true);
+ const linkElement = fixture.debugElement.query(By.css('span.link-value a'));
+ expect(linkElement).toBeTruthy();
+ });
+
+ it('should render link for FTP URL', () => {
+ component.metadataValue = { value: 'ftp://files.test.com' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(true);
+ const linkElement = fixture.debugElement.query(By.css('span.link-value a'));
+ expect(linkElement).toBeTruthy();
+ expect(linkElement.nativeElement.href).toBe('ftp://files.test.com/');
+ });
+ });
+
+ describe('invalid URLs - plain text rendering', () => {
+ it('should render plain text for random text without URL pattern', () => {
+ component.metadataValue = { value: 'just some text' } as MetadataValue;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(component.isLink).toBe(false);
+ const plainText = fixture.debugElement.query(By.css('span.plain-text-value'));
+ const link = fixture.debugElement.query(By.css('span.link-value a'));
+
+ expect(plainText).toBeTruthy();
+ expect(link).toBeFalsy();
+ expect(plainText.nativeElement.textContent).toContain('just some text');
+ });
+ });
+ });
+
+ describe('parseLabelValue', () => {
+
+ beforeEach(() => {
+ fixture.detectChanges();
+ });
+
+ it('should correctly extract label and URL from [Label](URL) format', () => {
+ const input = '[My Label](https://example.com/path)';
+ const result = component.parseLabelValue(input);
+
+ expect(result).toEqual({
+ label: 'My Label',
+ value: 'https://example.com/path',
+ });
+ });
+
+ it('should return the same value if input does not match [Label](URL) format', () => {
+ const input = 'Just a plain URL';
+ const result = component.parseLabelValue(input);
+
+ expect(result).toEqual({
+ label: input,
+ value: input,
+ });
+ });
+
+ it('should handle empty string gracefully', () => {
+ const input = '';
+ const result = component.parseLabelValue(input);
+
+ expect(result).toEqual({
+ label: '',
+ value: '',
+ });
+ });
+
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.ts
new file mode 100644
index 00000000000..63de5fd47f7
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.ts
@@ -0,0 +1,141 @@
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { hasValue } from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataLinkValue } from '../../../../../../models/dynamic-layout-metadata-link-value.model';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * Defines the list of subtypes for this rendering
+ */
+enum TYPES {
+ LABEL = 'LABEL',
+ EMAIL = 'EMAIL'
+}
+
+/**
+ * This component renders the links metadata fields.
+ * The metadata value is used for href and text
+ */
+@metadataBoxFieldRendering(FieldRenderingType.LINK)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-link]',
+ templateUrl: './link.component.html',
+ styleUrls: ['./link.component.scss'],
+})
+export class LinkComponent extends RenderingTypeValueDirective implements OnInit {
+
+ /**
+ * The link to render
+ */
+ link: MetadataLinkValue;
+
+ /**
+ * Flag to determine if the value is a valid URL
+ */
+ isLink = false;
+
+ isEmail = false;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit(): void {
+ this.isLink = this.isValidUrl();
+ this.link = this.getLinkFromValue();
+ }
+
+ /**
+ * Check if the metadata value is a valid URL
+ */
+ isValidUrl(): boolean {
+ let value = this.metadataValue.value.trim();
+
+ // If the subtype is LABEL, the value is in [Label](URL) format — extract the URL part
+ if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.LABEL.toString()) {
+ const parsed = this.parseLabelValue(value);
+ value = parsed.value;
+ }
+ // Comprehensive URL regex that matches:
+ // - URLs with protocols (http, https, ftp, mailto, etc.)
+ // - URLs without protocols (www.example.com, example.com)
+ // - URLs with paths, query strings, and fragments
+ const urlRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+
+ return urlRegex.test(value);
+ }
+
+ /**
+ * Get the link value to render
+ */
+ getLinkFromValue(): MetadataLinkValue {
+ // If the component has label subtype get the text from translate service
+ let linkText: string;
+ let metadataValue: string;
+
+ if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.EMAIL.toString()) {
+ this.isEmail = true;
+ metadataValue = 'mailto:' + this.metadataValue.value;
+ linkText = (hasValue(this.renderingSubType) &&
+ this.renderingSubType.toUpperCase() === TYPES.EMAIL.toString()) ? this.metadataValue.value : this.translateService.instant(this.field.label);
+ } else if ((hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.LABEL.toString())) {
+ // Parse value in format [Label](URL)
+ const parsedValue = this.parseLabelValue(this.metadataValue.value);
+
+ metadataValue = this.getLinkWithProtocol(parsedValue.value);
+ linkText = parsedValue.label;
+ } else {
+ // Use same value for link and label, correcting the protocol for link if needed
+ metadataValue = this.getLinkWithProtocol(this.metadataValue.value);
+ linkText = this.metadataValue.value;
+ }
+
+ return {
+ href: metadataValue,
+ text: linkText,
+ };
+ }
+
+ /**
+ * Exctract label and values for TYPES.LABEL
+ * @param value
+ */
+ parseLabelValue(input: string): { label: string; value: string } {
+ const match = input.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+
+ if (!match) {
+ return {
+ label: input,
+ value: input,
+ };
+ }
+
+ return {
+ label: match[1],
+ value: match[2],
+ };
+ }
+
+ getLinkWithProtocol(link: string): string {
+ const startsWithProtocol = [/^https?:\/\//, /^ftp:\/\//];
+ return startsWithProtocol.some(rx => rx.test(link)) ? link : 'http://' + link;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.html
new file mode 100644
index 00000000000..eb663e0ea45
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.html
@@ -0,0 +1,7 @@
+;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.title',
+ 'label': 'Title',
+ 'rendering': 'html',
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ BrowserAnimationsModule,
+ LonghtmlComponent,
+ ToDatePipe,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).overrideComponent(LonghtmlComponent, { remove: { imports: [ TruncatableComponent, TruncatablePartComponent] } })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LonghtmlComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+ expect(spanValueFound[0].nativeElement.textContent).toContain(metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.ts
new file mode 100644
index 00000000000..0d14025e580
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.ts
@@ -0,0 +1,39 @@
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { HtmlComponent } from '../html/html.component';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+
+/**
+ * This component renders the text metadata fields with a show more button
+ */
+@metadataBoxFieldRendering(FieldRenderingType.LONGHTML)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-longhtml]',
+ templateUrl: './longhtml.component.html',
+ styleUrls: ['./longhtml.component.scss'],
+ imports: [
+ TruncatableComponent,
+ TruncatablePartComponent,
+ ],
+})
+export class LonghtmlComponent extends HtmlComponent implements OnInit {
+
+ /**
+ * Id for truncatable component
+ */
+ truncatableId: string;
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ this.truncatableId = `${this.item.id}_${this.field.metadata}_html`;
+ }
+
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.html
new file mode 100644
index 00000000000..3733e072b98
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.html
@@ -0,0 +1,9 @@
+;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\nIt has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\nIt was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.abstract': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.abstract',
+ 'label': 'Preferred name',
+ 'rendering': 'LONGTEXT',
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, LongtextComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ })
+ .overrideComponent(LongtextComponent, { remove: { imports: [TruncatableComponent, TruncatablePartComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LongtextComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const formattedText = fixture.debugElement.query(By.css('[data-test="formatted-text"]')).nativeElement.innerHTML;
+ const breaklineCount = formattedText.match(/
/g)?.length; + + expect(breaklineCount).toBe(3); + expect(formattedText).toContain('<b>Lorem Ipsum</b>'); + + done(); + }); + + it('check value style', (done) => { + const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value')); + expect(spanValueFound.length).toBe(1); + done(); + }); + +}); diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts new file mode 100644 index 00000000000..f0e7213a02f --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; + +import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component'; +import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component'; +import { EscapeHtmlPipe } from '../../../../../../../shared/utils/escape-html.pipe'; +import { FieldRenderingType } from '../field-rendering-type'; +import { metadataBoxFieldRendering } from '../metadata-box.decorator'; +import { RenderingTypeValueDirective } from '../rendering-type-value.directive'; + +/** + * This component renders the longtext metadata fields + */ +@metadataBoxFieldRendering(FieldRenderingType.LONGTEXT) +@Component({ + // eslint-disable-next-line @angular-eslint/component-selector + selector: 'div[ds-longtext]', + templateUrl: './longtext.component.html', + styleUrls: ['./longtext.component.scss'], + imports: [ + EscapeHtmlPipe, + TruncatableComponent, + TruncatablePartComponent, + ], +}) +export class LongtextComponent extends RenderingTypeValueDirective { + + /** + * Id for truncable component + */ + truncableId = `${this.item.id}_${this.field.metadata}`; + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts new file mode 100644 index 00000000000..4c57aa08271 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts @@ -0,0 +1,67 @@ +import { GenericConstructor } from '@dspace/core/shared/generic-constructor'; +import { hasValue } from '@dspace/shared/utils/empty.util'; + +import { METADATA_BOX_FIELD_RENDERING_MAP } from '../../../../../../../decorator-registries/metadata-box-field-rendering-registry'; +import { getMatch } from '../../../../../../shared/object-collection/shared/listable-object/listable-object.decorator'; +import { FieldRenderingType } from './field-rendering-type'; +import { RenderingTypeDirective } from './rendering-type.directive'; + +/** + * Whether a rendering type renders all metadata values in a single structured render (`true`), + * or renders each metadata value individually (`false`). + */ +export const DEFAULT_METADATA_BOX_STRUCTURED = false; + +/** + * Marker decorator used to register a component as the renderer for a given {@link FieldRenderingType}. + * + * The actual registry ({@link METADATA_BOX_FIELD_RENDERING_MAP}) is generated at build time by + * `scripts/generate-decorator-registries.ts` from these decorator usages, so this function is a no-op + * at runtime and only serves as metadata for the generator. + * + * @param fieldRenderingType the field rendering type the decorated component renders + * @param structured whether the component renders all metadata values in a single structured render + */ +export function metadataBoxFieldRendering(fieldRenderingType: FieldRenderingType, structured: boolean = DEFAULT_METADATA_BOX_STRUCTURED) { + return function decorator(component: GenericConstructor) {
+ /* intentionally empty: the registry is generated at build time */
+ };
+}
+
+/**
+ * Return the rendering type of the field to render
+ *
+ * @return the rendering type
+ */
+export const computeRenderingFn = (rendering: string, isSubtype = false): string | FieldRenderingType => {
+ let renderingType = hasValue(rendering) ? rendering : FieldRenderingType.TEXT;
+
+ if (renderingType.indexOf('.') > -1) {
+ const values = renderingType.split('.');
+ renderingType = isSubtype ? values[1] : values[0];
+ }
+ return renderingType;
+};
+
+/**
+ * Resolve the rendering component for the given rendering type.
+ *
+ * Falls back to the {@link FieldRenderingType.TEXT} component when the rendering type is not registered.
+ *
+ * @param fieldRenderingType the rendering type to look up
+ * @param structured whether to look up the structured variant of the rendering type
+ * @param registry the registry containing all the rendering components
+ * @returns a promise resolving to the matching rendering component, or undefined if none is registered
+ */
+export const getMetadataBoxFieldRenderOptionsFn = (
+ fieldRenderingType: string,
+ structured: boolean = DEFAULT_METADATA_BOX_STRUCTURED,
+ registry: Map = METADATA_BOX_FIELD_RENDERING_MAP,
+): Promise> => {
+ const match = getMatch(
+ registry,
+ [fieldRenderingType?.toUpperCase(), structured],
+ [FieldRenderingType.TEXT, DEFAULT_METADATA_BOX_STRUCTURED],
+ );
+ return hasValue(match) ? (match.match() as Promise>) : undefined;
+};
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.html
new file mode 100644
index 00000000000..e1264666346
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.html
@@ -0,0 +1,19 @@
+@if ((initialized | async)) {
+ ;
+ const testItem = Object.assign(new Item(), {
+ bundles: of({}),
+ metadata: {
+ 'dc.contributor.author': [
+ {
+ value: 'Donohue, Tim',
+ },
+ {
+ value: 'Surname, Name',
+ },
+ ],
+ 'oairecerif.author.affiliation': [
+ {
+ value: 'Duraspace',
+ },
+ {
+ value: '4Science',
+ },
+ ],
+ },
+ });
+ const mockField = Object.assign({
+ id: 1,
+ fieldType: 'METADATAGROUP',
+ metadata: 'dc.contributor.author',
+ label: 'Author(s)',
+ rendering: 'inline',
+ style: 'container row',
+ styleLabel: 'fw-bold col-4',
+ styleValue: 'col',
+ metadataGroup: {
+ leading: 'dc.contributor.author',
+ elements: [
+ {
+ metadata: 'dc.contributor.author',
+ label: 'Author(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ {
+ metadata: 'oairecerif.author.affiliation',
+ label: 'Affiliation(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ ],
+ },
+ }) as LayoutField;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, ToDatePipe,
+ MetadataRenderComponent,
+ InlineComponent,
+ TextComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(InlineComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.OnPush },
+ }).compileComponents();
+ }));
+
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(InlineComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+ const rowsFound = fixture.debugElement.queryAll(By.css('div.metadata-group-entry'));
+ expect(rowsFound.length).toBe(2);
+
+ let divFound = fixture.debugElement.query(By.css('div.metadata-group-entry:nth-child(1)'));
+
+ let span = divFound.query(By.css('span.metadata-group-entry-value:nth-child(1)'));
+ expect(span.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[0].metadata][0].value);
+ span = divFound.query(By.css('span.metadata-group-entry-value:nth-child(2)'));
+ expect(span.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[1].metadata][0].value);
+
+ divFound = fixture.debugElement.query(By.css('div.metadata-group-entry:nth-child(2)'));
+ span = divFound.query(By.css('span.metadata-group-entry-value:nth-child(1)'));
+ expect(span.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[0].metadata][1].value);
+ span = divFound.query(By.css('span.metadata-group-entry-value:nth-child(2)'));
+ expect(span.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[1].metadata][1].value);
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.ts
new file mode 100644
index 00000000000..154de2ead39
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.ts
@@ -0,0 +1,31 @@
+import {
+ AsyncPipe,
+ NgClass,
+} from '@angular/common';
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+
+import { MetadataRenderComponent } from '../../../row/metadata-container/metadata-render/metadata-render.component';
+import { FieldRenderingType } from '../../field-rendering-type';
+import { metadataBoxFieldRendering } from '../../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadata-group.component';
+
+/**
+ * This component renders the inline metadata group fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.INLINE)
+@Component({
+ selector: 'ds-inline',
+ templateUrl: './inline.component.html',
+ styleUrls: ['./inline.component.scss'],
+ imports: [
+ AsyncPipe,
+ MetadataRenderComponent,
+ NgClass,
+ ],
+})
+export class InlineComponent extends MetadataGroupComponent implements OnInit {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/metadata-group.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/metadata-group.component.ts
new file mode 100644
index 00000000000..49d6dc71531
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/metadata-group.component.ts
@@ -0,0 +1,116 @@
+import {
+ Component,
+ Inject,
+ OnDestroy,
+ OnInit,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { isNotEmpty } from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
+
+import { RenderingTypeStructuredDirective } from '../rendering-type-structured.directive';
+
+
+export interface NestedMetadataGroupEntry {
+ field: LayoutField;
+ value: MetadataValue;
+}
+
+@Component({
+ template: '',
+})
+export abstract class MetadataGroupComponent extends RenderingTypeStructuredDirective implements OnInit, OnDestroy {
+
+ /**
+ * This property is used to hold nested Layout Field inside a metadata group field
+ */
+ metadataGroup: LayoutField[] = [];
+
+ /**
+ * This property is used to hold a list of objects with nested Layout Field
+ * and an index that shows the position of nested field inside metadata group field
+ */
+ componentsToBeRenderedMap: Map = new Map();
+
+ /**
+ * The prefix used for box field label's i18n key
+ */
+ readonly fieldI18nPrefix = 'layout.field.label';
+
+ /**
+ * The prefix used for box field label's
+ */
+ readonly nestedMetadataPrefix = 'NESTED';
+
+ /**
+ * A boolean representing if component is initialized
+ */
+ initialized: BehaviorSubject = new BehaviorSubject(false);
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit() {
+ this.field.metadataGroup.elements.forEach((entry: LayoutField) => {
+ if (this.item.metadata[entry.metadata]) {
+ const styleValue = !entry.styleValue ? this.field.styleValue : (entry.styleValue + this.field.styleValue);
+ this.metadataGroup.push(Object.assign({}, entry, { styleValue: styleValue }) );
+ }
+ });
+ this.metadataValues.forEach((mdv, index) => {
+ this.metadataGroup.forEach(mdg => {
+ const entry = {
+ field: mdg,
+ value: this.getMetadataValue(mdg, index),
+ } as NestedMetadataGroupEntry;
+ if (this.componentsToBeRenderedMap.has(index)) {
+ const newEntries = [...this.componentsToBeRenderedMap.get(index), entry];
+ this.componentsToBeRenderedMap.set(index, newEntries);
+ } else {
+ this.componentsToBeRenderedMap.set(index, [entry]);
+ }
+ });
+ });
+
+ this.initialized.next(true);
+ }
+
+ getMetadataValue(field: LayoutField, index: number): MetadataValue {
+ const metadataList = this.item.findMetadataSortedByPlace(field.metadata);
+ return isNotEmpty(metadataList[index]) ? metadataList[index] : null;
+ }
+
+ /**
+ * Returns the translated label, if exists, otherwiuse returns a fallback value
+ */
+ getLabel(field: LayoutField): string {
+ 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 dynamic 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 {
+ this.componentsToBeRenderedMap = null;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.html
new file mode 100644
index 00000000000..cf6726e6b24
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.html
@@ -0,0 +1,15 @@
+@if ((initialized | async)) {
+ ;
+ const testItem = Object.assign(new Item(), {
+ uuid: 'itemUUID',
+ id: 'itemUUID',
+ metadata: {
+ 'dcterms.spatial': [
+ {
+ value: 'POINT(12.4924 41.8902)',
+ },
+ {
+ value: 'POINT(2.3522 48.8566)',
+ },
+ ],
+ 'dc.coverage.spatial': [
+ {
+ value: 'POINT(-0.1278 51.5074)',
+ },
+ {
+ value: '{westlimit=12.23, southlimit=41.65, eastlimit=12.85, northlimit=42.02}',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'item-selflink' },
+ },
+ });
+
+ const mockField = Object.assign({
+ id: 1,
+ metadata: 'dcterms.spatial',
+ fieldType: 'METADATAGROUP',
+ label: 'Location(s)',
+ rendering: 'OPENSTREETMAP',
+ style: 'container row',
+ styleLabel: 'fw-bold col-4',
+ styleValue: 'col',
+ metadataGroup: {
+ leading: 'dcterms.spatial',
+ elements: [
+ {
+ metadata: 'dcterms.spatial',
+ label: 'Spatial',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ {
+ metadata: 'dc.coverage.spatial',
+ label: 'Coverage',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ ],
+ },
+ }) as LayoutField;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ OpenstreetmapComponent,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(OpenstreetmapComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.OnPush },
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OpenstreetmapComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should extract coordinates from multiple metadata fields', () => {
+ expect(component.points.length).toBe(3);
+ expect(component.points).toContain('POINT(12.4924 41.8902)');
+ expect(component.points).toContain('POINT(2.3522 48.8566)');
+ expect(component.points).toContain('POINT(-0.1278 51.5074)');
+ });
+
+ it('should extract bboxes from multiple metadata fields', () => {
+ expect(component.bboxes.length).toBe(1);
+ expect(component.bboxes).toContain('{westlimit=12.23, southlimit=41.65, eastlimit=12.85, northlimit=42.02}');
+ });
+
+ it('should have clustering enabled by default', () => {
+ expect(component.cluster).toBeTrue();
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.ts
new file mode 100644
index 00000000000..43ed8dd9183
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.ts
@@ -0,0 +1,79 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+
+import { GeospatialMapComponent } from '../../../../../../../../shared/geospatial-map/geospatial-map.component';
+import { FieldRenderingType } from '../../field-rendering-type';
+import { MetadataBoxFieldRendering } from '../../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadata-group.component';
+
+/**
+ * This component renders geospatial metadata group fields on an OpenStreetMap map
+ * using the ds-geospatial-map component.
+ *
+ * It supports multiple metadata fields within the metadata group for both point
+ * coordinates and bounding boxes. All metadata values across all group elements
+ * are collected and passed to the map component.
+ */
+@MetadataBoxFieldRendering(FieldRenderingType.OPENSTREETMAP, true)
+@Component({
+ selector: 'ds-openstreetmap',
+ templateUrl: './openstreetmap.component.html',
+ styleUrls: ['./openstreetmap.component.scss'],
+ imports: [
+ AsyncPipe,
+ GeospatialMapComponent,
+ ],
+})
+export class OpenstreetmapComponent extends MetadataGroupComponent implements OnInit {
+
+ /**
+ * Point coordinates extracted from the metadata group (WKT format, e.g. 'POINT(lng lat)')
+ */
+ points: string[] = [];
+
+ /**
+ * Bounding box values extracted from the metadata group
+ */
+ bboxes: string[] = [];
+
+ /**
+ * Whether to cluster markers on the map
+ */
+ cluster = true;
+
+ override ngOnInit(): void {
+ super.ngOnInit();
+ this.extractGeospatialData();
+ }
+
+ /**
+ * Extract point and bounding box values from all metadata fields in the group.
+ * Point values are WKT POINT strings (e.g. 'POINT(lng lat)').
+ * Bounding box values use a different format (e.g. '{westlimit=..., southlimit=..., ...}').
+ * Simple heuristic: values starting with 'POINT' are treated as coordinates,
+ * everything else is treated as a bounding box.
+ */
+ private extractGeospatialData(): void {
+ this.points = [];
+ this.bboxes = [];
+
+ for (const element of this.field.metadataGroup.elements) {
+ const values = this.item.allMetadataValues(element.metadata);
+ if (values?.length) {
+ for (const value of values) {
+ if (!value) {
+ continue;
+ }
+ if (value.trim().toUpperCase().startsWith('POINT')) {
+ this.points.push(value);
+ } else {
+ this.bboxes.push(value);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.html
new file mode 100644
index 00000000000..c457602689f
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.html
@@ -0,0 +1,27 @@
+@if ((initialized | async)) {
+ ;
+ const testItem = Object.assign(new Item(), {
+ uuid: 'itemUUID',
+ id: 'itemUUID',
+ metadata: {
+ 'dc.contributor.author': [
+ {
+ value: 'Donohue, Tim',
+ },
+ {
+ value: 'Surname, Name',
+ },
+ ],
+ 'oairecerif.author.affiliation': [
+ {
+ value: 'Duraspace',
+ },
+ {
+ value: '4Science',
+ },
+ ],
+ },
+ _links: {
+ self: { href: 'item-selflink' },
+ },
+ });
+
+ const mockField = Object.assign({
+ id: 1,
+ metadata: 'dc.contributor.author',
+ fieldType: 'METADATAGROUP',
+ label: 'Author(s)',
+ rendering: FieldRenderingType.TABLE,
+ style: 'container row',
+ styleLabel: 'fw-bold col-4',
+ styleValue: 'col',
+ metadataGroup: {
+ leading: 'dc.contributor.author',
+ elements: [
+ {
+ metadata: 'dc.contributor.author',
+ label: 'Author(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ {
+ metadata: 'oairecerif.author.affiliation',
+ label: 'Affiliation(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ ],
+ },
+ }) as LayoutField;
+
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), ToDatePipe,
+ MetadataRenderComponent,
+ TableComponent,
+ TextComponent],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ ],
+ }).overrideComponent(TableComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.OnPush },
+ }).compileComponents();
+ }));
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(TableComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', (done) => {
+ expect(component).toBeTruthy();
+ done();
+
+ });
+
+ it('check metadata rendering', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const rowsFound = fixture.debugElement.queryAll(By.css('tr'));
+ expect(rowsFound.length).toBe(3);
+
+ let rowFound = fixture.debugElement.query(By.css('tr:nth-child(1)'));
+ let td = rowFound.query(By.css('td:nth-child(1)'));
+ expect(td.nativeElement.textContent).toContain(mockField.metadataGroup.elements[0].label);
+ td = rowFound.query(By.css('td:nth-child(2)'));
+ expect(td.nativeElement.textContent).toContain(mockField.metadataGroup.elements[1].label);
+
+ rowFound = fixture.debugElement.query(By.css('tr:nth-child(2)'));
+ td = rowFound.query(By.css('td:nth-child(1)'));
+ expect(td.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[0].metadata][0].value);
+ td = rowFound.query(By.css('td:nth-child(2)'));
+ expect(td.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[1].metadata][0].value);
+
+ rowFound = fixture.debugElement.query(By.css('tr:nth-child(3)'));
+ td = rowFound.query(By.css('td:nth-child(1)'));
+ expect(td.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[0].metadata][1].value);
+ td = rowFound.query(By.css('td:nth-child(2)'));
+ expect(td.nativeElement.textContent).toContain(testItem.metadata[mockField.metadataGroup.elements[1].metadata][1].value);
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.ts
new file mode 100644
index 00000000000..eea17b86da4
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.ts
@@ -0,0 +1,24 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { MetadataRenderComponent } from '../../../row/metadata-container/metadata-render/metadata-render.component';
+import { FieldRenderingType } from '../../field-rendering-type';
+import { metadataBoxFieldRendering } from '../../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadata-group.component';
+
+/**
+ * This component renders the table metadata group fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.TABLE)
+@Component({
+ selector: 'ds-table',
+ templateUrl: './table.component.html',
+ styleUrls: ['./table.component.scss'],
+ imports: [
+ AsyncPipe,
+ MetadataRenderComponent,
+ ],
+})
+export class TableComponent extends MetadataGroupComponent {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.html
new file mode 100644
index 00000000000..f4a54f56722
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.html
@@ -0,0 +1,23 @@
+;
+
+ 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',
+ },
+ );
+
+ const mockField: LayoutField = {
+ 'metadata': 'person.identifier.orcid',
+ 'label': 'ORCID',
+ 'rendering': FieldRenderingType.ORCID,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, OrcidComponent, ToDatePipe],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ConfigurationDataService, useValue: configurationDataService },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OrcidComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', fakeAsync(() => {
+ tick();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.txt-value'));
+ expect(spanValueFound.length).toBe(1);
+ expect(spanValueFound[0].nativeElement.textContent).toContain('0000-0001-8918-3592');
+
+ const orcidLinkFound = fixture.debugElement.queryAll(By.css('a'));
+ expect(orcidLinkFound.length).toBe(1);
+ expect(orcidLinkFound[0].nativeElement.href).toBe('https://sandbox.orcid.org/0000-0001-8918-3592');
+
+ const orcidIconFound = fixture.debugElement.queryAll(By.css('.orcid-icon'));
+ expect(orcidIconFound.length).toBe(1);
+ expect(orcidIconFound[0].nativeElement.src).toContain('assets/images/orcid.logo.icon.svg');
+ });
+
+ }));
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+});
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.ts
new file mode 100644
index 00000000000..6ddc1c2e2c0
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.ts
@@ -0,0 +1,71 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { ConfigurationProperty } from '@dspace/core/shared/configuration-property.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { getFirstSucceededRemoteDataPayload } from '@dspace/core/shared/operators';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the text metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.ORCID)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-orcid]',
+ templateUrl: './orcid.component.html',
+ styleUrls: ['./orcid.component.scss'],
+ imports: [
+ AsyncPipe,
+ NgbTooltipModule,
+ TranslateModule,
+ ],
+})
+export class OrcidComponent extends RenderingTypeValueDirective implements OnInit {
+
+ orcidUrl$: Observable;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ private configurationService: ConfigurationDataService,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit() {
+ this.orcidUrl$ = this.configurationService.findByPropertyName('orcid.domain-url').pipe(
+ getFirstSucceededRemoteDataPayload(),
+ map((property: ConfigurationProperty) => property?.values?.length > 0 ? property.values[0] : null),
+ );
+ }
+
+ public hasOrcid(): boolean {
+ return this.item.hasMetadata('person.identifier.orcid');
+ }
+
+ public hasOrcidBadge(): boolean {
+ return this.item.hasMetadata('dspace.orcid.authenticated');
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.html
new file mode 100644
index 00000000000..c421f9ed339
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.html
@@ -0,0 +1,11 @@
+@if (hasData) {
+ ;
+
+ const coordinateValues = [
+ Object.assign(new MetadataValue(), { value: 'POINT(12.4924 41.8902)', place: 0 }),
+ Object.assign(new MetadataValue(), { value: 'POINT(2.3522 48.8566)', place: 1 }),
+ ];
+
+ const bboxValues = [
+ Object.assign(new MetadataValue(), { value: '{westlimit=12.23, southlimit=41.75, eastlimit=12.85, northlimit=42.02}', place: 0 }),
+ ];
+
+ const testItem = Object.assign(new Item(), {
+ type: 'item',
+ metadata: {
+ 'dcterms.spatial': coordinateValues,
+ 'dcterms.spatial.bbox': bboxValues,
+ },
+ uuid: 'test-item-uuid',
+ });
+
+ const mockField = {
+ metadata: 'dcterms.spatial',
+ label: 'Geospatial',
+ rendering: 'OPENSTREETMAP',
+ fieldType: 'METADATAGROUP',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ metadataGroup: {
+ leading: 'dcterms.spatial',
+ elements: [
+ {
+ metadata: 'dcterms.spatial',
+ label: 'Coordinates',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: '',
+ styleValue: '',
+ },
+ {
+ metadata: 'dcterms.spatial.bbox',
+ label: 'Bounding Box',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: '',
+ styleValue: '',
+ },
+ ],
+ },
+ };
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ OsmapComponent,
+ TranslateModule.forRoot(),
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).overrideComponent(OsmapComponent, {
+ remove: {
+ imports: [GeospatialMapComponent],
+ },
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OsmapComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should extract coordinates from the first metadata group element', () => {
+ expect(component.coordinates).toEqual(['POINT(12.4924 41.8902)', 'POINT(2.3522 48.8566)']);
+ });
+
+ it('should extract bounding boxes from the second metadata group element', () => {
+ expect(component.bboxes).toEqual(['{westlimit=12.23, southlimit=41.75, eastlimit=12.85, northlimit=42.02}']);
+ });
+
+ it('should report hasData as true when coordinates are present', () => {
+ expect(component.hasData).toBeTrue();
+ });
+
+ it('should report hasData as false when no geospatial data is present', () => {
+ component.coordinates = [];
+ component.bboxes = [];
+ expect(component.hasData).toBeFalse();
+ });
+
+ describe('when no bounding box element is configured', () => {
+ beforeEach(async () => {
+ const fieldWithoutBbox = {
+ ...mockField,
+ metadataGroup: {
+ leading: 'dcterms.spatial',
+ elements: [
+ {
+ metadata: 'dcterms.spatial',
+ label: 'Coordinates',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: '',
+ styleValue: '',
+ },
+ ],
+ },
+ };
+
+ TestBed.resetTestingModule();
+ await TestBed.configureTestingModule({
+ imports: [
+ OsmapComponent,
+ TranslateModule.forRoot(),
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: fieldWithoutBbox },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).overrideComponent(OsmapComponent, {
+ remove: {
+ imports: [GeospatialMapComponent],
+ },
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OsmapComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should have empty bboxes when only one element is configured', () => {
+ expect(component.bboxes).toEqual([]);
+ });
+
+ it('should still extract coordinates', () => {
+ expect(component.coordinates).toEqual(['POINT(12.4924 41.8902)', 'POINT(2.3522 48.8566)']);
+ });
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.ts
new file mode 100644
index 00000000000..ac9872e977c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.ts
@@ -0,0 +1,86 @@
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { isNotEmpty } from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+
+import { GeospatialMapComponent } from '../../../../../../../shared/geospatial-map/geospatial-map.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { MetadataGroupComponent } from '../metadataGroup/metadata-group.component';
+
+/**
+ * This component renders geospatial metadata fields using an OpenStreetMap view.
+ *
+ * It expects a metadata group configuration where the elements define:
+ * - coordinate metadata fields
+ * - bounding box metadata fields
+ *
+ * The first element in the metadata group is treated as coordinates,
+ * the second (if present) as bounding boxes.
+ */
+@metadataBoxFieldRendering(FieldRenderingType.OSMAP)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-osmap]',
+ templateUrl: './osmap.component.html',
+ styleUrls: ['./osmap.component.scss'],
+ imports: [
+ GeospatialMapComponent,
+ ],
+})
+export class OsmapComponent extends MetadataGroupComponent implements OnInit {
+
+ /**
+ * Coordinate values (WKT Point strings) extracted from the metadata group
+ */
+ coordinates: string[] = [];
+
+ /**
+ * Bounding box values extracted from the metadata group (optional second element)
+ */
+ bboxes: string[] = [];
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ this.extractGeospatialData();
+ }
+
+ /**
+ * Extract coordinates and bounding boxes from the metadata group elements.
+ * The first element is treated as coordinate metadata,
+ * the second (if present) as bounding box metadata.
+ */
+ private extractGeospatialData(): void {
+ const elements = this.field.metadataGroup?.elements || [];
+
+ if (elements.length > 0) {
+ this.coordinates = this.item.allMetadataValues(elements[0].metadata).filter(Boolean);
+ }
+
+ if (elements.length > 1) {
+ this.bboxes = this.item.allMetadataValues(elements[1].metadata).filter(Boolean);
+ }
+ }
+
+ /**
+ * Whether there is any geospatial data to display
+ */
+ get hasData(): boolean {
+ return isNotEmpty(this.coordinates) || isNotEmpty(this.bboxes);
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-structured.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-structured.directive.ts
new file mode 100644
index 00000000000..973a451331c
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-structured.directive.ts
@@ -0,0 +1,34 @@
+import {
+ Directive,
+ Inject,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateService } from '@ngx-translate/core';
+
+import { RenderingTypeDirective } from './rendering-type.directive';
+
+/**
+ * This class defines the basic model to extends for create a new
+ * field render component
+ */
+@Directive()
+export abstract class RenderingTypeStructuredDirective extends RenderingTypeDirective {
+
+ static override structured = true;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(translateService);
+ this.field = fieldProvider;
+ this.item = itemProvider;
+ this.renderingSubType = renderingSubTypeProvider;
+ this.tabName = tabNameProvider;
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-value.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-value.directive.ts
new file mode 100644
index 00000000000..ed0fcfa37a5
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type-value.directive.ts
@@ -0,0 +1,50 @@
+import {
+ Directive,
+ Inject,
+ Input,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateService } from '@ngx-translate/core';
+
+import { RenderingTypeDirective } from './rendering-type.directive';
+
+/**
+ * This class defines the basic model to extends for create a new
+ * field render component
+ */
+@Directive()
+export abstract class RenderingTypeValueDirective extends RenderingTypeDirective {
+
+ /**
+ * Current metadata value to render
+ */
+ @Input() metadataValue: MetadataValue;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(translateService);
+ this.field = fieldProvider;
+ this.item = itemProvider;
+ this.metadataValue = metadataValueProvider;
+ this.renderingSubType = renderingSubTypeProvider;
+ this.tabName = tabNameProvider;
+ }
+
+ /**
+ * Purge all HTML tags, then replace newline character with
+ * @param text + */ + formatText(text: string): string { + const newlineRegex = /\n/g; + return text.replace(/>/g, '>').replace(/'); + } + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts new file mode 100644 index 00000000000..b1212643013 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts @@ -0,0 +1,113 @@ +import { + Directive, + Input, +} from '@angular/core'; +import { LayoutField } from '@dspace/core/layout/models/box.model'; +import { Item } from '@dspace/core/shared/item.model'; +import { MetadataValue } from '@dspace/core/shared/metadata.models'; +import { hasValue } from '@dspace/shared/utils/empty.util'; +import { TranslateService } from '@ngx-translate/core'; + + +/** + * This class defines the basic model to extends for create a new + * field render component + */ +@Directive() +export abstract class RenderingTypeDirective { + + /** + * Whether this rendering type handles all metadata values in a single structured render, + * or renders each metadata value individually. + */ + static structured = false; + + /** + * Current DSpace item + */ + @Input() item: Item; + /** + * Current field + */ + @Input() field: LayoutField; + /** + * The rendering sub-type, if exists + * e.g. for type identifier.doi this property + * contains the sub-type doi + */ + @Input() renderingSubType: string; + + /** + * Returns the value of the metadata to show + */ + @Input() nested: boolean; + + @Input() indexToBeRendered; + + /** + * The tab name + */ + @Input() tabName: string; + + /** + * The prefix used for box field label's i18n key + */ + fieldI18nPrefix = 'layout.field.label.'; + + constructor(protected translateService: TranslateService) { + } + + /** + * Returns all metadata values in the item + */ + get metadataValues(): string[] { + return this.field.metadata ? this.item.allMetadataValues(this.field.metadata) : []; + } + + get metadata(): MetadataValue[] { + return this.field.metadata ? this.item.allMetadata(this.field.metadata) : []; + } + + /** + * Returns true if the field has label, false otherwise + */ + get hasLabel(): boolean { + return hasValue(this.field.label); + } + + /** + * Returns a string representing the label of field if exists + */ + get label(): string { + const fieldLabelI18nKey = this.fieldI18nPrefix + this.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(this.field.label); + } else { + return header; + } + } + + /** + * Returns a string representing the style of field container if exists + */ + get containerStyle(): string { + return this.field.style; + } + + /** + * Returns a string representing the style of field label if exists + */ + get labelStyle(): string { + return this.field.styleLabel; + } + + /** + * Returns a string representing the style of field value if exists + */ + get valueStyle(): string { + return this.field.styleValue || ''; + } +} + diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html new file mode 100644 index 00000000000..1d7c194a0a4 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html @@ -0,0 +1,9 @@ +;
+
+ const metadataValues = [
+ Object.assign(new MetadataValue(), { value: 'HKU', language: null, authority: null, confidence: -1, place: 0 }),
+ Object.assign(new MetadataValue(), { value: 'ASDF', language: null, authority: null, confidence: -1, place: 1 }),
+ ];
+
+ const testItem = Object.assign(new Item(), {
+ type: 'item',
+ metadata: {
+ 'dc.subject': metadataValues,
+ },
+ uuid: 'test-item-uuid',
+ });
+
+ const mockField: LayoutField = {
+ metadata: 'dc.subject',
+ label: 'Subject',
+ rendering: FieldRenderingType.TAG,
+ fieldType: 'METADATA',
+ style: 'test-style',
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ BrowserAnimationsModule,
+ TagComponent,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TagComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have chips', () => {
+ const chips = fixture.debugElement.query(By.css('ds-chips'));
+ expect(chips).toBeTruthy();
+ });
+
+ it('should have the right chip values if it has no indexToBeRendered', () => {
+ const chipLabelsFound = fixture.debugElement.queryAll(By.css('p.chip-label'));
+ expect(chipLabelsFound.length).toBe(2);
+ expect(chipLabelsFound[0].nativeElement.textContent).toContain('HKU');
+ expect(chipLabelsFound[1].nativeElement.textContent).toContain('ASDF');
+ });
+
+ it('should render single chip item if it has indexToBeRendered', () => {
+ component.indexToBeRendered = 1;
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ const chipLabelsFound = fixture.debugElement.queryAll(By.css('p.chip-label'));
+ expect(chipLabelsFound.length).toBe(1);
+ expect(chipLabelsFound[0].nativeElement.textContent).toContain('ASDF');
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.ts
new file mode 100644
index 00000000000..4bd012218bb
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.ts
@@ -0,0 +1,66 @@
+
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { LayoutField } from '../../../../../../../core/layout/models/box.model';
+import { Item } from '../../../../../../../core/shared/item.model';
+import { ChipsComponent } from '../../../../../../../shared/form/chips/chips.component';
+import { Chips } from '../../../../../../../shared/form/chips/models/chips.model';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeStructuredDirective } from '../rendering-type-structured.directive';
+
+/**
+ * This component renders the tag metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.TAG)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-tag]',
+ templateUrl: './tag.component.html',
+ styleUrls: ['./tag.component.scss'],
+ imports: [
+ ChipsComponent,
+ ],
+})
+export class TagComponent extends RenderingTypeStructuredDirective implements OnInit {
+
+ /**
+ * This is the chips component which will be rendered in the template
+ */
+ public chips: Chips;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ /**
+ * Initializes chips only for the rendered index value if indexToBeRendered is set or
+ * it initializes chips for all values.
+ */
+ ngOnInit() {
+ if ( this.indexToBeRendered > 0 ) {
+ this.initChips([this.metadataValues[this.indexToBeRendered]]);
+ } else {
+ this.initChips(this.metadataValues);
+ }
+ }
+
+ /**
+ * Creates the chips component with the required values
+ * @params initChipsValues values to be rendered in chip items
+ */
+ private initChips(initChipsValues: string[]): void {
+ this.chips = new Chips(initChipsValues,'value');
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.html
new file mode 100644
index 00000000000..7d872b86b34
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.html
@@ -0,0 +1,3 @@
+;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+
+ const mockField: LayoutField = {
+ 'metadata': 'dc.title',
+ 'label': 'Title',
+ 'rendering': null,
+ 'fieldType': 'METADATA',
+ 'style': null,
+ 'styleLabel': 'test-style-label',
+ 'styleValue': 'test-style-value',
+ 'labelAsHeading': false,
+ 'valuesInline': true,
+ };
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, TextComponent, ToDatePipe],
+ providers: [
+ { provide: 'fieldProvider', useValue: mockField },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'metadataValueProvider', useValue: metadataValue },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TextComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('check metadata rendering', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('span.text-value'));
+ expect(spanValueFound.length).toBe(1);
+ expect(spanValueFound[0].nativeElement.textContent).toContain(metadataValue.value);
+ done();
+ });
+
+ it('check value style', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
+ expect(spanValueFound.length).toBe(1);
+ done();
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.ts
new file mode 100644
index 00000000000..055f14fd6bc
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { EscapeHtmlPipe } from '../../../../../../../shared/utils/escape-html.pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the text metadata fields
+ */
+@metadataBoxFieldRendering(FieldRenderingType.TEXT)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-text]',
+ templateUrl: './text.component.html',
+ styleUrls: ['./text.component.scss'],
+ imports: [
+ EscapeHtmlPipe,
+ ],
+})
+export class TextComponent extends RenderingTypeValueDirective {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.html
new file mode 100644
index 00000000000..1843d9baedb
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.html
@@ -0,0 +1,8 @@
+@if ((initialized | async)) {
+ ;
+ let de: DebugElement;
+
+ const testItem = Object.assign(new Item(), {
+ bundles: of({}),
+ metadata: {
+ 'dc.identifier.doi': [
+ {
+ value: 'doi:10.1392/dironix',
+ },
+ ],
+ },
+ entityType: 'Person',
+ });
+
+ const mockField = Object.assign({
+ id: 1,
+ label: 'Field Label',
+ metadata: 'dc.identifier.doi',
+ rendering: FieldRenderingType.THUMBNAIL,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: null,
+ metadataValue: null,
+ },
+ });
+
+ const mockField1 = Object.assign({
+ id: 1,
+ label: 'Field Label',
+ metadata: 'dc.identifier.doi',
+ rendering: FieldRenderingType.THUMBNAIL,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'fw-bold col-3',
+ styleValue: null,
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'personal picture',
+ },
+ });
+
+ const mockBitstreamDataService = jasmine.createSpyObj('BitstreamDataService', {
+ findByItem: jasmine.createSpy('findByItem'),
+ });
+
+ const mockAuthorizedService = jasmine.createSpyObj('AuthorizationDataService', {
+ isAuthorized: jasmine.createSpy('isAuthorized'),
+ });
+
+ const mockThumbnailService = jasmine.createSpyObj('ThumbnailService', {
+ getConfig: jasmine.createSpy('getConfig'),
+ });
+
+ const getDefaultTestBedConf = (fieldProvider) => {
+ return {
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ThumbnailRenderingComponent,
+ ],
+ providers: [
+ { provide: 'fieldProvider', useValue: fieldProvider },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: 'renderingSubTypeProvider', useValue: '' },
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+ { provide: AuthorizationDataService, useValue: mockAuthorizedService },
+ { provide: ConfigurationDataService, useValue: {} },
+ { provide: ThumbnailService, useValue: mockThumbnailService },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ };
+ };
+
+ describe('When there is no metadata field to check', () => {
+ beforeEach(waitForAsync(() => {
+ return TestBed.configureTestingModule(getDefaultTestBedConf(mockField))
+ .overrideComponent(ThumbnailRenderingComponent, {
+ remove: {
+ imports: [
+ ThemedThumbnailComponent,
+ ],
+ },
+ });
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ThumbnailRenderingComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockBitstreamDataService.findByItem.and.returnValues(createSuccessfulRemoteDataObject$(createPaginatedList([])));
+ mockThumbnailService.getConfig.and.returnValue(of(createSuccessfulRemoteDataObject(null)));
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('findByItem should have been called', () => {
+ expect(mockBitstreamDataService.findByItem).toHaveBeenCalled();
+ });
+
+ describe('When bitstreams are empty', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('check metadata rendering', fakeAsync(() => {
+ const thumbnail = fixture.debugElement.query(By.css('[data-test="thumbnail"]'));
+ expect(thumbnail).toBeTruthy();
+ }));
+
+ it('should show default thumbnail', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+ });
+
+ describe('When bitstreams are only original', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstreamWithoutThumbnail])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('check metadata rendering', fakeAsync(() => {
+ const thumbnail = fixture.debugElement.query(By.css('[data-test="thumbnail"]'));
+ expect(thumbnail).toBeTruthy();
+ }));
+
+ it('should show default thumbnail', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+ });
+
+ describe('When bitstreams are only thumbnail', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstreamWithThumbnail])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('check metadata rendering', fakeAsync(() => {
+ const thumbnail = fixture.debugElement.query(By.css('[data-test="thumbnail"]'));
+ expect(thumbnail).toBeTruthy();
+ }));
+
+ it('should show thumbnail content image src', () => {
+ expect(component.thumbnail$.value).toEqual(mockThumbnail);
+ });
+
+ });
+
+ });
+
+
+ describe('When there is dc.type metadata field to check', () => {
+ beforeEach(waitForAsync(() => {
+ return TestBed.configureTestingModule(getDefaultTestBedConf(mockField1))
+ .overrideComponent(ThumbnailRenderingComponent, {
+ remove: {
+ imports: [
+ ThemedThumbnailComponent,
+ ],
+ },
+ });
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ThumbnailRenderingComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+ mockBitstreamDataService.findByItem.and.returnValue(of([]));
+ mockThumbnailService.getConfig.and.returnValue(of(createSuccessfulRemoteDataObject(null)));
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('findByItem should have been called', () => {
+ expect(mockBitstreamDataService.findByItem).toHaveBeenCalled();
+ });
+
+ describe('When bitstreams are empty', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('check metadata rendering', () => {
+ const thumbnail = fixture.debugElement.query(By.css('[data-test="thumbnail"]'));
+ expect(thumbnail).toBeTruthy();
+ });
+
+ it('should show default thumbnail', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+ });
+
+ describe('When bitstreams are only original without the right metadata information', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstreamWithoutThumbnail])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('should not show bitstream content image src but the default image', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+
+ });
+
+ describe('When bitstreams are thumbnail of original without the right metadata information', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('should not show thumbnail content image src but the default image', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+ });
+
+ describe('When bitstreams are only original with the right metadata information', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstreamOrignialWithMetadata])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('should not show thumbnail content image src but the default image', (done) => {
+ component.default$.subscribe(image => {
+ expect(image).toBe('assets/images/file-placeholder.svg');
+ done();
+ });
+ });
+
+ });
+
+ describe('When bitstreams thumbnail of original bitsream with the right metadata information', () => {
+
+ beforeEach(() => {
+ const spy = spyOn(component, 'getBitstreamsByItem');
+ spy.and.returnValue(of(createPaginatedList([bitstreamWithThumbnailWithMetadata])));
+ component.ngOnInit();
+ fixture.detectChanges();
+ });
+
+ it('should show thumbnail content image src', () => {
+ expect(component.thumbnail$.value).toEqual(mockThumbnailWithType);
+ });
+
+ });
+
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.ts
new file mode 100644
index 00000000000..717f322ee96
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.ts
@@ -0,0 +1,125 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ DestroyRef,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import {
+ isEmpty,
+ isNotEmpty,
+} from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+import {
+ BehaviorSubject,
+ forkJoin,
+ Observable,
+ of,
+} from 'rxjs';
+import {
+ map,
+ switchMap,
+} from 'rxjs/operators';
+
+import { getDefaultImageUrlByEntityType } from '../../../../../../../shared/image.utils';
+import { ThemedThumbnailComponent } from '../../../../../../../thumbnail/themed-thumbnail.component';
+import { BitstreamRenderingDirective } from '../bitstream-rendering.directive';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+
+@metadataBoxFieldRendering(FieldRenderingType.THUMBNAIL)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector, dspace-angular-ts/themed-component-selectors
+ selector: 'span[ds-thumbnail].float-start',
+ templateUrl: './thumbnail.component.html',
+ styleUrls: ['./thumbnail.component.scss'],
+ imports: [
+ AsyncPipe,
+ ThemedThumbnailComponent,
+ ],
+})
+/**
+ * The component for displaying a thumbnail rendered metadata box
+ */
+export class ThumbnailRenderingComponent extends BitstreamRenderingDirective implements OnInit {
+
+ /**
+ * The bitstream to be rendered
+ */
+ thumbnail$: BehaviorSubject = new BehaviorSubject(null);
+
+ /**
+ * Default image to be shown in the thumbnail
+ */
+ default$: Observable;
+
+ /**
+ * Item rendering initialization state
+ */
+ initialized: BehaviorSubject = new BehaviorSubject(false);
+
+ /**
+ * Maximum size of the thumbnail allowed to be shown
+ */
+ maxSize: number;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected bitstreamDataService: BitstreamDataService,
+ protected translateService: TranslateService,
+ protected destroyRef: DestroyRef,
+ ) {
+ super(fieldProvider, itemProvider, renderingSubTypeProvider, tabNameProvider, bitstreamDataService, translateService);
+ }
+
+ /**
+ * Get the thumbnail information from api for this item
+ */
+ ngOnInit(): void {
+ const eType = this.item.firstMetadataValue('dspace.entity.type');
+ this.default$ = getDefaultImageUrlByEntityType(eType);
+
+ forkJoin([
+ this.default$,
+ this.getBitstreamsByItem(),
+ ]).pipe(
+ map(([_, bitstreamList]: [string, PaginatedList]) => bitstreamList.page),
+ switchMap((filteredBitstreams: Bitstream[]) => {
+ if (filteredBitstreams.length > 0) {
+ if (isEmpty(filteredBitstreams[0].thumbnail)) {
+ return of(null);
+ } else {
+ return filteredBitstreams[0].thumbnail.pipe(
+ getFirstCompletedRemoteData(),
+ map((thumbnailRD) => {
+ if (thumbnailRD.hasSucceeded && isNotEmpty(thumbnailRD.payload)) {
+ return thumbnailRD.payload;
+ } else {
+ return null;
+ }
+ }),
+ );
+ }
+ } else {
+ return of(null);
+ }
+ }),
+ takeUntilDestroyed(this.destroyRef),
+ ).subscribe((thumbnail: Bitstream) => {
+ if (isNotEmpty(thumbnail)) {
+ this.thumbnail$.next(thumbnail);
+ }
+ this.initialized.next(true);
+ });
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.service.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.service.ts
new file mode 100644
index 00000000000..3a3f20faf48
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { ConfigurationProperty } from '@dspace/core/shared/configuration-property.model';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import { Observable } from 'rxjs';
+
+
+/**
+ * Service to get configuration for thumbnail rendering type
+ */
+@Injectable({ providedIn: 'root' })
+export class ThumbnailService {
+
+ constructor(
+ private configService: ConfigurationDataService,
+ ) { }
+
+ /**
+ * Call this method once when Angular initializes on the client side.
+ * It requests Thumbnail Maximum Size from the rest backend
+ * (property: dspace.layout.thumbnail.maxsize)
+ */
+ getConfig(): Observable> {
+ return this.configService.findByPropertyName('dynamic.layout.thumbnail.maxsize').pipe(
+ getFirstCompletedRemoteData(),
+ );
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.html
new file mode 100644
index 00000000000..52cc9aeadef
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.html
@@ -0,0 +1,11 @@
+;
+
+ let vocabularyService: VocabularyService;
+ const authService = new AuthServiceStub();
+
+ const allMetadata = (key: string) => {
+ switch (key) {
+ case METADATA_KEY_1:
+ return [
+ { value: 'it', authority: null },
+ { value: 'en', authority: null },
+ ];
+ case METADATA_KEY_2:
+ return [
+ { value: undefined, authority: VOCABULARY_NAME_2 + ':asd' },
+ { value: undefined, authority: VOCABULARY_NAME_2 + ':fgh' },
+ ];
+ default:
+ return [];
+ }
+ };
+
+ const testItem1 = Object.assign(new Item(), {
+ allMetadata: () => allMetadata(METADATA_KEY_1),
+ });
+
+ const testItem2 = Object.assign(new Item(), {
+ allMetadata: () => allMetadata(METADATA_KEY_2),
+ });
+
+ const testField1: LayoutField = {
+ metadata: METADATA_KEY_1,
+ label: 'Knows Language',
+ rendering: 'valuepair.' + VOCABULARY_NAME_1,
+ fieldType: 'METADATA',
+ metadataGroup: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ };
+
+ const testField2 = {
+ metadata: METADATA_KEY_2,
+ label: 'Type',
+ rendering: 'valuepair.' + VOCABULARY_NAME_2,
+ fieldType: 'METADATA',
+ metadataGroup: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ };
+
+ const vocabularyEntriesMock = (vocabularyName, value) => {
+ switch (vocabularyName + '/' + value) {
+ case 'common_iso_languages/it':
+ return of('Italian');
+ case 'common_iso_languages/en':
+ return of('English');
+ case 'types/types:asd':
+ return of('Value');
+ default:
+ return EMPTY;
+ }
+ };
+
+ const vocabularyServiceSpy =
+ jasmine.createSpyObj(
+ 'vocabularyService',
+ { getPublicVocabularyEntryByValue: EMPTY, getPublicVocabularyEntryByID: EMPTY },
+ );
+
+ describe('when the vocabulary has no authority', () => {
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ValuepairComponent, ToDatePipe,
+ ],
+ providers: [
+ { provide: VocabularyService, useValue: vocabularyServiceSpy },
+ { provide: AuthService, useValue: authService },
+ { provide: 'fieldProvider', useValue: testField1 },
+ { provide: 'itemProvider', useValue: testItem1 },
+ { provide: 'metadataValueProvider', useValue: { value: 'it', authority: null } },
+ { provide: 'renderingSubTypeProvider', useValue: VOCABULARY_NAME_1 },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).compileComponents();
+
+ vocabularyService = TestBed.inject(VocabularyService);
+
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ValuepairComponent);
+ component = fixture.componentInstance;
+ vocabularyServiceSpy.getPublicVocabularyEntryByValue.and.callFake(vocabularyEntriesMock);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+
+ it('should ...', () => {
+ expect(vocabularyService.getPublicVocabularyEntryByValue).toHaveBeenCalledWith(VOCABULARY_NAME_1, 'it');
+ });
+
+
+ });
+
+
+ describe('when the vocabulary has an authority', () => {
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ValuepairComponent, ToDatePipe,
+ ],
+ providers: [
+ { provide: VocabularyService, useValue: vocabularyServiceSpy },
+ { provide: AuthService, useValue: authService },
+ { provide: 'fieldProvider', useValue: testField2 },
+ { provide: 'itemProvider', useValue: testItem2 },
+ { provide: 'metadataValueProvider', useValue: { value: undefined, authority: VOCABULARY_NAME_2 + ':asd' } },
+ { provide: 'renderingSubTypeProvider', useValue: VOCABULARY_NAME_2 },
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).compileComponents();
+
+ vocabularyService = TestBed.inject(VocabularyService);
+
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ValuepairComponent);
+ component = fixture.componentInstance;
+ vocabularyServiceSpy.getPublicVocabularyEntryByID.and.callFake(vocabularyEntriesMock);
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+
+ it('should ...', () => {
+ expect(vocabularyService.getPublicVocabularyEntryByID).toHaveBeenCalledWith(VOCABULARY_NAME_2, `${VOCABULARY_NAME_2}:asd`);
+ });
+
+
+ });
+
+ describe('when the metadata value is a link', () => {
+ const linkValue = 'https://example.com';
+ const testFieldLink: LayoutField = {
+ metadata: 'dc.identifier',
+ label: 'Identifier',
+ rendering: 'valuepair.' + VOCABULARY_NAME_2,
+ fieldType: 'METADATA',
+ metadataGroup: null,
+ labelAsHeading: false,
+ valuesInline: false,
+ };
+
+ const testItemLink = Object.assign(new Item(), {
+ allMetadata: () => [{ value: linkValue, authority: null }],
+ });
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ValuepairComponent,
+ ToDatePipe,
+ ],
+ providers: [
+ { provide: VocabularyService, useValue: vocabularyServiceSpy },
+ { provide: AuthService, useValue: authService },
+ { provide: 'fieldProvider', useValue: testFieldLink },
+ { provide: 'itemProvider', useValue: testItemLink },
+ { provide: 'metadataValueProvider', useValue: { value: linkValue, authority: null } },
+ { provide: 'renderingSubTypeProvider', useValue: '' }, // leave empty
+ { provide: 'tabNameProvider', useValue: '' },
+ ],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ValuepairComponent);
+ component = fixture.componentInstance;
+ component.metadataValue = Object.assign(new MetadataValue(), {
+ value: linkValue,
+ });
+ component.value$.next(linkValue);
+
+ fixture.detectChanges();
+ });
+
+ it('should detect that the value is a link', () => {
+ expect(component.isMetadataLink).toBeTrue();
+ });
+
+ it('should render the value as an tag', () => {
+ const compiled = fixture.nativeElement as HTMLElement;
+ const linkEl = compiled.querySelector('a.text-value') as HTMLAnchorElement;
+
+ expect(linkEl).toBeTruthy();
+ expect(linkEl.href).toBe(linkValue + '/');
+ expect(linkEl.textContent.trim()).toBe(linkValue);
+ });
+ });
+
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.ts
new file mode 100644
index 00000000000..5fe5cf943ea
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.ts
@@ -0,0 +1,95 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import {
+ getFirstCompletedRemoteData,
+ getPaginatedListPayload,
+ getRemoteDataPayload,
+} from '@dspace/core/shared/operators';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
+import {
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the valuepair (value + display) metadata fields.
+ */
+@metadataBoxFieldRendering(FieldRenderingType.VALUEPAIR)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-valuepair]',
+ templateUrl: './valuepair.component.html',
+ styleUrls: ['./valuepair.component.scss'],
+ imports: [
+ AsyncPipe,
+ ],
+})
+export class ValuepairComponent extends RenderingTypeValueDirective implements OnInit {
+
+ /**
+ * list of values
+ */
+ value$: BehaviorSubject = new BehaviorSubject(null);
+
+ /**
+ * Whether the value is a link
+ */
+
+ isMetadataLink: boolean;
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ protected vocabularyService: VocabularyService,
+ protected authService: AuthService,
+ ) {
+ super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit(): void {
+
+ const vocabularyName = this.renderingSubType;
+ const authority = this.metadataValue.authority ? this.metadataValue.authority.split(':') : undefined;
+ const isControlledVocabulary = authority?.length > 1 && authority[0] === vocabularyName;
+
+ const vocabularyEntry$ = isControlledVocabulary ?
+ this.vocabularyService.getPublicVocabularyEntryByID(vocabularyName, this.metadataValue.authority) :
+ this.vocabularyService.getPublicVocabularyEntryByValue(vocabularyName, this.metadataValue.value);
+
+ vocabularyEntry$.pipe(
+ getFirstCompletedRemoteData(),
+ getRemoteDataPayload(),
+ getPaginatedListPayload(),
+ map((res) => res?.length > 0 ? res[0] : null),
+ map((res) => res?.display ?? this.metadataValue.value),
+ take(1),
+ ).subscribe(value => this.value$.next(value));
+
+ this.isMetadataLink = this.isLink(this.metadataValue.value);
+ }
+
+
+ isLink(input: string): boolean {
+ // check only values with protocol, if missing fix value in value-pair list
+ return input && (input.startsWith('http://') || input.startsWith('https://'));
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.html
new file mode 100644
index 00000000000..d58ca9fc908
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.html
@@ -0,0 +1,31 @@
+@if (metadataFieldRenderOptions) {
+ ;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ 'dc.contributor.author': [
+ {
+ value: 'Donohue, Tim',
+ },
+ {
+ value: 'Surname, Name',
+ },
+ ],
+ 'oairecerif.author.affiliation': [
+ {
+ value: 'Duraspace',
+ },
+ {
+ value: '4Science',
+ },
+ ],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const fieldMock = {
+ metadata: 'dc.title',
+ label: 'Preferred name',
+ rendering: null,
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ };
+
+ const fieldMockWithoutLabel = {
+ metadata: 'dc.title',
+ label: null,
+ rendering: null,
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ };
+
+ const fieldMockWithoutMetadata = {
+ metadata: 'dc.identifier',
+ label: 'Preferred name',
+ rendering: null,
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ };
+
+ const fieldStructuredMock = Object.assign({
+ id: 1,
+ metadata: 'dc.contributor.author',
+ fieldType: 'METADATAGROUP',
+ label: 'Author(s)',
+ rendering: FieldRenderingType.TABLE,
+ style: 'container row',
+ styleLabel: 'test-group-style-label',
+ styleValue: 'test-group-style-value',
+ metadataGroup: {
+ leading: 'dc.contributor.author',
+ elements: [
+ {
+ metadata: 'dc.contributor.author',
+ label: 'Author(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ },
+ {
+ metadata: 'oairecerif.author.affiliation',
+ label: 'Affiliation(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ ],
+ },
+ }) as LayoutField;
+
+ const bitstreamField = Object.assign({
+ id: 1,
+ label: 'Field Label',
+ metadata: 'dc.identifier.doi',
+ rendering: FieldRenderingType.ATTACHMENT,
+ fieldType: 'BITSTREAM',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ bitstream: {
+ bundle: 'ORIGINAL',
+ metadataField: 'dc.type',
+ metadataValue: 'thumbnail',
+ },
+ });
+
+ const bitstream1 = Object.assign(new Bitstream(), {
+ id: 'bitstream1',
+ uuid: 'bitstream1',
+ });
+
+ const mockBitstreamDataService = jasmine.createSpyObj('BitstreamDataService', {
+ findShowableBitstreamsByItem: jasmine.createSpy('findShowableBitstreamsByItem'),
+ });
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ MetadataContainerComponent,
+ TextComponent,
+ ],
+ providers: [
+ { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ })
+ .overrideComponent(MetadataContainerComponent, { remove: { imports: [MetadataRenderComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MetadataContainerComponent);
+ component = fixture.componentInstance;
+ component.item = testItem;
+ component.box = boxMetadata;
+
+ mockBitstreamDataService.findShowableBitstreamsByItem.and.returnValue(
+ createSuccessfulRemoteDataObject$(createPaginatedList([])),
+ );
+ });
+
+ describe('When field rendering type is not structured', () => {
+
+ beforeEach(async () => {
+ component.field = fieldMock;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render metadata properly', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-label'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('When field rendering type is structured', () => {
+
+ beforeEach(async () => {
+ component.field = fieldStructuredMock;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render metadata properly', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-group-style-label'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('When field has no label', () => {
+
+ beforeEach(async () => {
+ component.field = fieldMockWithoutLabel;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render metadata properly', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-label'));
+ expect(spanValueFound.length).toBe(0);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('When item has not the field metadata', () => {
+
+ beforeEach(() => {
+ component.field = fieldMockWithoutMetadata;
+ fixture.detectChanges();
+ });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render metadata properly', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-label'));
+ expect(spanValueFound.length).toBe(0);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(0);
+ done();
+ });
+ });
+
+ describe('When field type is bitstream', () => {
+ beforeEach(() => {
+ component.field = bitstreamField;
+ });
+
+ describe('and item has no bitstream', () => {
+
+ beforeEach(() => {
+ fixture.detectChanges();
+ });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should not render metadata ', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-label'));
+ expect(spanValueFound.length).toBe(0);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(0);
+ done();
+ });
+ });
+
+ describe('and item has bitstream', () => {
+
+ beforeEach(async () => {
+ mockBitstreamDataService.findShowableBitstreamsByItem.and.returnValue(createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1])));
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render metadata ', (done) => {
+ const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-label'));
+ expect(spanValueFound.length).toBe(1);
+
+ const valueFound = fixture.debugElement.queryAll(By.css('ds-metadata-render'));
+ expect(valueFound.length).toBe(1);
+ done();
+ });
+ });
+
+ describe('and bitstream has metadata', () => {
+ beforeEach(() => {
+ component.field.bitstream.metadataField = 'metadataFieldTest';
+ component.field.bitstream.metadataValue = 'metadataValueTest';
+ fixture.detectChanges();
+ });
+
+ it('should use the metadata in filters', () => {
+ expect(mockBitstreamDataService.findShowableBitstreamsByItem).toHaveBeenCalledWith(
+ testItem.uuid,
+ bitstreamField.bitstream.bundle,
+ [ { metadataName: 'metadataFieldTest', metadataValue: 'metadataValueTest' } ],
+ {},
+ false,
+ );
+ });
+ });
+
+ describe('and bitstream doesnt have metadataValue', () => {
+ beforeEach(() => {
+ component.field.bitstream.metadataValue = undefined;
+ fixture.detectChanges();
+ });
+
+ it('should use empty array in filters', () => {
+ expect(mockBitstreamDataService.findShowableBitstreamsByItem).toHaveBeenCalledWith(
+ testItem.uuid,
+ bitstreamField.bitstream.bundle,
+ [], // <--- empty array of filters,
+ {},
+ false,
+ );
+ });
+ });
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.ts
new file mode 100644
index 00000000000..4e25e8ed6b4
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.ts
@@ -0,0 +1,203 @@
+
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ inject,
+ Input,
+ OnInit,
+} from '@angular/core';
+import {
+ BitstreamDataService,
+ MetadataFilter,
+} from '@dspace/core/data/bitstream-data.service';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import {
+ DynamicLayoutBox,
+ LayoutField,
+ LayoutFieldType,
+} from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { GenericConstructor } from '@dspace/core/shared/generic-constructor';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators';
+import {
+ hasValue,
+ isNotEmpty,
+} from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import {
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { environment } from '../../../../../../../../environments/environment';
+import { FieldRenderingType } from '../../rendering-types/field-rendering-type';
+import {
+ computeRenderingFn,
+ getMetadataBoxFieldRenderOptionsFn,
+} from '../../rendering-types/metadata-box.decorator';
+import { RenderingTypeDirective } from '../../rendering-types/rendering-type.directive';
+import { MetadataRenderComponent } from './metadata-render/metadata-render.component';
+
+@Component({
+ selector: 'ds-metadata-container',
+ templateUrl: './metadata-container.component.html',
+ styleUrls: ['./metadata-container.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ MetadataRenderComponent,
+ ],
+})
+export class MetadataContainerComponent implements OnInit {
+ /**
+ * Current DSpace Item
+ */
+ @Input() item: Item;
+ /**
+ * Current layout box
+ */
+ @Input() box: DynamicLayoutBox;
+ /**
+ * The metadata field to render
+ */
+ @Input() field: LayoutField;
+ /**
+ * The tab name
+ */
+ @Input() tabName: string;
+
+ /**
+ * The prefix used for box field label's i18n key
+ */
+ readonly fieldI18nPrefix = 'layout.field.label';
+
+ /**
+ * A boolean representing if metadata rendering type is structured or not
+ */
+ isStructured = false;
+
+ /**
+ * The rendering component to render
+ */
+ metadataFieldRenderOptions: GenericConstructor;
+
+ protected readonly bitstreamDataService = inject(BitstreamDataService);
+ protected readonly translateService = inject(TranslateService);
+ protected readonly cd = inject(ChangeDetectorRef);
+
+ /**
+ * Returns all metadata values in the item
+ */
+ get metadataValues(): MetadataValue[] {
+ return this.field.metadata ? this.item.allMetadata(this.field.metadata) : [];
+ }
+
+ /**
+ * Returns true if the field has label, false otherwise
+ */
+ get hasLabel(): boolean {
+ return hasValue(this.field.label);
+ }
+
+ /**
+ * Returns a string representing the label of field if exists
+ */
+ getLabel(): string {
+ if (this.field.fieldType === LayoutFieldType.BITSTREAM.toString()) {
+ 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 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 dynamic 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
+ */
+ get containerStyle(): string {
+ return this.field.style;
+ }
+
+ /**
+ * Returns a string representing the style of field label if exists, default value otherwise
+ */
+ get labelStyle(): string {
+ const defaultCol = environment.layout.metadataBox.defaultMetadataLabelColStyle;
+ return (isNotEmpty(this.field.styleLabel) && this.field.styleLabel.includes('col'))
+ ? this.field.styleLabel : `${defaultCol} ${this.field.styleLabel}`;
+ }
+
+ ngOnInit() {
+ const rendering = computeRenderingFn(this.field?.rendering);
+ if (this.field.fieldType === LayoutFieldType.BITSTREAM.toString()
+ && (rendering.toLocaleLowerCase() === FieldRenderingType.ATTACHMENT.toLocaleLowerCase()
+ || rendering.toLocaleLowerCase() === FieldRenderingType.ADVANCEDATTACHMENT.toLocaleLowerCase())) {
+ this.hasBitstream().pipe(take(1)).subscribe((hasBitstream: boolean) => {
+ if (hasBitstream) {
+ this.initRenderOptions(rendering);
+ }
+ });
+ } else if (this.hasFieldMetadataComponent(this.field)) {
+ this.initRenderOptions(rendering);
+ }
+ }
+
+ initRenderOptions(renderingType: string | FieldRenderingType): void {
+ getMetadataBoxFieldRenderOptionsFn(renderingType).then((component: GenericConstructor) => {
+ this.metadataFieldRenderOptions = component;
+ this.isStructured = (component as any)?.structured ?? false;
+ this.cd.detectChanges();
+ });
+ }
+
+ hasBitstream(): Observable {
+ const filters: MetadataFilter[] = [];
+ if (isNotEmpty(this.field.bitstream.metadataValue)) {
+ filters.push({
+ metadataName: this.field.bitstream.metadataField,
+ metadataValue: this.field.bitstream.metadataValue,
+ });
+ }
+ return this.bitstreamDataService.findShowableBitstreamsByItem(this.item.uuid, this.field.bitstream.bundle, filters, {}, false)
+ .pipe(
+ getFirstCompletedRemoteData(),
+ map((response: RemoteData>) => {
+ return response.hasSucceeded && response.payload.page.length > 0;
+ }),
+ );
+ }
+
+ hasFieldMetadataComponent(field: LayoutField) {
+ // if it is metadata-group and none of the nested metadata has values then don't generate the component
+ let existOneMetadataWithValue = false;
+ if (field.fieldType === LayoutFieldType.METADATAGROUP.toString()) {
+ field.metadataGroup.elements.forEach(el => {
+ if (this.item.metadata[el.metadata]) {
+ existOneMetadataWithValue = true;
+ }
+ });
+ }
+ return (this.field.fieldType === LayoutFieldType.BITSTREAM.toString()) ||
+ (field.fieldType === LayoutFieldType.METADATAGROUP.toString() && existOneMetadataWithValue) ||
+ (field.fieldType === LayoutFieldType.METADATA.toString() && this.item.firstMetadataValue(field.metadata));
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.spec.ts
new file mode 100644
index 00000000000..6bca70ec7e7
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.spec.ts
@@ -0,0 +1,200 @@
+import {
+ ChangeDetectionStrategy,
+ Injector,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { PLACEHOLDER_PARENT_METADATA } from '@dspace/core/shared/form/ds-dynamic-form-constants';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { boxMetadata } from '@dspace/core/testing/box.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { ToDatePipe } from '../../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { getMockThemeService } from '../../../../../../../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../../../../../../shared/theme-support/theme.service';
+import { FieldRenderingType } from '../../../rendering-types/field-rendering-type';
+import { TableComponent } from '../../../rendering-types/metadataGroup/table/table.component';
+import { TextComponent } from '../../../rendering-types/text/text.component';
+import { MetadataRenderComponent } from './metadata-render.component';
+
+describe('MetadataRenderComponent', () => {
+ let component: MetadataRenderComponent;
+ let fixture: ComponentFixture;
+
+ const metadataValue = Object.assign(new MetadataValue(), {
+ 'value': 'test item title',
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const metadataValueWithPlaceholder = Object.assign(new MetadataValue(), {
+ 'value': PLACEHOLDER_PARENT_METADATA,
+ 'language': null,
+ 'authority': null,
+ 'confidence': -1,
+ 'place': 0,
+ });
+
+ const normalizedMetadataValue = Object.assign(new MetadataValue(), metadataValueWithPlaceholder,{
+ 'value': '',
+ });
+
+ const testItem = Object.assign(new Item(),
+ {
+ type: 'item',
+ metadata: {
+ 'dc.title': [metadataValue],
+ 'dc.contributor.author': [
+ {
+ value: 'Donohue, Tim',
+ },
+ {
+ value: 'Surname, Name',
+ },
+ ],
+ 'oairecerif.author.affiliation': [
+ {
+ value: 'Duraspace',
+ },
+ {
+ value: '4Science',
+ },
+ ],
+ },
+ uuid: 'test-item-uuid',
+ },
+ );
+
+ const fieldMock = {
+ metadata: 'dc.title',
+ label: 'Preferred name',
+ rendering: null,
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ labelAsHeading: false,
+ valuesInline: true,
+ };
+
+ const fieldStructuredMock = Object.assign({
+ id: 1,
+ metadata: 'dc.contributor.author',
+ fieldType: 'METADATAGROUP',
+ label: 'Author(s)',
+ rendering: FieldRenderingType.TABLE,
+ style: 'container row',
+ styleLabel: 'test-group-style-label',
+ styleValue: 'test-group-style-value',
+ metadataGroup: {
+ leading: 'dc.contributor.author',
+ elements: [
+ {
+ metadata: 'dc.contributor.author',
+ label: 'Author(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'test-style-label',
+ styleValue: 'test-style-value',
+ },
+ {
+ metadata: 'oairecerif.author.affiliation',
+ label: 'Affiliation(s)',
+ rendering: 'TEXT',
+ fieldType: 'METADATA',
+ style: null,
+ styleLabel: 'fw-bold col-0',
+ styleValue: 'col',
+ },
+ ],
+ },
+ }) as LayoutField;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ ToDatePipe,
+ MetadataRenderComponent,
+ TableComponent,
+ TextComponent,
+ ],
+ providers: [
+ Injector,
+ { provide: 'tabNameProvider', useValue: '' },
+ { provide: ThemeService, useValue: getMockThemeService() },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(TableComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.OnPush },
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MetadataRenderComponent);
+ component = fixture.componentInstance;
+ component.item = testItem;
+ component.box = boxMetadata;
+
+ });
+
+ describe('When field rendering type is not structured', () => {
+ beforeEach(() => {
+ component.field = fieldMock;
+ });
+
+ describe('When field rendering type is not structured', () => {
+ beforeEach(() => {
+ component.metadataValue = metadataValue;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+ });
+
+ describe('and metadata value has placeholder', () => {
+ beforeEach(async () => {
+ component.metadataValue = metadataValueWithPlaceholder;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should normalize metadata value', () => {
+
+ expect(component.metadataValue).toEqual(normalizedMetadataValue);
+ });
+ });
+
+ });
+
+ describe('When field rendering type is structured', () => {
+ beforeEach(() => {
+ component.field = fieldStructuredMock;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.ts
new file mode 100644
index 00000000000..b95f37412f6
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-render/metadata-render.component.ts
@@ -0,0 +1,120 @@
+import {
+ Component,
+ inject,
+ Injector,
+ Input,
+} from '@angular/core';
+import {
+ DynamicLayoutBox,
+ LayoutField,
+} from '@dspace/core/layout/models/box.model';
+import { PLACEHOLDER_PARENT_METADATA } from '@dspace/core/shared/form/ds-dynamic-form-constants';
+import { GenericConstructor } from '@dspace/core/shared/generic-constructor';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { isNotEmpty } from '@dspace/shared/utils/empty.util';
+
+import { AbstractComponentLoaderComponent } from '../../../../../../../../shared/abstract-component-loader/abstract-component-loader.component';
+import { DynamicComponentLoaderDirective } from '../../../../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { ThemeService } from '../../../../../../../../shared/theme-support/theme.service';
+import {
+ computeRenderingFn,
+ getMetadataBoxFieldRenderOptionsFn,
+} from '../../../rendering-types/metadata-box.decorator';
+import { RenderingTypeDirective } from '../../../rendering-types/rendering-type.directive';
+
+@Component({
+ selector: 'ds-metadata-render',
+ templateUrl: '../../../../../../../../shared/abstract-component-loader/abstract-component-loader.component.html',
+ imports: [
+ DynamicComponentLoaderDirective,
+ ],
+})
+export class MetadataRenderComponent extends AbstractComponentLoaderComponent {
+
+ /**
+ * Current DSpace Item
+ */
+ @Input() item: Item;
+ /**
+ * Current layout box
+ */
+ @Input() box: DynamicLayoutBox;
+ /**
+ * The metadata field to render
+ */
+ @Input() field: LayoutField;
+ /**
+ * The metadata value
+ */
+ @Input() metadataValue: MetadataValue;
+
+ /**
+ * The rendering subtype, if exists
+ * e.g. for type identifier.doi this property
+ * contains the subtype doi
+ */
+ renderingSubType: string;
+
+ private readonly parentInjector: Injector = inject(Injector);
+
+ /**
+ * The @Input() names used by {@link getComponent} to determine which component to render.
+ * A change to {@link field} must trigger recreation of the dynamic component.
+ */
+ protected override inputNamesDependentForComponent: (keyof this & string)[] = [
+ 'field',
+ ];
+
+ constructor(
+ protected themeService: ThemeService,
+ ) {
+ super(themeService);
+ }
+
+ /**
+ * Fetch the component depending on the field's rendering type
+ */
+ public getComponent(): Promise> {
+ this.renderingSubType = computeRenderingFn(this.field.rendering, true);
+ const rendering = computeRenderingFn(this.field?.rendering);
+ return getMetadataBoxFieldRenderOptionsFn(rendering);
+ }
+
+ /**
+ * Generate Component Injector object
+ */
+ public override getComponentInjector() {
+ const providers = [
+ { provide: 'fieldProvider', useValue: this.field, deps: [] },
+ { provide: 'itemProvider', useValue: this.item, deps: [] },
+ { provide: 'renderingSubTypeProvider', useValue: this.renderingSubType, deps: [] },
+ ];
+ if (isNotEmpty(this.metadataValue)) {
+ this.metadataValue = this.normalizeMetadataValue(this.metadataValue);
+ providers.push({ provide: 'metadataValueProvider', useValue: (this.metadataValue as any), deps: [] });
+ }
+
+ return Injector.create({
+ providers: providers,
+ parent: this.parentInjector,
+ });
+ }
+
+ /**
+ * Normalize value to display.
+ * In case the value contains a PLACEHOLDER returns it as blank
+ * @param metadataValue
+ */
+ private normalizeMetadataValue(metadataValue: MetadataValue): MetadataValue {
+ const value = metadataValue.value;
+ if (isNotEmpty(value) && value.includes(PLACEHOLDER_PARENT_METADATA)) {
+ return Object.assign(new MetadataValue(), metadataValue, {
+ value: '',
+ });
+ } else {
+ return metadataValue;
+ }
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.html
new file mode 100644
index 00000000000..c410b5ae673
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.html
@@ -0,0 +1,10 @@
+@for (cell of row.cells; track cell) {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.spec.ts
new file mode 100644
index 00000000000..9e8f9a72e20
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.spec.ts
@@ -0,0 +1,67 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Item } from '@dspace/core/shared/item.model';
+import { metadataBoxConfigurationMock } from '@dspace/core/testing/box-configurations.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { TextComponent } from '../rendering-types/text/text.component';
+import { MetadataContainerComponent } from './metadata-container/metadata-container.component';
+import { RowComponent } from './row.component';
+
+class TestItem {
+ firstMetadataValue(key: string): string {
+ return 'Item';
+ }
+}
+
+describe('RowComponent', () => {
+ let component: RowComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), RowComponent,
+ TextComponent],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(RowComponent, { remove: { imports: [MetadataContainerComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RowComponent);
+ component = fixture.componentInstance;
+ component.item = new TestItem() as Item;
+ component.row = metadataBoxConfigurationMock.rows[0];
+ fixture.detectChanges();
+ });
+
+
+ it('should render a div for each cell', () => {
+ const divValueFound = fixture.debugElement.queryAll(By.css('.metadata-cell'));
+ expect(divValueFound.length).toBe(2);
+ });
+
+ it('should render a metdata container for each field', () => {
+ let divValueFound = fixture.debugElement.query(By.css('.metadata-cell:nth-child(1)'));
+ let metadataFound = divValueFound.queryAll(By.css('ds-metadata-container'));
+ expect(metadataFound.length).toBe(1);
+
+ divValueFound = fixture.debugElement.query(By.css('.metadata-cell:nth-child(2)'));
+ metadataFound = divValueFound.queryAll(By.css('ds-metadata-container'));
+ expect(metadataFound.length).toBe(5);
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.ts
new file mode 100644
index 00000000000..9b87f4ef532
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/row.component.ts
@@ -0,0 +1,51 @@
+
+import {
+ Component,
+ Input,
+} from '@angular/core';
+
+import {
+ DynamicLayoutBox,
+ LayoutField,
+ MetadataBoxCell,
+ MetadataBoxRow,
+} from '../../../../../../core/layout/models/box.model';
+import { Item } from '../../../../../../core/shared/item.model';
+import { MetadataContainerComponent } from './metadata-container/metadata-container.component';
+
+/**
+ * This component renders the rows of metadata boxes
+ */
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: '[ds-row]',
+ templateUrl: './row.component.html',
+ styleUrls: ['./row.component.scss'],
+ imports: [
+ MetadataContainerComponent,
+ ],
+})
+export class RowComponent {
+
+ /**
+ * Current DSpace Item
+ */
+ @Input() item: Item;
+ /**
+ * Current layout box
+ */
+ @Input() box: DynamicLayoutBox;
+ /**
+ * Current row configuration
+ */
+ @Input() row: MetadataBoxRow;
+
+ trackUpdate(index, field: LayoutField) {
+ return field && field.metadata;
+ }
+
+ trackCellUpdate(index, cell: MetadataBoxCell) {
+ return cell && cell.fields;
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.html
new file mode 100644
index 00000000000..4774e65875a
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.html
@@ -0,0 +1,11 @@
+@if (configuration) {
+
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.scss
new file mode 100644
index 00000000000..2af26e9d862
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.scss
@@ -0,0 +1,7 @@
+:host{
+ display:flex;
+ // flex:1;
+}
+ngb-accordion{
+ flex-grow:1;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.spec.ts
new file mode 100644
index 00000000000..74f0cb0ac8d
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.spec.ts
@@ -0,0 +1,180 @@
+import { CommonModule } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ fakeAsync,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { EPerson } from '@dspace/core/eperson/models/eperson.model';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ EPersonMock,
+ EPersonMock2,
+} from '@dspace/core/testing/eperson.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { cold } from 'jasmine-marbles';
+import { of } from 'rxjs';
+
+import { MetadataValue } from '../../../../../core/shared/metadata.models';
+import { ThemedConfigurationSearchPageComponent } from '../../../../../search-page/themed-configuration-search-page.component';
+import { DynamicLayoutRelationBoxComponent } from './dynamic-layout-relation-box.component';
+
+describe('DynamicLayoutRelationBoxComponent', () => {
+ let component: DynamicLayoutRelationBoxComponent;
+ let fixture: ComponentFixture;
+
+ const testItem = Object.assign(new Item(), {
+ id: '1234-65487-12354-1235',
+ bundles: of({}),
+ metadata: {},
+ });
+
+ const testBox = Object.assign(new DynamicLayoutBox(), {
+ id: '1',
+ collapsed: false,
+ header: 'DynamicLayoutBox Header',
+ shortname: 'test-box',
+ configuration: { 'discovery-configuration': 'box-configuration-id' },
+ });
+
+ const relationPublicationsBox = Object.assign(new DynamicLayoutBox(), {
+ id: '2',
+ collapsed: false,
+ header: 'Publications',
+ shortname: 'publications',
+ configuration: { 'discovery-configuration': 'RELATION.Person.researchoutputs' },
+ });
+
+ const personItem = Object.assign(new Item(), {
+ id: '1234-65487-12354-1235',
+ bundles: of({}),
+ metadata: {
+ 'dspace.entity.type': [{ value: 'Person' }] as MetadataValue[],
+ 'dspace.object.owner': [{ value: 'not Owner', authority: EPersonMock2.id }] as MetadataValue[],
+ },
+ });
+
+ const ownerItem = Object.assign(new Item(), {
+ id: '1234-65487-12354-1235',
+ bundles: of({}),
+ metadata: {
+ 'dspace.entity.type': [{ value: 'Person' }] as MetadataValue[],
+ 'dspace.object.owner': [{ value: 'Owner', authority: EPersonMock.id }] as MetadataValue[],
+ },
+ });
+
+ const authService = jasmine.createSpyObj('authService', {
+ getAuthenticatedUserFromStore: of(null),
+ });
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ CommonModule,
+ DynamicLayoutRelationBoxComponent,
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ { provide: 'boxProvider', useValue: testBox },
+ { provide: 'itemProvider', useValue: testItem },
+ { provide: AuthService, useValue: authService },
+ ],
+ })
+ .overrideComponent(DynamicLayoutRelationBoxComponent, { remove: { imports: [ThemedConfigurationSearchPageComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutRelationBoxComponent);
+ component = fixture.componentInstance;
+ });
+
+ describe('When item is not a Person', () => {
+ beforeEach(() => {
+ component.box = testBox;
+ component.item = testItem;
+ fixture.detectChanges();
+ });
+
+ it('should create DynamicLayoutRelationBoxComponent', () => {
+ expect(component).toBeDefined();
+ });
+
+ it('should have set scope in searchFilter', () => {
+ expect(component.searchFilter).toContain('scope=' + testItem.id);
+ });
+
+ it('info message cannot be shown', fakeAsync(() => {
+ expect(component.showSearchResultNotice$).toBeObservable(cold('a', { a: false }));
+ }));
+
+ it('info message has no value', fakeAsync(() => {
+ expect(component.searchResultNotice).toBeUndefined();
+ }));
+ });
+
+ describe('When item is a Person', () => {
+
+ describe('When relation-box of researchoutputs is shown', () => {
+ beforeEach(() => {
+ component.box = relationPublicationsBox;
+ });
+
+ describe('Whenever the personItem is the researcher profile of the logged user', () => {
+ beforeEach(() => {
+ (authService.getAuthenticatedUserFromStore as jasmine.Spy).and.returnValue(of({ id: EPersonMock.id } as EPerson));
+ component.item = ownerItem;
+ fixture.detectChanges();
+ });
+ it('info message can be shown', fakeAsync(() => {
+ expect(component.showSearchResultNotice$).toBeObservable(cold('a', { a: true }));
+ }));
+ it('info message has value', fakeAsync(() => {
+ expect(component.searchResultNotice).not.toBeUndefined();
+ }));
+ });
+
+ describe('Whenever the personItem is not the researcher profile of the logged user', () => {
+ beforeEach(() => {
+ (authService.getAuthenticatedUserFromStore as jasmine.Spy).and.returnValue(of({ id: 'fake-uuid' } as EPerson));
+ component.item = personItem;
+ fixture.detectChanges();
+ });
+ it('info message cannot be shown', fakeAsync(() => {
+ expect(component.showSearchResultNotice$).toBeObservable(cold('a', { a: false }));
+ }));
+ it('info message has no value', fakeAsync(() => {
+ expect(component.searchResultNotice).not.toBeUndefined();
+ }));
+ });
+
+ describe('no one is logged', () => {
+ beforeEach(() => {
+ (authService.getAuthenticatedUserFromStore as jasmine.Spy).and.returnValue(of(null as EPerson));
+ fixture.detectChanges();
+ });
+ it('info message has no value', fakeAsync(() => {
+ // component.showSearchResultNotice$.subscribe(value => expect(value).toBeUndefined());
+ expect(component.showSearchResultNotice$).toBeObservable(cold('a', { a: false }));
+ }));
+ it('info message has no value', fakeAsync(() => {
+ expect(component.searchResultNotice).toBeUndefined();
+ }));
+ });
+
+ });
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.ts
new file mode 100644
index 00000000000..401ac4d48eb
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/relation/dynamic-layout-relation-box.component.ts
@@ -0,0 +1,108 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { EPerson } from '@dspace/core/eperson/models/eperson.model';
+import {
+ DynamicLayoutBox,
+ RelationBoxConfiguration,
+} from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { isNotEmpty } from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+import {
+ BehaviorSubject,
+ Observable,
+ shareReplay,
+} from 'rxjs';
+import {
+ filter,
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { ThemedConfigurationSearchPageComponent } from '../../../../../search-page/themed-configuration-search-page.component';
+import { renderDynamicLayoutBoxFor } from '../../../../decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../../../enums/layout-box.enum';
+import { DynamicLayoutBoxDirective } from '../../../../models/dynamic-layout-box-component.directive';
+
+@renderDynamicLayoutBoxFor(LayoutBox.RELATION)
+@Component({
+ selector: 'ds-dynamic-layout-search-box',
+ templateUrl: './dynamic-layout-relation-box.component.html',
+ styleUrls: ['./dynamic-layout-relation-box.component.scss'],
+ imports: [
+ AsyncPipe,
+ ThemedConfigurationSearchPageComponent,
+ ],
+})
+export class DynamicLayoutRelationBoxComponent extends DynamicLayoutBoxDirective implements OnInit {
+
+ /**
+ * Filter used for set scope in discovery invocation
+ */
+ searchFilter: string;
+ /**
+ * Name of configuration for this box
+ */
+ configuration: string;
+ /**
+ * flag for enable/disable search bar
+ */
+ searchEnabled = false;
+
+ /**
+ * A boolean representing if to show or not the search notice
+ */
+ showSearchResultNotice$: BehaviorSubject = new BehaviorSubject(false);
+
+ /**
+ * The search notice message
+ */
+ searchResultNotice: string;
+
+ constructor(
+ protected authService: AuthService,
+ protected translateService: TranslateService,
+ @Inject('boxProvider') public boxProvider: DynamicLayoutBox,
+ @Inject('itemProvider') public itemProvider: Item,
+ ) {
+ super(translateService, boxProvider, itemProvider);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+
+ this.searchFilter = `scope=${this.item.id}`;
+ this.configuration = (this.box.configuration as RelationBoxConfiguration)['discovery-configuration'];
+ const isResearchOutputsConfiguration =
+ this.configuration?.endsWith('researchoutputs') || this.configuration?.endsWith('Publication');
+ if (!this.isPersonEntity() || !isResearchOutputsConfiguration) {
+ this.showSearchResultNotice$.next(false);
+ } else {
+ this.isProfileOwner().pipe(take(1)).subscribe((result) => {
+ this.searchResultNotice = this.translateService.instant('manage.relationships.hidden-related-items-alert');
+ this.showSearchResultNotice$.next(result);
+ });
+ }
+ }
+
+ protected getOwner(user: EPerson) {
+ return this.item.firstMetadataValue('dspace.object.owner', { authority: user.id });
+ }
+
+ protected isProfileOwner(): Observable {
+ return this.authService.getAuthenticatedUserFromStore().pipe(
+ filter(isNotEmpty),
+ map((user) => isNotEmpty(this.getOwner(user))),
+ shareReplay({ refCount: false, bufferSize: 1 }),
+ );
+ }
+
+ protected isPersonEntity(): boolean {
+ return isNotEmpty(this.item.firstMetadataValue('dspace.entity.type', { value: 'Person' }));
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.html
new file mode 100644
index 00000000000..f5563672f87
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.html
@@ -0,0 +1,22 @@
+@if (componentLoader) {
+ @if (box.container && !hasOwnContainer) {
+
+
+
+
+
+
+
+
+
+ }
+ @if (!box.container || hasOwnContainer) {
+ ;
+ let de: DebugElement;
+
+ const mockItem = Object.assign(new Item(), {
+ id: 'fake-id',
+ handle: 'fake/handle',
+ lastModified: '2018',
+ metadata: {
+ 'dc.title': [
+ {
+ language: null,
+ value: 'test',
+ },
+ ],
+ 'dspace.entity.type': [
+ {
+ language: null,
+ value: 'Person',
+ },
+ ],
+ },
+ });
+
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }),
+ DynamicLayoutBoxContainerComponent,
+ ],
+ }).overrideComponent(DynamicLayoutBoxContainerComponent, { remove: { imports: [ThemedLoadingComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutBoxContainerComponent);
+ component = fixture.componentInstance;
+ de = fixture.debugElement;
+
+ component.box = boxMetadata;
+ component.item = mockItem;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+
+ describe('when inserting box', () => {
+ beforeEach(async () => {
+ spyOn((component as any), 'getComponent').and.returnValue(Promise.resolve(TestDynamicLayoutBoxComponent));
+ component.box = boxMetadata;
+ component.item = mockItem;
+ component.ngOnInit();
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
+
+ it('should call get component', () => {
+ expect((component as any).getComponent).toHaveBeenCalled();
+ });
+
+ it('should have object injector', () => {
+ expect((component as any).objectInjector).toBeTruthy();
+ });
+
+ it('if box has container == false should not show accordion', () => {
+ component.box.container = false;
+ fixture.detectChanges();
+ expect(de.query(By.css('ngb-accordion'))).toBeNull();
+ });
+
+ it('if box has container == true should show accordion', () => {
+ component.box.container = true;
+ fixture.detectChanges();
+ expect(de.query(By.css('ngb-accordion'))).toBeTruthy();
+ });
+
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.ts
new file mode 100644
index 00000000000..04ad9062510
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/dynamic-layout-box-container.component.ts
@@ -0,0 +1,172 @@
+import { NgComponentOutlet } from '@angular/common';
+import {
+ Component,
+ ComponentFactoryResolver,
+ Injector,
+ Input,
+ OnInit,
+} from '@angular/core';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { GenericConstructor } from '@dspace/core/shared/generic-constructor';
+import { Item } from '@dspace/core/shared/item.model';
+import { hasNoValue } from '@dspace/shared/utils/empty.util';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+
+import { ItemVersionsComponent } from '../../../item-page/versions/item-versions.component';
+import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
+import { getDynamicLayoutBox } from '../../decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../enums/layout-box.enum';
+import { DynamicLayoutBoxDirective } from '../../models/dynamic-layout-box-component.directive';
+
+/**
+ * Container component that wraps a single {@link DynamicLayoutBox} in an accordion panel.
+ * Dynamically resolves the correct box component (metadata, relation, collections, IIIF, versioning)
+ * using the {@link getDynamicLayoutBox} decorator map, and injects box/item providers
+ * so the child component can access its data.
+ */
+@Component({
+ selector: 'ds-dynamic-layout-box-container',
+ templateUrl: './dynamic-layout-box-container.component.html',
+ imports: [
+ NgbAccordionModule,
+ NgComponentOutlet,
+ ThemedLoadingComponent,
+ TranslateModule,
+ ],
+})
+export class DynamicLayoutBoxContainerComponent implements OnInit {
+
+ @Input() box: DynamicLayoutBox;
+
+ /**
+ * Item that is being viewed
+ */
+ @Input() item: Item;
+
+ /**
+ * The tab name
+ */
+ @Input() tabName: string;
+
+ /**
+ * Component constructor resolved for this box type.
+ */
+ componentLoader: GenericConstructor;
+
+ /**
+ * Whether the resolved component provides its own container (e.g. accordion).
+ */
+ hasOwnContainer = false;
+
+ /**
+ * The prefix used for box header's i18n key
+ */
+ boxI18nPrefix = 'layout.box.header.';
+
+ /**
+ * The i18n key used for box's header
+ */
+ boxHeaderI18nKey: string;
+
+ /**
+ * A generic i18n key used as fallback
+ */
+ boxHeaderGenericI18nKey: string;
+
+ /**
+ * Active tab utilized by accordion
+ */
+ activeIds: string[] = [];
+
+ /**
+ * Injector to inject a section component with the @Input parameters
+ * @type {Injector}
+ */
+ public objectInjector: Injector;
+
+ constructor(
+ private injector: Injector,
+ protected translateService: TranslateService,
+ protected componentFactoryResolver: ComponentFactoryResolver) { }
+
+ ngOnInit(): void {
+
+ this.objectInjector = Injector.create({
+ providers: [
+ { provide: 'boxProvider', useFactory: () => (this.box), deps: [] },
+ { provide: 'itemProvider', useFactory: () => (this.item), deps: [] },
+ { provide: 'tabNameProvider', useFactory: () => (this.tabName), deps: [] },
+ ],
+ parent: this.injector,
+ });
+
+ this.boxHeaderI18nKey = this.boxI18nPrefix + this.box.entityType + '.' + this.box.shortname;
+ this.boxHeaderGenericI18nKey = this.boxI18nPrefix + this.box.shortname;
+
+ if (hasNoValue(this.box.collapsed) || !this.box.collapsed) {
+ this.activeIds.push(this.box.shortname);
+ }
+
+ void this.resolveComponent();
+ }
+
+ /**
+ * Resolve the box component from the decorator registry and set it as the
+ * component to render, along with its `hasOwnContainer` flag.
+ */
+ async resolveComponent(): Promise {
+ let component: GenericConstructor;
+ try {
+ component = await this.getComponent();
+ } catch (error) {
+ console.error('Failed to resolve the dynamic layout box component', error);
+ return;
+ }
+
+ if (hasNoValue(component)) {
+ return;
+ }
+
+ this.componentLoader = component;
+ this.hasOwnContainer = (component as any)?.hasOwnContainer ?? false;
+ }
+
+ /**
+ * Resolve the box component constructor for the current box type.
+ */
+ getComponent(): Promise> {
+ return getDynamicLayoutBox(this.box.boxType as LayoutBox);
+ }
+ /**
+ * Get component reference to be inserted in the ngComponentOutlet
+ */
+ getComponentRef(): GenericConstructor {
+ return this.componentLoader;
+ }
+
+ /**
+ * get the translation for the i18n key
+ * @param key the i18n key
+ */
+ getTranslation(key: string): string {
+ const value = this.translateService.instant(key);
+ return value === key ? null : value;
+ }
+
+ /**
+ * Get box header to be inserted inside the accordion
+ */
+ getBoxHeader(): string {
+ return this.getTranslation(this.boxHeaderI18nKey) ??
+ this.getTranslation(this.boxHeaderGenericI18nKey) ??
+ this.getTranslation(this.box.header) ??
+ this.box.header ??
+ '';
+ }
+
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.html
new file mode 100644
index 00000000000..1fd4a4947d8
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.html
@@ -0,0 +1,13 @@
+@if (!!tab) {
+ @for (row of tab.rows; track row) {
+ ;
+ let de: DebugElement;
+
+ const tab = leadingTabs[0];
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DynamicLayoutMatrixComponent],
+ })
+ .overrideComponent(DynamicLayoutMatrixComponent, { remove: { imports: [DynamicLayoutBoxContainerComponent] } }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutMatrixComponent);
+ de = fixture.debugElement;
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should not show rows', () => {
+ expect(de.queryAll(By.css('.row')).length).toEqual(0);
+ });
+ describe('after inserting selected tab', () => {
+
+ beforeEach(() => {
+ component.tab = tab;
+ fixture.detectChanges();
+ });
+
+ it('should have 2 rows', () => {
+ expect(de.queryAll(By.css('.row')).length).toEqual(2);
+ });
+
+ it('should have 1 row with test-class', () => {
+ expect(de.queryAll(By.css('.test-class')).length).toEqual(1);
+ });
+
+ it('should have 3 cells', () => {
+ expect(de.queryAll(By.css('.cell')).length).toEqual(3);
+ });
+
+ it('should have 2 col-md-6 cells', () => {
+ expect(de.queryAll(By.css('.col-md-6')).length).toEqual(2);
+ });
+
+ it('should have 1 col cell', () => {
+ expect(de.queryAll(By.css('.col')).length).toEqual(1);
+ });
+
+ it('should have 4 boxes', () => {
+ expect(de.queryAll(By.css('ds-dynamic-layout-box-container')).length).toEqual(4);
+ });
+
+ });
+});
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.ts
new file mode 100644
index 00000000000..bacd73023f0
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.ts
@@ -0,0 +1,62 @@
+
+import {
+ Component,
+ Input,
+} from '@angular/core';
+
+import { DynamicLayoutTab } from '../../core/layout/models/tab.model';
+import { Item } from '../../core/shared/item.model';
+import { DynamicLayoutBoxContainerComponent } from './dynamic-layout-box-container/dynamic-layout-box-container.component';
+
+/**
+ * Component responsible for rendering the rows and cells of a tab's layout matrix.
+ * Each cell contains one or more boxes rendered via {@link DynamicLayoutBoxContainerComponent}.
+ * Applies Bootstrap grid classes based on configured styles.
+ */
+@Component({
+ selector: 'ds-dynamic-layout-matrix',
+ templateUrl: './dynamic-layout-matrix.component.html',
+ styleUrls: ['./dynamic-layout-matrix.component.scss'],
+ imports: [
+ DynamicLayoutBoxContainerComponent,
+ ],
+})
+export class DynamicLayoutMatrixComponent {
+
+ /**
+ * Tabs to render
+ */
+ @Input() tab: DynamicLayoutTab;
+
+ /**
+ * Tabs to render
+ */
+ @Input() row;
+
+ /**
+ * Item that is being viewed
+ */
+ @Input() item: Item;
+
+ /**
+ * A boolean representing if to use an internal padding for the cells
+ */
+ @Input() showCellPadding = true;
+
+ /**
+ * Check if style contains 'col' or 'col-x'
+ * @param style the style of the cell (a list of classes separated by space)
+ */
+ hasColClass(style) {
+ return style?.split(' ').filter((c) => (c === 'col' || c.startsWith('col-'))).length > 0;
+ }
+
+ /**
+ * Check if style contains 'row'
+ * @param style the style of the row (a list of classes separated by space)
+ */
+ hasRowClass(style) {
+ return style?.split(' ').filter((r) => (r === 'row')).length > 0;
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout.component.html b/src/app/dynamic-layout/dynamic-layout.component.html
new file mode 100644
index 00000000000..9becb2585f2
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout.component.html
@@ -0,0 +1,24 @@
+;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock,
+ },
+ }), BrowserAnimationsModule, DynamicLayoutComponent],
+ providers: [
+ { provide: TabDataService, useValue: tabDataServiceMock },
+ { provide: ChangeDetectorRef, useValue: {} },
+ { provide: ActivatedRoute, useValue: route },
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).overrideComponent(DynamicLayoutComponent, { remove: { imports: [DynamicLayoutLeadingComponent, DynamicLayoutLoaderComponent] } }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DynamicLayoutComponent);
+ component = fixture.componentInstance;
+ component.item = mockItem;
+ tabDataServiceMock.findByItem.and.returnValue(of(leadingTabs));
+
+ component.tabs$ = of(leadingTabs);
+ component.leadingTabs$ = of(leadingTabs);
+ component.loaderTabs$ = of([]);
+
+ component.hasLeadingTab$.next(true);
+ fixture.detectChanges();
+ });
+
+ describe('When the component is rendered', () => {
+
+ it('it should show only ds-dynamic-layout-leading when only leading tabs', fakeAsync(() => {
+ component.tabs$ = of(leadingTabs);
+ component.leadingTabs$ = of(leadingTabs);
+ component.loaderTabs$ = of([]);
+ fixture.detectChanges();
+ tick(); // Simulate the passage of time to ensure the DOM is updated
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-leading'))).toBeTruthy();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-loader'))).toBeNull();
+ }));
+
+ it('it should show only ds-dynamic-layout-loader when only loader tabs', fakeAsync(() => {
+ component.tabs$ = of(loaderTabs);
+ component.leadingTabs$ = of([]);
+ component.loaderTabs$ = of(loaderTabs);
+ fixture.detectChanges();
+ tick(); // Simulate the passage of time to ensure the DOM is updated
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-loader'))).toBeTruthy();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-leading'))).toBeNull();
+ }));
+
+ it('it should show both when both types of tabs', fakeAsync(() => {
+ component.tabs$ = of(bothTabs);
+ component.leadingTabs$ = of(leadingTabs);
+ component.loaderTabs$ = of(loaderTabs);
+ fixture.detectChanges();
+ tick(); // Simulate the passage of time to ensure the DOM is updated
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-loader'))).toBeTruthy();
+ expect(fixture.debugElement.query(By.css('ds-dynamic-layout-leading'))).toBeTruthy();
+ }));
+
+ });
+
+});
diff --git a/src/app/dynamic-layout/dynamic-layout.component.ts b/src/app/dynamic-layout/dynamic-layout.component.ts
new file mode 100644
index 00000000000..6f46f27c911
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout.component.ts
@@ -0,0 +1,160 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ Component,
+ Input,
+ OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { isNotEmpty } from '@dspace/shared/utils/empty.util';
+import {
+ BehaviorSubject,
+ Observable,
+} from 'rxjs';
+import {
+ filter,
+ map,
+ take,
+} from 'rxjs/operators';
+
+import { RemoteData } from '../core/data/remote-data';
+import { DynamicLayoutTab } from '../core/layout/models/tab.model';
+import { TabDataService } from '../core/layout/tab-data.service';
+import { Item } from '../core/shared/item.model';
+import {
+ getFirstSucceededRemoteData,
+ getPaginatedListPayload,
+ getRemoteDataPayload,
+} from '../core/shared/operators';
+import { VarDirective } from '../shared/utils/var.directive';
+import { PaginatedList } from './../core/data/paginated-list.model';
+import { DynamicLayoutLeadingComponent } from './dynamic-layout-leading/dynamic-layout-leading.component';
+import { DynamicLayoutLoaderComponent } from './dynamic-layout-loader/dynamic-layout-loader.component';
+
+/**
+ * Top-level orchestrator component for the dynamic item page layout system.
+ *
+ * Resolves layout tabs (from route data or an input observable) and splits them into
+ * leading tabs (rendered above the main content via {@link DynamicLayoutLeadingComponent})
+ * and loader tabs (rendered via {@link DynamicLayoutLoaderComponent} which picks the
+ * appropriate orientation — horizontal or vertical — based on configuration).
+ */
+@Component({
+ selector: 'ds-dynamic-layout',
+ templateUrl: './dynamic-layout.component.html',
+ styleUrls: ['./dynamic-layout.component.scss'],
+ imports: [
+ AsyncPipe,
+ DynamicLayoutLeadingComponent,
+ DynamicLayoutLoaderComponent,
+ VarDirective,
+ ],
+})
+export class DynamicLayoutComponent implements OnInit {
+
+ /**
+ * DSpace Item to render
+ */
+ @Input() item: Item;
+
+ /**
+ * DSpace dataTabs coming as Input for specific item
+ */
+ @Input() dataTabs$: Observable>>;
+
+ /**
+ * A boolean representing if to show context menu or not
+ */
+ @Input() showContextMenu = true;
+
+ /**
+ * Get tabs for the specific item
+ */
+ tabs$: Observable;
+
+ /**
+ * Get loader tabs for the specific item
+ */
+ loaderTabs$: Observable;
+
+ /**
+ * Get leading for the specific item
+ */
+ leadingTabs$: Observable;
+
+ /**
+ * Get if has leading tabs
+ */
+ hasLeadingTab$: BehaviorSubject = new BehaviorSubject(false);
+
+ constructor(private tabService: TabDataService, private router: ActivatedRoute) {
+ }
+
+ /**
+ * Get tabs for the specific item
+ */
+ ngOnInit(): void {
+
+ if (this.dataTabs$) {
+ this.tabs$ = this.dataTabs$.pipe(
+ map((res: any) => {
+ return res.payload.page;
+ }),
+ );
+ } else {
+ this.tabs$ = this.router.data.pipe(
+ map((res: any) => {
+ return res.tabs.payload.page;
+ }),
+ );
+ }
+ this.leadingTabs$ = this.getLeadingTabs();
+ this.loaderTabs$ = this.getLoaderTabs();
+
+ this.hasLeadingTab().pipe(
+ filter((result) => isNotEmpty(result)),
+ take(1),
+ ).subscribe((result) => {
+ this.hasLeadingTab$.next(result);
+ });
+ }
+
+ /**
+ * Get tabs for the specific item
+ */
+ getTabsByItem(): Observable {
+ // Since there is no API ready
+ return this.tabService.findByItem(this.item.uuid, true).pipe(
+ getFirstSucceededRemoteData(),
+ getRemoteDataPayload(),
+ getPaginatedListPayload(),
+ );
+ }
+
+ /**
+ * Get tabs for the leading component where parameter leading is true b
+ */
+ getLeadingTabs(): Observable {
+ return this.tabs$.pipe(
+ map((tabs: DynamicLayoutTab[]) => tabs.filter(tab => tab.leading)),
+ );
+ }
+
+ /**
+ * Get tabs for the loader component where parameter leading is false
+ */
+ getLoaderTabs(): Observable {
+ return this.tabs$.pipe(
+ map((tabs: DynamicLayoutTab[]) => tabs.filter(tab => !tab.leading)),
+ );
+ }
+
+ /**
+ * Return a boolean representing if there is a leading tab configured
+ */
+ hasLeadingTab(): Observable {
+ return this.getLeadingTabs().pipe(
+ map((tabs: DynamicLayoutTab[]) => tabs && tabs.length > 0),
+ );
+ }
+
+}
diff --git a/src/app/dynamic-layout/enums/entity-type.enum.ts b/src/app/dynamic-layout/enums/entity-type.enum.ts
new file mode 100644
index 00000000000..d4b4c506a29
--- /dev/null
+++ b/src/app/dynamic-layout/enums/entity-type.enum.ts
@@ -0,0 +1,9 @@
+/**
+ * Enum of DSpace object entity types used in dynamic layout rendering.
+ */
+export enum EntityTypeEnum {
+ Item = 'item',
+ Collection = 'collection',
+ Bitstream = 'bitstream',
+ Community = 'community',
+}
diff --git a/src/app/dynamic-layout/enums/layout-box.enum.ts b/src/app/dynamic-layout/enums/layout-box.enum.ts
new file mode 100644
index 00000000000..a98dc329ea1
--- /dev/null
+++ b/src/app/dynamic-layout/enums/layout-box.enum.ts
@@ -0,0 +1,16 @@
+/**
+ * This enum contains the boxes types
+ * It is used to determine which component to use for render a specific box.
+ * To overwrite a box its boxType must be entered as a value.
+ */
+export enum LayoutBox {
+ METADATA = 'METADATA',
+ SEARCH = 'SEARCH',
+ RELATION = 'RELATION',
+ ORCID_SYNC_SETTINGS = 'ORCID_SYNC_SETTINGS',
+ ORCID_AUTHORIZATIONS = 'ORCID_AUTHORIZATIONS',
+ ORCID_SYNC_QUEUE = 'ORCID_SYNC_QUEUE',
+ IIIFVIEWER = 'IIIFVIEWER',
+ COLLECTIONS = 'COLLECTIONS',
+ VERSIONING = 'VERSIONING',
+}
diff --git a/src/app/dynamic-layout/enums/layout-page.enum.ts b/src/app/dynamic-layout/enums/layout-page.enum.ts
new file mode 100644
index 00000000000..ffa0e1afcae
--- /dev/null
+++ b/src/app/dynamic-layout/enums/layout-page.enum.ts
@@ -0,0 +1,15 @@
+/**
+ * This enum contains the types of layout pages.
+ * It is used to determine which component to use for render a specific item.
+ * To overwrite the layout page of a specific item its entityType must be entered as a value
+ */
+
+export enum LayoutPage {
+ VERTICAL = 'vertical',
+ HORIZONTAL = 'horizontal'
+}
+
+/**
+ * The default page is always applied by the component resolver as a fallback value;
+ */
+export const DEFAULT_LAYOUT_PAGE = LayoutPage.VERTICAL;
diff --git a/src/app/dynamic-layout/enums/layout-tab.enum.ts b/src/app/dynamic-layout/enums/layout-tab.enum.ts
new file mode 100644
index 00000000000..5f63e37edc9
--- /dev/null
+++ b/src/app/dynamic-layout/enums/layout-tab.enum.ts
@@ -0,0 +1,14 @@
+/**
+ * This enum contains the types of layout tabs.
+ * It is used to determine which component to use for render a tab of a specific item.
+ * To overwrite a specific tab its shortname must be entered as a value.
+ */
+export enum LayoutTab {
+ DEFAULT = 'defaultLayoutTab',
+ ORCID = 'orcid'
+}
+
+/**
+ * The default tab is applied by the component resolver as a fallback value;
+ */
+export const DEFAULT_LAYOUT_TAB = LayoutTab.DEFAULT;
diff --git a/src/app/dynamic-layout/models/dynamic-layout-box-component.directive.ts b/src/app/dynamic-layout/models/dynamic-layout-box-component.directive.ts
new file mode 100644
index 00000000000..6cab66c87bf
--- /dev/null
+++ b/src/app/dynamic-layout/models/dynamic-layout-box-component.directive.ts
@@ -0,0 +1,96 @@
+import {
+ Directive,
+ EventEmitter,
+ Inject,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
+import {
+ hasValue,
+ isEmpty,
+} from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+
+import { DynamicLayoutBox } from '../../core/layout/models/box.model';
+import { Item } from '../../core/shared/item.model';
+import { DynamicLayoutPageDirective } from './dynamic-layout-page.directive';
+
+/**
+ * This class is a model to be extended for creating custom layouts for boxes
+ */
+@Directive()
+export abstract class DynamicLayoutBoxDirective extends DynamicLayoutPageDirective implements OnInit {
+
+ /**
+ * Whether this box component provides its own container (e.g. accordion).
+ * If `true`, the parent {@link DynamicLayoutBoxContainerComponent} won't wrap
+ * it in an accordion panel.
+ *
+ * Subclasses that supply their own container should override this:
+ * static override hasOwnContainer = true;
+ */
+ static hasOwnContainer = false;
+
+ /**
+ * DynamicLayoutBox.
+ */
+ @Input() box: DynamicLayoutBox;
+
+ /**
+ * Emit a refresh box request from within the DynamicLayoutBox.
+ */
+ @Output() refreshBox: EventEmitter = new EventEmitter();
+
+ /**
+ * Emit a refresh tab request from within the DynamicLayoutBox.
+ */
+ @Output() refreshTab: EventEmitter = new EventEmitter();
+
+ activeIds: string[] = [];
+
+ /**
+ * The prefix used for box header's i18n key
+ */
+ boxI18nPrefix = 'layout.box.header.';
+
+ /**
+ * The i18n key used for box's header
+ */
+ boxHeaderI18nKey = '';
+
+ protected constructor(
+ protected translateService: TranslateService,
+ @Inject('boxProvider') public boxProvider: DynamicLayoutBox,
+ @Inject('itemProvider') public itemProvider: Item,
+ ) {
+ super();
+ this.box = boxProvider;
+ this.item = itemProvider;
+ }
+
+ /**
+ * Check if the current box is collapsed or not
+ */
+ ngOnInit(): void {
+ this.boxHeaderI18nKey = this.boxI18nPrefix + this.box.shortname;
+
+ if (!hasValue(this.box.collapsed) || !this.box.collapsed) {
+ this.activeIds.push(this.box.shortname);
+ }
+
+ }
+
+ /**
+ * Get box header to be inserted inside the accordion
+ */
+ getBoxHeader(): string {
+ const header: string = isEmpty(this.boxHeaderI18nKey) ? null : this.translateService.instant(this.boxHeaderI18nKey);
+ if (isEmpty(header) || header === this.boxHeaderI18nKey) {
+ // if translation does not exist return the value present in the header property
+ return this.translateService.instant(this.box.header);
+ } else {
+ return header;
+ }
+ }
+}
diff --git a/src/app/dynamic-layout/models/dynamic-layout-metadata-link-value.model.ts b/src/app/dynamic-layout/models/dynamic-layout-metadata-link-value.model.ts
new file mode 100644
index 00000000000..8d62a65a51f
--- /dev/null
+++ b/src/app/dynamic-layout/models/dynamic-layout-metadata-link-value.model.ts
@@ -0,0 +1,10 @@
+export interface MetadataLinkValue {
+ /**
+ * value of href anchor
+ */
+ href: string;
+ /**
+ * text to show in the anchor
+ */
+ text: string;
+}
diff --git a/src/app/dynamic-layout/models/dynamic-layout-page.directive.ts b/src/app/dynamic-layout/models/dynamic-layout-page.directive.ts
new file mode 100644
index 00000000000..a946872b13c
--- /dev/null
+++ b/src/app/dynamic-layout/models/dynamic-layout-page.directive.ts
@@ -0,0 +1,17 @@
+import {
+ Directive,
+ Input,
+} from '@angular/core';
+
+import { Item } from '../../core/shared/item.model';
+
+/**
+ * This class is a model to be extended for creating custom layouts for pages
+ */
+@Directive()
+export abstract class DynamicLayoutPageDirective {
+ /**
+ * DSpace Item to render
+ */
+ @Input() item: Item;
+}
diff --git a/src/app/dynamic-layout/models/dynamic-layout-tab.directive.ts b/src/app/dynamic-layout/models/dynamic-layout-tab.directive.ts
new file mode 100644
index 00000000000..529cf1642f8
--- /dev/null
+++ b/src/app/dynamic-layout/models/dynamic-layout-tab.directive.ts
@@ -0,0 +1,26 @@
+import {
+ Directive,
+ EventEmitter,
+ Input,
+ Output,
+} from '@angular/core';
+
+import { DynamicLayoutTab } from '../../core/layout/models/tab.model';
+import { DynamicLayoutPageDirective } from './dynamic-layout-page.directive';
+
+/**
+ * This class is a model to be extended for creating custom layouts for tabs
+ */
+@Directive()
+export abstract class DynamicLayoutTabModelDirective extends DynamicLayoutPageDirective {
+ /**
+ * DynamicLayoutTab
+ */
+ @Input() tab: DynamicLayoutTab;
+
+ /**
+ * Emit a refresh tab request from within the DynamicLayoutTab.
+ */
+ @Output() refreshTab: EventEmitter = new EventEmitter();
+
+}
diff --git a/src/app/dynamic-layout/pipes/ds-date.pipe.spec.ts b/src/app/dynamic-layout/pipes/ds-date.pipe.spec.ts
new file mode 100644
index 00000000000..4da3980a148
--- /dev/null
+++ b/src/app/dynamic-layout/pipes/ds-date.pipe.spec.ts
@@ -0,0 +1,57 @@
+import {
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { DsDatePipe } from './ds-date.pipe';
+
+describe('DsDatePipe', () => {
+
+ const cdrInstance = Object.assign({
+ detectChanges: () => { /***/
+ },
+ markForCheck: () => { /***/
+ },
+ });
+
+ const localeServiceInstance = Object.assign({
+ getCurrentLanguageCode: () => of('en'),
+ });
+
+ const date = '2020-08-24';
+ const parsedDate = 'August 24, 2020';
+
+ let pipe: DsDatePipe;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ TestBed.runInInjectionContext(() => {
+ pipe = new DsDatePipe(cdrInstance as any, localeServiceInstance as any);
+ });
+ });
+
+ it('create an instance', () => {
+ expect(pipe).toBeTruthy();
+ });
+
+ it('Should transform the given date and time', waitForAsync(() => {
+ expect(pipe.transform(`${date}T11:22:33Z`)).toEqual(parsedDate);
+ }));
+
+ it('Should transform the given date (yyyy-MM-DD)', waitForAsync(() => {
+ expect(pipe.transform(date)).toEqual(parsedDate);
+ }));
+
+ it('Should transform the given date (yyyy-MM)', waitForAsync(() => {
+ expect(pipe.transform('2020-08')).toEqual('August 2020');
+ }));
+
+ it('Should transform the given date (YYYY)', waitForAsync(() => {
+ expect(pipe.transform('2020')).toEqual('2020');
+ }));
+
+ it('Should not transform invalid dates', waitForAsync(() => {
+ expect(pipe.transform('ABCDE')).toEqual('ABCDE');
+ }));
+});
diff --git a/src/app/dynamic-layout/pipes/ds-date.pipe.ts b/src/app/dynamic-layout/pipes/ds-date.pipe.ts
new file mode 100644
index 00000000000..e9c4105b287
--- /dev/null
+++ b/src/app/dynamic-layout/pipes/ds-date.pipe.ts
@@ -0,0 +1,42 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ ChangeDetectorRef,
+ OnDestroy,
+ Pipe,
+ PipeTransform,
+} from '@angular/core';
+import {
+ isValidDate,
+ localeDate,
+} from '@dspace/shared/utils/date.util';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { LocaleService } from '../../core/locale/locale.service';
+
+@Pipe({
+ name: 'dsDate',
+ pure: true,
+})
+export class DsDatePipe implements PipeTransform, OnDestroy {
+
+ private asyncPipe: AsyncPipe;
+
+ constructor(
+ cdr: ChangeDetectorRef,
+ private localeService: LocaleService,
+ ) {
+ this.asyncPipe = new AsyncPipe(cdr);
+ }
+
+ transform(value: string): string | null {
+ const formatted$: Observable = this.localeService.getCurrentLanguageCode().pipe(
+ map((locale: string) => (isValidDate(value) ? localeDate(value, locale) : value)),
+ );
+ return this.asyncPipe.transform(formatted$) as string | null;
+ }
+
+ ngOnDestroy(): void {
+ this.asyncPipe.ngOnDestroy();
+ }
+}
diff --git a/src/app/dynamic-layout/services/resolver-strategy.service.spec.ts b/src/app/dynamic-layout/services/resolver-strategy.service.spec.ts
new file mode 100644
index 00000000000..fbc0e585bfe
--- /dev/null
+++ b/src/app/dynamic-layout/services/resolver-strategy.service.spec.ts
@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { AppConfig } from '@dspace/config/app-config.interface';
+
+import { environment } from '../../../environments/environment';
+import { ResolverStrategyService } from './resolver-strategy.service';
+
+describe('ResolverStrategyService', () => {
+ let service: ResolverStrategyService;
+
+ const httpLink = 'http://rest.api/item';
+ const httpsLink = 'https://rest.api/item';
+ const ftpLink = 'ftp://rest.api/item';
+ const ftpsLink = 'ftps://rest.api/item';
+ const noProtocolLink = 'rest.api/item';
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = new ResolverStrategyService(environment as AppConfig);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should check if given value is a link', () => {
+ expect(service.checkLink(httpLink)).toEqual(true);
+ expect(service.checkLink(httpsLink)).toEqual(true);
+ expect(service.checkLink(ftpLink)).toEqual(true);
+ expect(service.checkLink(ftpsLink)).toEqual(true);
+ expect(service.checkLink(noProtocolLink)).toEqual(false);
+ });
+
+ it('should return base URL if exists given URN', () => {
+ expect(service.getBaseUrl('doi')).toBeTruthy();
+ expect(service.getBaseUrl('FAKEURN')).toBeFalsy();
+ });
+});
diff --git a/src/app/dynamic-layout/services/resolver-strategy.service.ts b/src/app/dynamic-layout/services/resolver-strategy.service.ts
new file mode 100644
index 00000000000..ecfe7e1ab53
--- /dev/null
+++ b/src/app/dynamic-layout/services/resolver-strategy.service.ts
@@ -0,0 +1,65 @@
+import {
+ Inject,
+ Injectable,
+} from '@angular/core';
+import {
+ APP_CONFIG,
+ AppConfig,
+} from '@dspace/config/app-config.interface';
+import { hasValue } from '@dspace/shared/utils/empty.util';
+
+/**
+ * Service that maps URN (Uniform Resource Name) identifiers (e.g., DOI, HANDLE, SCOPUS)
+ * to their resolver base URLs, as defined in the environment configuration.
+ * Also provides utility methods to detect whether a metadata value is a link.
+ */
+@Injectable({
+ providedIn: 'root',
+})
+export class ResolverStrategyService {
+
+ /**
+ * List of managed URN
+ */
+ private urn2baseurl: Map;
+
+ constructor(@Inject(APP_CONFIG) protected appConfig: AppConfig) {
+ /**
+ * Set the list of managed URN
+ */
+ this.urn2baseurl = new Map();
+ const urnList = this.appConfig.layout.urn;
+ if (hasValue(urnList)) {
+ for (const urn of urnList) {
+ this.urn2baseurl.set(urn.name, urn.baseUrl);
+ }
+ }
+ }
+
+ /**
+ * Returns the list of managed URN
+ */
+ get managedUrn(): IterableIterator {
+ return this.urn2baseurl.keys();
+ }
+
+ /**
+ * Returns base url for a given URN
+ * @param key string that represents the URN (DOI, HANDLE, EMAIL)
+ */
+ getBaseUrl(key: string): string {
+ return this.urn2baseurl.get(key);
+ }
+
+ /**
+ * Check if the give parameter is a link
+ * @param value metadata value
+ */
+ checkLink(value: string): boolean {
+ return hasValue(value) && (
+ value.toLowerCase().startsWith('http://') ||
+ value.toLowerCase().startsWith('https://') ||
+ value.toLowerCase().startsWith('ftp://') ||
+ value.toLowerCase().startsWith('ftps://') ) ;
+ }
+}
diff --git a/src/app/item-page/dynamic-item-page-tab.resolver.spec.ts b/src/app/item-page/dynamic-item-page-tab.resolver.spec.ts
new file mode 100644
index 00000000000..0cab0764d06
--- /dev/null
+++ b/src/app/item-page/dynamic-item-page-tab.resolver.spec.ts
@@ -0,0 +1,231 @@
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+ tabDetailsTest,
+ tabFundingsTest,
+ tabPublicationsTest,
+} from '@dspace/core/testing/layout-tab.mocks';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import {
+ createSuccessfulRemoteDataObject,
+ createSuccessfulRemoteDataObject$,
+} from '@dspace/core/utilities/remote-data.utils';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { ItemDataService } from '../core/data/item-data.service';
+import { PaginatedList } from '../core/data/paginated-list.model';
+import { RemoteData } from '../core/data/remote-data';
+import { DynamicLayoutTab } from '../core/layout/models/tab.model';
+import { TabDataService } from '../core/layout/tab-data.service';
+import { HardRedirectService } from '../core/services/hard-redirect.service';
+import { Item } from '../core/shared/item.model';
+import { dynamicItemPageTabResolver } from './dynamic-item-page-tab.resolver';
+
+describe('DynamicItemPageTabResolver', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [RouterTestingModule.withRoutes([{
+ path: 'entities/:entity-type/:id/:tab',
+ component: {} as any,
+ }])],
+ });
+ });
+
+ describe('dynamicItemPageTabResolver', () => {
+ let itemService: jasmine.SpyObj;
+ let tabService: jasmine.SpyObj;
+ let hardRedirectService: jasmine.SpyObj;
+ let router: Router;
+
+ const uuid = '1234-65487-12354-1235';
+ const item = Object.assign(new Item(), {
+ id: uuid,
+ uuid: uuid,
+ metadata: {
+ 'dspace.entity.type': [{ value: 'Publication' }],
+ },
+ });
+
+ const tabsRD = createSuccessfulRemoteDataObject(createPaginatedList([tabPublicationsTest, tabDetailsTest, tabFundingsTest]));
+ const tabsRD$ = createSuccessfulRemoteDataObject$(createPaginatedList([tabPublicationsTest, tabDetailsTest, tabFundingsTest]));
+
+ const noTabsRD = createSuccessfulRemoteDataObject(createPaginatedList([]));
+ const noTabsRD$ = createSuccessfulRemoteDataObject$(createPaginatedList([]));
+
+ beforeEach(() => {
+ itemService = jasmine.createSpyObj('ItemDataService', ['findById']);
+ tabService = jasmine.createSpyObj('TabDataService', ['findByItem']);
+ hardRedirectService = jasmine.createSpyObj('HardRedirectService', ['redirect']);
+
+ TestBed.configureTestingModule({
+ imports: [RouterTestingModule.withRoutes([{ path: 'entities/:entity-type/:id/:tab', component: {} as any }])],
+ providers: [
+ { provide: ItemDataService, useValue: itemService },
+ { provide: TabDataService, useValue: tabService },
+ { provide: HardRedirectService, useValue: hardRedirectService },
+ { provide: PLATFORM_ID, useValue: 'browser' },
+ ],
+ });
+
+ router = TestBed.inject(Router);
+ });
+
+ describe('when item exists', () => {
+ beforeEach(() => {
+ itemService.findById.and.returnValue(createSuccessfulRemoteDataObject$(item));
+ });
+
+ describe('and there are tabs', () => {
+ beforeEach(() => {
+ tabService.findByItem.and.returnValue(tabsRD$);
+ spyOn(router, 'navigateByUrl');
+ });
+
+ it('should redirect to root route if given tab is the main one', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid, tab: 'publications' } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235/publications' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+
+ it('should not redirect to root route if tab different than the main one is given', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid, tab: 'details' } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235/details' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+
+ it('should not redirect to root route if no tab is given', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+
+ it('should navigate to 404 if a wrong tab is given', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid, tab: 'nonexistent' } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235/nonexistent' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+
+ it('should handle tab shortnames with "::" correctly', (done) => {
+ const tabPageList = createPaginatedList([{
+ ...tabPublicationsTest,
+ shortname: 'publication::details',
+ }]);
+ const tabRD = createSuccessfulRemoteDataObject(tabPageList);
+ tabService.findByItem.and.returnValue(createSuccessfulRemoteDataObject$(tabPageList) as any);
+
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid, tab: 'details' } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235/details' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabRD);
+ done();
+ });
+ });
+
+ it('should not redirect to 404 when no tab param and query params are present in the URL', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235?f.subject=value&f.date=2024' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+
+ it('should not redirect to 404 when a valid tab param is given with query params', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid, tab: 'details' } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235/details?f.subject=value' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(tabsRD);
+ done();
+ });
+ });
+ });
+
+ describe('and there are no tabs', () => {
+ beforeEach(() => {
+ tabService.findByItem.and.returnValue(noTabsRD$);
+ spyOn(router, 'navigateByUrl');
+ });
+
+ it('should not redirect nor navigate', (done) => {
+ const obs = TestBed.runInInjectionContext(() => {
+ return dynamicItemPageTabResolver(
+ { params: { id: uuid } } as any,
+ { url: '/entities/publication/1234-65487-12354-1235' } as any,
+ );
+ }) as Observable>>;
+
+ obs.pipe(take(1)).subscribe((resolved) => {
+ expect(router.navigateByUrl).not.toHaveBeenCalled();
+ expect(hardRedirectService.redirect).not.toHaveBeenCalled();
+ expect(resolved).toEqual(noTabsRD);
+ done();
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/src/app/item-page/dynamic-item-page-tab.resolver.ts b/src/app/item-page/dynamic-item-page-tab.resolver.ts
new file mode 100644
index 00000000000..73636a55696
--- /dev/null
+++ b/src/app/item-page/dynamic-item-page-tab.resolver.ts
@@ -0,0 +1,98 @@
+import { isPlatformServer } from '@angular/common';
+import {
+ inject,
+ PLATFORM_ID,
+} from '@angular/core';
+import {
+ ActivatedRouteSnapshot,
+ ResolveFn,
+ Router,
+ RouterStateSnapshot,
+} from '@angular/router';
+import { getPageNotFoundRoute } from '@dspace/core/router/core-routing-paths';
+import { getItemPageRoute } from '@dspace/core/router/utils/dso-route.utils';
+import { createFailedRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import { Observable } from 'rxjs';
+import {
+ map,
+ switchMap,
+} from 'rxjs/operators';
+
+import { ItemDataService } from '../core/data/item-data.service';
+import { PaginatedList } from '../core/data/paginated-list.model';
+import { RemoteData } from '../core/data/remote-data';
+import { DynamicLayoutTab } from '../core/layout/models/tab.model';
+import { TabDataService } from '../core/layout/tab-data.service';
+import { HardRedirectService } from '../core/services/hard-redirect.service';
+import { Item } from '../core/shared/item.model';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
+
+/**
+ * Route resolver that fetches layout tabs for an item based on the ':id' route parameter.
+ *
+ * Resolves the item, then fetches its available tabs from the TabDataService (excluding minor-only tabs).
+ * Performs tab validation and redirects:
+ * - If the URL contains an invalid tab shortname, redirects to 404.
+ * - If the URL contains the main tab's shortname explicitly, redirects to the root item page
+ * (canonical URL without tab suffix).
+ *
+ * @param route The current ActivatedRouteSnapshot containing the item ID
+ * @param state The current RouterStateSnapshot used for URL analysis
+ * @returns Observable emitting the RemoteData of paginated DynamicLayoutTab list
+ */
+export const dynamicItemPageTabResolver: ResolveFn>> = (
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot,
+): Observable>> => {
+ const platformId = inject(PLATFORM_ID);
+ const hardRedirectService = inject(HardRedirectService);
+ const tabService = inject(TabDataService);
+ const itemDataService = inject(ItemDataService);
+ const router = inject(Router);
+
+ return itemDataService.findById(route.params.id).pipe(
+ getFirstCompletedRemoteData(),
+ switchMap((itemRD: RemoteData- ) => {
+ if (itemRD.hasSucceeded && itemRD.statusCode === 200) {
+ return tabService.findByItem(
+ itemRD.payload.uuid,
+ true,
+ true,
+ ).pipe(
+ getFirstCompletedRemoteData(),
+ map((tabsRD: RemoteData
>) => {
+ if (tabsRD.hasSucceeded && tabsRD?.payload?.page?.length > 0) {
+ const givenTab = route.params.tab;
+ const itemPageRoute = getItemPageRoute(itemRD.payload);
+
+ const isValidTab = !givenTab || tabsRD.payload.page.some((tab) => {
+ const shortnameSplit = tab.shortname.split('::');
+ const shortname = shortnameSplit[shortnameSplit.length - 1];
+ return shortname === givenTab;
+ });
+
+ const mainTab = tabsRD.payload.page.length === 1
+ ? tabsRD.payload.page[0]
+ : tabsRD.payload.page.find(tab => !tab.leading);
+
+ if (!isValidTab) {
+ // If wrong tab is given redirect to 404 page
+ router.navigateByUrl(getPageNotFoundRoute(), { skipLocationChange: true, replaceUrl: false });
+ } else if (givenTab === mainTab.shortname) {
+ if (isPlatformServer(platformId)) {
+ // If first tab is given redirect to root item page
+ hardRedirectService.redirect(itemPageRoute, 302);
+ } else {
+ router.navigateByUrl(itemPageRoute);
+ }
+ }
+ }
+ return tabsRD;
+ }),
+ );
+ } else {
+ return createFailedRemoteDataObject$>(itemRD?.errorMessage, itemRD?.statusCode, itemRD?.timeCompleted);
+ }
+ }),
+ );
+};
diff --git a/src/app/item-page/item-page-routes.ts b/src/app/item-page/item-page-routes.ts
index d6a6ab20ec1..9abf2e2b0eb 100644
--- a/src/app/item-page/item-page-routes.ts
+++ b/src/app/item-page/item-page-routes.ts
@@ -10,6 +10,7 @@ import { MenuRoute } from '../shared/menu/menu-route.model';
import { viewTrackerResolver } from '../statistics/angulartics/dspace/view-tracker.resolver';
import { BitstreamRequestACopyPageComponent } from './bitstreams/request-a-copy/bitstream-request-a-copy-page.component';
import { UploadBitstreamComponent } from './bitstreams/upload/upload-bitstream.component';
+import { dynamicItemPageTabResolver } from './dynamic-item-page-tab.resolver';
import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
import { itemPageResolver } from './item-page.resolver';
import {
@@ -60,6 +61,7 @@ export const ROUTES: Route[] = [
menuRoute: MenuRoute.ITEM_PAGE,
},
resolve: {
+ tabs: dynamicItemPageTabResolver,
tracking: viewTrackerResolver,
},
},
@@ -107,6 +109,16 @@ export const ROUTES: Route[] = [
menu: accessTokenResolver,
},
},
+ {
+ path: ':tab',
+ component: ThemedItemPageComponent,
+ resolve: {
+ tabs: dynamicItemPageTabResolver,
+ },
+ data: {
+ menuRoute: MenuRoute.ITEM_PAGE,
+ },
+ },
],
},
];
diff --git a/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.html b/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.html
index 4a7da94554a..51995aecb2f 100644
--- a/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.html
+++ b/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.html
@@ -20,7 +20,7 @@
}
- @if (showName || !showImage) {
+ @if ((showName || !showImage) && showUrl) {
+ @if ((itemRD$ | async)?.isLoading) {
+
+
diff --git a/src/app/dynamic-item-page/dynamic-item-page.component.scss b/src/app/dynamic-item-page/dynamic-item-page.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-item-page/dynamic-item-page.component.spec.ts b/src/app/dynamic-item-page/dynamic-item-page.component.spec.ts
new file mode 100644
index 00000000000..56fb8d53b97
--- /dev/null
+++ b/src/app/dynamic-item-page/dynamic-item-page.component.spec.ts
@@ -0,0 +1,125 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import {
+ createNoContentRemoteDataObject,
+ createPendingRemoteDataObject$,
+ createSuccessfulRemoteDataObject,
+ createSuccessfulRemoteDataObject$,
+} from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { AuthService } from '../core/auth/auth.service';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { ItemDataService } from '../core/data/item-data.service';
+import { Item } from '../core/shared/item.model';
+import { DynamicLayoutComponent } from '../dynamic-layout/dynamic-layout.component';
+import { ThemedItemAlertsComponent } from '../item-page/alerts/themed-item-alerts.component';
+import { createRelationshipsObservable } from '../item-page/simple/item-types/shared/item.component.spec';
+import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
+import { VarDirective } from '../shared/utils/var.directive';
+import { DynamicItemPageComponent } from './dynamic-item-page.component';
+
+const mockItem: Item = Object.assign(new Item(), {
+ bundles: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+ metadata: [],
+ relationships: createRelationshipsObservable(),
+});
+
+const authService = jasmine.createSpyObj('authService', {
+ isAuthenticated: of(true),
+ setRedirectUrl: {},
+});
+
+const authorizationService = jasmine.createSpyObj('AuthorizationDataService', {
+ isAuthorized: of(true),
+});
+
+describe('DynamicItemPageComponent', () => {
+ let component: DynamicItemPageComponent;
+ let fixture: ComponentFixture
+
+ @if (!((itemRD$ | async)?.payload?.isWithdrawn) || (isAdmin$|async)) {
+
+ @if (showContextMenu) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.scss b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.spec.ts
new file mode 100644
index 00000000000..c4674ec5d9e
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-leading/dynamic-layout-leading.component.spec.ts
@@ -0,0 +1,29 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+
+import { DynamicLayoutMatrixComponent } from '../dynamic-layout-matrix/dynamic-layout-matrix.component';
+import { DynamicLayoutLeadingComponent } from './dynamic-layout-leading.component';
+
+describe('DynamicLayoutLeadingComponent', () => {
+ let component: DynamicLayoutLeadingComponent;
+ let fixture: ComponentFixture
+
+ }
+
+ @if (tab) {
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.scss b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.spec.ts
new file mode 100644
index 00000000000..b051636a852
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-horizontal/dynamic-layout-horizontal.component.spec.ts
@@ -0,0 +1,49 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { MockActivatedRoute } from '@dspace/core/testing/active-router.mock';
+import { loaderTabs } from '@dspace/core/testing/layout-tab.mocks';
+import { RouterMock } from '@dspace/core/testing/router.mock';
+
+import { DynamicLayoutMatrixComponent } from '../../dynamic-layout-matrix/dynamic-layout-matrix.component';
+import { DynamicLayoutHorizontalComponent } from './dynamic-layout-horizontal.component';
+import { DynamicLayoutNavbarComponent } from './dynamic-layout-navbar/dynamic-layout-navbar.component';
+
+describe('DynamicLayoutHorizontalComponent', () => {
+ let component: DynamicLayoutHorizontalComponent;
+ let fixture: ComponentFixture
+
+
+ @if (showContextMenu) {
+
+
+
+ }
+ @if (selectedTab$.value) {
+
+ @if ((hasSidebar$ | async) && (isSideBarHidden$ | async) !== true && showNav) {
+
+ }
+
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.scss b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.scss
new file mode 100644
index 00000000000..3e07d1bd585
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.scss
@@ -0,0 +1,116 @@
+.wrapper {
+ margin-bottom: -16px;
+}
+
+.navbar {
+ padding: 15px 10px;
+ background: #fff;
+ border: none;
+ border-radius: 0;
+ margin-bottom: 40px;
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-btn {
+ box-shadow: none;
+ outline: none !important;
+ border: none;
+}
+
+#sidebar {
+ min-height: calc(100vh - 500px);
+ width: var(--ds-dynamic-layout-sidebar-width);
+ color: var(--ds-dynamic-layout-sidebar-link-color-active);
+ background: var(--ds-dynamic-layout-sidebar-background-color);
+ transition: all 0.3s;
+ position: relative;
+ &.active{
+ /*margin-left: var(--ds-dynamic-layout-sidebar-width);*/
+ .sidebar-menu{
+ margin-right: -50px;
+ }
+ }
+ ul.components{
+ padding: 0;
+ }
+ ul{
+ li{
+ font-size: 16px;
+ >ul{
+ margin-left: 10px;
+ li{
+ font-size: 14px;
+ }
+ }
+ a{
+ padding: 10px 0;
+ display: block;
+ color: var(--ds-dynamic-layout-sidebar-link-color);
+ border-bottom: 1px solid rgba(0,0,0,.1);
+ &:hover{
+ color: var(--ds-dynamic-layout-sidebar-link-color);
+ }
+ }
+ &.active{
+ > a{
+ background: transparent;
+ color: var(--ds-dynamic-layout-sidebar-link-color-active);
+ }
+ }
+ }
+ }
+}
+
+
+.sidebar-menu{
+ display: inline-block;
+ position: absolute;
+ top: 20px;
+ left: calc(0px - var(--ds-dynamic-layout-sidebar-entry-width)/2);
+ // margin-right: -50px;
+ @include transition(.3s);
+ .btn{
+ width: var(--ds-dynamic-layout-sidebar-entry-width);
+ height: var(--ds-dynamic-layout-sidebar-entry-height);
+ border-radius: 50%;
+ &.btn-primary{
+ background: var(--ds-dynamic-layout-sidebar-background-color);
+ border-color: var(--ds-dynamic-layout-sidebar-border-color);
+ &:hover, &:focus{
+ background: var(--ds-dynamic-layout-sidebar-hover-focus-background-color) !important;
+ border-color: var(--ds-dynamic-layout-sidebar-hover-focus-border-color) !important;
+ }
+ }
+ }
+}
+
+.menu-toggle {
+ position: absolute;
+ top: 0;
+ left: -30px;
+ z-index: 1000;
+ opacity: 0.5;
+}
+
+.menu-toggle:hover {
+ opacity: 1;
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+a[data-toggle="collapse"] {
+ position: relative;
+}
+
+.dropdown-toggle::after {
+ display: block;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+}
+
+.btn-arrow{
+ background: #207698;
+ color: #fff;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.spec.ts
new file mode 100644
index 00000000000..ca4c16c3909
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-sidebar/dynamic-layout-sidebar.component.spec.ts
@@ -0,0 +1,122 @@
+import {
+ DebugElement,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ tabPersonBibliometrics,
+ tabPersonBiography,
+ tabPersonProfile,
+} from '@dspace/core/testing/layout-tab.mocks';
+import { BehaviorSubject } from 'rxjs';
+
+import { DynamicLayoutSidebarItemComponent } from '../../shared/sidebar-item/dynamic-layout-sidebar-item.component';
+import { DynamicLayoutSidebarComponent } from './dynamic-layout-sidebar.component';
+
+describe('DynamicLayoutSidebarComponent', () => {
+ let component: DynamicLayoutSidebarComponent;
+ let fixture: ComponentFixture
+
+ @if ((hasSidebar$ | async)) {
+
+
+
+ @if ((isXsOrSm$ | async) !== true) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.scss b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.spec.ts
new file mode 100644
index 00000000000..c3406c1cc19
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-loader/dynamic-layout-vertical/dynamic-layout-vertical.component.spec.ts
@@ -0,0 +1,52 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+ ActivatedRoute,
+ Router,
+} from '@angular/router';
+import { MockActivatedRoute } from '@dspace/core/testing/active-router.mock';
+import { HostWindowServiceStub } from '@dspace/core/testing/host-window-service.stub';
+import { loaderTabs } from '@dspace/core/testing/layout-tab.mocks';
+import { RouterMock } from '@dspace/core/testing/router.mock';
+
+import { HostWindowService } from '../../../shared/host-window.service';
+import { DynamicLayoutMatrixComponent } from '../../dynamic-layout-matrix/dynamic-layout-matrix.component';
+import { DynamicLayoutNavbarComponent } from '../dynamic-layout-horizontal/dynamic-layout-navbar/dynamic-layout-navbar.component';
+import { DynamicLayoutSidebarComponent } from './dynamic-layout-sidebar/dynamic-layout-sidebar.component';
+import { DynamicLayoutVerticalComponent } from './dynamic-layout-vertical.component';
+
+describe('DynamicLayoutVerticalComponent', () => {
+ let component: DynamicLayoutVerticalComponent;
+ let fixture: ComponentFixture
+
+ @if (showContextMenu) {
+
+
+ }
+
+ @if ((isXsOrSm$ | async)) {
+
+
+ }
+
+
+ }
+
+
+
+ @if (owningCollection) {
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.spec.ts
new file mode 100644
index 00000000000..35ddeec06b9
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/dynamic-layout-collection-box/dynamic-layout-collection-box.component.spec.ts
@@ -0,0 +1,165 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { CollectionDataService } from '@dspace/core/data/collection-data.service';
+import {
+ buildPaginatedList,
+ PaginatedList,
+} from '@dspace/core/data/paginated-list.model';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { Collection } from '@dspace/core/shared/collection.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { PageInfo } from '@dspace/core/shared/page-info.model';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { environment } from '../../../../../../environments/environment';
+import { getMockThemeService } from '../../../../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { DynamicLayoutCollectionBoxComponent } from './dynamic-layout-collection-box.component';
+
+describe('DynamicLayoutCollectionBoxComponent', () => {
+ let component: DynamicLayoutCollectionBoxComponent;
+ let fixture: ComponentFixture
+
+ }
+ @if ((mappedCollections?.length ?? 0) > 0) {
+ {{ 'dynamic-layout.rendering.collections.owning-collection.label' | translate }}
+
+
+
+ }
+ {{ 'dynamic-layout.rendering.collections.mapped-collection.label' | translate }}
+
+ @for (mappedCollection of mappedCollections; track mappedCollection; let last = $last) {
+
+
+ {{ mappedCollection.firstMetadataValue('dc.title') }}
+ @if (isInline && !last) {
+ •
+ }
+
+ }
+ @if (isLoading$ | async) {
+
+ {{'dynamic-layout.rendering.collections.loading' | translate}}
+
+ }
+ @if ((isLoading$ | async) !== true && (hasMore$ | async) === true) {
+
+ }
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.spec.ts
new file mode 100644
index 00000000000..667ce528691
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/iiif-viewer/dynamic-layout-iiif-viewer-box.component.spec.ts
@@ -0,0 +1,100 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { DynamicLayoutBox } from '@dspace/core/layout/models/box.model';
+import { RouteService } from '@dspace/core/services/route.service';
+import { Item } from '@dspace/core/shared/item.model';
+import { MockActivatedRoute } from '@dspace/core/testing/active-router.mock';
+import { AuthServiceMock } from '@dspace/core/testing/auth.service.mock';
+import { routeServiceStub } from '@dspace/core/testing/route-service.stub';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { MiradorViewerComponent } from '../../../../../item-page/mirador-viewer/mirador-viewer.component';
+import { DynamicLayoutIiifViewerBoxComponent } from './dynamic-layout-iiif-viewer-box.component';
+
+describe('DynamicLayoutIiifViewerBoxComponent', () => {
+ let component: DynamicLayoutIiifViewerBoxComponent;
+ let fixture: ComponentFixture
+
+ @for (row of metadataBoxConfiguration?.rows; track row) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.scss
new file mode 100644
index 00000000000..87bdfb51bbb
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.scss
@@ -0,0 +1,7 @@
+// :host{
+// display:flex;
+// // flex:1;
+// }
+// ngb-accordion{
+// flex-grow:1;
+// }
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.spec.ts
new file mode 100644
index 00000000000..a99821415f4
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/dynamic-layout-metadata-box.component.spec.ts
@@ -0,0 +1,75 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Item } from '@dspace/core/shared/item.model';
+import { boxMetadata } from '@dspace/core/testing/box.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { DynamicLayoutMetadataBoxComponent } from './dynamic-layout-metadata-box.component';
+import { TextComponent } from './rendering-types/text/text.component';
+import { RowComponent } from './row/row.component';
+
+describe('DynamicLayoutMetadataBoxComponent', () => {
+ let component: DynamicLayoutMetadataBoxComponent;
+ let fixture: ComponentFixture
+
+ }
+
+ @for (attachment of (bitstreams$ | async); track attachment; let last = $last) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.scss
new file mode 100644
index 00000000000..2cece24b0f7
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.scss
@@ -0,0 +1,5 @@
+
+
+.hint {
+ cursor: pointer;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.spec.ts
new file mode 100644
index 00000000000..378a8a8366f
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/advanced-attachment.component.spec.ts
@@ -0,0 +1,372 @@
+import {
+ DebugElement,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ fakeAsync,
+ flush,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { attachmentsMock } from '@dspace/core/testing/attachments.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import {
+ Observable,
+ of,
+} from 'rxjs';
+
+import { environment } from '../../../../../../../../environments/environment';
+import { ThemedFileDownloadLinkComponent } from '../../../../../../../shared/file-download-link/themed-file-download-link.component';
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { FileSizePipe } from '../../../../../../../shared/utils/file-size-pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { AdvancedAttachmentComponent } from './advanced-attachment.component';
+import { BitstreamAttachmentComponent } from './bitstream-attachment/bitstream-attachment.component';
+
+describe('AdvancedAttachmentComponent', () => {
+ let component: AdvancedAttachmentComponent;
+ let fixture: ComponentFixture
+
+
+ }
+
+
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.scss
new file mode 100644
index 00000000000..e2c8b57a933
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.scss
@@ -0,0 +1,29 @@
+.thumbnail-placeholder {
+ border: var(--ds-thumbnail-placeholder-border);
+ color: var(--ds-thumbnail-placeholder-color);
+ font-weight: var(--ds-advanced-attachment-thumbnail-placeholder-font-weight);
+}
+
+.divider {
+ border-left: 1px solid var(--bs-gray-200);
+}
+
+.card-container {
+ background-color: var(--bs-gray-100);
+ background-clip: border-box;
+ border-radius: 0.25rem;
+ padding: 1rem;
+}
+
+i.custom-icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ background-size: contain;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.thumbnail-wrapper {
+ min-width: 120px;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.spec.ts
new file mode 100644
index 00000000000..45131437f4e
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/bitstream-attachment.component.spec.ts
@@ -0,0 +1,74 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { environment } from '../../../../../../../../../environments/environment';
+import { TruncatableComponent } from '../../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { ThemedThumbnailComponent } from '../../../../../../../../thumbnail/themed-thumbnail.component';
+import { BitstreamRenderingDirective } from '../../bitstream-rendering.directive';
+import { AttachmentRenderComponent } from './attachment-render/attachment-render.component';
+import { BitstreamAttachmentComponent } from './bitstream-attachment.component';
+
+describe('BitstreamAttachmentComponent', () => {
+ let component: BitstreamAttachmentComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+ @for (renderingType of allAttachmentProviders; track $index) {
+
+
+
+ }
+
+
+
+
+ @for (attachmentConf of envMetadata; track $index) {
+ @if (attachment.firstMetadataValue(attachmentConf.name) || attachmentConf.type === AdvancedAttachmentElementType.Attribute) {
+
+
+
+ {{ 'dynamic-layout.advanced-attachment.' + attachmentConf.name | translate }}
+
+ @if (attachmentConf.type === AdvancedAttachmentElementType.Metadata) {
+
+ @if(!attachmentConf.truncatable && attachmentConf.name === attachmentTypeMetadata) {
+
+
+ {{attachment.firstMetadataValue(attachmentConf.name)}}
+
+
+ }
+ }
+ @if (attachmentConf.type === AdvancedAttachmentElementType.Attribute) {
+ @if (attachmentConf.name === 'format') {
+ @if ((bitstreamFormat$ | async) === null || (bitstreamFormat$ | async) === undefined) {
+
+ }
+ }
+
+ + {{attachment.firstMetadataValue(attachmentConf.name) | titlecase}} +
+ } + + @if(!attachmentConf.truncatable && attachmentConf.name !== attachmentTypeMetadata) { ++ {{attachment.firstMetadataValue(attachmentConf.name)}} +
+ } + + @if (attachmentConf.truncatable) { ++ {{'dynamic-layout.advanced-attachment.label.not-present' | translate}} +
+ } @else { +{{(bitstreamFormat$ | async)}}
+ } + } + + @if (attachmentConf.name === 'size' && bitstreamSize) { +{{bitstreamSize | dsFileSize}}
+ } + + @if (attachmentConf.name === 'checksum') { + @if (checksumInfo?.value === null || checksumInfo?.value === undefined) { ++ {{'dynamic-layout.advanced-attachment.label.not-present' | translate}} +
+ } @else { +({{checksumInfo.checkSumAlgorithm}}):{{ checksumInfo.value }}
+ } + } + } + +
+ @for (attachment of (bitstreams$ | async); track attachment) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.spec.ts
new file mode 100644
index 00000000000..1520af17354
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/attachment/attachment.component.spec.ts
@@ -0,0 +1,432 @@
+import {
+ DebugElement,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ fakeAsync,
+ flush,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import { RemoteData } from '@dspace/core/data/remote-data';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { LocaleService } from '@dspace/core/locale/locale.service';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { attachmentsMock } from '@dspace/core/testing/attachments.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import {
+ Observable,
+ of,
+} from 'rxjs';
+
+import { environment } from '../../../../../../../../environments/environment';
+import { ThemedFileDownloadLinkComponent } from '../../../../../../../shared/file-download-link/themed-file-download-link.component';
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { FileSizePipe } from '../../../../../../../shared/utils/file-size-pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { AttachmentComponent } from './attachment.component';
+
+describe('AttachmentComponent', () => {
+ let component: AttachmentComponent;
+ let fixture: ComponentFixture
+
+
+ @if (fileName(attachment)) {
+ @if (getType(attachment)) {
+ {{getType(attachment) | titlecase}}:
+ }{{fileName(attachment)}} ({{getSize(attachment) | dsFileSize}})
+ }
+
+
+ @if (getDescription(attachment)) {
+ {{getDescription(attachment)}}
+ }
+
+
+
+ }
+ @if (canViewMore) {
+
+
+
+
+ }
+
+
+ {{ metadataValue.value | toDate:'locale' }}
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.spec.ts
new file mode 100644
index 00000000000..7bfe35e86ad
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/date/date.component.spec.ts
@@ -0,0 +1,106 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { LocaleService } from '@dspace/core/locale/locale.service';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { DateComponent } from './date.component';
+
+describe('DateComponent', () => {
+ let component: DateComponent;
+ let fixture: ComponentFixture
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.scss
new file mode 100644
index 00000000000..b92a52cd35d
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.scss
@@ -0,0 +1,4 @@
+.orcid-icon {
+ height: 1.2rem;
+ padding-left: 0.3rem;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.spec.ts
new file mode 100644
index 00000000000..5d1f821c834
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/dynamicref/dynamicref.component.spec.ts
@@ -0,0 +1,140 @@
+import {
+ ComponentFixture,
+ fakeAsync,
+ flush,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ItemDataService } from '@dspace/core/data/item-data.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { MetadataLinkViewComponent } from '../../../../../../../shared/metadata-link-view/metadata-link-view.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { DynamicrefComponent } from './dynamicref.component';
+
+describe('DynamicrefComponent', () => {
+ let component: DynamicrefComponent;
+ let fixture: ComponentFixture
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.spec.ts
new file mode 100644
index 00000000000..474b4feda19
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/html/html.component.spec.ts
@@ -0,0 +1,103 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { HtmlComponent } from './html.component';
+
+describe('HtmlComponent', () => {
+ let component: HtmlComponent;
+ let fixture: ComponentFixture+ * @param text + */ + processHtml(text: string): string { + const htmlTagRegex = /<.*?>/; + return htmlTagRegex.test(text) + ? text.replace(/\n/g, '
') + : text; + } + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html new file mode 100644 index 00000000000..ff164876374 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.html @@ -0,0 +1,12 @@ +
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.scss
new file mode 100644
index 00000000000..f1496a808b2
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-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;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.spec.ts
new file mode 100644
index 00000000000..83dfb7d76ff
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/identifier/identifier.component.spec.ts
@@ -0,0 +1,333 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { environment } from '../../../../../../../../environments/environment';
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { ResolverStrategyService } from '../../../../../../services/resolver-strategy.service';
+import { FieldRenderingType } from '../field-rendering-type';
+import { IdentifierComponent } from './identifier.component';
+
+describe('IdentifierComponent', () => {
+ let component: IdentifierComponent;
+ let fixture: ComponentFixture
+ @if (subTypeIcon && iconPosition !== iconPositionEnum.NONE) {
+
+ ![source-icon]()
+
+ }
+
+ {{ identifier?.text }}
+
+
+
+
+
+
+ {{ link.text }}
+
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.ts
new file mode 100644
index 00000000000..4441c220f54
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.ts
@@ -0,0 +1,90 @@
+import { NgClass } from '@angular/common';
+import {
+ Component,
+ Inject,
+ OnInit,
+} from '@angular/core';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { isEmpty } from '@dspace/shared/utils/empty.util';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataLinkValue } from '../../../../../../models/dynamic-layout-metadata-link-value.model';
+import { FieldRenderingType } from '../field-rendering-type';
+import { metadataBoxFieldRendering } from '../metadata-box.decorator';
+import { RenderingTypeValueDirective } from '../rendering-type-value.directive';
+
+/**
+ * This component renders the links metadata fields.
+ * The metadata value is used for href and text
+ */
+@metadataBoxFieldRendering(FieldRenderingType.AUTHORITYLINK)
+@Component({
+ // eslint-disable-next-line @angular-eslint/component-selector
+ selector: 'span[ds-link-authority]',
+ templateUrl: './link-authority.component.html',
+ styleUrls: ['./link-authority.component.scss'],
+ imports: [
+ NgClass,
+ ],
+})
+export class LinkAuthorityComponent extends RenderingTypeValueDirective implements OnInit {
+
+ /**
+ * The link to render
+ */
+ link: MetadataLinkValue;
+ iconStyle: string;
+
+ defaultIcon = 'fa fa-external-link-square';
+
+
+ constructor(
+ @Inject('fieldProvider') public fieldProvider: LayoutField,
+ @Inject('itemProvider') public itemProvider: Item,
+ @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+ @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+ @Inject('tabNameProvider') public tabNameProvider: string,
+ protected translateService: TranslateService,
+ ) {
+ super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, tabNameProvider, translateService);
+ }
+
+ ngOnInit(): void {
+ this.link = this.getLinkFromValue();
+ this.iconStyle = this.getWebsiteIcon();
+ }
+
+ /**
+ * Get the link value to render
+ */
+ getLinkFromValue(): MetadataLinkValue {
+ return {
+ href: this.metadataValue.authority,
+ text: this.metadataValue.value,
+ };
+ }
+
+ getWebsiteIcon(): string {
+ let iconStyle = '';
+ const siteUrl = this.metadataValue.authority;
+ if (isEmpty(siteUrl)) {
+ return iconStyle;
+ }
+
+ const hostname = new URL(siteUrl)?.hostname?.replace(/^www\./, '') ||
+ siteUrl.toLowerCase();
+
+ if (/^(linkedin\.com|lnkd\.in)$/.test(hostname)) {
+ iconStyle = 'fab fa-linkedin';
+ } else if (/^(twitter\.com|x\.com|t\.co)$/.test(hostname)) {
+ iconStyle = 'fa-brands fa-x-twitter';
+ } else if (/^(instagram\.com|instagr\.am)$/.test(hostname)) {
+ iconStyle = 'fab fa-instagram';
+ } else if (/^(facebook\.com|fb\.com)$/.test(hostname)) {
+ iconStyle = 'fab fa-facebook';
+ }
+ return iconStyle;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.html
new file mode 100644
index 00000000000..87862562d80
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.html
@@ -0,0 +1,9 @@
+
+ @if (isLink) {
+
+ {{ link.text }}
+
+ } @else {
+ {{ link.text }}
+ }
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.spec.ts
new file mode 100644
index 00000000000..8a4646f2e88
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/link/link.component.spec.ts
@@ -0,0 +1,284 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { LinkComponent } from './link.component';
+
+describe('LinkComponent', () => {
+ let component: LinkComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.spec.ts
new file mode 100644
index 00000000000..21d5e484469
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longhtml/longhtml.component.spec.ts
@@ -0,0 +1,104 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { LonghtmlComponent } from './longhtml.component';
+
+describe('LonghtmlComponent', () => {
+ let component: LonghtmlComponent;
+ let fixture: ComponentFixture
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.spec.ts
new file mode 100644
index 00000000000..ccfd26550bc
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.spec.ts
@@ -0,0 +1,101 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
+import { LongtextComponent } from './longtext.component';
+
+describe('LongtextComponent', () => {
+ let component: LongtextComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+/g)?.length; + + expect(breaklineCount).toBe(3); + expect(formattedText).toContain('<b>Lorem Ipsum</b>'); + + done(); + }); + + it('check value style', (done) => { + const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value')); + expect(spanValueFound.length).toBe(1); + done(); + }); + +}); diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts new file mode 100644 index 00000000000..f0e7213a02f --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/longtext/longtext.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; + +import { TruncatableComponent } from '../../../../../../../shared/truncatable/truncatable.component'; +import { TruncatablePartComponent } from '../../../../../../../shared/truncatable/truncatable-part/truncatable-part.component'; +import { EscapeHtmlPipe } from '../../../../../../../shared/utils/escape-html.pipe'; +import { FieldRenderingType } from '../field-rendering-type'; +import { metadataBoxFieldRendering } from '../metadata-box.decorator'; +import { RenderingTypeValueDirective } from '../rendering-type-value.directive'; + +/** + * This component renders the longtext metadata fields + */ +@metadataBoxFieldRendering(FieldRenderingType.LONGTEXT) +@Component({ + // eslint-disable-next-line @angular-eslint/component-selector + selector: 'div[ds-longtext]', + templateUrl: './longtext.component.html', + styleUrls: ['./longtext.component.scss'], + imports: [ + EscapeHtmlPipe, + TruncatableComponent, + TruncatablePartComponent, + ], +}) +export class LongtextComponent extends RenderingTypeValueDirective { + + /** + * Id for truncable component + */ + truncableId = `${this.item.id}_${this.field.metadata}`; + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts new file mode 100644 index 00000000000..4c57aa08271 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadata-box.decorator.ts @@ -0,0 +1,67 @@ +import { GenericConstructor } from '@dspace/core/shared/generic-constructor'; +import { hasValue } from '@dspace/shared/utils/empty.util'; + +import { METADATA_BOX_FIELD_RENDERING_MAP } from '../../../../../../../decorator-registries/metadata-box-field-rendering-registry'; +import { getMatch } from '../../../../../../shared/object-collection/shared/listable-object/listable-object.decorator'; +import { FieldRenderingType } from './field-rendering-type'; +import { RenderingTypeDirective } from './rendering-type.directive'; + +/** + * Whether a rendering type renders all metadata values in a single structured render (`true`), + * or renders each metadata value individually (`false`). + */ +export const DEFAULT_METADATA_BOX_STRUCTURED = false; + +/** + * Marker decorator used to register a component as the renderer for a given {@link FieldRenderingType}. + * + * The actual registry ({@link METADATA_BOX_FIELD_RENDERING_MAP}) is generated at build time by + * `scripts/generate-decorator-registries.ts` from these decorator usages, so this function is a no-op + * at runtime and only serves as metadata for the generator. + * + * @param fieldRenderingType the field rendering type the decorated component renders + * @param structured whether the component renders all metadata values in a single structured render + */ +export function metadataBoxFieldRendering(fieldRenderingType: FieldRenderingType, structured: boolean = DEFAULT_METADATA_BOX_STRUCTURED) { + return function decorator(component: GenericConstructor
+ @for (index of componentsToBeRenderedMap.keys(); track index) {
+
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.spec.ts
new file mode 100644
index 00000000000..a65a9ae2450
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/inline/inline.component.spec.ts
@@ -0,0 +1,141 @@
+import {
+ ChangeDetectionStrategy,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { ToDatePipe } from '../../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { getMockThemeService } from '../../../../../../../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../../../../../../shared/theme-support/theme.service';
+import { MetadataRenderComponent } from '../../../row/metadata-container/metadata-render/metadata-render.component';
+import { TextComponent } from '../../text/text.component';
+import { InlineComponent } from './inline.component';
+
+describe('InlineComponent', () => {
+ let component: InlineComponent;
+ let fixture: ComponentFixture
+ @defer {
+
+
+ } @placeholder {
+
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.scss
new file mode 100644
index 00000000000..194a8c54de3
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.scss
@@ -0,0 +1,8 @@
+.openstreetmap-container {
+ min-height: 300px;
+ width: 100%;
+}
+
+.map-placeholder {
+ min-height: 300px;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.spec.ts
new file mode 100644
index 00000000000..9cb064a6c61
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/openstreetmap/openstreetmap.component.spec.ts
@@ -0,0 +1,131 @@
+import {
+ ChangeDetectionStrategy,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { OpenstreetmapComponent } from './openstreetmap.component';
+
+describe('OpenstreetmapComponent', () => {
+ let component: OpenstreetmapComponent;
+ let fixture: ComponentFixture
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.scss
new file mode 100644
index 00000000000..a072d5728a3
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.scss
@@ -0,0 +1,14 @@
+.table-container {
+ margin-left: -0.75rem !important;
+ margin-right: -0.75rem !important;
+}
+
+td {
+ word-break: auto-phrase;
+}
+
+:host {
+ .auto-phrase {
+ word-break: auto-phrase;
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.spec.ts
new file mode 100644
index 00000000000..710ee0cf3c3
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/metadataGroup/table/table.component.spec.ts
@@ -0,0 +1,149 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { ToDatePipe } from '../../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { getMockThemeService } from '../../../../../../../../shared/theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../../../../../../shared/theme-support/theme.service';
+import { MetadataRenderComponent } from '../../../row/metadata-container/metadata-render/metadata-render.component';
+import { FieldRenderingType } from '../../field-rendering-type';
+import { TextComponent } from '../../text/text.component';
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+ let component: TableComponent;
+ let fixture: ComponentFixture
+
+
+
+ | + + | + } +
|
+ |
+ }
+
+
+
+ @if ((orcidUrl$ | async)) {
+
+ {{ metadataValue.value }}
+
+ } @else {
+ {{ metadataValue.value }}
+ }
+
+
+ @if (hasOrcidBadge()) {
+ 
+ }
+
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.scss
new file mode 100644
index 00000000000..b92a52cd35d
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.scss
@@ -0,0 +1,4 @@
+.orcid-icon {
+ height: 1.2rem;
+ padding-left: 0.3rem;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.spec.ts
new file mode 100644
index 00000000000..120c2c4ddd6
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.spec.ts
@@ -0,0 +1,124 @@
+import {
+ ComponentFixture,
+ fakeAsync,
+ TestBed,
+ tick,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { FieldRenderingType } from '../field-rendering-type';
+import { OrcidComponent } from './orcid.component';
+
+describe('OrcidComponent', () => {
+ let component: OrcidComponent;
+ let fixture: ComponentFixture
+ }
+
+
+
+ @defer {
+
+
+ }
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.scss
new file mode 100644
index 00000000000..fe8bbc5f4f0
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.scss
@@ -0,0 +1,4 @@
+:host {
+ display: block;
+ width: 100%;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.spec.ts
new file mode 100644
index 00000000000..04c01091fc9
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/osmap/osmap.component.spec.ts
@@ -0,0 +1,165 @@
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { GeospatialMapComponent } from '../../../../../../../shared/geospatial-map/geospatial-map.component';
+import { OsmapComponent } from './osmap.component';
+
+describe('OsmapComponent', () => {
+ let component: OsmapComponent;
+ let fixture: ComponentFixture+ * @param text + */ + formatText(text: string): string { + const newlineRegex = /\n/g; + return text.replace(/>/g, '>').replace(/'); + } + +} diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts new file mode 100644 index 00000000000..b1212643013 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/rendering-type.directive.ts @@ -0,0 +1,113 @@ +import { + Directive, + Input, +} from '@angular/core'; +import { LayoutField } from '@dspace/core/layout/models/box.model'; +import { Item } from '@dspace/core/shared/item.model'; +import { MetadataValue } from '@dspace/core/shared/metadata.models'; +import { hasValue } from '@dspace/shared/utils/empty.util'; +import { TranslateService } from '@ngx-translate/core'; + + +/** + * This class defines the basic model to extends for create a new + * field render component + */ +@Directive() +export abstract class RenderingTypeDirective { + + /** + * Whether this rendering type handles all metadata values in a single structured render, + * or renders each metadata value individually. + */ + static structured = false; + + /** + * Current DSpace item + */ + @Input() item: Item; + /** + * Current field + */ + @Input() field: LayoutField; + /** + * The rendering sub-type, if exists + * e.g. for type identifier.doi this property + * contains the sub-type doi + */ + @Input() renderingSubType: string; + + /** + * Returns the value of the metadata to show + */ + @Input() nested: boolean; + + @Input() indexToBeRendered; + + /** + * The tab name + */ + @Input() tabName: string; + + /** + * The prefix used for box field label's i18n key + */ + fieldI18nPrefix = 'layout.field.label.'; + + constructor(protected translateService: TranslateService) { + } + + /** + * Returns all metadata values in the item + */ + get metadataValues(): string[] { + return this.field.metadata ? this.item.allMetadataValues(this.field.metadata) : []; + } + + get metadata(): MetadataValue[] { + return this.field.metadata ? this.item.allMetadata(this.field.metadata) : []; + } + + /** + * Returns true if the field has label, false otherwise + */ + get hasLabel(): boolean { + return hasValue(this.field.label); + } + + /** + * Returns a string representing the label of field if exists + */ + get label(): string { + const fieldLabelI18nKey = this.fieldI18nPrefix + this.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(this.field.label); + } else { + return header; + } + } + + /** + * Returns a string representing the style of field container if exists + */ + get containerStyle(): string { + return this.field.style; + } + + /** + * Returns a string representing the style of field label if exists + */ + get labelStyle(): string { + return this.field.styleLabel; + } + + /** + * Returns a string representing the style of field value if exists + */ + get valueStyle(): string { + return this.field.styleValue || ''; + } +} + diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html new file mode 100644 index 00000000000..1d7c194a0a4 --- /dev/null +++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.html @@ -0,0 +1,9 @@ +
+ @if (chips && chips.hasItems()) {
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.scss
new file mode 100644
index 00000000000..2887ae0e104
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.scss
@@ -0,0 +1,3 @@
+:host ::ng-deep p {
+ color: #fff;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.spec.ts
new file mode 100644
index 00000000000..33b7ce0e918
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/tag/tag.component.spec.ts
@@ -0,0 +1,102 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { FieldRenderingType } from '../field-rendering-type';
+import { TagComponent } from './tag.component';
+
+describe('TagComponent', () => {
+ let component: TagComponent;
+ let fixture: ComponentFixture
+
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.spec.ts
new file mode 100644
index 00000000000..481ac387985
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/text/text.component.spec.ts
@@ -0,0 +1,97 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { TextComponent } from './text.component';
+
+describe('TextComponent', () => {
+ let component: TextComponent;
+ let fixture: ComponentFixture
+
+
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.scss
new file mode 100644
index 00000000000..dad678eac08
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.scss
@@ -0,0 +1,3 @@
+.thumbnail-container {
+ min-width: var(--ds-thumbnail-max-width);
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.spec.ts
new file mode 100644
index 00000000000..4b5859df3b6
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.spec.ts
@@ -0,0 +1,344 @@
+import {
+ DebugElement,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ fakeAsync,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import { Item } from '@dspace/core/shared/item.model';
+import {
+ bitstreamOrignialWithMetadata,
+ bitstreamWithoutThumbnail,
+ bitstreamWithThumbnail,
+ bitstreamWithThumbnailWithMetadata,
+ mockThumbnail,
+ mockThumbnailWithType,
+} from '@dspace/core/testing/bitstreams.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import {
+ createSuccessfulRemoteDataObject,
+ createSuccessfulRemoteDataObject$,
+} from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { ThemedThumbnailComponent } from '../../../../../../../thumbnail/themed-thumbnail.component';
+import { FieldRenderingType } from '../field-rendering-type';
+import { ThumbnailRenderingComponent } from './thumbnail.component';
+import { ThumbnailService } from './thumbnail.service';
+
+describe('', () => {
+ let component: ThumbnailRenderingComponent;
+ let fixture: ComponentFixture
+ @if (isMetadataLink !== true) {
+
+ {{ value$ | async }}
+
+ } @else {
+
+ {{ value$ | async }}
+
+ }
+
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.spec.ts
new file mode 100644
index 00000000000..3da39e4ccc4
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/rendering-types/valuepair/valuepair.component.spec.ts
@@ -0,0 +1,264 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+import { AuthService } from '@dspace/core/auth/auth.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
+import { AuthServiceStub } from '@dspace/core/testing/auth-service.stub';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import {
+ EMPTY,
+ of,
+} from 'rxjs';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { ToDatePipe } from '../../../../../../../shared/access-control-form-container/access-control-array-form/to-date.pipe';
+import { ValuepairComponent } from './valuepair.component';
+
+const METADATA_KEY_1 = 'person.knowsLanguage';
+const METADATA_KEY_2 = 'dc.type';
+
+const VOCABULARY_NAME_1 = 'common_iso_languages';
+const VOCABULARY_NAME_2 = 'types';
+
+describe('ValuepairComponent', () => {
+
+ let component: ValuepairComponent;
+ let fixture: ComponentFixture
+
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.spec.ts
new file mode 100644
index 00000000000..a46212ec6d9
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-box-container/boxes/metadata/row/metadata-container/metadata-container.component.spec.ts
@@ -0,0 +1,359 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
+import { LayoutField } from '@dspace/core/layout/models/box.model';
+import { Bitstream } from '@dspace/core/shared/bitstream.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { boxMetadata } from '@dspace/core/testing/box.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+import { FieldRenderingType } from '../../rendering-types/field-rendering-type';
+import { TextComponent } from '../../rendering-types/text/text.component';
+import { MetadataContainerComponent } from './metadata-container.component';
+import { MetadataRenderComponent } from './metadata-render/metadata-render.component';
+
+describe('MetadataContainerComponent', () => {
+ let component: MetadataContainerComponent;
+ let fixture: ComponentFixture
+ @if (hasLabel) {
+
+
+ }
+ @if (!isStructured) {
+
+
+ @for (metadataValue of metadataValues ; track metadataValue; let last = $last) {
+
+ }
+ @if (isStructured) {
+ ;
+ } + } +
+
+ }
+
+
+ }
+}
+@if (!componentLoader) {
+
+ @for (cell of row.cells; track cell) {
+
+ }
+}
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.scss b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.spec.ts b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.spec.ts
new file mode 100644
index 00000000000..4d559556eb3
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout-matrix/dynamic-layout-matrix.component.spec.ts
@@ -0,0 +1,72 @@
+import { DebugElement } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { leadingTabs } from '@dspace/core/testing/layout-tab.mocks';
+
+import { DynamicLayoutBoxContainerComponent } from './dynamic-layout-box-container/dynamic-layout-box-container.component';
+import { DynamicLayoutMatrixComponent } from './dynamic-layout-matrix.component';
+
+describe('DynamicLayoutMatrixComponent', () => {
+ let component: DynamicLayoutMatrixComponent;
+ let fixture: ComponentFixture
+ @for (box of cell.boxes; track box) {
+
+ }
+
+ @if (!!tabs$) {
+
+ @if ((hasLeadingTab$ | async) && !!leadingTabs && leadingTabs.length > 0) {
+
+ }
+
+ @if (!!tabs$) {
+
+ @if (!!loaderTabs && loaderTabs.length > 0) {
+
+ }
+
diff --git a/src/app/dynamic-layout/dynamic-layout.component.scss b/src/app/dynamic-layout/dynamic-layout.component.scss
new file mode 100644
index 00000000000..fdd2a48aa35
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout.component.scss
@@ -0,0 +1,3 @@
+.dynamic-layout {
+ margin-top: -1rem;
+}
diff --git a/src/app/dynamic-layout/dynamic-layout.component.spec.ts b/src/app/dynamic-layout/dynamic-layout.component.spec.ts
new file mode 100644
index 00000000000..0a2a1ff283a
--- /dev/null
+++ b/src/app/dynamic-layout/dynamic-layout.component.spec.ts
@@ -0,0 +1,134 @@
+import {
+ ChangeDetectorRef,
+ NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+ ComponentFixture,
+ fakeAsync,
+ TestBed,
+ tick,
+ waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import {
+ bothTabs,
+ leadingTabs,
+ loaderTabs,
+} from '@dspace/core/testing/layout-tab.mocks';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createPaginatedList } from '@dspace/core/testing/utils.test';
+import { createSuccessfulRemoteDataObject } from '@dspace/core/utilities/remote-data.utils';
+import {
+ TranslateLoader,
+ TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { TabDataService } from '../core/layout/tab-data.service';
+import { Item } from '../core/shared/item.model';
+import { DynamicLayoutComponent } from './dynamic-layout.component';
+import { DynamicLayoutLeadingComponent } from './dynamic-layout-leading/dynamic-layout-leading.component';
+import { DynamicLayoutLoaderComponent } from './dynamic-layout-loader/dynamic-layout-loader.component';
+
+const mockItem = Object.assign(new Item(), {
+ id: 'fake-id',
+ handle: 'fake/handle',
+ lastModified: '2018',
+ metadata: {
+ 'dc.title': [
+ {
+ language: null,
+ value: 'test',
+ },
+ ],
+ 'dspace.entity.type': [
+ {
+ language: null,
+ value: 'Person',
+ },
+ ],
+ },
+});
+
+const tabDataServiceMock: any = jasmine.createSpyObj('TabDataService', {
+ findByItem: of(leadingTabs),
+});
+const route = {
+ data: of({ tabs: createSuccessfulRemoteDataObject(createPaginatedList(leadingTabs)) }),
+};
+
+describe('DynamicLayoutComponent', () => {
+ let component: DynamicLayoutComponent;
+ let fixture: ComponentFixture
{{ showDisclaimer ? ('item.page.cc.license.disclaimer' | translate) : '' }}
diff --git a/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.ts b/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.ts
index 16d096ae389..f65551d241d 100644
--- a/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.ts
+++ b/src/app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component.ts
@@ -73,6 +73,10 @@ export class ItemPageCcLicenseFieldComponent implements OnInit {
*/
@Input() showDisclaimer? = true;
+ /**
+ * Shows the url
+ */
+ @Input() showUrl? = true;
showImage = true;
diff --git a/src/app/item-page/simple/field-components/specific-field/orcid/item-page-orcid-field.component.ts b/src/app/item-page/simple/field-components/specific-field/orcid/item-page-orcid-field.component.ts
index 01ea00274f9..6221c5903f5 100644
--- a/src/app/item-page/simple/field-components/specific-field/orcid/item-page-orcid-field.component.ts
+++ b/src/app/item-page/simple/field-components/specific-field/orcid/item-page-orcid-field.component.ts
@@ -4,6 +4,13 @@ import {
Input,
OnInit,
} from '@angular/core';
+import { BrowseService } from '@dspace/core/browse/browse.service';
+import { BrowseDefinitionDataService } from '@dspace/core/browse/browse-definition-data.service';
+import { ConfigurationDataService } from '@dspace/core/data/configuration-data.service';
+import { ConfigurationProperty } from '@dspace/core/shared/configuration-property.model';
+import { Item } from '@dspace/core/shared/item.model';
+import { MetadataValue } from '@dspace/core/shared/metadata.models';
+import { getFirstSucceededRemoteDataPayload } from '@dspace/core/shared/operators';
import { TranslatePipe } from '@ngx-translate/core';
import {
combineLatest,
@@ -11,13 +18,6 @@ import {
Observable,
} from 'rxjs';
-import { BrowseService } from '../../../../../core/browse/browse.service';
-import { BrowseDefinitionDataService } from '../../../../../core/browse/browse-definition-data.service';
-import { ConfigurationDataService } from '../../../../../core/data/configuration-data.service';
-import { ConfigurationProperty } from '../../../../../core/shared/configuration-property.model';
-import { Item } from '../../../../../core/shared/item.model';
-import { MetadataValue } from '../../../../../core/shared/metadata.models';
-import { getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
import { ImageField } from '../image-field';
import { ItemPageFieldComponent } from '../item-page-field.component';
diff --git a/src/app/item-page/simple/item-page.component.html b/src/app/item-page/simple/item-page.component.html
index 4de3dd56b1c..38e1b1176b3 100644
--- a/src/app/item-page/simple/item-page.component.html
+++ b/src/app/item-page/simple/item-page.component.html
@@ -1,30 +1,40 @@
-
- @if (itemRD?.hasSucceeded) {
- >>;
+
protected readonly hasValue = hasValue;
constructor(
@@ -164,7 +175,9 @@ export class ItemPageComponent implements OnInit, OnDestroy {
this.itemRD$ = this.route.data.pipe(
map((data) => data.dso as RemoteData- ),
);
-
+ this.tabsRD$ = this.route.data.pipe(
+ map((data) => data.tabs as RemoteData
>),
+ );
this.itemPageRoute$ = this.itemRD$.pipe(
getAllSucceededRemoteDataPayload(),
map((item) => getItemPageRoute(item)),
diff --git a/src/app/item-page/versions/item-versions.component.ts b/src/app/item-page/versions/item-versions.component.ts
index a5787d02721..3e35a0c7aa0 100644
--- a/src/app/item-page/versions/item-versions.component.ts
+++ b/src/app/item-page/versions/item-versions.component.ts
@@ -51,6 +51,8 @@ import {
take,
} from 'rxjs/operators';
+import { renderDynamicLayoutBoxFor } from '../../dynamic-layout/decorators/dynamic-layout-box.decorator';
+import { LayoutBox } from '../../dynamic-layout/enums/layout-box.enum';
import { AlertComponent } from '../../shared/alert/alert.component';
import { AlertType } from '../../shared/alert/alert-type';
import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
@@ -67,6 +69,7 @@ interface VersionDTO {
canEditVersion: Observable;
}
+@renderDynamicLayoutBoxFor(LayoutBox.VERSIONING)
@Component({
selector: 'ds-item-versions',
templateUrl: './item-versions.component.html',
@@ -362,4 +365,3 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
}
}
-
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 81beebc7f81..5bef7510c46 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -10,7 +10,7 @@
- @if (itemRD?.payload; as item) {
-
diff --git a/src/app/item-page/simple/item-page.component.ts b/src/app/item-page/simple/item-page.component.ts
index 0e1bf923f7f..6bb1e4191c0 100644
--- a/src/app/item-page/simple/item-page.component.ts
+++ b/src/app/item-page/simple/item-page.component.ts
@@ -1,6 +1,7 @@
import {
AsyncPipe,
isPlatformServer,
+ NgClass,
} from '@angular/common';
import {
ChangeDetectionStrategy,
@@ -18,9 +19,11 @@ import { NotifyInfoService } from '@dspace/core/coar-notify/notify-info/notify-i
import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
import { FeatureID } from '@dspace/core/data/feature-authorization/feature-id';
import { ItemDataService } from '@dspace/core/data/item-data.service';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
import { RemoteData } from '@dspace/core/data/remote-data';
import { SignpostingDataService } from '@dspace/core/data/signposting-data.service';
import { SignpostingLink } from '@dspace/core/data/signposting-links.model';
+import { DynamicLayoutTab } from '@dspace/core/layout/models/tab.model';
import { getItemPageRoute } from '@dspace/core/router/utils/dso-route.utils';
import {
LinkDefinition,
@@ -48,6 +51,7 @@ import {
} from 'rxjs/operators';
import { validate as uuidValidate } from 'uuid';
+import { DynamicItemPageComponent } from '../../dynamic-item-page/dynamic-item-page.component';
import { fadeInOut } from '../../shared/animations/fade';
import { ErrorComponent } from '../../shared/error/error.component';
import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
@@ -77,10 +81,12 @@ import { QaEventNotificationComponent } from './qa-event-notification/qa-event-n
AsyncPipe,
CustomUrlConflictErrorComponent,
CustomUrlConflictErrorComponent,
+ DynamicItemPageComponent,
ErrorComponent,
ItemVersionsComponent,
ItemVersionsNoticeComponent,
ListableObjectComponentLoaderComponent,
+ NgClass,
NotifyRequestsStatusComponent,
QaEventNotificationComponent,
ThemedItemAlertsComponent,
@@ -141,6 +147,11 @@ export class ItemPageComponent implements OnInit, OnDestroy {
coarRestApiUrls: string[] = [];
+ /**
+ * The configured tabs for layout of current item
+ */
+ tabsRD$: Observable
-
-
+
+
+ @let isDynamicItemPage = (itemRD?.hasSucceeded && !itemRD?.hasNoContent) && tabsRD?.payload?.pageInfo?.totalElements > 0;
+ @if (isDynamicItemPage) {
+
- }
- @if (itemRD?.hasFailed) {
- @if ((customUrlConflict$ | async); as conflictUrl) {
-
+
+ }
+ @if ((itemRD?.hasSucceeded && !itemRD?.hasNoContent) && tabsRD?.payload?.pageInfo?.totalElements < 1) {
+
+ @if (itemRD?.payload; as item) {
+
+ }
+ @if (isDynamicItemPage) {
+
+
+ }
+