diff --git 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 index b6c1a6c308..42a02fee45 100644 --- 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 @@ -6,7 +6,6 @@ import { DynamicFormArrayModel, DynamicFormControlCustomEvent, DynamicFormControlEvent, - DynamicFormControlEventType, DynamicFormControlLayout, DynamicFormLayout, DynamicFormLayoutService, @@ -55,16 +54,12 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { const index = event.currentIndex; if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) { - const $event = { - $event: { previousIndex: prevIndex }, - context: { index }, - control: (this.control as any).controls[index], - group: this.group, + this.onCustomEvent({ + previousIndex: prevIndex, + index, model: this.model.groups[index].group[0], - type: DynamicFormControlEventType.Change - }; - - this.onChange($event); + control: (this.control as any).controls[index] + }, 'move'); } } diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html index 7f6efc5b9f..10ec8da3b9 100644 --- a/src/app/shared/form/form.component.html +++ b/src/app/shared/form/form.component.html @@ -9,7 +9,8 @@ (change)="$event.stopPropagation();" (dfBlur)="onBlur($event)" (dfChange)="onChange($event)" - (dfFocus)="onFocus($event)"> + (dfFocus)="onFocus($event)" + (ngbEvent)="onCustomEvent($event)">
= new EventEmitter(); @Output('dfChange') change: EventEmitter = new EventEmitter(); @Output('dfFocus') focus: EventEmitter = new EventEmitter(); + @Output('ngbEvent') customEvent: EventEmitter = new EventEmitter(); /* tslint:enable:no-output-rename */ @Output() addArrayItem: EventEmitter = new EventEmitter(); @Output() removeArrayItem: EventEmitter = new EventEmitter(); @@ -250,6 +251,10 @@ export class FormComponent implements OnDestroy, OnInit { this.blur.emit(event); } + onCustomEvent(event: any) { + this.customEvent.emit(event); + } + onFocus(event: DynamicFormControlEvent): void { this.formService.setTouched(this.formId, this.formModel, event); this.focus.emit(event); diff --git a/src/app/submission/sections/form/section-form-operations.service.ts b/src/app/submission/sections/form/section-form-operations.service.ts index 27e4f73876..136203329f 100644 --- a/src/app/submission/sections/form/section-form-operations.service.ts +++ b/src/app/submission/sections/form/section-form-operations.service.ts @@ -6,7 +6,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_GROUP, DynamicFormArrayGroupModel, DynamicFormControlEvent, - DynamicFormControlModel + DynamicFormControlModel, isDynamicFormControlEvent } from '@ng-dynamic-forms/core'; import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util'; @@ -64,6 +64,9 @@ export class SectionFormOperationsService { case 'change': this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue); break; + case 'move': + this.dispatchOperationsFromMoveEvent(pathCombiner, event); + break; default: break; } @@ -73,20 +76,29 @@ export class SectionFormOperationsService { * Return index if specified field is part of fields array * * @param event - * the [[DynamicFormControlEvent]] for the specified operation + * the [[DynamicFormControlEvent]] | CustomEvent for the specified operation * @return number * the array index is part of array, zero otherwise */ - public getArrayIndexFromEvent(event: DynamicFormControlEvent): number { + public getArrayIndexFromEvent(event: DynamicFormControlEvent | any): number { let fieldIndex: number; + if (isNotEmpty(event)) { - if (isNull(event.context)) { - // Check whether model is part of an Array of group - if (this.isPartOfArrayOfGroup(event.model)) { - fieldIndex = (event.model.parent as any).parent.index; + if (isDynamicFormControlEvent(event)) { + // This is the case of a default insertItem/removeItem event + + if (isNull(event.context)) { + // Check whether model is part of an Array of group + if (this.isPartOfArrayOfGroup(event.model)) { + fieldIndex = (event.model.parent as any).parent.index; + } + } else { + fieldIndex = event.context.index; } + } else { - fieldIndex = event.context.index; + // This is the case of a custom event which contains indexes information + fieldIndex = event.index as any; } } @@ -394,8 +406,7 @@ export class SectionFormOperationsService { previousValue.delete(); } else if (value.hasValue()) { // Here model has no previous value but a new one - if (isUndefined(this.getArrayIndexFromEvent(event)) - || this.getArrayIndexFromEvent(event) === 0) { + if (isUndefined(this.getArrayIndexFromEvent(event)) || this.getArrayIndexFromEvent(event) === 0) { // Model is single field or is part of an array model but is the first item, // so dispatch an add operation that initialize the values of a specific metadata this.operationsBuilder.add( @@ -457,4 +468,19 @@ export class SectionFormOperationsService { previousValue.delete(); } + + private dispatchOperationsFromMoveEvent(pathCombiner: JsonPatchOperationPathCombiner, + event: DynamicFormControlEvent) { + const customEvent = event.$event; + const path = this.getFieldPathFromEvent(customEvent); + const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(customEvent); + const moveTo = pathCombiner.getPath(path); + const moveFrom = pathCombiner.getPath(segmentedPath + '/' + customEvent.previousIndex); + if (isNotEmpty(moveFrom.path) && isNotEmpty(moveTo.path) && moveFrom.path !== moveTo.path) { + this.operationsBuilder.move( + moveTo, + moveFrom.path + ); + } + } } diff --git a/src/app/submission/sections/form/section-form.component.html b/src/app/submission/sections/form/section-form.component.html index 166e52675b..64e8a05d80 100644 --- a/src/app/submission/sections/form/section-form.component.html +++ b/src/app/submission/sections/form/section-form.component.html @@ -6,4 +6,5 @@ (dfChange)="onChange($event)" (dfFocus)="onFocus($event)" (remove)="onRemove($event)" + (ngbEvent)="onCustomEvent($event)" (removeArrayItem)="onRemove($event)"> diff --git a/src/app/submission/sections/form/section-form.component.ts b/src/app/submission/sections/form/section-form.component.ts index bc88323a8c..2d1b0ed764 100644 --- a/src/app/submission/sections/form/section-form.component.ts +++ b/src/app/submission/sections/form/section-form.component.ts @@ -448,4 +448,17 @@ export class SubmissionSectionformComponent extends SectionModelComponent { isFieldToRemove(fieldId, index) { return this.fieldsOnTheirWayToBeRemoved.has(fieldId) && this.fieldsOnTheirWayToBeRemoved.get(fieldId).includes(index); } + + /** + * Handle the customEvent (ex. drag-drop move event). + * The customEvent is stored inside event.$event + * @param $event + */ + onCustomEvent(event: any) { + this.formOperationsService.dispatchOperationsFromEvent( + this.pathCombiner, + event, + null, + null); + } }