fixed patch move

2025-10-17 06:53:03 +00:00 · 2019-12-13 16:58:59 +01:00
parent b7f18a1275
commit e3355455af
6 changed files with 63 additions and 37 deletions
--- a/src/app/core/json-patch/builder/json-patch-operations-builder.ts
+++ b/src/app/core/json-patch/builder/json-patch-operations-builder.ts
@@ -1,7 +1,7 @@
 import { Store } from '@ngrx/store';
 import { CoreState } from '../../core.reducers';
 import {
-  NewPatchAddOperationAction,
+  NewPatchAddOperationAction, NewPatchMoveOperationAction,
  NewPatchRemoveOperationAction,
  NewPatchReplaceOperationAction
 } from '../json-patch-operations.actions';
@@ -61,6 +61,18 @@ export class JsonPatchOperationsBuilder {
        this.prepareValue(value, plain, false)));
  }

+
+  move(path: JsonPatchOperationPathObject, prevPath: string) {
+    this.store.dispatch(
+      new NewPatchMoveOperationAction(
+        path.rootElement,
+        path.subRootElement,
+        prevPath,
+        path.path
+      )
+    );
+  }
+
  /**
   * Dispatches a new NewPatchRemoveOperationAction
   *
--- a/src/app/core/json-patch/json-patch-operations.reducer.ts
+++ b/src/app/core/json-patch/json-patch-operations.reducer.ts
@@ -196,7 +196,8 @@ function newOperation(state: JsonPatchOperationsState, action): JsonPatchOperati
    body,
    action.type,
    action.payload.path,
-    hasValue(action.payload.value) ? action.payload.value : null);
+    hasValue(action.payload.value) ? action.payload.value : null,
+    hasValue(action.payload.from) ? action.payload.from : null);

  if (hasValue(newState[ action.payload.resourceType ])
    && hasValue(newState[ action.payload.resourceType ].children)) {
@@ -293,7 +294,7 @@ function flushOperation(state: JsonPatchOperationsState, action: FlushPatchOpera
  }
 }

-function addOperationToList(body: JsonPatchOperationObject[], actionType, targetPath, value?) {
+function addOperationToList(body: JsonPatchOperationObject[], actionType, targetPath, value?, fromPath?) {
  const newBody = Array.from(body);
  switch (actionType) {
    case JsonPatchOperationsActionTypes.NEW_JSON_PATCH_ADD_OPERATION:
@@ -313,6 +314,9 @@ function addOperationToList(body: JsonPatchOperationObject[], actionType, target
    case JsonPatchOperationsActionTypes.NEW_JSON_PATCH_REMOVE_OPERATION:
      newBody.push(makeOperationEntry({ op: JsonPatchOperationType.remove, path: targetPath }));
      break;
+    case JsonPatchOperationsActionTypes.NEW_JSON_PATCH_MOVE_OPERATION:
+      newBody.push(makeOperationEntry({ op: JsonPatchOperationType.move, from: fromPath, path: targetPath }));
+      break;
  }
  return newBody;
 }
--- 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
@@ -25,7 +25,7 @@ import {
 } 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 { hasNoValue, hasValue, isNotEmpty, isNull } from '../../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import {
  Reorderable,
@@ -55,7 +55,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();

  private submissionItem: Item;
-  private reorderables: Reorderable[];
+  private reorderables: Reorderable[] = [];

  /* tslint:enable:no-output-rename */

