Merge pull request #5665 from alexandrevryghem/w2p-141473_fix-irregular-whitespace-for-MetadataRepresentationListComponent_contribute-main

Fix irregular whitespace for MetadataRepresentationListComponent

Author: tdonohue

src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html

@@ -1,28 +1,33 @@
 <ds-metadata-field-wrapper [label]="label">
-  @for (objectPage of objects; track objectPage; let i = $index) {
+  @for (objectPage of objects; track objectPage; let i = $index; let lastPage = $last) {
     <ng-container *ngVar="(objectPage | async) as representations">
-      @for (rep of representations; track rep) {
-        <ds-metadata-representation-loader
-          [mdRepresentation]="rep">
-        </ds-metadata-representation-loader>
+      @for (rep of representations; track rep; let last = $last) {
+        <div class="d-inline">
+          <ds-metadata-representation-loader [mdRepresentation]="rep"
+                                             class="d-inline-block">
+          </ds-metadata-representation-loader>
+          @if (!last || !lastPage) {
+            <span [innerHTML]="separator"></span>
+          }
+        </div>
       }
-      @if ((i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)) {
+      @if (lastPage && (i > 0) && (!representations || representations?.length === 0)) {
         <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
       }
-      @if ((i + 1) === objects.length && representations?.length > 0) {
-        <div class="d-inline-block w-100 mt-2">
-          @if ((objects.length * incrementBy) < total) {
-            <div class="float-start">
-              <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
-              translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
-            </div>
-          }
-          @if (objects.length > 1) {
-            <div class="float-end">
-              <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
-              translate:{ amount: representations?.length } }}</button>
-            </div>
-          }
+      @if (lastPage && representations?.length > 0 && ((objects.length * incrementBy) < total || objects.length > 1)) {
+        <div class="d-flex justify-content-between w-100 mt-2">
+          <div>
+            @if ((objects.length * incrementBy) < total) {
+                <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+                  translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
+            }
+          </div>
+          <div>
+            @if (objects.length > 1) {
+                <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+                  translate:{ amount: representations?.length } }}</button>
+            }
+          </div>
         </div>
       }
     </ng-container>

src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.ts

@@ -71,6 +71,11 @@ export class MetadataRepresentationListComponent extends AbstractIncrementalList
    */
   @Input() incrementBy = 10;
 
+  /**
+   * The separator used to split the metadata values (can contain HTML)
+   */
+  @Input() separator = '<br>';
+
   /**
    * The total amount of metadata values available
    */

src/app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component.ts

@@ -12,7 +12,14 @@ import { MetadataRepresentationListComponent } from './metadata-representation-l
   templateUrl: '../../../shared/theme-support/themed.component.html',
 })
 export class ThemedMetadataRepresentationListComponent extends ThemedComponent<MetadataRepresentationListComponent> {
-  protected inAndOutputNames: (keyof MetadataRepresentationListComponent & keyof this)[] = ['parentItem', 'itemType', 'metadataFields', 'label', 'incrementBy'];
+  protected inAndOutputNames: (keyof MetadataRepresentationListComponent & keyof this)[] = [
+    'parentItem',
+    'itemType',
+    'metadataFields',
+    'label',
+    'incrementBy',
+    'separator',
+  ];
 
   @Input() parentItem: Item;
 
@@ -24,6 +31,8 @@ export class ThemedMetadataRepresentationListComponent extends ThemedComponent<M
 
   @Input() incrementBy: number;
 
+  @Input() separator: string;
+
   protected getComponentName(): string {
     return 'MetadataRepresentationListComponent';
   }