From 7fcada883987efc321cb9fe19719fafe5c1833d2 Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 27 Mar 2024 18:48:58 +0200
Subject: [PATCH] various ui changes

---
 .../model/reference-type/reference-type.ts    |   6 +-
 ...mplate-editor-composite-field.component.ts |  14 +-
 .../description-template-editor.model.ts      |  36 +--
 .../notification-template-editor.model.ts     |   4 +-
 .../reference-type-editor.component.html      | 188 ++++++------
 .../editor/reference-type-editor.model.ts     |   4 +-
 .../editor/reference-editor.component.html    |  63 ++--
 .../editor/reference-editor.model.ts          |   4 +-
 .../tenant/editor/tenant-editor.model.ts      |   8 +-
 .../external-fetcher-source-editor.model.ts   |   8 +-
 .../external-fetcher-source.component.html    | 273 +++++++++---------
 dmp-frontend/src/assets/i18n/en.json          |  17 +-
 12 files changed, 281 insertions(+), 344 deletions(-)

diff --git a/dmp-frontend/src/app/core/model/reference-type/reference-type.ts b/dmp-frontend/src/app/core/model/reference-type/reference-type.ts
index e3410babf..652256509 100644
--- a/dmp-frontend/src/app/core/model/reference-type/reference-type.ts
+++ b/dmp-frontend/src/app/core/model/reference-type/reference-type.ts
@@ -3,9 +3,9 @@ import { BaseEntity, BaseEntityPersist } from "@common/base/base-entity.model";
 import { ExternalFetcherBaseSourceConfiguration, ExternalFetcherBaseSourceConfigurationPersist } from "../external-fetcher/external-fetcher";
 
 export interface ReferenceType extends BaseEntity{
-	name: string;
-	code: string;
-	definition: ReferenceTypeDefinition;
+	name?: string;
+	code?: string;
+	definition?: ReferenceTypeDefinition;
 }
 
 export interface ReferenceTypeDefinition{
diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts
index 97fbbce9b..7b7cd9267 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts
@@ -30,7 +30,7 @@ import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
 import { GENERAL_ANIMATIONS } from '../../animations/animations';
 import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
 import { DescriptionTemplateFieldEditorModel, DescriptionTemplateRuleEditorModel, DescriptionTemplateSectionEditorModel } from '../../description-template-editor.model';
-import { DescriptionTemplateFieldSetPersist } from '@app/core/model/description-template/description-template-persist';
+import { DescriptionTemplateFieldSetPersist, DescriptionTemplateReferenceTypeFieldPersist } from '@app/core/model/description-template/description-template-persist';
 import { DescriptionEditorModel, DescriptionPropertyDefinitionEditorModel } from '@app/ui/description/editor/description-editor.model';
 import { Description } from '@app/core/model/description/description';
 import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
@@ -232,7 +232,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
 		const formValue: DescriptionTemplateFieldSetPersist = this.form.getRawValue();
 
 		const fields: DescriptionTemplateField[] = formValue.fields.map(editorField => {
-			return {
+			const convertedField = {
 				id: editorField.id,
 				ordinal: editorField.ordinal,
 				numbering: '',
@@ -242,7 +242,17 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
 				validations: editorField.validations,
 				includeInExport: editorField.includeInExport,
 				data: editorField.data
+			} as DescriptionTemplateField;
+
+			if (editorField.data.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
+				convertedField.data = editorField.data;
+				(convertedField.data as DescriptionTemplateReferenceTypeData).referenceType = {
+						id: (editorField.data as DescriptionTemplateReferenceTypeFieldPersist).referenceTypeId
+					};
+			} else {
+				convertedField.data = editorField.data;
 			}
+			return convertedField;
 		});
 
 		const fieldSet: DescriptionTemplateFieldSet = {
diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
index ed3ba6d89..2c6a11ec7 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
@@ -213,9 +213,7 @@ export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemp
 		return this.formBuilder.group({
 			pages: this.formBuilder.array(
 				(this.pages ?? []).map(
-					(item, index) => new DescriptionTemplatePageEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}pages[${index}].`
 					})
 				), context.getValidation('pages').validators
@@ -295,9 +293,7 @@ export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePa
 			title: [{ value: this.title, disabled: disabled }, context.getValidation('title').validators],
 			sections: this.formBuilder.array(
 				(this.sections ?? []).map(
-					(item, index) => new DescriptionTemplateSectionEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}sections[${index}].`
 					})
 				), context.getValidation('sections').validators
@@ -412,18 +408,14 @@ export class DescriptionTemplateSectionEditorModel implements DescriptionTemplat
 			description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
 			sections: this.formBuilder.array(
 				(this.sections ?? []).map(
-					(item, index) => new DescriptionTemplateSectionEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}sections[${index}].`
 					})
 				), context.getValidation('sections').validators
 			),
 			fieldSets: this.formBuilder.array(
 				(this.fieldSets ?? []).map(
-					(item, index) => new DescriptionTemplateFieldSetEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}fieldSets[${index}].`
 					})
 				), context.getValidation('fieldSets').validators
@@ -551,9 +543,7 @@ export class DescriptionTemplateFieldSetEditorModel implements DescriptionTempla
 			}),
 			fields: this.formBuilder.array(
 				(this.fields ?? []).map(
-					(item, index) => new DescriptionTemplateFieldEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}fields[${index}].`
 					})
 				), context.getValidation('fields').validators
@@ -758,9 +748,7 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 			}),
 			visibilityRules: this.formBuilder.array(
 				(this.visibilityRules ?? []).map(
-					(item, index) => new DescriptionTemplateRuleEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}visibilityRules[${index}].`
 					})
 				), context.getValidation('visibilityRules').validators
