From cbc3990cdf17c33b227c49f147c1571b6f6a117d Mon Sep 17 00:00:00 2001 From: amentis Date: Mon, 1 Apr 2024 16:05:28 +0300 Subject: [PATCH] add reference dialog pop up --- .../reference-dialog-editor.component.html | 38 ++++++ .../reference-dialog-editor.component.scss | 3 + .../reference-dialog-editor.component.ts | 115 ++++++++++++++++++ .../reference-field.component.ts | 39 ++++-- .../reference-field/reference-field.module.ts | 7 +- dmp-frontend/src/assets/i18n/en.json | 3 + 6 files changed, 190 insertions(+), 15 deletions(-) create mode 100644 dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html create mode 100644 dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss create mode 100644 dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts diff --git a/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html new file mode 100644 index 000000000..6365667ae --- /dev/null +++ b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html @@ -0,0 +1,38 @@ +
+
+
+ {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}} +
+
+ close +
+
+
+
+
+ + {{field}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ +
+
+ + {{field.label}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + + {{formGroup.value | json}} +
+
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss new file mode 100644 index 000000000..b1538a730 --- /dev/null +++ b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss @@ -0,0 +1,3 @@ +.close-btn { + cursor: pointer; +} diff --git a/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts new file mode 100644 index 000000000..ced2a056b --- /dev/null +++ b/dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts @@ -0,0 +1,115 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type'; +import { ReferenceType, ReferenceTypeDefinition, ReferenceTypeField } from '@app/core/model/reference-type/reference-type'; +import { DefinitionPersist, FieldPersist, ReferencePersist } from '@app/core/model/reference/reference'; +import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; +import { BaseComponent } from '@common/base/base.component'; +import { FormService } from '@common/forms/form-service'; +import { takeUntil } from 'rxjs/operators'; +import { nameof } from 'ts-simple-nameof'; + +@Component({ + templateUrl: 'reference-dialog-editor.component.html', + styleUrls: ['./reference-dialog-editor.component.scss'] +}) +export class ReferenceDialogEditorComponent extends BaseComponent implements OnInit { + formGroup: UntypedFormGroup; + referenceType: ReferenceType; + systemFields: string[]; + label: string = null + + constructor( + private referenceTypeService: ReferenceTypeService, + private fb: UntypedFormBuilder, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any, + private formService: FormService + ) { + super(); + this.label = data.label; + this.formGroup = this.fb.group({}); + } + + ngOnInit(): void { + this.systemFields = this.referenceTypeService.getSystemFields([]); + + this.referenceTypeService.getSingle(this.data.referenceTypeId, this.lookupFields()) + .pipe(takeUntil(this._destroyed)) + .subscribe( + referenceType => { + this.referenceType = referenceType; + this.buildForm(referenceType.definition?.fields); + } + ); + } + + buildForm(fields: ReferenceTypeField[]) { + + this.systemFields.forEach(systemField => { + this.formGroup.setControl(systemField, new FormControl({ value: null, disabled: false }, Validators.required)); + }) + + if (fields != null && fields.length >= 0){ + fields.forEach(x => { + this.formGroup.setControl(x.code, new FormControl({ value: null, disabled: false }, Validators.required)); + }) + } + + } + + send() { + this.formService.touchAllFormFields(this.formGroup); + if (!this.formGroup.valid) { return; } + + this.dialogRef.close(this.buildReferencePersist()); + + } + + buildReferencePersist() : ReferencePersist{ + return { + label: this.formGroup.get(this.systemFields[1]).value, + description: this.formGroup.get(this.systemFields[2]).value, + typeId: this.data.referenceTypeId, + reference: this.formGroup.get(this.systemFields[0]).value, + abbreviation: "", + source: "Internal", + sourceType: ReferenceSourceType.Internal, + definition: this.buildDefinitionPersist(this.referenceType.definition.fields), + } + + } + + buildDefinitionPersist(fields: ReferenceTypeField[]): DefinitionPersist{ + if(fields == null || fields.length == 0) return null; + return { + fields: fields.map(x => this.buildFieldPersist(x)) + } + } + + buildFieldPersist(field: ReferenceTypeField): FieldPersist{ + return { + code: field.code, + dataType: field.dataType, + value: this.formGroup.get(field.code).value, + } + } + + close() { + this.dialogRef.close(false); + } + + private lookupFields(): string[] { + return [ + nameof(x => x.id), + nameof(x => x.name), + nameof(x => x.code), + + [nameof(x => x.definition), nameof(x => x.fields), nameof(x => x.code)].join('.'), + [nameof(x => x.definition), nameof(x => x.fields), nameof(x => x.label)].join('.'), + [nameof(x => x.definition), nameof(x => x.fields), nameof(x => x.dataType)].join('.') + ] + } + +} diff --git a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts index b8448ccc6..99957ce50 100644 --- a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts +++ b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts @@ -1,11 +1,15 @@ import { Component, Input, OnInit } from '@angular/core'; -import { UntypedFormGroup } from '@angular/forms'; +import { UntypedFormArray, UntypedFormGroup } from '@angular/forms'; +import { MatDialog } from '@angular/material/dialog'; import { ReferenceType } from '@app/core/model/reference-type/reference-type'; import { ReferenceService } from '@app/core/services/reference/reference.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration'; import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; import { BaseComponent } from '@common/base/base.component'; +import { takeUntil } from 'rxjs/operators'; +import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component'; +import { ReferencePersist } from '@app/core/model/reference/reference'; @Component({ selector: 'app-reference-field-component', @@ -28,6 +32,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit { constructor( private referenceService: ReferenceService, public enumUtils: EnumUtils, + private dialog: MatDialog, ) { super(); } ngOnInit() { @@ -39,17 +44,25 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit { } addReference() { - // const dialogRef = this.dialog.open(DatasetExternalDataRepositoryDialogEditorComponent, { - // width: '500px', - // restoreFocus: false, - // data: {} - // }); - // dialogRef.afterClosed() - // .pipe(takeUntil(this._destroyed)) - // .subscribe(result => { - // if (!result) { return; } - // const dataRepositoryModel = new ExternalDataRepositoryEditorModel(result.id, result.name, result.abbreviation, result.uri, result.pid, result.source); - // (this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm()); - // }); + const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, { + width: '500px', + restoreFocus: false, + data: { + referenceTypeId: this.referenceType.id, + label: this.label ?? this.referenceType.name + }, + }); + dialogRef.afterClosed() + .pipe(takeUntil(this._destroyed)) + .subscribe(newResult => { + if (!newResult) { return; } + // const dataRepositoryModel = new ExternalDataRepositoryEditorModel(result.id, result.name, result.abbreviation, result.uri, result.pid, result.source); + // (this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm()); + + let results = this.form.value as ReferencePersist[]; + if (results == undefined) results = []; + results.push(newResult); + this.form.setValue(results); + }); } } diff --git a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.module.ts b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.module.ts index 96caafc21..1e06517b1 100644 --- a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.module.ts +++ b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.module.ts @@ -5,6 +5,7 @@ import { DescriptionRoutingModule } from '@app/ui/description/description.routin import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonUiModule } from '@common/ui/common-ui.module'; import { ReferenceFieldComponent } from './reference-field.component'; +import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component'; @NgModule({ imports: [ @@ -15,10 +16,12 @@ import { ReferenceFieldComponent } from './reference-field.component'; AutoCompleteModule ], declarations: [ - ReferenceFieldComponent + ReferenceFieldComponent, + ReferenceDialogEditorComponent ], exports: [ - ReferenceFieldComponent + ReferenceFieldComponent, + ReferenceDialogEditorComponent ] }) export class ReferenceFieldModule { } diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 42c697a77..6cc4950c9 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -1352,6 +1352,9 @@ "COULD-NOT-FIND-MESSAGE": "Couldn't find it?", "ACTIONS": { "INSERT-MANUALLY": "Insert it manually" + }, + "REFERENCE-DIALOG-EDITOR": { + "TITLE": "Add a" } }, "DMP-CLONE-DIALOG": {