add reference dialog pop up

dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html

@@ -0,0 +1,38 @@
+<form *ngIf="formGroup" [formGroup]="formGroup">
+	<div class="row d-flex flex-row">
+		<div mat-dialog-title class="col-auto">
+			{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
+		</div>
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div mat-dialog-content class="row">
+		<div *ngFor="let field of systemFields;">
+			<div class="col">
+				<mat-form-field class="w-100">
+					<mat-label>{{field}}</mat-label>
+					<input matInput type="text" [name]="field" [formControl]="formGroup.get(field)" required>
+					<mat-error *ngIf="formGroup.get(field).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+			</div>
+		</div>
+		<ng-container *ngIf="referenceType && referenceType.definition && referenceType.definition.fields && referenceType.definition.fields.length > 0">
+			<div *ngFor="let field of referenceType.definition.fields;">
+				<div class="col">
+					<mat-form-field class="w-100">
+						<mat-label>{{field.label}}</mat-label>
+						<input matInput type="text" [name]="field.code" [formControl]="formGroup.get(field.code)" required>
+						<mat-error *ngIf="formGroup.get(field.code).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</ng-container>
+		
+		{{formGroup.value | json}}
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close>Cancel</button></div>
+		<div class="col-auto"><button mat-button color="primary" [disabled]="!formGroup.valid" (click)="send()" type="button">Save</button></div>
+	</div>
+</form>

dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss

@@ -0,0 +1,3 @@
+.close-btn {
+  cursor: pointer;
+}

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<ReferenceDialogEditorComponent>,
+		@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<ReferenceType>(x => x.id),
+			nameof<ReferenceType>(x => x.name),
+			nameof<ReferenceType>(x => x.code),
+
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.code)].join('.'),
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.label)].join('.'),
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.dataType)].join('.')
+		]
+	}
+
+}

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 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);
 				// (<UntypedFormArray>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);
+			});
 	}
 }

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 { }

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": {