@@ -1273,9 +1261,7 @@ export class DescriptionTemplateRadioBoxDataEditorModel extends DescriptionTempl
 		const formGroup = super.buildForm({ context, disabled, rootPath });
 		formGroup.setControl('options', this.formBuilder.array(
 			(this.options ?? []).map(
-				(item, index) => new DescriptionTemplateRadioBoxOptionEditorModel(
-					this.validationErrorModel
-				).fromModel(item).buildForm({
+				(item, index) => item.buildForm({
 					rootPath: `${rootPath}options[${index}].`
 				})
 			), context.getValidation('options').validators
@@ -1420,9 +1406,7 @@ export class DescriptionTemplateSelectDataEditorModel extends DescriptionTemplat
 		formGroup.setControl('multipleSelect', new FormControl({ value: this.multipleSelect, disabled: disabled }, context.getValidation('multipleSelect').validators));
 		formGroup.setControl('options', this.formBuilder.array(
 			(this.options ?? []).map(
-				(item, index) => new DescriptionTemplateSelectOptionEditorModel(
-					this.validationErrorModel
-				).fromModel(item).buildForm({
+				(item, index) => item.buildForm({
 					rootPath: `${rootPath}options[${index}].`
 				})
 			), context.getValidation('options').validators
@@ -1581,9 +1565,7 @@ export class DescriptionTemplateUploadDataEditorModel extends DescriptionTemplat
 		formGroup.setControl('maxFileSizeInMB', new FormControl({ value: this.maxFileSizeInMB, disabled: disabled }, context.getValidation('maxFileSizeInMB').validators));
 		formGroup.setControl('types', this.formBuilder.array(
 			(this.types ?? []).map(
-				(item, index) => new DescriptionTemplateUploadOptionEditorModel(
-					this.validationErrorModel
-				).fromModel(item).buildForm({
+				(item, index) => item.buildForm({
 					rootPath: `${rootPath}types[${index}].`
 				})
 			), context.getValidation('types').validators
diff --git a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.model.ts b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.model.ts
index 3d6cc9300..26cf61d1b 100644
--- a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.model.ts
+++ b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.model.ts
@@ -250,9 +250,7 @@ export class NotificationFieldOptionsEditorModel implements NotificationFieldOpt
 			formatting: [{ value: this.formatting, disabled: disabled }, context.getValidation('formatting').validators],
 			optional:  this.formBuilder.array(
 				(this.optional ?? []).map(
-					(item, index) => new NotificationFieldInfoEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}optional[${index}].`
 					})
 				), context.getValidation('optional').validators
diff --git a/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html b/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
index 3fa7d8d1f..368faa968 100644
--- a/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
@@ -30,119 +30,101 @@
 			</mat-card-header>
 			<mat-card-content>
 				<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
-					<div class="info-grid">
-						<div class="info-grid-value">
-							<mat-form-field class="col-lg-6">
+					<div class="row">
+						<div class="col-6">
+							<mat-form-field class="w-100">
 								<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
 								<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
 								<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
 								<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
-						<div class="info-grid-value">
-							<mat-form-field class="col-lg-6">
+						<div class="col-6">
+							<mat-form-field class="w-100">
 								<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
 								<input matInput type="text" name="name" [formControl]="formGroup.get('code')" required>
 								<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
 								<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
-						
-					</div>
-				</form>
-			</mat-card-content>
-		</mat-card>
-		
-
-		<mat-card appearance="outlined">
-			<mat-card-header>
-				<!-- <mat-card-title >{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-card-title> -->
-				<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
-			</mat-card-header>
-			<mat-card-content>
-				<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
 
+						<div class="col-12 mt-3 mb-3">
+							<div class="row d-flex align-items-center">
+								<div class="col-auto">
+									<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
+								</div>
+								<div class="col-auto">
+									<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+								</div>
+							</div>
+						</div>
 						<!-- FIELDS  -->
 						<div class="col-12">
 							<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 								<div class="col-12">
-										<mat-card-header>
-											<div class="row mb-3 d-flex align-items-center">
-												<div class="col-auto d-flex">
-													<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title>
-												</div>
-	
-												<div class="col-auto d-flex">
-													<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
-														<mat-icon>delete</mat-icon>
-													</button>
-												</div>
-											</div>
-										</mat-card-header>
-										<mat-card-content>
-											<div class="row">
-												<div class="col-6">
-													<mat-form-field class="w-100">
-														<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
-														<input matInput type="text" name="label" [formControl]="field.get('label')" required>
-														<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
-														<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-													</mat-form-field>
-												</div>
-												<div class="col-6">
-													<mat-form-field class="w-100">
-														<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label>
-														<input matInput type="text" name="description" [formControl]="field.get('description')">
-														<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
-														<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-													</mat-form-field>
-												</div>
-												<div class="col-6">
-													<mat-form-field class="w-100">
-														<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
-														<input matInput type="text" name="code" [formControl]="field.get('code')" required>
-														<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
-														<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-													</mat-form-field>
-												</div>
-												<div class="col-6">
-													<mat-form-field class="w-100">
-														<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
-														<mat-select name="dataType" [formControl]="field.get('dataType')">
-															<mat-option *ngFor="let fieldDataType of referenceFieldDataTypeEnum" [value]="fieldDataType">
-																{{enumUtils.toReferenceFieldDataTypeString(fieldDataType)}}
-															</mat-option>
-														</mat-select>
-														<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
-														<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-													</mat-form-field>
-												</div>
-
-											</div>
-										</mat-card-content>
+									<div class="row d-flex align-items-center">
+										<div class="col-auto pb-3 d-flex">
+											<span>{{fieldIndex + 1}}</span>
+										</div>
+										<div class="col">
+											<mat-form-field class="w-100">
+												<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
+												<input matInput type="text" name="label" [formControl]="field.get('label')" required>
+												<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col">
+											<mat-form-field class="w-100">
+												<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label>
+												<input matInput type="text" name="description" [formControl]="field.get('description')">
+												<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col">
+											<mat-form-field class="w-100">
+												<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
+												<input matInput type="text" name="code" [formControl]="field.get('code')" required>
+												<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col">
+											<mat-form-field class="w-100">
+												<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
+												<mat-select name="dataType" [formControl]="field.get('dataType')">
+													<mat-option *ngFor="let fieldDataType of referenceFieldDataTypeEnum" [value]="fieldDataType">
+														{{enumUtils.toReferenceFieldDataTypeString(fieldDataType)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-auto pb-3 d-flex">
+											<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
+												<mat-icon>delete</mat-icon>
+											</button>
+										</div>
+									</div>
 								</div>
 							</div>
-							<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''"
-							type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
-						</div>			
-				</form>
-			</mat-card-content>
-		</mat-card>
-
-		<mat-card appearance="outlined">
-			<mat-card-header>
-				<!-- <mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-card-title> -->
-				<mat-card-header>
-					<button  mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
-				</mat-card-header>
-			</mat-card-header>
-			<mat-card-content>
-				<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
-					<!-- Source Config Info -->
-					<div class="col-12">
-						<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row mb-3">
-							<div class="col-12">
-								<mat-card-content>
+							<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+						</div>
+						<div class="col-12 mt-3 mb-3">
+							<div class="row d-flex align-items-center">
+								<div class="col-auto">
+									<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
+								</div>
+								<div class="col-auto">
+									<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+								</div>
+							</div>
+						</div>
+						<div class="col-12">
+							<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row">
+								<div class="col-12">
 									<div class="row mb-3 d-flex align-items-center">
 										<div class="col-auto d-flex">
 											<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}} {{sourceIndex + 1}}</mat-card-title>
@@ -153,24 +135,16 @@
 											</button>
 										</div>
 									</div>
-									<app-external-fetcher-source-component
-										[formGroup]="source" 
-										[validationErrorModel]="editorModel.validationErrorModel"
-										[validationRootPath]="'definition.sources[' + sourceIndex + '].'"
-										[referenceTypeSourceIndex]="sourceIndex"
-										[referenceTypes]="referenceTypes"
-										[sourceKeysMap]="sourceKeysMap">
+									<app-external-fetcher-source-component [formGroup]="source" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.sources[' + sourceIndex + '].'" [referenceTypeSourceIndex]="sourceIndex" [referenceTypes]="referenceTypes" [sourceKeysMap]="sourceKeysMap">
 									</app-external-fetcher-source-component>
-									</mat-card-content>
+								</div>
 							</div>
+							<mat-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
+							<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
 						</div>
-						<mat-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
-						<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
 					</div>
 				</form>
 			</mat-card-content>
 		</mat-card>
-			
 	</div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.model.ts b/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.model.ts
index b761614dc..49b418f38 100644
--- a/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.model.ts
+++ b/dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.model.ts
@@ -151,9 +151,7 @@ export class ReferenceTypeDefinitionEditorModel implements ReferenceTypeDefiniti
 		return this.formBuilder.group({
 			fields: this.formBuilder.array(
 				(this.fields ?? []).map(
-					(item, index) => new ReferenceTypeFieldEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}fields[${index}].`
 					})
 				), context.getValidation('fields').validators
diff --git a/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.html b/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
index 6023a9d09..af08ae91f 100644
--- a/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
@@ -27,7 +27,7 @@
 				<mat-card-header>
 					<mat-card-title *ngIf="isNew">{{'REFERENCE-EDITOR.NEW' | translate}}</mat-card-title>
 				</mat-card-header>
-				<mat-card-content>
+				<mat-card-content class="pt-2">
 					<div class="row">
 						<div class="col-4">
 							<mat-form-field class="w-100">
@@ -37,6 +37,14 @@
 								<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
+						<div class="col-4">
+							<mat-form-field class="w-100">
+								<mat-label>{{'REFERENCE-EDITOR.FIELDS.REFERENCE' | translate}}</mat-label>
+								<input matInput type="text" name="reference" [formControl]="formGroup.get('reference')" required>
+								<mat-error *ngIf="formGroup.get('reference').hasError('backendError')">{{formGroup.get('reference').getError('backendError').message}}</mat-error>
+								<mat-error *ngIf="formGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+							</mat-form-field>
+						</div>
 						<div class="col-4">
 							<mat-form-field class="w-100">
 								<mat-label>{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
@@ -46,17 +54,6 @@
 								<mat-error *ngIf="formGroup.get('typeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
-						<div class="col-12">
-							<h3>{{'REFERENCE-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
-							<div class="col-12">
-								<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'REFERENCE-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
-								</rich-text-editor-component>
-								<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
-									<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
-									<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
-								</div>
-							</div>
-						</div>
 						<div class="col-4">
 							<mat-form-field class="w-100">
 								<mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE' | translate}}</mat-label>
@@ -77,14 +74,6 @@
 								<mat-error *ngIf="formGroup.get('sourceType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
-						<div class="col-6">
-							<mat-form-field class="w-100">
-								<mat-label>{{'REFERENCE-EDITOR.FIELDS.REFERENCE' | translate}}</mat-label>
-								<input matInput type="text" name="reference" [formControl]="formGroup.get('reference')" required>
-								<mat-error *ngIf="formGroup.get('reference').hasError('backendError')">{{formGroup.get('reference').getError('backendError').message}}</mat-error>
-								<mat-error *ngIf="formGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-							</mat-form-field>
-						</div>
 						<div class="col-4">
 							<mat-form-field class="w-100">
 								<mat-label>{{'REFERENCE-EDITOR.FIELDS.ABBREVIATION' | translate}}</mat-label>
@@ -93,27 +82,28 @@
 								<mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 							</mat-form-field>
 						</div>
+						<div class="col-12">
+							<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'REFERENCE-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
+							</rich-text-editor-component>
+							<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
+								<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
+								<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
+							</div>
+						</div>
 
 						<!-- Fields -->
 						<div class="col-12">
-							<h3>
+							<h3 class="mb-4">
 								{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
 								<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 							</h3>
 							<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 								<div class="col-12">
-									<div class="row mb-3 d-flex align-items-center">
-										<div class="col-auto d-flex">
-											<mat-card-title>{{'REFERENCE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title>
+									<div class="row d-flex align-items-center">
+										<div class="col-auto pb-3 d-flex">
+											<mat-card-title>{{fieldIndex + 1}}</mat-card-title>
 										</div>
-										<div class="col-auto d-flex">
-											<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
-												<mat-icon>delete</mat-icon>
-											</button>
-										</div>
-									</div>
-									<div class="row">
-										<div class="col-6">
+										<div class="col">
 											<mat-form-field class="w-100">
 												<mat-label>{{'REFERENCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
 												<input matInput type="text" name="code" [formControl]="field.get('code')" required>
@@ -121,7 +111,7 @@
 												<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 											</mat-form-field>
 										</div>
-										<div class="col-6">
+										<div class="col">
 											<mat-form-field class="w-100">
 												<mat-label>{{'REFERENCE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
 												<mat-select name="type" [formControl]="field.get('dataType')" required>
@@ -133,7 +123,7 @@
 												<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 											</mat-form-field>
 										</div>
-										<div class="col-6">
+										<div class="col">
 											<mat-form-field class="w-100">
 												<mat-label>{{'REFERENCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
 												<input matInput type="text" name="value" [formControl]="field.get('value')">
@@ -141,6 +131,11 @@
 												<mat-error *ngIf="field.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 											</mat-form-field>
 										</div>
+										<div class="col-auto pb-3 d-flex">
+											<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
+												<mat-icon>delete</mat-icon>
+											</button>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.model.ts b/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.model.ts
index 909df6231..27506bc83 100644
--- a/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.model.ts
+++ b/dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.model.ts
@@ -129,9 +129,7 @@ export class DefinitionEditorModel implements DefinitionPersist {
 		return this.formBuilder.group({
 			fields: this.formBuilder.array(
 				(this.fields ?? []).map(
-					(item, index) => new FieldEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}fields[${index}].`
 					})
 				), context.getValidation('fields').validators
diff --git a/dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.model.ts b/dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.model.ts
index 8b23f0401..2d4a0cf05 100644
--- a/dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.model.ts
+++ b/dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.model.ts
@@ -172,9 +172,7 @@ export class TenantDepositConfigEditorModel implements TenantDepositConfigPersis
 		return this.formBuilder.group({
 			sources: this.formBuilder.array(
 				(this.sources ?? []).map(
-					(item, index) => new TenantSourceEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}sources[${index}].`
 					})
 				), context.getValidation('sources')
@@ -244,9 +242,7 @@ export class TenantFileTransformersConfigEditorModel implements TenantFileTransf
 		return this.formBuilder.group({
 			sources: this.formBuilder.array(
 				(this.sources ?? []).map(
-					(item, index) => new TenantSourceEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}sources[${index}].`
 					})
 				), context.getValidation('sources')
diff --git a/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source-editor.model.ts b/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source-editor.model.ts
index 550c097e9..727a23765 100644
--- a/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source-editor.model.ts
+++ b/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source-editor.model.ts
@@ -106,9 +106,7 @@ export class ExternalFetcherBaseSourceConfigurationEditorModel implements Extern
 			),
 			options: this.formBuilder.array(
 				(this.options ?? []).map(
-					(item, index) => new StaticOptionEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}options[${index}].`
 					})
 				), context.getValidation('options').validators
@@ -237,9 +235,7 @@ export class ResultsConfigurationEditorModel implements ResultsConfigurationPers
 			resultsArrayPath: [{ value: this.resultsArrayPath, disabled: disabled }, context.getValidation('resultsArrayPath').validators],
 			fieldsMapping: this.formBuilder.array(
 				(this.fieldsMapping ?? []).map(
-					(item, index) => new ResultFieldsMappingConfigurationEditorModel(
-						this.validationErrorModel
-					).fromModel(item).buildForm({
+					(item, index) => item.buildForm({
 						rootPath: `${rootPath}fieldsMapping[${index}].`
 					})
 				), context.getValidation('fieldsMapping').validators
diff --git a/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html b/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
index e27d9eef5..62df1e9e3 100644
--- a/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
+++ b/dmp-frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-	<div class="col-6">
+	<div class="col-3">
 		<mat-form-field class="w-100">
 			<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
 			<input matInput type="text" name="key" [formControl]="formGroup.get('key')" required>
@@ -7,7 +7,7 @@
 			<mat-error *ngIf="formGroup.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-6">
+	<div class="col-3">
 		<mat-form-field class="w-100">
 			<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
 			<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
@@ -15,7 +15,7 @@
 			<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-6">
+	<div class="col-3">
 		<mat-form-field class="w-100">
 			<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.ORDINAL' | translate}}</mat-label>
 			<input matInput type="number" name="ordinal" [formControl]="formGroup.get('ordinal')" required>
@@ -23,7 +23,7 @@
 			<mat-error *ngIf="formGroup.get('ordinal').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-6" *ngIf="referenceTypeSourceIndex != null">
+	<div class="col-3" *ngIf="referenceTypeSourceIndex != null">
 		<mat-form-field class="w-100">
 			<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DEPENDENCIES' | translate}}</mat-label>
 			<mat-select multiple (selectionChange)="setReferenceTypeDependenciesMap($event.value, referenceTypeSourceIndex)" [formControl]="formGroup.get('referenceTypeDependencyIds')">
@@ -33,7 +33,7 @@
 			<mat-error *ngIf="formGroup.get('referenceTypeDependencyIds').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-6" *ngIf="referenceTypeSourceIndex != null">
+	<div class="col-12" *ngIf="referenceTypeSourceIndex != null">
 		<mat-form-field class="w-100">
 			<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-TYPE' | translate}}</mat-label>
 			<mat-select name="type" [formControl]="formGroup.get('type')" required>
@@ -64,7 +64,7 @@
 					<mat-error *ngIf="formGroup.get('paginationPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-6">
+			<div class="col-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CONTENT-TYPE' | translate}}</mat-label>
 					<input matInput type="text" name="contentType" [formControl]="formGroup.get('contentType')">
@@ -72,7 +72,7 @@
 					<mat-error *ngIf="formGroup.get('contentType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-6">
+			<div class="col-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.FIRST-PAGE' | translate}}</mat-label>
 					<input matInput type="text" name="firstPage" [formControl]="formGroup.get('firstPage')">
@@ -80,7 +80,7 @@
 					<mat-error *ngIf="formGroup.get('firstPage').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-6">
+			<div class="col-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
 					<mat-select name="httpMethod" [formControl]="formGroup.get('httpMethod')">
@@ -92,7 +92,7 @@
 					<mat-error *ngIf="formGroup.get('httpMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-6" *ngIf="formGroup.get('httpMethod').value == externalFetcherApiHTTPMethodType.POST">
+			<div class="col-3" *ngIf="formGroup.get('httpMethod').value == externalFetcherApiHTTPMethodType.POST">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
 					<input matInput type="text" name="requestBody" [formControl]="formGroup.get('requestBody')">
@@ -100,7 +100,7 @@
 					<mat-error *ngIf="formGroup.get('requestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-6">
+			<div class="col-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.FILTER-TYPE' | translate}}</mat-label>
 					<input matInput type="text" name="filterType" [formControl]="formGroup.get('filterType')">
@@ -110,7 +110,7 @@
 			</div>
 			<!-- Results info -->
 			<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
-			<div class="col-6">
+			<div class="col-12">
 				<mat-form-field class="w-100">
 					<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.RESULTS-PATH' | translate}}</mat-label>
 					<input matInput type="text" name="resultsArrayPath" [formControl]="formGroup.get('results').get('resultsArrayPath')">
@@ -119,36 +119,31 @@
 				</mat-form-field>
 			</div>
 			<!-- fields mapping -->
+			<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELD-MAPPINGS' | translate}}</h3>
 			<div class="col-12">
 				<div *ngFor="let field of formGroup.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
 					<div class="col-12">
-						<mat-card-header>
-							<div class="row mb-3 d-flex align-items-center">
-								<div class="col-auto d-flex">
-									<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELD-MAPPING' | translate}} {{fieldMappingIndex + 1}}</h4>
-								</div>
+						<div class="row d-flex align-items-center">
+							<div class="col-auto pb-3 d-flex">
+								<span>{{fieldMappingIndex + 1}}</span>
 							</div>
-						</mat-card-header>
-						<mat-card-content>
-							<div class="row">
-								<div class="col-6">
-									<mat-form-field class="w-100">
-										<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
-										<input matInput type="text" [readonly]="field.get('code').disabled" name="code" [formControl]="field.get('code')" [readOnly]="true">
-										<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
-										<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-									</mat-form-field>
-								</div>
-								<div class="col-6">
-									<mat-form-field class="w-100">
-										<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.RESPONSE-PATH' | translate}}</mat-label>
-										<input matInput type="text" name="responsePath" [formControl]="field.get('responsePath')">
-										<mat-error *ngIf="field.get('responsePath').hasError('backendError')">{{field.get('responsePath').getError('backendError').message}}</mat-error>
-										<mat-error *ngIf="field.get('responsePath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-									</mat-form-field>
-								</div>
+							<div class="col">
+								<mat-form-field class="w-100">
+									<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
+									<input matInput type="text" [readonly]="field.get('code').disabled" name="code" [formControl]="field.get('code')" [readOnly]="true">
+									<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
 							</div>
-						</mat-card-content>
+							<div class="col">
+								<mat-form-field class="w-100">
+									<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.RESPONSE-PATH' | translate}}</mat-label>
+									<input matInput type="text" name="responsePath" [formControl]="field.get('responsePath')">
+									<mat-error *ngIf="field.get('responsePath').hasError('backendError')">{{field.get('responsePath').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="field.get('responsePath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -158,7 +153,7 @@
 			</h3>
 			<div class="col-12" *ngIf="formGroup.get('auth').get('enabled').value == true">
 				<div class="row">
-					<div class="col-6">
+					<div class="col-12">
 						<mat-form-field class="w-100">
 							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.URL' | translate}}</mat-label>
 							<input matInput type="text" name="authUrl" [formControl]="formGroup.get('auth').get('authUrl')">
@@ -166,7 +161,7 @@
 							<mat-error *ngIf="formGroup.get('auth').get('authUrl').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
-					<div class="col-6">
+					<div class="col-4">
 						<mat-form-field class="w-100">
 							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
 							<mat-select name="httpMethod" [formControl]="formGroup.get('auth').get('authMethod')">
@@ -178,7 +173,7 @@
 							<mat-error *ngIf="formGroup.get('auth').get('authMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
-					<div class="col-6">
+					<div class="col-4">
 						<mat-form-field class="w-100">
 							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.TOKEN-PATH' | translate}}</mat-label>
 							<input matInput type="text" name="authTokenPath" [formControl]="formGroup.get('auth').get('authTokenPath')">
@@ -186,15 +181,7 @@
 							<mat-error *ngIf="formGroup.get('auth').get('authTokenPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
-					<div class="col-6">
-						<mat-form-field class="w-100">
-							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
-							<input matInput type="text" name="authRequestBody" [formControl]="formGroup.get('auth').get('authRequestBody')">
-							<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('backendError')">{{formGroup.get('auth').get('authRequestBody').getError('backendError').message}}</mat-error>
-							<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						</mat-form-field>
-					</div>
-					<div class="col-6">
+					<div class="col-4">
 						<mat-form-field class="w-100">
 							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
 							<input matInput type="text" name="type" [formControl]="formGroup.get('auth').get('type')">
@@ -202,6 +189,14 @@
 							<mat-error *ngIf="formGroup.get('auth').get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
+					<div class="col-12">
+						<mat-form-field class="w-100">
+							<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
+							<input matInput type="text" name="authRequestBody" [formControl]="formGroup.get('auth').get('authRequestBody')">
+							<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('backendError')">{{formGroup.get('auth').get('authRequestBody').getError('backendError').message}}</mat-error>
+							<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						</mat-form-field>
+					</div>
 				</div>
 			</div>
 			<!-- Queries info -->
@@ -211,49 +206,96 @@
 			<div class="col-12">
 				<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row mb-3">
 					<div class="col-12">
-						<mat-card-header>
-							<div class="row mb-3 d-flex align-items-center">
-								<div class="col-auto d-flex">
-									<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
-								</div>
-								<div class="col-auto d-flex">
-									<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.disabled">
-										<mat-icon>delete</mat-icon>
-									</button>
-								</div>
-								<div class="col-auto">
-									<button mat-button class="action-btn" type="button" (click)="addCase(queryIndex)" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
-								</div>
+						<div class="row mb-3 d-flex align-items-center">
+							<div class="col-auto d-flex">
+								<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
 							</div>
-						</mat-card-header>
-						<mat-card-content>
-							<div class="row">
-								<div class="col-6">
-									<mat-form-field class="w-100">
-										<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
-										<input matInput type="text" name="name" [formControl]="query.get('name')" required>
-										<mat-error *ngIf="query.get('name').hasError('backendError')">{{query.get('name').getError('backendError').message}}</mat-error>
-										<mat-error *ngIf="query.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-									</mat-form-field>
-								</div>
-								<div class="col-6">
-									<mat-form-field class="w-100">
-										<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DEFAULT-VALUE' | translate}}</mat-label>
-										<input matInput type="text" name="defaultValue" [formControl]="query.get('defaultValue')">
-										<mat-error *ngIf="query.get('defaultValue').hasError('backendError')">{{query.get('defaultValue').getError('backendError').message}}</mat-error>
-										<mat-error *ngIf="query.get('defaultValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-									</mat-form-field>
-								</div>
+							<div class="col-auto d-flex">
+								<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.disabled">
+									<mat-icon>delete</mat-icon>
+								</button>
 							</div>
-						</mat-card-content>
-					</div>
-					<!-- Query Cases -->
-					<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row mb-3">
-						<div class="col-12">
-							<mat-card-header>
-								<div class="row mb-3 d-flex align-items-center">
+						</div>
+						<div class="row">
+							<div class="col-6">
+								<mat-form-field class="w-100">
+									<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
+									<input matInput type="text" name="name" [formControl]="query.get('name')" required>
+									<mat-error *ngIf="query.get('name').hasError('backendError')">{{query.get('name').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="query.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+							<div class="col-6">
+								<mat-form-field class="w-100">
+									<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DEFAULT-VALUE' | translate}}</mat-label>
+									<input matInput type="text" name="defaultValue" [formControl]="query.get('defaultValue')">
+									<mat-error *ngIf="query.get('defaultValue').hasError('backendError')">{{query.get('defaultValue').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="query.get('defaultValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+
+						<!-- Query Cases -->
+						<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.CASES' | translate}}
+							<button mat-button class="action-btn" type="button" (click)="addCase(queryIndex)" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
+						</h3>
+						<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
+							<div class="col-12">
+								<div class="row mb d-flex align-items-center">
 									<div class="col-auto d-flex">
-										<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.CASE' | translate}} {{caseIndex + 1}}</h4>
+										<span>{{caseIndex + 1}}</span>
+									</div>
+									<div class="col">
+										<div class="row">
+											<div class="col-4">
+												<mat-form-field class="w-100">
+													<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LIKE-PATTERN' | translate}}</mat-label>
+													<input matInput type="text" name="likePattern" [formControl]="case.get('likePattern')">
+													<mat-error *ngIf="case.get('likePattern').hasError('backendError')">{{case.get('likePattern').getError('backendError').message}}</mat-error>
+													<mat-error *ngIf="case.get('likePattern').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+											<div class="col-4">
+												<mat-form-field class="w-100">
+													<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SEPARATOR' | translate}}</mat-label>
+													<input matInput type="text" name="separator" [formControl]="case.get('separator')">
+													<mat-error *ngIf="case.get('separator').hasError('backendError')">{{case.get('separator').getError('backendError').message}}</mat-error>
+													<mat-error *ngIf="case.get('separator').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+											<div class="col-4">
+												<mat-form-field class="w-100">
+													<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
+													<input matInput type="text" name="value" [formControl]="case.get('value')">
+													<mat-error *ngIf="case.get('value').hasError('backendError')">{{case.get('value').getError('backendError').message}}</mat-error>
+													<mat-error *ngIf="case.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+											<div class="col-6" *ngIf="formGroup.get('referenceTypeDependencyIds').value">
+												<mat-form-field class="w-100">
+													<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DEPENDENCY' | translate}}</mat-label>
+													<mat-select name="referenceTypeId" [formControl]="case.get('referenceTypeId')">
+														<mat-option *ngFor="let referenceType of referenceTypeDependenciesMap.get(referenceTypeSourceIndex)" [value]="referenceType.id">
+															{{referenceType.code}}
+														</mat-option>
+													</mat-select>
+													<mat-error *ngIf="case.get('referenceTypeId').hasError('backendError')">{{case.get('referenceTypeId').getError('backendError').message}}</mat-error>
+													<mat-error *ngIf="case.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+											<div class="col-6" *ngIf="case.get('referenceTypeId').value">
+												<mat-form-field class="w-100">
+													<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-KEY' | translate}}</mat-label>
+													<mat-select name='referenceTypeSourceKey' [formControl]="case.get('referenceTypeSourceKey')">
+														<mat-option *ngFor="let sourceKey of sourceKeysMap.get(case.get('referenceTypeId').value)" [value]="sourceKey">
+															{{sourceKey}}
+														</mat-option>
+													</mat-select>
+													<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('backendError')">{{case.get('referenceTypeSourceKey').getError('backendError').message}}</mat-error>
+													<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+										</div>
 									</div>
 									<div class="col-auto d-flex">
 										<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-CASE' | translate}}" (click)="removeCase(queryIndex, caseIndex)" [disabled]="formGroup.disabled">
@@ -261,61 +303,10 @@
 										</button>
 									</div>
 								</div>
-							</mat-card-header>
-							<mat-card-content>
-								<div class="row">
-									<div class="col-6">
-										<mat-form-field class="w-100">
-											<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LIKE-PATTERN' | translate}}</mat-label>
-											<input matInput type="text" name="likePattern" [formControl]="case.get('likePattern')">
-											<mat-error *ngIf="case.get('likePattern').hasError('backendError')">{{case.get('likePattern').getError('backendError').message}}</mat-error>
-											<mat-error *ngIf="case.get('likePattern').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-										</mat-form-field>
-									</div>
-									<div class="col-6">
-										<mat-form-field class="w-100">
-											<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SEPARATOR' | translate}}</mat-label>
-											<input matInput type="text" name="separator" [formControl]="case.get('separator')">
-											<mat-error *ngIf="case.get('separator').hasError('backendError')">{{case.get('separator').getError('backendError').message}}</mat-error>
-											<mat-error *ngIf="case.get('separator').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-										</mat-form-field>
-									</div>
-									<div class="col-6">
-										<mat-form-field class="w-100">
-											<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
-											<input matInput type="text" name="value" [formControl]="case.get('value')">
-											<mat-error *ngIf="case.get('value').hasError('backendError')">{{case.get('value').getError('backendError').message}}</mat-error>
-											<mat-error *ngIf="case.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-										</mat-form-field>
-									</div>
-									<div class="col-6" *ngIf="formGroup.get('referenceTypeDependencyIds').value">
-										<mat-form-field class="w-100">
-											<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DEPENDENCY' | translate}}</mat-label>
-											<mat-select name="referenceTypeId" [formControl]="case.get('referenceTypeId')">
-												<mat-option *ngFor="let referenceType of referenceTypeDependenciesMap.get(referenceTypeSourceIndex)" [value]="referenceType.id">
-													{{referenceType.code}}
-												</mat-option>
-											</mat-select>
-											<mat-error *ngIf="case.get('referenceTypeId').hasError('backendError')">{{case.get('referenceTypeId').getError('backendError').message}}</mat-error>
-											<mat-error *ngIf="case.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-										</mat-form-field>
-									</div>
-									<div class="col-6" *ngIf="case.get('referenceTypeId').value">
-										<mat-form-field class="w-100">
-											<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-KEY' | translate}}</mat-label>
-											<mat-select name='referenceTypeSourceKey' [formControl]="case.get('referenceTypeSourceKey')">
-												<mat-option *ngFor="let sourceKey of sourceKeysMap.get(case.get('referenceTypeId').value)" [value]="sourceKey">
-													{{sourceKey}}
-												</mat-option>
-											</mat-select>
-											<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('backendError')">{{case.get('referenceTypeSourceKey').getError('backendError').message}}</mat-error>
-											<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-										</mat-form-field>
-									</div>
-								</div>
-							</mat-card-content>
+							</div>
 						</div>
 					</div>
+
 				</div>
 			</div>
 		</div>
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index f6a940751..33074e97f 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1098,7 +1098,9 @@
 		"FIELDS": {
 			"SOURCE-CONFIGURATION": "Source Configuration",
 			"RESULTS": "Results",
-			"FIELD-MAPPING": "Field Mapping",
+			"FIELDS": "Fields",
+			"SOURCES": "Sources",
+			"FIELD-MAPPINGS": "Field Mappings",
 			"AUTHENTICATION": "Authentication",
 			"QUERIES": "Queries",
 			"QUERY": "Query",
@@ -1108,7 +1110,6 @@
 			"CODE": "Code",
 			"VALUE": "Value",
 			"RESPONSE-PATH": "Response Path",
-			"FIELD": "Field",
 			"DATA-TYPE": "Data Type",
 			"KEY": "Key",
 			"LABEL": "Label",
@@ -1129,7 +1130,7 @@
 			"DEPENDENCIES": "Dependencies",
 			"DEPENDENCY": "Dependency",
 			"DEFAULT-VALUE": "Default Value",
-			"CASE": "Case",
+			"CASES": "Cases",
 			"LIKE-PATTERN": "Condition",
 			"SOURCE-KEY": "Source Key"
 		},
@@ -1145,7 +1146,7 @@
 			"REMOVE-QUERY": "Remove Query",
 			"ADD-CASE": "Add Case",
 			"REMOVE-CASE": "Remove Case",
-			"SUBMIT-FIELDS": "Submit"
+			"SUBMIT-FIELDS": "Update Fields"
 		},
 		"CONFIRM-DELETE-DIALOG": {}
 	},
@@ -1206,14 +1207,12 @@
 		"FIELDS": {
 			"LABEL": "Label",
 			"TYPE": "Type",
-			"DESCRIPTION": "Description",
 			"DESCRIPTION-PLACEHOLDER": "Reference description",
-			"REFERENCE": "reference",
-			"ABBREVIATION": "abbreviation",
-			"SOURCE": "source",
+			"REFERENCE": "Reference",
+			"ABBREVIATION": "Abbreviation",
+			"SOURCE": "Source",
 			"SOURCE-TYPE": "Source Type",
 			"FIELDS": "Fields",
-			"FIELD": "Field",
 			"CODE": "Code",
 			"DATA-TYPE": "Data Type",
 			"VALUE": "Value"