97075: Edit metadata redesign pt2

2025-10-10 03:23:07 +00:00 · 2022-11-30 17:49:19 +01:00
parent 92f94c39b2
commit 105f6cb954
6 changed files with 180 additions and 48 deletions
--- a/src/app/core/shared/operators.ts
+++ b/src/app/core/shared/operators.ts
@@ -349,7 +349,7 @@ export const metadataFieldsToString = () =>
            map((schema: MetadataSchema) => ({ field, schema }))
          );
        });
-        return observableCombineLatest(fieldSchemaArray);
+        return isNotEmpty(fieldSchemaArray) ? observableCombineLatest(fieldSchemaArray) : [[]];
      }),
      map((fieldSchemaArray: { field: MetadataField, schema: MetadataSchema }[]): string[] => {
        return fieldSchemaArray.map((fieldSchema: { field: MetadataField, schema: MetadataSchema }) => fieldSchema.schema.prefix + '.' + fieldSchema.field.toString());
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts
@@ -1,5 +1,10 @@
 import { MetadataMap, MetadataValue } from '../../core/shared/metadata.models';
 import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util';
+import { Operation } from 'fast-json-patch';
+import { MetadataPatchReplaceOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-replace-operation.model';
+import { MetadataPatchRemoveOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-remove-operation.model';
+import { MetadataPatchAddOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-add-operation.model';
+import { MetadataPatchOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-operation.model';

 export enum DsoEditMetadataChangeType {
  UPDATE = 1,
@@ -55,11 +60,15 @@ export class DsoEditMetadataValue {
  }

  reinstate(): void {
+    if (hasValue(this.reinstatableValue)) {
      this.newValue = this.reinstatableValue;
      this.reinstatableValue = undefined;
+    }
+    if (hasValue(this.reinstatableChange)) {
      this.change = this.reinstatableChange;
      this.reinstatableChange = undefined;
    }
+  }

  isReinstatable(): boolean {
    return hasValue(this.reinstatableValue) || hasValue(this.reinstatableChange);
@@ -67,16 +76,23 @@ export class DsoEditMetadataValue {
 }

 export class DsoEditMetadataForm {
+  originalFieldKeys: string[];
  fieldKeys: string[];
  fields: {
    [mdField: string]: DsoEditMetadataValue[],
  };
+  reinstatableNewValues: {
+    [mdField: string]: DsoEditMetadataValue[],
+  };
  newValue: DsoEditMetadataValue;

  constructor(metadata: MetadataMap) {
+    this.originalFieldKeys = [];
    this.fieldKeys = [];
    this.fields = {};
+    this.reinstatableNewValues = {};
    Object.entries(metadata).forEach(([mdField, values]: [string, MetadataValue[]]) => {
+      this.originalFieldKeys.push(mdField);
      this.fieldKeys.push(mdField);
      this.fields[mdField] = values.map((value) => new DsoEditMetadataValue(value));
    });
@@ -89,12 +105,17 @@ export class DsoEditMetadataForm {
  }

  setMetadataField(mdField: string) {
+    this.newValue.editing = false;
+    this.addValueToField(this.newValue, mdField);
+    this.newValue = undefined;
+  }
+
+  private addValueToField(value: DsoEditMetadataValue, mdField: string) {
    if (isEmpty(this.fields[mdField])) {
      this.fieldKeys.push(mdField);
      this.fields[mdField] = [];
    }
-    this.fields[mdField].push(this.newValue);
-    this.newValue = undefined;
+    this.fields[mdField].push(value);
  }

  remove(mdField: string, index: number) {
@@ -112,11 +133,31 @@ export class DsoEditMetadataForm {
  }

  discard(): void {
-    Object.values(this.fields).forEach((values) => {
-      values.forEach((value) => {
-        value.discard();
+    Object.entries(this.fields).forEach(([field, values]) => {
+      let removeFromIndex = -1;
+      values.forEach((value, index) => {
+        if (value.change === DsoEditMetadataChangeType.ADD) {
+          if (isEmpty(this.reinstatableNewValues[field])) {
+            this.reinstatableNewValues[field] = [];
+          }
+          this.reinstatableNewValues[field].push(value);
+          if (removeFromIndex === -1) {
+            removeFromIndex = index;
+          }
+        } else {
+          value.discardAndMarkReinstatable();
+        }
      });
+      if (removeFromIndex > -1) {
+        this.fields[field].splice(removeFromIndex, this.fields[field].length - removeFromIndex);
+      }
    });
+    this.fieldKeys.forEach((field) => {
+      if (this.originalFieldKeys.indexOf(field) < 0) {
+        delete this.fields[field];
+      }
+    });
+    this.fieldKeys = [...this.originalFieldKeys];
  }

  reinstate(): void {
@@ -125,9 +166,48 @@ export class DsoEditMetadataForm {
        value.reinstate();
      });
    });
+    Object.entries(this.reinstatableNewValues).forEach(([field, values]) => {
+      values.forEach((value) => {
+        this.addValueToField(value, field);
+      });
+    });
+    this.reinstatableNewValues = {};
  }

  isReinstatable(): boolean {
-    return Object.values(this.fields).some((values) => values.some((value) => value.isReinstatable()));
+    return isNotEmpty(this.reinstatableNewValues) ||
+      Object.values(this.fields)
+        .some((values) => values
+          .some((value) => value.isReinstatable()));
+  }
+
+  getOperations(): Operation[] {
+    const operations: Operation[] = [];
+    Object.entries(this.fields).forEach(([field, values]) => {
+      values.forEach((value, place) => {
+        if (value.hasChanges()) {
+          let operation: MetadataPatchOperation;
+          if (value.change === DsoEditMetadataChangeType.UPDATE) {
+            operation = new MetadataPatchReplaceOperation(field, place, {
+              value: value.newValue.value,
+              language: value.newValue.language,
+            });
+          } else if (value.change === DsoEditMetadataChangeType.REMOVE) {
+            operation = new MetadataPatchRemoveOperation(field, place);
+          } else if (value.change === DsoEditMetadataChangeType.ADD) {
+            operation = new MetadataPatchAddOperation(field, {
+              value: value.newValue.value,
+              language: value.newValue.language,
+            });
+          } else {
+            console.warn('Illegal metadata change state detected for', value);
+          }
+          if (hasValue(operation)) {
+            operations.push(operation.toOperation());
+          }
+        }
+      });
+    });
+    return operations;
  }
 }
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -1,19 +1,19 @@
 <div class="item-metadata" *ngIf="form">
  <div class="button-row top d-flex my-2 space-children-mr">
-    <button class="mr-auto btn btn-success" [disabled]="form.newValue"
+    <button class="mr-auto btn btn-success" [disabled]="form.newValue || (saving$ | async)"
            (click)="add()"><i class="fas fa-plus"></i>
      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
    </button>
-    <button class="btn btn-warning" *ngIf="isReinstatable"
+    <button class="btn btn-warning ml-2" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
            (click)="reinstate()"><i class="fas fa-undo-alt"></i>
      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
    </button>
-    <button class="btn btn-primary" [disabled]="!hasChanges"
+    <button class="btn btn-primary ml-2" [disabled]="!hasChanges || (saving$ | async)"
            (click)="submit()"><i class="fas fa-save"></i>
      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
    </button>
-    <button class="btn btn-danger" *ngIf="!isReinstatable"
-            [disabled]="!hasChanges"
+    <button class="btn btn-danger ml-2" *ngIf="!isReinstatable"
+            [disabled]="!hasChanges || (saving$ | async)"
            (click)="discard()"><i class="fas fa-times"></i>
      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
    </button>
@@ -36,7 +36,7 @@
    <div class="flex-grow-1 ds-drop-list">
      <div class="d-flex flex-row ds-value-row ds-success">
        <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center">
-          <input class="form-control" type="text" [(ngModel)]="form.newValue.newValue.value" />
+          <textarea class="form-control" rows="2" [(ngModel)]="form.newValue.newValue.value"></textarea>
        </div>
        <div class="ds-flex-cell ds-lang-cell">
          <input class="form-control" type="text" [(ngModel)]="form.newValue.newValue.language" />
@@ -44,16 +44,16 @@
        <div class="text-center ds-flex-cell ds-edit-cell">
          <div class="btn-group edit-field">
            <button class="btn btn-outline-success btn-sm ng-star-inserted" ngbTooltip="Confirm changes"
-                    [disabled]="!newMdField" (click)="form.setMetadataField(newMdField)">
+                    [disabled]="!newMdField || (saving$ | async)" (click)="form.setMetadataField(newMdField); onValueSaved()">
              <i class="fas fa-check fa-fw"></i>
            </button>
            <button class="btn btn-outline-danger btn-sm" ngbTooltip="Remove" [disabled]="true">
              <i class="fas fa-trash-alt fa-fw"></i>
            </button>
-            <button class="btn btn-outline-warning btn-sm" ngbTooltip="Undo changes" (click)="form.newValue = undefined">
+            <button class="btn btn-outline-warning btn-sm" ngbTooltip="Undo changes" [disabled]="(saving$ | async)" (click)="form.newValue = undefined">
              <i class="fas fa-undo-alt fa-fw"></i>
            </button>
-            <button class="btn btn-outline-secondary ds-drag-handle btn-sm" ngbTooltip="Drag to reorder" [disabled]="true">
+            <button class="btn btn-outline-secondary ds-drag-handle btn-sm disabled" ngbTooltip="Drag to reorder" [disabled]="true">
              <i class="fas fa-grip-vertical fa-fw"></i>
            </button>
          </div>
@@ -63,15 +63,15 @@
  </div>
  <div class="d-flex flex-row ds-field-row" *ngFor="let mdField of form.fieldKeys">
    <div class="lbl-cell">
-      <span>{{ mdField }}</span>
+      <span class="dont-break-out preserve-line-breaks">{{ mdField }}</span>
    </div>
    <div class="flex-grow-1 ds-drop-list">
      <div class="d-flex flex-row ds-value-row"
-           [ngClass]="{ 'ds-warning': mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD }"
+           [ngClass]="{ 'ds-warning': mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': form.fields[mdField].length === 1 }"
           *ngFor="let mdValue of form.fields[mdField]; let idx = index">
        <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center">
          <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.value }}</div>
-          <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.value" />
+          <textarea class="form-control" rows="2" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.value" ></textarea>
        </div>
        <div class="ds-flex-cell ds-lang-cell">
          <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
@@ -80,23 +80,24 @@
        <div class="text-center ds-flex-cell ds-edit-cell">
          <div class="btn-group edit-field">
            <button class="btn btn-outline-primary btn-sm ng-star-inserted" ngbTooltip="Edit" *ngIf="!mdValue.editing"
-                    [disabled]="mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.UPDATE" (click)="mdValue.editing = true">
+                    [disabled]="mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="mdValue.editing = true">
              <i class="fas fa-edit fa-fw"></i>
            </button>
            <button class="btn btn-outline-success btn-sm ng-star-inserted" ngbTooltip="Confirm changes" *ngIf="mdValue.editing"
-                    (click)="mdValue.confirmChanges()">
+                    [disabled]="(saving$ | async)" (click)="mdValue.confirmChanges(); onValueSaved()">
              <i class="fas fa-check fa-fw"></i>
            </button>
            <button class="btn btn-outline-danger btn-sm" ngbTooltip="Remove"
-                    [disabled]="mdValue.change || mdValue.editing" (click)="mdValue.change = DsoEditMetadataChangeTypeEnum.REMOVE">
+                    [disabled]="mdValue.change || mdValue.editing || (saving$ | async)" (click)="mdValue.change = DsoEditMetadataChangeTypeEnum.REMOVE; onValueSaved()">
              <i class="fas fa-trash-alt fa-fw"></i>
            </button>
            <button class="btn btn-outline-warning btn-sm" ngbTooltip="Undo changes"
-                    [disabled]="!mdValue.change && !mdValue.editing" (click)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.discard()">
+                    [disabled]="(!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.discard(); onValueSaved()">
              <i class="fas fa-undo-alt fa-fw"></i>
            </button>
            <!-- TODO: Enable drag -->
-            <button class="btn btn-outline-secondary ds-drag-handle btn-sm" ngbTooltip="Drag to reorder" [disabled]="true">
+            <button class="btn btn-outline-secondary ds-drag-handle btn-sm"
+                    [ngClass]="{'disabled': form.fields[mdField].length === 1 || (saving$ | async)}" ngbTooltip="Drag to reorder" [disabled]="form.fields[mdField].length === 1 || (saving$ | async)">
              <i class="fas fa-grip-vertical fa-fw"></i>
            </button>
          </div>
@@ -110,14 +111,14 @@
  </div>
  <div class="button-row bottom">
    <div class="mt-2 float-right space-children-mr ml-gap">
-      <button class="btn btn-warning" *ngIf="isReinstatable"
+      <button class="btn btn-warning ml-2" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
              (click)="reinstate()"><i class="fas fa-undo-alt"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
      </button>
-      <button class="btn btn-primary" [disabled]="!hasChanges"
+      <button class="btn btn-primary ml-2" [disabled]="!hasChanges || (saving$ | async)"
              (click)="submit()"><i class="fas fa-save"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
      </button>
-      <button class="btn btn-danger" *ngIf="!isReinstatable"
-              [disabled]="!hasChanges"
+      <button class="btn btn-danger ml-2" *ngIf="!isReinstatable"
+              [disabled]="!hasChanges || (saving$ | async)"
              (click)="discard()"><i class="fas fa-times"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
      </button>
    </div>
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
@@ -1,5 +1,6 @@
 .lbl-cell {
  min-width: 210px;
+  max-width: 210px;
  background-color: var(--bs-gray-100);
  font-weight: bold;

@@ -16,7 +17,8 @@
 }

 .ds-lang-cell {
-  min-width: 72px;
+  min-width: 90px;
+  max-width: 90px;
 }

 .ds-edit-cell {
@@ -68,6 +70,6 @@
  background-color: var(--bs-gray-100);
 }

-.ds-drag-handle {
+.ds-drag-handle:not(.disabled) {
  cursor: grab;
 }
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Injector, Input, OnDestroy, OnInit } from '@angular/core';
 import { AlertType } from '../../shared/alert/aletr-type';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form';
@@ -12,7 +12,17 @@ import { RegistryService } from '../../core/registry/registry.service';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { Observable } from 'rxjs/internal/Observable';
 import { followLink } from '../../shared/utils/follow-link-config.model';
-import { getFirstSucceededRemoteData, metadataFieldsToString } from '../../core/shared/operators';
+import {
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteData,
+  metadataFieldsToString
+} from '../../core/shared/operators';
+import { UpdateDataService } from '../../core/data/update-data.service';
+import { getDataServiceFor } from '../../core/cache/builders/build-decorators';
+import { ResourceType } from '../../core/shared/resource-type';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DataService } from '../../core/data/data.service';

@Component({
  selector: 'ds-dso-edit-metadata',
@@ -21,6 +31,7 @@ import { getFirstSucceededRemoteData, metadataFieldsToString } from '../../core/
 })
 export class DsoEditMetadataComponent implements OnInit, OnDestroy {
  @Input() dso: DSpaceObject;
+  updateDataService: UpdateDataService<DSpaceObject>;
  dsoType: string;

  form: DsoEditMetadataForm;
@@ -29,6 +40,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy {
  isReinstatable: boolean;
  hasChanges: boolean;
  isEmpty: boolean;
+  saving$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  /**
   * The AlertType enumeration for access in the component's template
@@ -44,7 +56,10 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy {

  dsoUpdateSubscription: Subscription;

-  constructor(protected route: ActivatedRoute) {
+  constructor(protected route: ActivatedRoute,
+              protected notificationsService: NotificationsService,
+              protected translateService: TranslateService,
+              protected parentInjector: Injector) {
  }

  ngOnInit(): void {
@@ -54,27 +69,55 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy {
        map((data: any) => data.dso)
      ).subscribe((rd: RemoteData<DSpaceObject>) => {
        this.dso = rd.payload;
+        this.initDataService();
        this.initForm();
      });
    } else {
+      this.initDataService();
      this.initForm();
    }
  }

-  initForm(): void {
-    this.dsoType = typeof this.dso.type === 'string' ? this.dso.type as any : this.dso.type.value;
-    this.form = new DsoEditMetadataForm(this.dso.metadata);
-    this.onDebounce();
+  initDataService(): void {
+    let type: ResourceType;
+    if (typeof this.dso.type === 'string') {
+      type = new ResourceType(this.dso.type);
+    } else {
+      type = this.dso.type;
+    }
+    const provider = getDataServiceFor(type);
+    this.updateDataService = Injector.create({
+      providers: [],
+      parent: this.parentInjector
+    }).get(provider);
+    this.dsoType = type.value;
  }

-  onDebounce(): void {
+  initForm(): void {
+    this.form = new DsoEditMetadataForm(this.dso.metadata);
+    this.onValueSaved();
+  }
+
+  onValueSaved(): void {
    this.hasChanges = this.form.hasChanges();
    this.isReinstatable = this.form.isReinstatable();
    this.isEmpty = Object.keys(this.form.fields).length === 0;
  }

  submit(): void {
-
+    this.saving$.next(true);
+    this.updateDataService.patch(this.dso, this.form.getOperations()).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((rd: RemoteData<DSpaceObject>) => {
+      this.saving$.next(false);
+      if (rd.hasFailed) {
+        this.notificationsService.error('error', rd.errorMessage);
+      } else {
+        this.notificationsService.success('saved', 'saved');
+        this.dso = rd.payload;
+        this.initForm();
+      }
+    });
  }

  add(): void {
@@ -84,10 +127,12 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy {

  discard(): void {
    this.form.discard();
+    this.onValueSaved();
  }

  reinstate(): void {
    this.form.reinstate();
+    this.onValueSaved();
  }

  ngOnDestroy() {
--- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts
@@ -1,9 +1,8 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { startWith, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 import {
  getAllSucceededRemoteData,
-  getFirstSucceededRemoteData,
  metadataFieldsToString
 } from '../../../core/shared/operators';
 import { Observable } from 'rxjs/internal/Observable';
@@ -26,7 +25,8 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
  public input: FormControl = new FormControl();

  query$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
-  debounceTime = 500;
+  debounceTime = 300;
+  selectedValueLoading = false;

  subs: Subscription[] = [];

@@ -38,7 +38,10 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
      this.input.valueChanges.pipe(
        debounceTime(this.debounceTime),
      ).subscribe((valueChange) => {
+        if (!this.selectedValueLoading) {
          this.query$.next(valueChange);
+        }
+        this.selectedValueLoading = false;
        this.mdField = valueChange;
        this.mdFieldChange.emit(this.mdField);
      }),
@@ -59,7 +62,8 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
  }

  select(mdFieldOption: string) {
-    this.mdField = mdFieldOption;
+    this.selectedValueLoading = true;
+    this.input.setValue(mdFieldOption);
  }

  ngOnDestroy(): void {