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 aa57cfe970..1843beb448 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 @@ -1,5 +1,5 @@ import { CdkDragDrop } from '@angular/cdk/drag-drop'; -import { Component, EventEmitter, Input, NgZone, Output, QueryList } from '@angular/core'; +import { Component, EventEmitter, Input, NgZone, OnInit, Output, QueryList } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { DynamicFormArrayComponent, @@ -39,12 +39,12 @@ import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model'; selector: 'ds-dynamic-form-array', templateUrl: './dynamic-form-array.component.html' }) -export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { +export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent implements OnInit { @Input() bindId = true; @Input() group: FormGroup; @Input() layout: DynamicFormLayout; - private _model: DynamicRowArrayModel; + @Input() model: DynamicRowArrayModel; @Input() templates: QueryList | undefined; /* tslint:disable:no-output-rename */ @@ -56,14 +56,6 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { private submissionItem: Item; private reorderables: Reorderable[]; - get model(): DynamicRowArrayModel { - return this._model; - }; - - @Input() set model(model: DynamicRowArrayModel) { - this._model = model; - this.onSetModel(); - }; /* tslint:enable:no-output-rename */ constructor(protected layoutService: DynamicFormLayoutService, @@ -76,7 +68,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { super(layoutService, validationService); } - private onSetModel(): void { + ngOnInit(): void { this.submissionObjectService .findById(this.model.submissionId).pipe( getSucceededRemoteData(), @@ -89,11 +81,12 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { ) ).subscribe((item) => this.submissionItem = item); - this.updateReorderables(this._model.groups); + this.updateReorderables(); } - private updateReorderables(groups: DynamicFormArrayGroupModel[]): void { - const reorderable$arr: Array> = groups + private updateReorderables(): void { + const reorderable$arr: Array> = this.model.groups + .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; if (hasValue(formFieldMetadataValue)) { @@ -105,10 +98,8 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { confidence: formFieldMetadataValue.confidence }); if (value.isVirtual) { - console.log('value.virtualValue', value.virtualValue); return this.relationshipService.findById(value.virtualValue) .pipe( - tap((relationship: Relationship) => console.log('relationship', relationship)), getSucceededRemoteData(), getRemoteDataPayload(), switchMap((relationship: Relationship) => @@ -129,10 +120,16 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { } else { return observableOf(new ReorderableMetadataValue(value, index, index)); } + } else { + const value = Object.assign(new MetadataValue(), { + value: '', + place: index, + }); + return observableOf(new ReorderableMetadataValue(value, index, index)); } }); - observableCombineLatest(...reorderable$arr) + observableCombineLatest(reorderable$arr) .subscribe((reorderables: Reorderable[]) => { if (isNotEmpty(this.reorderables)) { reorderables.forEach((newReorderable: Reorderable) => { @@ -149,7 +146,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent { moveSelection(event: CdkDragDrop) { this.model.moveGroup(event.previousIndex,event.currentIndex - event.previousIndex); - this.updateReorderables(this._model.groups); + this.updateReorderables(); // this.zone.runOutsideAngular(() => {