Added version history as item-field

Author: jr-rk

src/app/item-page/simple/item-page.component.html

@@ -8,7 +8,7 @@
       <ds-themed-item-alerts [item]="item"></ds-themed-item-alerts>
       <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
       <ds-listable-object-component-loader *ngIf="!item.isWithdrawn || (isAdmin$|async)" [object]="item" [viewMode]="viewMode"></ds-listable-object-component-loader>
-      <ds-item-versions class="mt-2" [item]="item" [displayActions]="false"></ds-item-versions>
+      <!-- <ds-item-versions class="mt-2" [item]="item" [displayActions]="false"></ds-item-versions> -->
       <div *ngIf="(hasFiles | async) === true">
         <ds-clarin-files-section [item]="item" [itemHandle]="itemHandle"></ds-clarin-files-section>
       </div>

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -114,6 +114,12 @@
       [iconName]="'fa-sitemap'"
       [separator]="'<br />'">
     </ds-clarin-collections-item-field>
+    <ds-item-versions
+      [item]="object"
+      [iconName]="'fa-history'"
+      [displayTitle]="false"
+      [displayActions]="true">
+    </ds-item-versions>
     <div class="clarin-item-page-field">
       <a [routerLink]="[itemPageRoute + '/full']">
         {{"item.page.link.full" | translate}}

src/app/item-page/versions/item-versions.component.html

@@ -1,14 +1,16 @@
-<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion" class="mb-2">
-  <div *ngIf="(versionRD$ | async)?.payload as itemVersion">
-
-    <!-- Toggle Header -->
-    <div class="d-flex align-items-center mb-2 cursor-pointer" (click)="toggleVersionHistory()">
-      <h4 class="mb-0 me-2">{{ "item.version.history.head" | translate }}</h4>
-      <i class="fas" [ngClass]="showVersionHistory ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion">
+  <div *ngIf="(versionRD$ | async)?.payload as itemVersion" class="row clarin-item-page-field">
+    <div class="col-lg-3 col-2-5 d-flex align-self-start">
+      <div><i [class]="'fas ' + iconName + ' fa-xs'"></i></div>
+      <!-- Toggle Header -->
+      <div class="pl-1 d-flex align-items-center cursor-pointer" (click)="toggleVersionHistory()">
+        <b class="mb-0 me-2">{{ "item.version.history.head" | translate }}</b>
+        <i class="fas" [ngClass]="showVersionHistory ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+      </div>
     </div>
 
     <!-- Collapsible Content -->
-    <div class="collapse" [ngClass]="{'show': showVersionHistory}">
+    <div class="col-lg-9 collapse" [ngClass]="{'show': showVersionHistory}">
       <ds-pagination *ngIf="versionsDTO.versionDTOs.length > 0"
                      (paginationChange)="onPageChange()"
                      [hideGear]="true"

src/app/item-page/versions/item-versions.component.scss

@@ -7,3 +7,10 @@
   float: right;
   text-align: right;
 }
+
+@media (min-width: 992px) {
+  .col-2-5 {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+}

src/app/item-page/versions/item-versions.component.ts

@@ -80,6 +80,11 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
    */
   @Input() item: Item;
 
+  /**
+   * Fontawesome v5. icon name with default settings.
+   */
+  @Input() iconName: string;
+
   /**
    * An option to display the list of versions, even when there aren't any.
    * Instead of the table, an alert will be displayed, notifying the user there are no other versions present

src/themes/custom/eager-theme.module.ts

@@ -44,6 +44,7 @@ import { CollectionDropdownComponent } from './app/shared/collection-dropdown/co
 import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module';
 import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module';
 import { DsoPageModule } from '../../app/shared/dso-page/dso-page.module';
+import { ItemVersionsModule } from '../../app/item-page/versions/item-versions.module';
 import { FileDownloadLinkComponent } from './app/shared/file-download-link/file-download-link.component';
 import { StartsWithDateComponent } from './app/shared/starts-with/date/starts-with-date.component';
 import { StartsWithTextComponent } from './app/shared/starts-with/text/starts-with-text.component';
@@ -111,6 +112,7 @@ const DECLARATIONS = [
     ResultsBackButtonModule,
     ItemPageModule,
     ItemSharedModule,
+    ItemVersionsModule,
     DsoPageModule,
   ],
   declarations: DECLARATIONS,