[CST-4499] Version history (WIP) - Changes to in-row editing, code cleanup, added modal for new versions

src/app/item-page/edit-item-page/item-version-history/item-version-history.component.html

@@ -1,6 +1,3 @@
-<!--<div class="mt-4">
-  <ds-alert [content]="'item.edit.tabs.versionhistory.under-construction'" [type]="AlertTypeEnum.Warning"></ds-alert>
-</div>-->
 <div class="mt-2" *ngVar="(itemRD$ | async)?.payload as item">
   <ds-item-versions *ngIf="item" [item]="item" [displayWhenEmpty]="true" [displayTitle]="false"
                     [displayActions]="true"></ds-item-versions>

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

@@ -0,0 +1,11 @@
+<div>
+  <div class="modal-header">{{'item.version.modal.create.header' | translate}}
+    <button type="button" class="close" (click)="closeModal()" aria-label="Close">
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <!--<h5 *ngIf="header" class="px-2">{{header | translate}}</h5>-->
+    NEW VERSION
+  </div>
+</div>

src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemVersionsSummaryModalComponent } from './item-versions-summary-modal.component';
+
+describe('ItemVersionsSummaryModalComponent', () => {
+  let component: ItemVersionsSummaryModalComponent;
+  let fixture: ComponentFixture<ItemVersionsSummaryModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemVersionsSummaryModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemVersionsSummaryModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ds-item-versions-summary-modal',
+  templateUrl: './item-versions-summary-modal.component.html',
+  styleUrls: ['./item-versions-summary-modal.component.scss']
+})
+export class ItemVersionsSummaryModalComponent implements OnInit {
+
+  constructor(
+    protected activeModal: NgbActiveModal,) { }
+
+  closeModal() {
+    this.activeModal.close();
+  }
+  ngOnInit(): void {
+  }
+
+}

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

@@ -12,11 +12,10 @@
                      [pageInfoState]="versions"
                      [collectionSize]="versions?.totalElements"
                      [retainScrollPosition]="true">
-        <table class="table table-striped table-bordered my-2">
+        <table class="table table-striped table-bordered align-middle 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" *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>
@@ -26,12 +25,6 @@
           <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">
-                <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 *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>
@@ -40,80 +33,49 @@
             <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 #showSummary>{{version?.summary}}</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"
+                        *ngIf="!isThisBeingEdited(version)"
+                        [disabled]="isAnyBeingEdited()"
+                        (click)="editVersionSummary(version)"
                         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>
+                        *ngIf="isThisBeingEdited(version)"
+                        (click)="onSummarySubmit()"
+                        title="{{'item.version.history.table.action.saveSummary' | translate}}">
+                  <i class="fas fa-check fa-fw"></i>
                 </button>
-                                </ng-template>-->
-                <!--[disabled]="!(canSetEditable() | async)" *ngIf="!(editable | async)"
-                        (click)="setEditable(true)" -->
+
                 <button class="btn btn-outline-primary btn-sm"
+                        [disabled]="isAnyBeingEdited()"
+                        (click)="createNewVersion(version)"
                         title="{{'item.version.history.table.action.newVersion' | translate}}">
                   <i class="fas fa-code-branch fa-fw"></i>
                 </button>
-                <button class="btn btn-outline-danger btn-sm"
+                <button class="btn btn-sm"
+                        [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
+                        [disabled]="isAnyBeingEdited()"
                         title="{{'item.version.history.table.action.deleteVersion' | translate}}">
                   <i class="fas fa-trash fa-fw"></i>
                 </button>
-                <!--<button [disabled]="!(canSetUneditable() | async) || (valid | async) === false" *ngIf="(editable | async)"
-                        (click)="setEditable(false)" class="btn btn-outline-success btn-sm"
-                        title="{{'item.edit.metadata.edit.buttons.unedit' | translate}}">
-                  <i class="fas fa-check fa-fw"></i>
-                </button>
-                <button [disabled]="!(canRemove() | async)" (click)="remove()"
-                        class="btn btn-outline-danger btn-sm"
-                        title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
-                  <i class="fas fa-trash-alt fa-fw"></i>
-                </button>
-                <button [disabled]="!(canUndo() | async)" (click)="removeChangesFromField()"
-                        class="btn btn-outline-warning btn-sm"
-                        title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
+                <button class="btn btn-sm"
+                        [ngClass]="isThisBeingEdited(version) ? 'btn-outline-warning' : 'btn-outline-primary'"
+                        [disabled]="!isAnyBeingEdited() || !isThisBeingEdited(version)"
+                        (click)="discardSummaryEdits()"
+                        title="{{'item.version.history.table.action.discardSummary' | translate}}">
                   <i class="fas fa-undo-alt fa-fw"></i>
-                </button>-->
+                </button>
               </div>
             </td>
           </tr>

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

@@ -20,6 +20,8 @@ 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';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ItemVersionsSummaryModalComponent } from './item-versions-summary-modal/item-versions-summary-modal.component';
 
 @Component({
   selector: 'ds-item-versions',
@@ -111,6 +113,7 @@ export class ItemVersionsComponent implements OnInit {
   constructor(private versionHistoryService: VersionHistoryDataService,
               private paginationService: PaginationService,
               private formBuilder: FormBuilder,
+              private modalService: NgbModal,
               ) {
   }
 
@@ -125,7 +128,6 @@ export class ItemVersionsComponent implements OnInit {
     this.versionBeingEdited = undefined;
   }
 
-
   isAnyBeingEdited(): boolean {
     return this.versionBeingEdited != null;
   }
@@ -143,6 +145,11 @@ export class ItemVersionsComponent implements OnInit {
     this.versionBeingEdited = undefined;
   }
 
+  createNewVersion(version) {
+    this.modalService.open(ItemVersionsSummaryModalComponent);
+  }
+
+
   /**
    * Initialize all observables
    */

src/app/shared/shared.module.ts

@@ -234,6 +234,7 @@ import { OnClickMenuItemComponent } from './menu/menu-item/onclick-menu-item.com
 import { TextMenuItemComponent } from './menu/menu-item/text-menu-item.component';
 import { ThemedConfigurationSearchPageComponent } from '../search-page/themed-configuration-search-page.component';
 import { SearchNavbarComponent } from '../search-navbar/search-navbar.component';
+import { ItemVersionsSummaryModalComponent } from './item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component';
 
 /**
  * Declaration needed to make sure all decorator functions are called in time
@@ -586,7 +587,8 @@ const DIRECTIVES = [
     ...COMPONENTS,
     ...DIRECTIVES,
     ...SHARED_ITEM_PAGE_COMPONENTS,
-    ...SHARED_SEARCH_PAGE_COMPONENTS
+    ...SHARED_SEARCH_PAGE_COMPONENTS,
+    ItemVersionsSummaryModalComponent
   ],
   providers: [
     ...PROVIDERS

src/assets/i18n/en.json5

@@ -1995,6 +1995,7 @@
 
   "item.version.notice": "This is not the latest version of this item. The latest version can be found <a href='{{destination}}'>here</a>.",
 
+  "item.version.modal.create.header": "Create new version",
 
 
   "journal.listelement.badge": "Journal",