diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html index 029ba0b1f8..8ba6489068 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html @@ -35,6 +35,14 @@ +
+ +
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 6c080a7f53..5ab4a7b247 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 @@ -37,6 +37,7 @@ import { DynamicFormControl, DynamicFormControlContainerComponent, DynamicFormControlEvent, + DynamicFormControlEventType, DynamicFormControlModel, DynamicFormLayout, DynamicFormLayoutService, @@ -82,10 +83,12 @@ import { find, map, startWith, switchMap, take } from 'rxjs/operators'; import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs'; import { SearchResult } from '../../../search/search-result.model'; import { DSpaceObject } from '../../../../core/shared/dspace-object.model'; +import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { RelationshipService } from '../../../../core/data/relationship.service'; import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service'; import { DsDynamicDisabledComponent } from './models/disabled/dynamic-disabled.component'; import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-disabled.model'; +import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component'; import { getAllSucceededRemoteData, getFirstSucceededRemoteData, @@ -107,6 +110,7 @@ import { Collection } from '../../../../core/shared/collection.model'; import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../../../../core/shared/metadata.models'; import { FormService } from '../../form.service'; import { SelectableListState } from '../../../object-list/selectable-list/selectable-list.reducer'; +import { SubmissionService } from '../../../../submission/submission.service'; import { followLink } from '../../../utils/follow-link-config.model'; import { paginatedRelationsToItems } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils'; import { RelationshipOptions } from '../models/relationship-options.model'; @@ -202,6 +206,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo @Input() model: any; relationshipValue$: Observable; isRelationship: boolean; + modalRef: NgbModalRef; item: Item; item$: Observable; collection: Collection; @@ -234,6 +239,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo protected validationService: DynamicFormValidationService, protected translateService: TranslateService, protected relationService: DynamicFormRelationService, + private modalService: NgbModal, private relationshipService: RelationshipService, private selectableListService: SelectableListService, private itemService: ItemDataService, @@ -243,6 +249,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo private ref: ChangeDetectorRef, private formService: FormService, private formBuilderService: FormBuilderService, + private submissionService: SubmissionService ) { super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService); } @@ -257,6 +264,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo if (this.isRelationship || isWrapperAroundRelationshipList) { const config = this.model.relationshipConfig || this.model.relationship; const relationshipOptions = Object.assign(new RelationshipOptions(), config); + this.listId = `list-${this.model.submissionId}-${relationshipOptions.relationshipType}`; this.setItem(); if (isWrapperAroundRelationshipList || !this.model.repeatable) { @@ -366,10 +374,68 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo } } + hasRelationship() { + return isNotEmpty(this.model) && this.model.hasOwnProperty('relationship') && isNotEmpty(this.model.relationship); + } + + isVirtual() { + const value: FormFieldMetadataValueObject = this.model.metadataValue; + return isNotEmpty(value) && value.isVirtual; + } + public hasResultsSelected(): Observable { return this.model.value.pipe(map((list: SearchResult[]) => isNotEmpty(list))); } + /** + * Open a modal where the user can select relationships to be added to item being submitted + */ + openLookup() { + this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, { + size: 'lg' + }); + + if (hasValue(this.model.value)) { + this.focus.emit({ + $event: new Event('focus'), + context: this.context, + control: this.control, + model: this.model, + type: DynamicFormControlEventType.Focus + } as DynamicFormControlEvent); + + this.model.value = null; + this.change.emit({ + $event: new Event('change'), + context: this.context, + control: this.control, + model: this.model, + type: DynamicFormControlEventType.Change + } as DynamicFormControlEvent); + + this.submissionService.dispatchSave(this.model.submissionId); + } + + const modalComp = this.modalRef.componentInstance; + + if (hasValue(this.model.value) && !this.model.readOnly) { + if (typeof this.model.value === 'string') { + modalComp.query = this.model.value; + } else if (typeof this.model.value.value === 'string') { + modalComp.query = this.model.value.value; + } + } + + modalComp.repeatable = this.model.repeatable; + modalComp.listId = this.listId; + modalComp.relationshipOptions = this.model.relationship; + modalComp.label = this.model.relationship.relationshipType; + modalComp.metadataFields = this.model.metadataFields; + modalComp.item = this.item; + modalComp.collection = this.collection; + modalComp.submissionId = this.model.submissionId; + } + /** * Callback for the remove event, * remove the current control from its array diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts index c7474cb769..4ed972b2fa 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts @@ -147,7 +147,6 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy ngOnInit(): void { this.setItem(); - this.submissionService.dispatchSave(this.submissionId); this.selection$ = this.selectableListService .getSelectableList(this.listId) .pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : [])); diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html index 8f5c18a6cf..7f6efc5b9f 100644 --- a/src/app/shared/form/form.component.html +++ b/src/app/shared/form/form.component.html @@ -14,14 +14,12 @@
-
-
@@ -31,13 +29,6 @@ (click)="insertItem($event, group.context, group.context.groups.length)"> {{'form.add' | translate}} -
@@ -54,6 +45,7 @@ + diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts index bd742dc9c6..c2b690504a 100644 --- a/src/app/shared/form/form.component.ts +++ b/src/app/shared/form/form.component.ts @@ -10,15 +10,13 @@ import { DynamicFormGroupModel, DynamicFormLayout, } from '@ng-dynamic-forms/core'; -import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { findIndex } from 'lodash'; import { FormBuilderService } from './builder/form-builder.service'; import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util'; import { FormService } from './form.service'; import { FormEntry, FormError } from './form.reducer'; -import { DsDynamicLookupRelationModalComponent } from './builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component'; -import { RelationshipOptions } from './builder/models/relationship-options.model'; import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model'; /** @@ -101,8 +99,7 @@ export class FormComponent implements OnDestroy, OnInit { constructor(private formService: FormService, protected changeDetectorRef: ChangeDetectorRef, - private formBuilderService: FormBuilderService, - private modalService: NgbModal) { + private formBuilderService: FormBuilderService) { } /** @@ -169,7 +166,6 @@ export class FormComponent implements OnDestroy, OnInit { filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors))), map((formState) => formState.errors), distinctUntilChanged()) - // .delay(100) // this terrible delay is here to prevent the detection change error .subscribe((errors: FormError[]) => { const { formGroup, formModel } = this; errors @@ -320,42 +316,6 @@ export class FormComponent implements OnDestroy, OnInit { return isNotEmpty(value) && value.isVirtual; } - hasRelationship(arrayContext: DynamicFormArrayModel, index: number) { - const context = arrayContext.groups[index]; - const model = context.group[0] as any; - return isNotEmpty(model) && model.hasOwnProperty('relationship') && isNotEmpty(model.relationship); - } - - /** - * Open a modal where the user can select relationships to be added to item being submitted - */ - openLookup(arrayContext: DynamicFormArrayModel, index: number) { - const context = arrayContext.groups[index]; - const model = context.group[0] as any; - this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, { - size: 'lg' - }); - const modalComp = this.modalRef.componentInstance; - - if (hasValue(model.value) && !model.readOnly) { - if (typeof model.value === 'string') { - modalComp.query = model.value; - } else if (typeof model.value.value === 'string') { - modalComp.query = model.value.value; - } - } - - const config = model.relationshipConfig || model.relationship; - const relationshipOptions = Object.assign(new RelationshipOptions(), config); - - modalComp.repeatable = model.repeatable; - modalComp.listId = `list-${model.submissionId}-${relationshipOptions.relationshipType}`; - modalComp.relationshipOptions = model.relationship; - modalComp.label = model.relationship.relationshipType; - modalComp.metadataFields = model.metadataFields; - modalComp.submissionId = model.submissionId; - } - protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent { const context = arrayContext.groups[index]; const itemGroupModel = context.context;