diff --git 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 index 145df4c877..1aa6bbdca5 100644 --- 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 @@ -227,7 +227,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo } ngOnInit(): void { - console.log(this.model); this.hasRelationLookup = hasValue(this.model.relationship); if (this.hasRelationLookup) { @@ -246,6 +245,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo this.subs.push(item$.subscribe((item) => this.item = item)); const value = Object.assign(new MetadataValue(), this.model.value); + console.log(value); if (hasValue(value) && value.isVirtual) { this.relationshipValue$ = this.relationshipService.findById(value.virtualValue) .pipe( @@ -262,34 +262,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo ) ); } - // this.reorderable$ = - // item$.pipe( - // switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType) - // .pipe( - // getAllSucceededRemoteData(), - // getRemoteDataPayload(), - // map((relationshipList: PaginatedList) => relationshipList.page), - // startWith([]), - // switchMap((relationships: Relationship[]) => - // observableCombineLatest( - // relationships.map((relationship: Relationship) => - // relationship.leftItem.pipe( - // getSucceededRemoteData(), - // getRemoteDataPayload(), - // map((leftItem: Item) => { - // return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid) - // }), - // ) - // ))), - // map((relationships: ReorderableRelationship[]) => - // relationships - // .sort((a: Reorderable, b: Reorderable) => { - // return Math.sign(a.getPlace() - b.getPlace()); - // }) - // ) - // ) - // ) - // ); this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe( map((items: RemoteData>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))), diff --git 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 index 11a93f1060..b9f074f4bb 100644 --- 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,6 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy } from '@angular/core'; import { AbstractControl, FormControl } from '@angular/forms'; -import { DynamicFormControlEvent } from '@ng-dynamic-forms/core'; +import { DynamicFormArrayGroupModel, 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'; @@ -47,6 +47,7 @@ export class ReorderableFormFieldMetadataValue extends Reorderable { public metadataValue: FormFieldMetadataValueObject, public model: DynamicConcatModel, public control: FormControl, + public group: DynamicFormArrayGroupModel, oldIndex?: number, newIndex?: number ) { 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 27849f8de9..7876eaa6bc 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 @@ -5,7 +5,7 @@ import { DynamicFormArrayComponent, DynamicFormArrayGroupModel, DynamicFormControlCustomEvent, - DynamicFormControlEvent, + DynamicFormControlEvent, DynamicFormControlEventType, DynamicFormLayout, DynamicFormLayoutService, DynamicFormService, @@ -131,7 +131,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple place: index, }); } - return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index)); + return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, group, index, index)); } } else { formFieldMetadataValue = Object.assign(new FormFieldMetadataValueObject(), { @@ -139,7 +139,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple display: '', place: index, }); - return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index)); + return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, group, index, index)); } }); @@ -157,10 +157,19 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple this.reorderables.forEach((reorderable: Reorderable) => { if (reorderable.hasMoved) { - console.log('reorderable moved', reorderable, reorderable.getPlace()); reorderable.update().pipe(take(1)).subscribe((v) => { - this.change.emit(undefined); - console.log('reorderable updated', reorderable, reorderable.getPlace()); + 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, + control: reoMD.control, + group: this.group, + model: mdl, + type: DynamicFormControlEventType.Change + }); + } }); } }) @@ -174,4 +183,11 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple this.updateReorderables(); } + 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 }); + super.onChange(event); + } + } diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts index aefa8331c8..37a89c9ecb 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts @@ -49,13 +49,14 @@ export class DynamicConcatModel extends DynamicFormGroupModel { } get value() { - const firstValue = (this.get(0) as DsDynamicInputModel).value as any; - const secondValue = (this.get(1) as DsDynamicInputModel).value as any; - - if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) { - return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value + this.separator + secondValue.value); - } else if (isNotEmpty(firstValue)) { - return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value); + const [firstValue, secondValue] = this.group.map((inputModel: DsDynamicInputModel) => + (typeof inputModel.value === 'string') ? + Object.assign(new FormFieldMetadataValueObject(), { value: inputModel.value, display: inputModel.value }) : + (inputModel.value as any)); + if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value) && isNotEmpty(secondValue) && isNotEmpty(secondValue.value)) { + return Object.assign(new FormFieldMetadataValueObject(), firstValue, { value: firstValue.value + this.separator + secondValue.value }); + } else if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value)) { + return Object.assign(new FormFieldMetadataValueObject(), firstValue); } else { return null; } diff --git a/src/app/shared/form/form.reducer.ts b/src/app/shared/form/form.reducer.ts index 1d44375c0d..9517f41b74 100644 --- a/src/app/shared/form/form.reducer.ts +++ b/src/app/shared/form/form.reducer.ts @@ -151,6 +151,8 @@ function initForm(state: FormState, action: FormInitAction): FormState { * the new state, with the data changed. */ function changeDataForm(state: FormState, action: FormChangeAction): FormState { + console.log("state changed", action); + if (hasValue(state[action.payload.formId])) { const newState = Object.assign({}, state); newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], {