[CST-4499] Version history (WIP) - Added in-row editing in version history (call to REST service TBD) and other fixes

src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html

@@ -22,14 +22,17 @@
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
     </button>
   </div>
-    <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
-        <tbody>
+  <table class="table table-responsive table-striped table-bordered"
+         *ngIf="((updates$ | async)| dsObjectValues).length > 0">
+    <thead>
     <tr>
       <th><span id="fieldName">{{'item.edit.metadata.headers.field' | translate}}</span></th>
       <th><span id="fieldValue">{{'item.edit.metadata.headers.value' | translate}}</span></th>
       <th class="text-center"><span id="fieldLang">{{'item.edit.metadata.headers.language' | translate}}</span></th>
       <th class="text-center">{{'item.edit.metadata.headers.edit' | translate}}</th>
     </tr>
+    </thead>
+    <tbody>
     <tr *ngFor="let updateValue of ((updates$ | async)| dsObjectValues); trackBy: trackUpdate"
         ds-edit-in-place-field
         [fieldUpdate]="updateValue || {}"

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

@@ -2,7 +2,9 @@
   <div *ngVar="(versionRD$ | async)?.payload as itemVersion">
     <div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
       <h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
-      <!-- <p>TMP CURRENT VERSION = {{itemVersion.version}} {{item.uuid}} {{item.handle}}</p>check async -->
+      <ds-alert [type]="AlertTypeEnum.Info">
+        {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
+      </ds-alert>
       <ds-pagination *ngIf="versions?.page?.length > 0"
                      [hideGear]="true"
                      [hidePagerWhenSinglePage]="true"
@@ -10,11 +12,11 @@
                      [pageInfoState]="versions"
                      [collectionSize]="versions?.totalElements"
                      [retainScrollPosition]="true">
-        <table class="table table-striped my-2">
+        <table class="table table-striped table-bordered my-2">
           <thead>
           <tr>
             <th scope="col">{{"item.version.history.table.version" | translate}}</th>
-            <th scope="col">{{"item.version.history.table.item" | translate}}</th>
+            <!--            <th scope="col">{{"item.version.history.table.item" | translate}}</th>-->
             <th scope="col" *ngIf="(hasEpersons$ | async)">{{"item.version.history.table.editor" | translate}}</th>
             <th scope="col">{{"item.version.history.table.date" | translate}}</th>
             <th scope="col">{{"item.version.history.table.summary" | translate}}</th>
@@ -24,33 +26,76 @@
           <tbody>
           <tr *ngFor="let version of versions?.page" [id]="'version-row-' + version.id">
             <td class="version-row-element-version">{{version?.version}}</td>
-            <td class="version-row-element-item">
+            <!--<td class="version-row-element-item">
                 <span *ngVar="(version?.item | async)?.payload as item">
                   <a *ngIf="item" [routerLink]="[(itemPageRoutes$ | async)[item?.id]]">{{item?.handle}}</a>
                   <span *ngIf="version?.id === itemVersion?.id">*</span>
                 </span>
-            </td>
+            </td>-->
             <td *ngIf="(hasEpersons$ | async)" class="version-row-element-editor">
                 <span *ngVar="(version?.eperson | async)?.payload as eperson">
                   <a *ngIf="eperson" [href]="'mailto:' + eperson?.email">{{eperson?.name}}</a>
                 </span>
             </td>
-            <td class="version-row-element-date">{{version?.created}}</td>
-            <td class="version-row-element-summary">{{version?.summary}}</td>
+            <td class="version-row-element-date">{{version?.created | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
+            <td class="version-row-element-summary">
+              <ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
+              <ng-template #showSummary>
+                <span class="left-column">{{version?.summary}}</span>
+                <span class="right-column" *ngIf="displayActions">
+                  <button class="btn btn-outline-primary btn-sm"
+                          (click)="editVersionSummary(version)"
+                          title="{{'item.version.history.table.action.editSummary' | translate}}"
+                          [disabled]="isAnyBeingEdited()">
+                    <i class="fas fa-edit fa-fw"></i>
+                  </button>
+                </span>
+              </ng-template>
+              <ng-template #editSummary>
+                <!--<form [formGroup]="summaryForm" (ngSubmit)="onSummarySubmit()">-->
+                  <span class="left-column">
+                    <!--<input class="form-control" type="text" formControlName="summary"/>-->
+                    <input class="form-control" type="text" [(ngModel)]="summary"/>
+                  </span>
+                  <span class="right-column">
+                    <div class="btn-group edit-field">
+                      <button class="btn btn-outline-success btn-sm"
+                              (click)="onSummarySubmit()"
+                              title="{{'item.version.history.table.action.saveSummary' | translate}}">
+                        <i class="fas fa-save fa-fw"></i>
+                      </button>
+                      <button class="btn btn-outline-danger btn-sm"
+                              (click)="discardSummaryEdits()"
+                              title="{{'item.version.history.table.action.discardSummary' | translate}}">
+                        <i class="fas fa-times fa-fw"></i>
+                      </button>
+                    </div>
+                  </span>
+                <!--</form>-->
+              </ng-template>
+            </td>
             <td class="version-row-element-actions" *ngIf="displayActions">
               <div class="btn-group edit-field">
-                <!--[disabled]="!(canSetEditable() | async)" *ngIf="!(editable | async)"
-                        (click)="setEditable(true)" -->
+                <!--                <ng-container *ngIf="versionBeingEdited==version?.version; then saveSummaryBtn else editSummaryBtn"></ng-container>
+                                <ng-template #editSummaryBtn>
                                   <button class="btn btn-outline-primary btn-sm"
-                        (click)="openEditDialog()"
                                           title="{{'item.version.history.table.action.editSummary' | translate}}">
                                     <i class="fas fa-edit fa-fw"></i>
                                   </button>
+                                </ng-template>
+                                <ng-template #saveSummaryBtn>
+                                  <button class="btn btn-outline-success btn-sm"
+                                          title="{{'item.version.history.table.action.editSummary' | translate}}">
+                                    <i class="fas fa-save fa-fw"></i>
+                                  </button>
+                                </ng-template>-->
+                <!--[disabled]="!(canSetEditable() | async)" *ngIf="!(editable | async)"
+                        (click)="setEditable(true)" -->
                 <button class="btn btn-outline-primary btn-sm"
                         title="{{'item.version.history.table.action.newVersion' | translate}}">
                   <i class="fas fa-code-branch fa-fw"></i>
                 </button>
-                <button class="btn btn-outline-primary btn-sm"
+                <button class="btn btn-outline-danger btn-sm"
                         title="{{'item.version.history.table.action.deleteVersion' | translate}}">
                   <i class="fas fa-trash fa-fw"></i>
                 </button>

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

@@ -0,0 +1,9 @@
+.left-column {
+  float: left;
+  text-align: left;
+}
+
+.right-column {
+  float: right;
+  text-align: right;
+}

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

@@ -19,10 +19,12 @@ import { followLink } from '../../utils/follow-link-config.model';
 import { hasValue, hasValueOperator } from '../../empty.util';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'ds-item-versions',
-  templateUrl: './item-versions.component.html'
+  templateUrl: './item-versions.component.html',
+  styleUrls: ['./item-versions.component.scss']
 })
 /**
  * Component listing all available versions of the history the provided item is a part of
@@ -108,11 +110,37 @@ export class ItemVersionsComponent implements OnInit {
 
   constructor(private versionHistoryService: VersionHistoryDataService,
               private paginationService: PaginationService,
+              private formBuilder: FormBuilder,
               ) {
   }
 
-  openEditDialog() {
-    // TODO REMOVE
+  versionBeingEdited: number;
+
+  summary = 'test'; // TODO delete
+
+  summaryForm = this.formBuilder.group({summary: 's'});
+
+  onSummarySubmit() { // TODO submit
+    console.log('SUBMITTING ' + this.summary);
+    this.versionBeingEdited = undefined;
+  }
+
+
+  isAnyBeingEdited(): boolean {
+    return this.versionBeingEdited != null;
+  }
+
+  isThisBeingEdited(version): boolean {
+    return Number(version?.version) === this.versionBeingEdited;
+  }
+
+  editVersionSummary(version): void {
+    this.summary = version?.summary;
+    this.versionBeingEdited = Number(version?.version);
+  }
+
+  discardSummaryEdits(): void {
+    this.versionBeingEdited = undefined;
   }
 
   /**

src/assets/i18n/en.json5

@@ -1967,6 +1967,8 @@
 
   "item.version.history.selected": "Selected version",
 
+  "item.version.history.selected.alert": "You are currently viewing version {{version}} of the item.",
+
   "item.version.history.table.version": "Version",
 
   "item.version.history.table.item": "Item",
@@ -1982,6 +1984,10 @@
 
   "item.version.history.table.action.editSummary": "Edit summary",
 
+  "item.version.history.table.action.saveSummary": "Save summary edits",
+
+  "item.version.history.table.action.discardSummary": "Discard summary edits",
+
   "item.version.history.table.action.newVersion": "Create new version from this one",
 
   "item.version.history.table.action.deleteVersion": "Delete version",