store reordered relationships to the server

2025-10-07 10:04:11 +00:00 · 2019-12-10 15:40:56 +01:00
parent b728463e56
commit 453a2919d1
3 changed files with 141 additions and 102 deletions
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -255,7 +255,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
                getSucceededRemoteData(),
                getRemoteDataPayload(),
                map((leftItem: Item) => {
-                  return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
+                  return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid, this.relationshipService)
                }),
              )
            )
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.ts
@@ -1,31 +1,55 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { Item } from '../../../../../core/shared/item.model';
-import { MetadataRepresentation } from '../../../../../core/shared/metadata-representation/metadata-representation.model';
-import { getAllSucceededRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
-import { hasValue, isNotEmpty } from '../../../../empty.util';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { Relationship } from '../../../../../core/shared/item-relationships/relationship.model';
-import { MetadataValue } from '../../../../../core/shared/metadata.models';
-import { ItemMetadataRepresentation } from '../../../../../core/shared/metadata-representation/item/item-metadata-representation.model';
-import { RelationshipOptions } from '../../models/relationship-options.model';
-import { RemoveRelationshipAction } from '../relation-lookup-modal/relationship.actions';
-import { SelectableListService } from '../../../../object-list/selectable-list/selectable-list.service';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy } from '@angular/core';
+import { AbstractControl, FormControl } from '@angular/forms';
+import { DynamicFormControlEvent } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
+import { Observable, of as observableOf, Subject, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { AppState } from '../../../../../app.reducer';
+import { RelationshipService } from '../../../../../core/data/relationship.service';
+import { RemoteData } from '../../../../../core/data/remote-data';
+import { Relationship } from '../../../../../core/shared/item-relationships/relationship.model';
+import { Item } from '../../../../../core/shared/item.model';
+import { ItemMetadataRepresentation } from '../../../../../core/shared/metadata-representation/item/item-metadata-representation.model';
+import { MetadataRepresentation } from '../../../../../core/shared/metadata-representation/metadata-representation.model';
+import { MetadataValue } from '../../../../../core/shared/metadata.models';
+import {
+  getAllSucceededRemoteData,
+  getRemoteDataPayload,
+  getSucceededRemoteData
+} from '../../../../../core/shared/operators';
+import { hasValue, isNotEmpty } from '../../../../empty.util';
 import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
+import { SelectableListService } from '../../../../object-list/selectable-list/selectable-list.service';
+import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
+import { RelationshipOptions } from '../../models/relationship-options.model';
+import { DynamicConcatModel } from '../models/ds-dynamic-concat.model';
+import { RemoveRelationshipAction } from '../relation-lookup-modal/relationship.actions';

 export abstract class Reorderable {
+
  constructor(public oldIndex?: number, public newIndex?: number) {
  }

  abstract getId(): string;
+
  abstract getPlace(): number;
+
+  abstract update(): Observable<any>;
+
+  get hasMoved(): boolean {
+    return this.oldIndex !== this.newIndex
+  }
 }

-export class ReorderableMetadataValue extends Reorderable {
+export class ReorderableFormFieldMetadataValue extends Reorderable {

-  constructor(public metadataValue: MetadataValue, oldIndex?: number, newIndex?: number) {
+  constructor(
+    public metadataValue: FormFieldMetadataValueObject,
+    public model: DynamicConcatModel,
+    public control: FormControl,
+    oldIndex?: number,
+    newIndex?: number
+  ) {
    super(oldIndex, newIndex);
    this.metadataValue = metadataValue;
  }
@@ -43,11 +67,19 @@ export class ReorderableMetadataValue extends Reorderable {
    return this.metadataValue.place;
  }

+  update(): Observable<FormFieldMetadataValueObject> {
+    this.metadataValue.place = this.newIndex;
+    this.model.valueUpdates.next(this.metadataValue as any);
+    console.log('this.control.value', this.control.value);
+    this.oldIndex = this.newIndex;
+    return observableOf(this.metadataValue);
+  }
+
 }

 export class ReorderableRelationship extends Reorderable {

-  constructor(public relationship: Relationship, public useLeftItem: boolean, oldIndex?: number, newIndex?: number) {
+  constructor(public relationship: Relationship, public useLeftItem: boolean, protected relationshipService: RelationshipService, oldIndex?: number, newIndex?: number) {
    super(oldIndex, newIndex);
    this.relationship = relationship;
    this.useLeftItem = useLeftItem;
@@ -64,21 +96,17 @@ export class ReorderableRelationship extends Reorderable {
      return this.relationship.leftPlace
    }
  }
-}
-export class ReorderableMetadata extends Reorderable {
-  metadata: MetadataValue;

-  constructor(metadata: MetadataValue, oldIndex?: number, newIndex?: number) {
-    super(oldIndex, newIndex);
-    this.metadata = metadata;
-  }
+  update(): Observable<RemoteData<Relationship>> {
+    const updatedRelationship$ = this.relationshipService.updatePlace(this);

-  getId(): string {
-    return this.metadata.uuid;
-  }
+    updatedRelationship$.pipe(
+      getSucceededRemoteData()
+    ).subscribe(() => {
+      this.oldIndex = this.newIndex;
+    });

-  getPlace(): number {
-      return this.metadata.place
+    return updatedRelationship$;
  }
 }

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -1,12 +1,11 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Component, EventEmitter, Input, NgZone, OnInit, Output, QueryList } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 import {
  DynamicFormArrayComponent,
  DynamicFormArrayGroupModel,
-  DynamicFormArrayModel,
  DynamicFormControlCustomEvent,
-  DynamicFormControlEvent, DynamicFormControlModel,
+  DynamicFormControlEvent,
  DynamicFormLayout,
  DynamicFormLayoutService,
  DynamicFormService,
@@ -14,22 +13,23 @@ import {
  DynamicTemplateDirective
 } from '@ng-dynamic-forms/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
-import { map, switchMap, take, tap } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { RelationshipService } from '../../../../../../core/data/relationship.service';
 import { RemoteData } from '../../../../../../core/data/remote-data';
 import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
 import { Item } from '../../../../../../core/shared/item.model';
 import { MetadataValue } from '../../../../../../core/shared/metadata.models';
 import {
-  getAllSucceededRemoteData,
-  getRemoteDataPayload, getSucceededRemoteData
+  getRemoteDataPayload,
+  getSucceededRemoteData
 } from '../../../../../../core/shared/operators';
 import { SubmissionObject } from '../../../../../../core/submission/models/submission-object.model';
 import { SubmissionObjectDataService } from '../../../../../../core/submission/submission-object-data.service';
 import { hasValue, isNotEmpty } from '../../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import {
-  Reorderable, ReorderableMetadataValue,
+  Reorderable,
+  ReorderableFormFieldMetadataValue,
  ReorderableRelationship
 } from '../../existing-metadata-list-element/existing-metadata-list-element.component';
 import { DynamicConcatModel } from '../ds-dynamic-concat.model';
@@ -69,6 +69,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  }

  ngOnInit(): void {
+    console.log('this.group.controls[this.model.id]', this.control);
    this.submissionObjectService
      .findById(this.model.submissionId).pipe(
      getSucceededRemoteData(),
@@ -85,20 +86,23 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  }

  private updateReorderables(): void {
+    this.zone.runOutsideAngular(() => {
      const reorderable$arr: Array<Observable<Reorderable>> = this.model.groups
+        .map((group, index) => [group, (this.control as any).controls[index]])
        .slice(1) // disregard the first group, it is always empty to ensure the first field remains empty
-      .map((group: DynamicFormArrayGroupModel, index: number) => {
-        const formFieldMetadataValue: FormFieldMetadataValueObject = (group.group[0] as DynamicConcatModel).value as FormFieldMetadataValueObject;
+        .map(([group, control]: [DynamicFormArrayGroupModel, AbstractControl], index: number) => {
+          const model = group.group[0] as DynamicConcatModel;
+          let formFieldMetadataValue: FormFieldMetadataValueObject = model.value as FormFieldMetadataValueObject;
          if (hasValue(formFieldMetadataValue)) {
-          const value = Object.assign(new MetadataValue(), {
+            const metadataValue = Object.assign(new MetadataValue(), {
              value: formFieldMetadataValue.display,
              language: formFieldMetadataValue.language,
              place: formFieldMetadataValue.place,
              authority: formFieldMetadataValue.authority,
              confidence: formFieldMetadataValue.confidence
            });
-          if (value.isVirtual) {
-            return this.relationshipService.findById(value.virtualValue)
+            if (metadataValue.isVirtual) {
+              return this.relationshipService.findById(metadataValue.virtualValue)
                .pipe(
                  getSucceededRemoteData(),
                  getRemoteDataPayload(),
@@ -110,6 +114,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
                        return new ReorderableRelationship(
                          relationship,
                          leftItem.uuid !== this.submissionItem.uuid,
+                          this.relationshipService,
                          index,
                          index
                        );
@@ -118,14 +123,22 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
                  )
                );
            } else {
-            return observableOf(new ReorderableMetadataValue(value, index, index));
-          }
-        } else {
-          const value = Object.assign(new MetadataValue(), {
-            value: '',
+              if (typeof formFieldMetadataValue === 'string') {
+                formFieldMetadataValue = Object.assign(new FormFieldMetadataValueObject(), {
+                  value: formFieldMetadataValue,
+                  display: formFieldMetadataValue,
                  place: index,
                });
-          return observableOf(new ReorderableMetadataValue(value, index, index));
+              }
+              return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index));
+            }
+          } else {
+            formFieldMetadataValue = Object.assign(new FormFieldMetadataValueObject(), {
+              value: '',
+              display: '',
+              place: index,
+            });
+            return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index));
          }
        });

@@ -140,25 +153,23 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
            })
          }
          this.reorderables = reorderables;
-        console.log('this.reorderables', this.reorderables);
+
+          this.reorderables.forEach((reorderable: Reorderable) => {
+            if (reorderable.hasMoved) {
+              console.log('reorderable moved', reorderable, reorderable.getPlace());
+              reorderable.update().pipe(take(1)).subscribe((v) => {
+                console.log('reorderable updated', reorderable, reorderable.getPlace());
              });
            }
+          })
+        });
+    })
+
+  }

  moveSelection(event: CdkDragDrop<Relationship>) {
-    this.model.moveGroup(event.previousIndex,event.currentIndex - event.previousIndex);
+    this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
    this.updateReorderables();
-
-    // this.zone.runOutsideAngular(() => {
-
-      // return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
-      //     if (rel.oldIndex !== rel.newIndex) {
-      //       return this.relationshipService.updatePlace(rel);
-      //     } else {
-      //       return observableOf(undefined);
-      //     }
-      //   })
-      // ).pipe(getSucceededRemoteData()).subscribe();
-    // })
  }

 }