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

2025-10-17 23:13:04 +00:00 · 2021-09-07 20:33:47 +02:00
parent 6f24b31b39
commit 95ffc7a016
6 changed files with 166 additions and 75 deletions
--- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -1,66 +1,69 @@
 <div class="item-metadata">
-    <div class="button-row top d-flex mb-2">
-        <button class="mr-auto btn btn-success"
-                (click)="add()"><i
-                class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.add-button" | translate}}</span>
-        </button>
-        <button class="btn btn-warning" *ngIf="isReinstatable() | async"
-                (click)="reinstate()"><i
-                class="fas fa-undo-alt"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
-        </button>
-        <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || !(isValid() | async)"
-                (click)="submit()"><i
-                class="fas fa-save"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-        </button>
-        <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                [disabled]="!(hasChanges() | async)"
-                (click)="discard()"><i
-                class="fas fa-times"></i>
-            <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>
-        <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>
-        <tr *ngFor="let updateValue of ((updates$ | async)| dsObjectValues); trackBy: trackUpdate"
-            ds-edit-in-place-field
-            [fieldUpdate]="updateValue || {}"
-            [url]="url"
-            [ngClass]="{
+  <div class="button-row top d-flex mb-2">
+    <button class="mr-auto btn btn-success"
+            (click)="add()"><i
+      class="fas fa-plus"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.add-button" | translate}}</span>
+    </button>
+    <button class="btn btn-warning" *ngIf="isReinstatable() | async"
+            (click)="reinstate()"><i
+      class="fas fa-undo-alt"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
+    </button>
+    <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || !(isValid() | async)"
+            (click)="submit()"><i
+      class="fas fa-save"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+    </button>
+    <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+            [disabled]="!(hasChanges() | async)"
+            (click)="discard()"><i
+      class="fas fa-times"></i>
+      <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">
+    <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 || {}"
+        [url]="url"
+        [ngClass]="{
                'table-warning': updateValue.changeType === 0,
                'table-danger': updateValue.changeType === 2,
                'table-success': updateValue.changeType === 1
            }">

-        </tr>
-        </tbody>
-    </table>
-    <div *ngIf="((updates$ | async)| dsObjectValues).length == 0">
-      <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
+    </tr>
+    </tbody>
+  </table>
+  <div *ngIf="((updates$ | async)| dsObjectValues).length == 0">
+    <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
+  </div>
+  <div class="button-row bottom">
+    <div class="mt-2 float-right">
+      <button class="btn btn-warning" *ngIf="isReinstatable() | async"
+              (click)="reinstate()"><i
+        class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
+      </button>
+      <button class="btn btn-primary mr-0" [disabled]="!(hasChanges() | async)"
+              (click)="submit()"><i
+        class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
+      </button>
+      <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+              [disabled]="!(hasChanges() | async)"
+              (click)="discard()"><i
+        class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
+      </button>
    </div>
-    <div class="button-row bottom">
-      <div class="mt-2 float-right">
-              <button class="btn btn-warning" *ngIf="isReinstatable() | async"
-                      (click)="reinstate()"><i
-                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
-              </button>
-              <button class="btn btn-primary mr-0" [disabled]="!(hasChanges() | async)"
-                      (click)="submit()"><i
-                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
-              </button>
-              <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                      [disabled]="!(hasChanges() | async)"
-                      (click)="discard()"><i
-                      class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
-              </button>
-          </div>
-      </div>
+  </div>
 </div>
--- a/src/app/shared/item/item-versions/item-versions.component.html
+++ b/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">
+                <!--                <ng-container *ngIf="versionBeingEdited==version?.version; then saveSummaryBtn else editSummaryBtn"></ng-container>
+                                <ng-template #editSummaryBtn>
+                                  <button class="btn btn-outline-primary btn-sm"
+                                          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"
-                        (click)="openEditDialog()"
-                        title="{{'item.version.history.table.action.editSummary' | translate}}">
-                  <i class="fas fa-edit fa-fw"></i>
-                </button>
                <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>
--- a/src/app/shared/item/item-versions/item-versions.component.scss
+++ b/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;
+}
--- a/src/app/shared/item/item-versions/item-versions.component.ts
+++ b/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;
  }

  /**
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -16,7 +16,7 @@
          </div>
        </div>
      </div>
-  </div>
+    </div>
  </div>
  <ng-content></ng-content>

--- a/src/assets/i18n/en.json5
+++ b/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",