src: add relations to simple item view

Add dcterms.relation, cg.identifier.dataurl, and cg.link.citation to the simple item view page. Style mimics our DSpace 6 style.
DSpace · Feb 28, 2024 · bcc68f1 · bcc68f1
1 parent 3b289aa
commit bcc68f1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts
@@ -24,6 +24,7 @@ import { ItemPageAccessRightsFieldComponent } from './simple/field-components/sp
 import { ItemPageMetadataSearchLinkFieldComponent } from './simple/field-components/specific-field/metadata-search-link/item-page-metadata-search-link-field.component';
 import { ItemPageAltmetricFieldComponent } from './simple/field-components/specific-field/altmetric/item-page-altmetric-field.component';
 import { ItemPageDimensionsFieldComponent } from './simple/field-components/specific-field/dimensions/item-page-dimensions-field.component';
+import { ItemPageRelationFieldComponent } from './simple/field-components/specific-field/relation/item-page-relation-field.component';
 import { ItemPageFieldComponent } from './simple/field-components/specific-field/item-page-field.component';
 import { CollectionsComponent } from './field-components/collections/collections.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
@@ -95,6 +96,7 @@ const DECLARATIONS = [
   ItemPageMetadataSearchLinkFieldComponent,
   ItemPageAltmetricFieldComponent,
   ItemPageDimensionsFieldComponent,
+  ItemPageRelationFieldComponent,
   ItemPageFieldComponent,
   CollectionsComponent,
   FullFileSectionComponent,

diff --git a/...e/simple/field-components/specific-field/relation/item-page-relation-field.component.html b/...e/simple/field-components/specific-field/relation/item-page-relation-field.component.html
@@ -0,0 +1,48 @@
+<div class="item-page-field" *ngIf="item.hasMetadata(['dcterms.relation', 'cg.link.citation', 'cg.identifier.dataurl'])">
+    <div class="simple-view-element">
+        <h5>Related Material</h5>
+        <div class="simple-view-element-body">
+            <div class="ml-3">
+                <ng-container *ngIf="item.hasMetadata('dcterms.relation')">
+                    <div class="mb-2">Related reference:
+                        <ng-container *ngFor="let mdValue of item?.allMetadata('dcterms.relation'); let last=last;">
+                            <ng-container [ngTemplateOutlet]="relatedLink"
+                                          [ngTemplateOutletContext]="{value: mdValue.value}">
+                            </ng-container>
+                            <span *ngIf="!last">; </span>
+                        </ng-container>
+                    </div>
+                </ng-container>
+
+                <ng-container *ngIf="item.hasMetadata('cg.identifier.dataurl')">
+                    <div class="mb-2">Related dataset:
+                        <ng-container *ngFor="let mdValue of item?.allMetadata('cg.identifier.dataurl'); let last=last;">
+                            <ng-container [ngTemplateOutlet]="relatedLink"
+                                          [ngTemplateOutletContext]="{value: mdValue.value}">
+                            </ng-container>
+                            <span *ngIf="!last">; </span>
+                        </ng-container>
+                    </div>
+                </ng-container>
+
+                <ng-container *ngIf="item.hasMetadata('cg.link.citation')">
+                    <ng-container *ngFor="let mdValue of item?.allMetadata('cg.link.citation')"
+                                  [ngTemplateOutlet]="relatedCitation"
+                                  [ngTemplateOutletContext]="{value: mdValue.value}">
+                    </ng-container>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Template for related links we want to show -->
+<ng-template #relatedLink let-value="value">
+    <a [href]=value target="_blank" [innerHTML]="value"></a>
+</ng-template>
+
+<!-- Template for related citations -->
+<ng-template #relatedCitation let-value="value">
+    <h5>Related Citation</h5>
+    <div class="mb-2" [innerHTML]="value"></div>
+</ng-template>
diff --git a/...age/simple/field-components/specific-field/relation/item-page-relation-field.component.ts b/...age/simple/field-components/specific-field/relation/item-page-relation-field.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+import { Item } from '../../../../../core/shared/item.model';
+import { ItemPageFieldComponent } from '../item-page-field.component';
+
+@Component({
+  selector: 'ds-item-page-relation-field',
+  //styleUrls: ['./item-page-relation-field.component.scss'],
+  templateUrl: './item-page-relation-field.component.html'
+})
+/**
+ * This component renders the related material section.
+ */
+export class ItemPageRelationFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+}
diff --git a/src/themes/cgspace/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/themes/cgspace/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -191,6 +191,8 @@ <h5 class="simple-view-element-header">Metadata</h5>
       [label]="'item.page.impactPlatform'"
       [index]="'impactPlatform'">
     </ds-item-page-metadata-search-link>
+    <ds-item-page-relation-field [item]="object">
+    </ds-item-page-relation-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
   </div>
 </div>