@@ -70,7 +70,6 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  }

  ngOnInit(): void {
-    console.log('this.model', this.model);
    this.submissionObjectService
      .findById(this.model.submissionId).pipe(
      getSucceededRemoteData(),
@@ -88,9 +87,10 @@ 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
+      let groups = this.model.groups.map((group, index) => [group, (this.control as any).controls[index]]);
+      groups = [...groups, groups[0]];
+      const reorderable$arr: Array<Observable<Reorderable>> = groups
+        .filter(([group, control], index) => index > 0 && hasValue((group.group[0] as any).value)) // disregard the first group, it is always empty to ensure the first field remains empty
        .map(([group, control]: [DynamicFormArrayGroupModel, AbstractControl], index: number) => {
          const model = group.group[0] as DynamicConcatModel;
          let formFieldMetadataValue: FormFieldMetadataValueObject = model.value as FormFieldMetadataValueObject;
@@ -155,15 +155,17 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
          }
          this.reorderables = reorderables;

-          this.reorderables.forEach((reorderable: Reorderable) => {
+          this.reorderables.forEach((reorderable: Reorderable, index: number) => {
            if (reorderable.hasMoved) {
+              const prevIndex = reorderable.oldIndex;
              reorderable.update().pipe(take(1)).subscribe((v) => {
+                console.log(reorderable, index);
                if (reorderable instanceof ReorderableFormFieldMetadataValue) {
                  const reoMD = reorderable as ReorderableFormFieldMetadataValue;
                  const mdl = Object.assign({}, reoMD.model, { value: reoMD.metadataValue });
-                  this.onChange({
-                    $event: undefined,
-                    context: reoMD.group,
+                  super.onChange({
+                    $event: { previousIndex: prevIndex  },
+                    context: { index },
                    control: reoMD.control,
                    group: this.group,
                    model: mdl,
@@ -175,7 +177,6 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
          })
        });
    })
-
  }

  moveSelection(event: CdkDragDrop<Relationship>) {
@@ -184,10 +185,13 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  }

  onChange($event) {
-    console.log($event);
-    const group = Object.assign({}, $event.group, { index: (($event.group.index || 0) - 1 + this.reorderables.length) % this.reorderables.length });
-    const event = Object.assign({}, $event, { context: group });
+    let event = $event;
+    if (hasNoValue($event.context)) {
+      const context = Object.assign({}, $event.context, { index: this.reorderables.length });
+      event = Object.assign({}, $event, { context });
      super.onChange(event);
+    } else {
+      this.updateReorderables();
+    }
  }
-
 }
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -50,10 +50,11 @@ export abstract class FieldParser {
        metadataKey = this.configData.selectableMetadata[0].metadata;
      };

+      console.log(this.getInitArrayIndex());
      const config = {
        id: uniqueId() + '_array',
        label: this.configData.label,
-        initialCount: this.getInitArrayIndex() + 1,
+        initialCount: this.getInitArrayIndex(),
        notRepeatable: !this.configData.repeatable,
        hasRelationship: isNotEmpty(this.configData.selectableRelationship),
        required: isNotEmpty(this.configData.mandatory),
@@ -87,7 +88,7 @@ export abstract class FieldParser {
            }
          }
          setLayout(model, 'element', 'host', 'col');
-          if (model.hasLanguages|| isNotEmpty(model.relationship)) {
+          if (model.hasLanguages || isNotEmpty(model.relationship)) {
            setLayout(model, 'grid', 'control', 'col');
          }
          return [model];
@@ -166,9 +167,10 @@ export abstract class FieldParser {
  }

  protected getInitArrayIndex() {
+    let fieldCount = 0;
    const fieldIds: any = this.getAllFieldIds();
    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
-      return this.initFormValues[fieldIds].length;
+      fieldCount = this.initFormValues[fieldIds].filter(value => hasValue(value) && hasValue(value.value)).length;
    } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
      let counter = 0;
      fieldIds.forEach((id) => {
@@ -176,10 +178,9 @@ export abstract class FieldParser {
          counter = counter + this.initFormValues[id].length;
        }
      });
-      return (counter === 0) ? 1 : counter;
-    } else {
-      return 1;
+      fieldCount = counter;
    }
+    return (fieldCount === 0) ? 1 : fieldCount + 1
  }

  protected getFieldId(): string {
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -12,9 +12,9 @@
                (dfFocus)="onFocus($event)">

            <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
-                <ng-container *ngIf="!context.hasRelationship">
+                metadata: {{context.metadata}}
                    <!--Array with repeatable items-->
-                    <div *ngIf="!context.notRepeatable"
+                    <div *ngIf="!context.notRepeatable && (!context.hasRelationship || (context.hasRelationship && index < 1))"
                         class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
                        <div class="btn-group" role="group" aria-label="Add and remove button">
                            <button type="button" class="btn btn-secondary"
@@ -31,7 +31,7 @@
                    </div>

                    <!--Array with non repeatable items - Only delete button-->
-                    <div *ngIf="context.notRepeatable && group.context.groups.length > 1"
+                    <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || (context.hasRelationship && index > 0)"
                         class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
                        <div class="btn-group" role="group" aria-label="Remove button">
                            <button type="button" class="btn btn-secondary"
@@ -41,15 +41,14 @@
                            </button>
                        </div>
                    </div>
-                </ng-container>

-                <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">
-                    <button type="button" class="btn btn-secondary"
-                            [disabled]="isItemReadOnly(context, index)"
-                            (click)="insertItem($event, group.context, group.index + 1)">
-                        {{'form.add' | translate}}
-                    </button>
-                </div>
+<!--                <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">-->
+<!--                    <button type="button" class="btn btn-secondary"-->
+<!--                            [disabled]="isItemReadOnly(context, index)"-->
+<!--                            (click)="insertItem($event, group.context, group.index + 1)">-->
+<!--                        {{'form.add' | translate}}-->
+<!--                    </button>-->
+<!--                </div>-->
            </ng-template>

        </ds-dynamic-form>
--- a/src/app/submission/sections/form/section-form-operations.service.ts
+++ b/src/app/submission/sections/form/section-form-operations.service.ts
@@ -9,7 +9,7 @@ import {
  DynamicFormControlModel
 } from '@ng-dynamic-forms/core';

-import { isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { FormFieldPreviousValueObject } from '../../../shared/form/builder/models/form-field-previous-value-object';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
@@ -326,6 +326,12 @@ export class SectionFormOperationsService {
        } else {
          this.operationsBuilder.remove(pathCombiner.getPath(path));
        }
+      } else if (hasValue(event.$event) && hasValue(event.$event.previousIndex)) {
+        console.log(event, path);
+        this.operationsBuilder.move(
+          pathCombiner.getPath(path),
+          pathCombiner.getPath(segmentedPath + '/' + event.$event.previousIndex).path
+      )
      } else {
        // New value is not equal from the previous one, so dispatch a replace operation
        this.operationsBuilder.replace(