store reordered relationships to the server

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)
                 }),
               )
             )

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 { Component, EventEmitter, Input, OnChanges, OnDestroy } from '@angular/core';
-import { Item } from '../../../../../core/shared/item.model';
+import { AbstractControl, FormControl } from '@angular/forms';
-import { MetadataRepresentation } from '../../../../../core/shared/metadata-representation/metadata-representation.model';
+import { DynamicFormControlEvent } from '@ng-dynamic-forms/core';
-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 { 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) {
+  update(): Observable<RemoteData<Relationship>> {
-    super(oldIndex, newIndex);
+    const updatedRelationship$ = this.relationshipService.updatePlace(this);
-    this.metadata = metadata;
-  }
 
-  getId(): string {
+    updatedRelationship$.pipe(
-    return this.metadata.uuid;
+      getSucceededRemoteData()
-  }
+    ).subscribe(() => {
+      this.oldIndex = this.newIndex;
+    });
 
-  getPlace(): number {
+    return updatedRelationship$;
-      return this.metadata.place
   }
 }
 

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,
-  getRemoteDataPayload, getSucceededRemoteData
+  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) => {
+        .map(([group, control]: [DynamicFormArrayGroupModel, AbstractControl], index: number) => {
-        const formFieldMetadataValue: FormFieldMetadataValueObject = (group.group[0] as DynamicConcatModel).value as FormFieldMetadataValueObject;
+          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) {
+            if (metadataValue.isVirtual) {
-            return this.relationshipService.findById(value.virtualValue)
+              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));
+              if (typeof formFieldMetadataValue === 'string') {
-          }
+                formFieldMetadataValue = Object.assign(new FormFieldMetadataValueObject(), {
-        } else {
+                  value: formFieldMetadataValue,
-          const value = Object.assign(new MetadataValue(), {
+                  display: formFieldMetadataValue,
-            value: '',
                   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.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();
-    // })
   }
 
 }