From 174e57f62b74428e2983438bd7edc02d4820fc0e Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Thu, 8 Feb 2024 19:48:14 +0200
Subject: [PATCH] more description editor changes

---
 .../editor/description-editor.component.ts    |  15 +-
 .../editor/description-editor.model.ts        |   2 +-
 .../form-field/form-field.component.html      | 252 +++++-------------
 .../form-field/form-field.component.ts        |   1 +
 .../description-form.module.ts                |   4 +-
 .../reference-field.component.html            |   3 +-
 .../reference-field.component.ts              |   3 +
 7 files changed, 88 insertions(+), 192 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts
index 12fe1f764..031931313 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts
@@ -555,7 +555,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 
 	prepareForm(data: Description) {
 		try {
-			this.editorModel = data ? new DescriptionEditorModel().fromModel(data) : new DescriptionEditorModel();
+			this.editorModel = data ? new DescriptionEditorModel().fromModel(data, data.descriptionTemplate) : new DescriptionEditorModel();
 			this.item = data;
 			this.isDeleted = data ? data.isActive === IsActive.Inactive : false;
 			this.buildForm();
@@ -584,17 +584,14 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 
 	refreshOnNavigateToData(id?: Guid): void {
 		this.formGroup.markAsPristine();
-		let route = [];
 
-		if (id === null) {
-			route.push('../..');
-		} else if (this.isNew) {
-			route.push('../' + id);
+		if (this.isNew) {
+			let route = [];
+			route.push('/descriptions/overview/' + id);
+			this.router.navigate(route, { queryParams: { 'lookup': this.queryParamsService.serializeLookup(this.lookupParams), 'lv': ++this.lv }, replaceUrl: true, relativeTo: this.route });
 		} else {
-			route.push('..');
+			this.refreshData();
 		}
-
-		this.router.navigate(route, { queryParams: { 'lookup': this.queryParamsService.serializeLookup(this.lookupParams), 'lv': ++this.lv }, replaceUrl: true, relativeTo: this.route });
 	}
 
 	persistEntity(onSuccess?: (response) => void): void {
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts
index 4c97f140a..94a95087b 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts
@@ -312,7 +312,7 @@ export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements Des
 		if (item) {
 			this.comment = item.comment;
 			this.ordinal = item.ordinal;
-			if (item.fields) { item.fields?.forEach((value, key) => this.fields.set(key, new DescriptionFieldEditorModel(this.validationErrorModel).fromModel(value, definitionFieldSet?.fields?.find(x => x.id == key), descriptionReferences))); }
+			if (item.fields) { Object.keys(item.fields)?.forEach(key => this.fields.set(key, new DescriptionFieldEditorModel(this.validationErrorModel).fromModel(item.fields[key], definitionFieldSet?.fields?.find(x => x.id == key), descriptionReferences))); }
 		}
 		return this;
 	}
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
index 8c1d20051..c29c404f9 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
@@ -116,7 +116,7 @@
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12">
 		<mat-checkbox [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [required]="isRequired">
 			{{field.data.label}}</mat-checkbox>
-		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>	
+		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
 	</div>
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12">
 		<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
@@ -187,164 +187,94 @@
 	</mat-form-field>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Datasets" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Datasets" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATA_REPOSITORIES" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.DataRepositories" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.DataRepositories" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUB_REPOSITORIES" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.PubRepositories" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.PubRepositories" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.JOURNAL_REPOSITORIES" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>\
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Journals" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Journals" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAXONOMIES" class="col-12">
-		<div *ngIf="field.data" class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Taxonomies" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Taxonomies" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.LICENSES" class="col-12">
-		<div *ngIf="field.data" class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Licenses" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Licenses" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUBLICATIONS" class="col-12">
-		<div *ngIf="field.data" class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Licenses" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Licenses" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REGISTRIES" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="registriesAutoCompleteConfiguration">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="registriesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Registries" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Registries" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SERVICES" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="servicesAutoCompleteConfiguration">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="servicesAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Services" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Services" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
 	</div>
+	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.RESEARCHERS" class="col-12">
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Researcher" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Researcher" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+	</div>
+	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.ORGANIZATIONS" class="col-12">
+		<ng-container *ngIf="field.data.multipleSelect">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Organizations" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+		<ng-container *ngIf="!(field.data.multipleSelect)">
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="referenceTypeEnum.Organizations" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+		</ng-container>
+	</div>
+	
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
 		<div class="row">
@@ -355,44 +285,6 @@
 		</div>
 	</div>
 
-	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.RESEARCHERS" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="researchersAutoCompleteConfiguration">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="researchersAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
-	</div>
-
-	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.ORGANIZATIONS" class="col-12">
-		<div class="row">
-			<mat-form-field class="col-md-12">
-				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('references')" [configuration]="organisationsAutoCompleteConfiguration">
-					</app-multiple-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('references').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</ng-container>
-				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('reference')" [configuration]="organisationsAutoCompleteConfiguration" [required]="isRequired">
-					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-					</mat-error>
-				</ng-container>
-
-				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
-			</mat-form-field>
-		</div>
-	</div>
-
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
 		<div class="row" *ngIf="datasetIdInitialized">
 			<mat-form-field class="col-md-12">
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts
index 8c97dbdb9..d4213b3fa 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts
+++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts
@@ -35,6 +35,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 	@Input() propertiesFormGroup: UntypedFormGroup;
 	@Input() visibilityRulesService: VisibilityRulesService;
 	isRequired: boolean = false;
+	referenceTypeEnum = ReferenceType;
 
 
 	// @Input() field: Field;
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts
index ea7aa38d2..bab54aee1 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts
+++ b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { FormattingModule } from "@app/core/formatting.module";
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module";
+import { ReferenceFieldModule } from '@app/ui/reference/reference-field/reference-field.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { NgxDropzoneModule } from "ngx-dropzone";
@@ -20,7 +21,8 @@ import { DescriptionFormComponent } from './description-form.component';
 		AutoCompleteModule,
 		RichTextEditorModule,
 		NgxDropzoneModule,
-		FormattingModule
+		FormattingModule,
+		ReferenceFieldModule
 	],
 	declarations: [
 		DescriptionFormComponent,
diff --git a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html
index 6f85c7994..291258b89 100644
--- a/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html
+++ b/dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html
@@ -1,9 +1,10 @@
 <mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
 	<mat-label>{{label ?? enumUtils.toReferenceTypeString(referenceType)}}</mat-label>
-	<app-multiple-auto-complete placeholder = "{{ placeholder ?? enumUtils.toReferenceTypeString(referenceType)}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
+	<app-multiple-auto-complete placeholder="{{ placeholder ?? enumUtils.toReferenceTypeString(referenceType)}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration" [required]="required">
 	</app-multiple-auto-complete>
 	<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
 	<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+	<mat-hint *ngIf="hint">{{hint}}</mat-hint>
 </mat-form-field>
 <div class="mb-4">
 	<span *ngIf="!form.disabled" class="not-found">{{'REFERENCE-FIELD.COULD-NOT-FIND-MESSAGE' | translate}}</span>
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 ce35d8dae..fbd0ff75d 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
@@ -17,6 +17,9 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit {
 	@Input() form: UntypedFormGroup = null;
 	@Input() label: string = null;
 	@Input() placeholder: string = "Enter text";
+	@Input() required: boolean = false;
+	@Input() multiple: boolean = true;
+	@Input() hint: string;
 
 	multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;