description editor frontend changes

dmp-frontend/src/app/core/model/description/description.ts

@@ -8,28 +8,37 @@ import { Tag } from "../tag/tag";
 import { User } from "../user/user";
 
 export interface Description extends BaseEntity {
-	label: string;
+	label?: string;
-	properties: PropertyDefinition;
+	properties?: DescriptionPropertyDefinition;
-	status: DescriptionStatus;
+	status?: DescriptionStatus;
 	description?: string;
-	createdBy: User;
+	createdBy?: User;
-	finalizedAt: Date;
+	finalizedAt?: Date;
-	descriptionReferences: DescriptionReference[];
+	descriptionReferences?: DescriptionReference[];
-	descriptionTags: DescriptionTag[];
+	descriptionTags?: DescriptionTag[];
-	descriptionTemplate: DescriptionTemplate;
+	descriptionTemplate?: DescriptionTemplate;
-	dmpDescriptionTemplate: DmpDescriptionTemplate;
+	dmpDescriptionTemplate?: DmpDescriptionTemplate;
-	dmp: Dmp;
+	dmp?: Dmp;
 }
 
 export interface PublicDescription extends BaseEntity {
 }
 
-export interface PropertyDefinition {
+export interface DescriptionPropertyDefinition {
-	fields?: DescriptionField[];
+	fieldSets: Map<string, DescriptionPropertyDefinitionFieldSet>;
+}
+
+export interface DescriptionPropertyDefinitionFieldSet {
+	items?: DescriptionPropertyDefinitionFieldSetItem[];
+}
+
+export interface DescriptionPropertyDefinitionFieldSetItem {
+	fields?: Map<string, DescriptionField>;
+	comment?: string;
+	ordinal?: number;
 }
 
 export interface DescriptionField {
-	key?: string;
 	value: string;
 }
 
@@ -53,17 +62,26 @@ export interface DescriptionPersist extends BaseEntityPersist {
 	descriptionTemplateId: Guid;
 	status: DescriptionStatus;
 	description: string;
-	properties: PropertyDefinitionPersist;
+	properties: DescriptionPropertyDefinitionPersist;
 	tags: string[];
 	references: DescriptionReferencePersist[];
 }
 
-export interface PropertyDefinitionPersist {
+export interface DescriptionPropertyDefinitionPersist {
-	fields: DescriptionFieldPersist[];
+	fieldSets: Map<string, DescriptionPropertyDefinitionFieldSetPersist>;
+}
+
+export interface DescriptionPropertyDefinitionFieldSetPersist {
+	items?: DescriptionPropertyDefinitionFieldSetItemPersist[];
+}
+
+export interface DescriptionPropertyDefinitionFieldSetItemPersist {
+	fields?: Map<string, DescriptionFieldPersist>;
+	comment?: string;
+	ordinal?: number;
 }
 
 export interface DescriptionFieldPersist {
-	key?: string;
 	value: string;
 }
 

dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.resolver.ts

@@ -59,7 +59,6 @@ export class DescriptionTemplateEditorResolver extends BaseEditorResolver {
 			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.numbering)].join('.'),
 			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.schematics)].join('.'),
 			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.defaultValue)].join('.'),
-			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.defaultValue)].join('.'),
 			// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.fieldType)].join('.'),
 			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.includeInExport)].join('.'),
 			[nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.validations)].join('.'),

dmp-frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.ts

@@ -26,10 +26,10 @@ export class DescriptionBaseFieldsEditorComponent extends BaseComponent {
 	) { super(); }
 
 	ngOnInit() {
-		const dmpDescriptionTemplates: DmpDescriptionTemplate[] = this.description.dmp.dmpDescriptionTemplates.filter(x => x.sectionId === this.description.dmpDescriptionTemplate.sectionId);
+		const dmpDescriptionTemplates: DmpDescriptionTemplate[] = this.description.dmp.dmpDescriptionTemplates.filter(x => x.sectionId == this.description.dmpDescriptionTemplate.sectionId);
 		const currentVersionsOfDescriptionTemplates = dmpDescriptionTemplates.map(x => x.currentDescriptionTemplate);
 		//Check if the used tempalte in included in the current list. If not add it.
-		if (currentVersionsOfDescriptionTemplates.find(x => x.id === this.description.descriptionTemplate.id) == null) {
+		if (currentVersionsOfDescriptionTemplates.find(x => x.id == this.description?.descriptionTemplate?.id) != null) {
 			this.availableDescriptionTemplates.push(this.description.descriptionTemplate)
 		}
 		this.availableDescriptionTemplates.push(...currentVersionsOfDescriptionTemplates);

dmp-frontend/src/app/ui/description/editor/description-editor.component.html

@@ -15,9 +15,9 @@
 								<ng-template #viewOnlyTemplate>
 									<div class="description-title">{{'DESCRIPTION-EDITOR.TITLE-PREVIEW-DESCRIPTION' | translate}}</div>
 								</ng-template>
-								<div class="d-flex flex-direction-row dmp-info">
+								<div *ngIf="item?.dmp?.id" class="d-flex flex-direction-row dmp-info">
 									<div class="col-auto description-to-dmp">{{'DESCRIPTION-EDITOR.TO-DMP' | translate}}</div>
-									<div class="dmp-title p-0">:&nbsp;{{ item.dmp.label }}</div>
+									<div class="dmp-title p-0">:&nbsp;{{ item?.dmp?.label }}</div>
 									<div class="col-auto d-flex align-items-center">
 										<a [routerLink]="['/overview/' + item.dmp.id]" target="_blank" class="pointer open-in-new-icon">
 											<mat-icon class="size-18">open_in_new</mat-icon>
@@ -137,6 +137,7 @@
 					(fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form>
 				</div>
 			</div>
+			{{formGroup?.value | json}}
 		</form>
 	</div>
 </div>

dmp-frontend/src/app/ui/description/editor/description-editor.component.ts

@@ -33,13 +33,15 @@ import { FilterService } from '@common/modules/text-filter/filter-service';
 import { Guid } from '@common/types/guid';
 import { TranslateService } from '@ngx-translate/core';
 import { map, takeUntil } from 'rxjs/operators';
-import { DescriptionEditorModel } from './description-editor.model';
+import { DescriptionEditorModel, DescriptionPropertyDefinitionEditorModel } from './description-editor.model';
 import { DescriptionEditorResolver } from './description-editor.resolver';
 import { DescriptionEditorService } from './description-editor.service';
 import { ToCEntry } from './table-of-contents/models/toc-entry';
 import { TableOfContentsComponent } from './table-of-contents/table-of-contents.component';
 import { ToCEntryType } from './table-of-contents/models/toc-entry-type.enum';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
+import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
+import { DescriptionTemplateService } from '@app/core/services/description-template/description-template.service';
 
 @Component({
 	selector: 'app-description-editor-component',
@@ -112,6 +114,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 		private descriptionService: DescriptionService,
 		private logger: LoggingService,
 		private descriptionEditorService: DescriptionEditorService,
+		private descriptionTemplateService: DescriptionTemplateService,
 		private fileUtils: FileUtils,
 		private matomoService: MatomoService,
 		private dmpService: DmpService,
@@ -142,6 +145,9 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 				const isPublicDescription = params['public'];
 				const itemId = params['id'];
 				const newDmpId = params['newDmpId'];
+
+
+
 				// const publicId = params['publicId'];
 				// this.dmpId = params['dmpId'];
 				// this.dmpSectionIndex = parseInt(params['dmpSectionIndex']);
@@ -195,6 +201,8 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 				// 			}
 				// 		});
 				// }
+
+				//Regular Editor case
 				if (itemId != null && newDmpId == null) {
 					this.isNew = false;
 					this.lockService.checkLockStatus(itemId).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
@@ -561,13 +569,15 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 
 	buildForm() {
 		this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditDescription));
-		this.visibilityRulesService.buildVisibilityRules(this.visibilityRulesService.getVisibilityRulesFromDescriptionTempalte(this.item.descriptionTemplate), this.formGroup);
+		//this.visibilityRulesService.buildVisibilityRules(this.visibilityRulesService.getVisibilityRulesFromDescriptionTempalte(this.item.descriptionTemplate), this.formGroup);
 
 		// this.selectedSystemFields = this.selectedSystemFieldDisabled();
 		this.descriptionEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
 		if (this.editorModel.status == DescriptionStatus.Finalized || this.isDeleted) {
 			this.formGroup.disable();
 		}
+
+		this.registerFormListeners();
 	}
 
 	refreshData(): void {
@@ -719,7 +729,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 		return fieldSets;
 	}
 
-	// registerFormListeners() {
+	registerFormListeners() {
 		// // const dmpSubscription =
 		// this.formGroup.get('dmp').valueChanges
 		// 	.pipe(takeUntil(this._destroyed))
@@ -727,15 +737,15 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 		// 		this.dmpValueChanged(x);
 		// 	});
 		// // const profileSubscription =
-	// 	this.formGroup.get('profile').valueChanges
+		this.formGroup.get('descriptionTemplateId').valueChanges
-	// 		.pipe(takeUntil(this._destroyed))
+			.pipe(takeUntil(this._destroyed))
-	// 		.subscribe(x => {
+			.subscribe(descriptionTemplateId => {
-	// 			if (x) {
+				if (descriptionTemplateId) {
 					// this.showtocentriesErrors = false;
-	// 				this.descriptionProfileValueChanged(x.id);
+					this.descriptionTemplateValueChanged(descriptionTemplateId);
 					// this.formChanged();
-	// 			}
+				}
-	// 		});
+			});
 		// // const labelSubscription =
 		// this.formGroup.get('label').valueChanges
 		// 	.pipe(takeUntil(this._destroyed))
@@ -768,7 +778,22 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 		// 			this.formChanged();
 		// 		});
 		// 	// this._listenersSubscription.add(descriptionProfileDefinitionSubscription);
-	// 	}
+	}
+
+	descriptionTemplateValueChanged(descriptionTemplateId: Guid) {
+		if (descriptionTemplateId != null) {
+
+			this.descriptionTemplateService.getSingle(descriptionTemplateId, DescriptionEditorResolver.descriptionTemplateLookupFields()).pipe(takeUntil(this._destroyed)).subscribe(descriptionTemplate => {
+
+				this.editorModel.properties = new DescriptionPropertyDefinitionEditorModel().fromModel(null, descriptionTemplate);
+				this.formGroup.removeControl('properties');
+				this.formGroup.addControl('properties', this.editorModel.buildProperties());
+				this.item.descriptionTemplate = descriptionTemplate;
+			});
+			// this.formGroup.removeControl('descriptionProfileDefinition');
+			// this.getDefinition(profiledId);
+		}
+	}
 
 	// 	// this._listenersSubscription.add(dmpSubscription);
 	// 	// this._listenersSubscription.add(profileSubscription);

dmp-frontend/src/app/ui/description/editor/description-editor.model.ts

@@ -1,7 +1,7 @@
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
+import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { DescriptionStatus } from "@app/core/common/enum/description-status";
-import { DescriptionTemplate } from "@app/core/model/description-template/description-template";
+import { DescriptionTemplate, DescriptionTemplateFieldSet, DescriptionTemplateSection } from "@app/core/model/description-template/description-template";
-import { Description, DescriptionField, DescriptionFieldPersist, DescriptionPersist, DescriptionReference, DescriptionReferencePersist, PropertyDefinition, PropertyDefinitionPersist } from "@app/core/model/description/description";
+import { Description, DescriptionField, DescriptionFieldPersist, DescriptionPersist, DescriptionPropertyDefinition, DescriptionPropertyDefinitionFieldSet, DescriptionPropertyDefinitionFieldSetItem, DescriptionPropertyDefinitionFieldSetItemPersist, DescriptionPropertyDefinitionFieldSetPersist, DescriptionPropertyDefinitionPersist, DescriptionReference, DescriptionReferencePersist } from "@app/core/model/description/description";
 import { ReferencePersist } from "@app/core/model/reference/reference";
 import { BaseEditorModel } from "@common/base/base-form-editor-model";
 import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
@@ -36,7 +36,7 @@ export class DescriptionEditorModel extends BaseEditorModel implements Descripti
 			this.status = item.status;
 			this.description = item.description;
 			this.tags = item.descriptionTags?.map(x => x.tag?.label);
-			this.properties = new DescriptionPropertyDefinitionEditorModel().fromModel(item.properties);
+			this.properties = new DescriptionPropertyDefinitionEditorModel().fromModel(item.properties, descriptionTemplate);
 			//if (item.references) { item.references.map(x => this.references.push(new DescriptionReferenceEditorModel().fromModel(x))); }
 		}
 		return this;
@@ -54,13 +54,17 @@ export class DescriptionEditorModel extends BaseEditorModel implements Descripti
 			status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
 			description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
 			tags: [{ value: this.tags, disabled: disabled }, context.getValidation('tags').validators],
-			properties: this.properties.buildForm({
+			properties: this.buildProperties(),
-				rootPath: `properties.`
-			}),
 			hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators]
 		});
 	}
 
+	buildProperties() {
+		return this.properties.buildForm({
+			rootPath: `properties.`
+		});
+	}
+
 	createValidationContext(): ValidationContext {
 		const baseContext: ValidationContext = new ValidationContext();
 		const baseValidationArray: Validation[] = new Array<Validation>();
@@ -79,18 +83,16 @@ export class DescriptionEditorModel extends BaseEditorModel implements Descripti
 	}
 }
 
-export class DescriptionPropertyDefinitionEditorModel implements PropertyDefinitionPersist {
+export class DescriptionPropertyDefinitionEditorModel implements DescriptionPropertyDefinitionPersist {
-	fields: DescriptionFieldEditorModel[] = [];
+	fieldSets: Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> = new Map<string, DescriptionPropertyDefinitionFieldSetEditorModel>;
 	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
 
 	constructor(
 		public validationErrorModel: ValidationErrorModel = new ValidationErrorModel()
 	) { }
 
-	public fromModel(item: PropertyDefinition): DescriptionPropertyDefinitionEditorModel {
+	public fromModel(item: DescriptionPropertyDefinition, descriptionTemplate: DescriptionTemplate): DescriptionPropertyDefinitionEditorModel {
-		if (item) {
+		this.fieldSets = this.calculateProperties(item, descriptionTemplate);
-			if (item.fields) { item.fields.map(x => this.fields.push(new DescriptionFieldEditorModel().fromModel(x))); }
-		}
 		return this;
 	}
 
@@ -107,27 +109,198 @@ export class DescriptionPropertyDefinitionEditorModel implements PropertyDefinit
 			});
 		}
 
+
 		const formGroup = this.formBuilder.group({});
-		(this.fields ?? []).map(
+		const fieldSetsFormGroup = this.formBuilder.group({});
-			(item, index) => formGroup.addControl(item.key, new DescriptionFieldEditorModel(
+		if (this.fieldSets.size > 0) {
-				this.validationErrorModel
+			this.fieldSets.forEach((value, key) => fieldSetsFormGroup.addControl(key.toString(), value.buildForm({
-			).fromModel(item).buildForm({
+				rootPath: `${rootPath}fieldSets[${key}].`
-				rootPath: `${rootPath}fields[${index}].`
+			})), context.getValidation('fieldSets'));
+			formGroup.addControl('fieldSets', fieldSetsFormGroup);
+		}
+		return formGroup;
+	}
+
+	static createValidationContext(params: {
+		rootPath?: string,
+		validationErrorModel: ValidationErrorModel
+	}): ValidationContext {
+		const { rootPath = '', validationErrorModel } = params;
+
+		const baseContext: ValidationContext = new ValidationContext();
+		const baseValidationArray: Validation[] = new Array<Validation>();
+		baseValidationArray.push({ key: 'fieldSets', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}fieldSets`)] });
+
+		baseContext.validation = baseValidationArray;
+		return baseContext;
+	}
+
+	private calculateProperties(item: DescriptionPropertyDefinition, descriptionTemplate: DescriptionTemplate,): Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> {
+		let result: Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> = new Map<string, DescriptionPropertyDefinitionFieldSetEditorModel>();
+		if (descriptionTemplate) (
+			descriptionTemplate.definition.pages.forEach(definitionPage => {
+
+				definitionPage.sections.forEach(definitionSection => {
+
+					const sectionResult = this.calculateSectionProperties(definitionSection, item);
+					if (sectionResult != null) {
+						result = new Map([...result, ...sectionResult]);
+					}
+				})
+			})
+		)
+		return result;
+	}
+
+	private calculateSectionProperties(definitionSection: DescriptionTemplateSection, item: DescriptionPropertyDefinition): Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> {
+		if (definitionSection == null) return null;
+		let result: Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> = new Map<string, DescriptionPropertyDefinitionFieldSetEditorModel>();
+
+		definitionSection?.fieldSets?.forEach(definitionFieldSet => {
+			const fieldSetResult = this.calculateFieldSetProperties(definitionFieldSet, item);
+			if (fieldSetResult != null) {
+				result = new Map([...result, ...fieldSetResult]);
+			}
+		});
+
+		if (definitionSection.sections != null && definitionSection.sections?.length > 0) {
+			definitionSection.sections.forEach(nestedDefinitionSection => {
+				const nestedSectionResult = this.calculateSectionProperties(nestedDefinitionSection, item);
+				if (nestedSectionResult != null) {
+					result = new Map([...result, ...nestedSectionResult]);
+				}
+			});
+		}
+
+		return result;
+	}
+
+	private calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> {
+		if (definitionFieldSet == null) return null;
+		const result: Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> = new Map<string, DescriptionPropertyDefinitionFieldSetEditorModel>();
+
+		// current saved values
+		const fieldSetValue: DescriptionPropertyDefinitionFieldSet = item?.fieldSets[definitionFieldSet.id] ?? {};
+
+		// new item case, where we need to add controls for all the containing fields.
+		if (fieldSetValue.items == null || fieldSetValue.items?.length == 0) {
+
+			const fields = new Map<string, DescriptionField>();
+			definitionFieldSet.fields.forEach(definitionField => {
+				fields.set(definitionField.id, { value: undefined });
+			})
+			fieldSetValue.items = [{
+				fields: fields
+			} as DescriptionPropertyDefinitionFieldSetItem]
+		}
+
+		result.set(definitionFieldSet.id, new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue));
+
+		return result;
+	}
+
+}
+
+export class DescriptionPropertyDefinitionFieldSetEditorModel implements DescriptionPropertyDefinitionFieldSetPersist {
+	items?: DescriptionPropertyDefinitionFieldSetItemEditorModel[] = [];
+	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
+
+	constructor(
+		public validationErrorModel: ValidationErrorModel = new ValidationErrorModel()
+	) { }
+
+	public fromModel(item: DescriptionPropertyDefinitionFieldSet): DescriptionPropertyDefinitionFieldSetEditorModel {
+		if (item) {
+			if (item.items) { item.items.map(x => this.items.push(new DescriptionPropertyDefinitionFieldSetItemEditorModel().fromModel(x))); }
+		}
+		return this;
+	}
+
+	buildForm(params?: {
+		context?: ValidationContext,
+		disabled?: boolean,
+		rootPath?: string
+	}): UntypedFormGroup {
+		let { context = null, disabled = false, rootPath } = params ?? {}
+		if (context == null) {
+			context = DescriptionPropertyDefinitionFieldSetEditorModel.createValidationContext({
+				validationErrorModel: this.validationErrorModel,
+				rootPath
+			});
+		}
+
+		return this.formBuilder.group({
+			items: this.formBuilder.array(
+				(this.items ?? []).map(
+					(item, index) => item.buildForm({
+						rootPath: `${rootPath}items[${index}].`
+					})
+				), context.getValidation('items')
+			)
+		});
+	}
+
+	static createValidationContext(params: {
+		rootPath?: string,
+		validationErrorModel: ValidationErrorModel
+	}): ValidationContext {
+		const { rootPath = '', validationErrorModel } = params;
+
+		const baseContext: ValidationContext = new ValidationContext();
+		const baseValidationArray: Validation[] = new Array<Validation>();
+		baseValidationArray.push({ key: 'items', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}items`)] });
+
+		baseContext.validation = baseValidationArray;
+		return baseContext;
+	}
+
+}
+
+export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements DescriptionPropertyDefinitionFieldSetItemPersist {
+	fields: Map<string, DescriptionFieldEditorModel> = new Map<string, DescriptionFieldEditorModel>;
+	comment?: string;
+	ordinal?: number;
+	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
+
+	constructor(
+		public validationErrorModel: ValidationErrorModel = new ValidationErrorModel()
+	) { }
+
+	public fromModel(item: DescriptionPropertyDefinitionFieldSetItem): DescriptionPropertyDefinitionFieldSetItemEditorModel {
+		if (item) {
+			this.comment = item.comment;
+			this.ordinal = item.ordinal;
+			if (item.fields) { item.fields?.forEach((value, key) => this.fields.set(key, new DescriptionFieldEditorModel().fromModel(value))); }
+		}
+		return this;
+	}
+
+	buildForm(params?: {
+		context?: ValidationContext,
+		disabled?: boolean,
+		rootPath?: string
+	}): UntypedFormGroup {
+		let { context = null, disabled = false, rootPath } = params ?? {}
+		if (context == null) {
+			context = DescriptionPropertyDefinitionFieldSetItemEditorModel.createValidationContext({
+				validationErrorModel: this.validationErrorModel,
+				rootPath
+			});
+		}
+
+		const formGroup = this.formBuilder.group({});
+		formGroup.addControl('comment', new FormControl({ value: this.comment, disabled: disabled }, context.getValidation('comment').validators));
+		formGroup.addControl('ordinal', new FormControl({ value: this.ordinal, disabled: disabled }, context.getValidation('ordinal').validators));
+
+
+		const fieldsFormGroup = this.formBuilder.group({});
+		this.fields.forEach((value, key) => fieldsFormGroup.addControl(key.toString(), value.buildForm({
+			rootPath: `${rootPath}fields[${key}].`
 		})), context.getValidation('fields')
 		)
-		return formGroup;
+		formGroup.addControl('fields', fieldsFormGroup);
 
-		// return this.formBuilder.group({
+		return formGroup;
-		// 	fields: this.formBuilder.array(
-		// 		(this.fields ?? []).map(
-		// 			(item, index) => new DescriptionFieldEditorModel(
-		// 				this.validationErrorModel
-		// 			).fromModel(item).buildForm({
-		// 				rootPath: `${rootPath}fields[${index}].`
-		// 			}), context.getValidation('fields')
-		// 		)
-		// 	)
-		// });
 	}
 
 	static createValidationContext(params: {
@@ -139,6 +312,8 @@ export class DescriptionPropertyDefinitionEditorModel implements PropertyDefinit
 		const baseContext: ValidationContext = new ValidationContext();
 		const baseValidationArray: Validation[] = new Array<Validation>();
 		baseValidationArray.push({ key: 'fields', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}fields`)] });
+		baseValidationArray.push({ key: 'comment', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}comment`)] });
+		baseValidationArray.push({ key: 'ordinal', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}ordinal`)] });
 
 		baseContext.validation = baseValidationArray;
 		return baseContext;
@@ -147,7 +322,6 @@ export class DescriptionPropertyDefinitionEditorModel implements PropertyDefinit
 }
 
 export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
-	key?: string;
 	value: string;
 
 	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
@@ -158,7 +332,6 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 
 	public fromModel(item: DescriptionField): DescriptionFieldEditorModel {
 		if (item) {
-			this.key = item.key;
 			this.value = item.value;
 		}
 		return this;
@@ -178,7 +351,6 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 		}
 
 		return this.formBuilder.group({
-			key: [{ value: this.key, disabled: disabled }, context.getValidation('key').validators],
 			value: [{ value: this.value, disabled: disabled }, context.getValidation('value').validators]
 		});
 	}
@@ -191,7 +363,6 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 
 		const baseContext: ValidationContext = new ValidationContext();
 		const baseValidationArray: Validation[] = new Array<Validation>();
-		baseValidationArray.push({ key: 'key', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}key`)] });
 		baseValidationArray.push({ key: 'value', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}value`)] });
 		baseContext.validation = baseValidationArray;
 		return baseContext;

dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts

@@ -1,22 +1,27 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { DescriptionTemplate, DescriptionTemplateBaseFieldData, DescriptionTemplateSelectOption, DescriptionTemplateDefinition, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplatePage, DescriptionTemplateRule, DescriptionTemplateSection, DescriptionTemplateSelectData } from '@app/core/model/description-template/description-template';
+import { DescriptionTemplate, DescriptionTemplateBaseFieldData, DescriptionTemplateDefinition, DescriptionTemplateExternalDatasetData, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateMultiplicity, DescriptionTemplatePage, DescriptionTemplateRule, DescriptionTemplateSection, DescriptionTemplateSelectData, DescriptionTemplateSelectOption, DescriptionTemplateUploadData, DescriptionTemplateUploadOption } from '@app/core/model/description-template/description-template';
-import { Description, DescriptionField, DescriptionReference, DescriptionTag, PropertyDefinition } from '@app/core/model/description/description';
+import { Description, DescriptionField, DescriptionPropertyDefinition, DescriptionPropertyDefinitionFieldSet, DescriptionPropertyDefinitionFieldSetItem, DescriptionReference, DescriptionTag } from '@app/core/model/description/description';
 import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
 import { Dmp, DmpDescriptionTemplate } from '@app/core/model/dmp/dmp';
 import { Reference } from '@app/core/model/reference/reference';
 import { Tag } from '@app/core/model/tag/tag';
 import { DescriptionService } from '@app/core/services/description/description.service';
+import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
 import { BaseEditorResolver } from '@common/base/base-editor.resolver';
 import { Guid } from '@common/types/guid';
-import { takeUntil, tap } from 'rxjs/operators';
+import { map, takeUntil, tap } from 'rxjs/operators';
 import { nameof } from 'ts-simple-nameof';
 
 @Injectable()
 export class DescriptionEditorResolver extends BaseEditorResolver {
 
-	constructor(private descriptionService: DescriptionService, private breadcrumbService: BreadcrumbService) {
+	constructor(
+		private descriptionService: DescriptionService,
+		private breadcrumbService: BreadcrumbService,
+		private dmpService: DmpService
+	) {
 		super();
 	}
 
@@ -28,35 +33,17 @@ export class DescriptionEditorResolver extends BaseEditorResolver {
 			nameof<Description>(x => x.status),
 			nameof<Description>(x => x.description),
 			nameof<Description>(x => x.status),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.id)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.label)].join('.'),
-
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.id)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.id)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.label)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.ordinal)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.hasTemplates)].join('.'),
-			// [nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.id)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.descriptionTemplateGroupId)].join('.'),
-			// [nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.label)].join('.'),
-			// [nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.minMultiplicity)].join('.'),
-			// [nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.maxMultiplicity)].join('.'),
-
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.sectionId)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.descriptionTemplateGroupId)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.id)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.label)].join('.'),
-			[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.version)].join('.'),
 
+			...DescriptionEditorResolver.dmpLookupFields(nameof<Description>(x => x.dmp)),
 
 			[nameof<Description>(x => x.dmpDescriptionTemplate), nameof<DmpDescriptionTemplate>(x => x.id)].join('.'),
 			[nameof<Description>(x => x.dmpDescriptionTemplate), nameof<DmpDescriptionTemplate>(x => x.sectionId)].join('.'),
 
 			...DescriptionEditorResolver.descriptionTemplateLookupFields(nameof<Description>(x => x.descriptionTemplate)),
 
-			[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.key)].join('.'),
+			[nameof<Description>(x => x.properties), nameof<DescriptionPropertyDefinition>(x => x.fieldSets), nameof<DescriptionPropertyDefinitionFieldSet>(x => x.items), nameof<DescriptionPropertyDefinitionFieldSetItem>(x => x.comment)].join('.'),
-			[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.value)].join('.'),
+			[nameof<Description>(x => x.properties), nameof<DescriptionPropertyDefinition>(x => x.fieldSets), nameof<DescriptionPropertyDefinitionFieldSet>(x => x.items), nameof<DescriptionPropertyDefinitionFieldSetItem>(x => x.ordinal)].join('.'),
+			[nameof<Description>(x => x.properties), nameof<DescriptionPropertyDefinition>(x => x.fieldSets), nameof<DescriptionPropertyDefinitionFieldSet>(x => x.items), nameof<DescriptionPropertyDefinitionFieldSetItem>(x => x.fields), nameof<DescriptionField>(x => x.value)].join('.'),
 
 			[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.id),].join('.'),
 			[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.tag), nameof<Tag>(x => x.label)].join('.'),
@@ -84,6 +71,7 @@ export class DescriptionEditorResolver extends BaseEditorResolver {
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.ordinal)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.title)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.description)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.sections)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.id)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.ordinal)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.title)].join('.'),
@@ -91,6 +79,10 @@ export class DescriptionEditorResolver extends BaseEditorResolver {
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.extendedDescription)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.additionalInformation)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.hasCommentField)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.min)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.max)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.placeholder)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.tableView)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.id)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.defaultValue)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.validations)].join('.'),
@@ -98,10 +90,38 @@ export class DescriptionEditorResolver extends BaseEditorResolver {
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.visibilityRules), nameof<DescriptionTemplateRule>(x => x.value)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateBaseFieldData>(x => x.label)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateBaseFieldData>(x => x.fieldType)].join('.'),
-			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateSelectData>(x => x.options)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateSelectData>(x => x.options), nameof<DescriptionTemplateSelectOption>(x => x.label)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateSelectData>(x => x.options), nameof<DescriptionTemplateSelectOption>(x => x.value)].join('.'),
 			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateSelectData>(x => x.multipleSelect)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateExternalDatasetData>(x => x.type)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateUploadData>(x => x.maxFileSizeInMB)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateUploadData>(x => x.types), nameof<DescriptionTemplateUploadOption>(x => x.label)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateUploadData>(x => x.types), nameof<DescriptionTemplateUploadOption>(x => x.value)].join('.'),
+		]
+	}
+
+	public static dmpLookupFields(prefix?: string): string[] {
+		return [
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.id)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.label)].join('.'),
+
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.id)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.id)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.label)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.ordinal)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.hasTemplates)].join('.'),
+			// (prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.id)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.descriptionTemplateGroupId)].join('.'),
+			// (prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.label)].join('.'),
+			// (prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.minMultiplicity)].join('.'),
+			// (prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.blueprint), nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.maxMultiplicity)].join('.'),
+
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.sectionId)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.descriptionTemplateGroupId)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.id)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.label)].join('.'),
+			(prefix ? prefix + '.' : '') + [nameof<Dmp>(x => x.dmpDescriptionTemplates), nameof<DmpDescriptionTemplate>(x => x.currentDescriptionTemplate), nameof<DescriptionTemplate>(x => x.version)].join('.'),
 		]
 	}
 
@@ -111,9 +131,21 @@ export class DescriptionEditorResolver extends BaseEditorResolver {
 			...DescriptionEditorResolver.lookupFields()
 		];
 		const id = route.paramMap.get('id');
+		const dmpId = route.paramMap.get('dmpId');
+		const dmpSectionId = route.paramMap.get('dmpSectionId');
 		// const cloneid = route.paramMap.get('cloneid');
 		if (id != null) {
-			return this.descriptionService.getSingle(Guid.parse(id), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
+			return this.descriptionService.getSingle(Guid.parse(id), fields)
+		} else if (dmpId != null && dmpSectionId != null) {
+			return this.dmpService.getSingle(Guid.parse(dmpId), DescriptionEditorResolver.dmpLookupFields()).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed), map(dmp => {
+
+				const description: Description = {};
+				description.dmp = dmp;
+				description.dmpDescriptionTemplate = {
+					sectionId: Guid.parse(dmpSectionId)
+				}
+				return description;
+			}));
 		}
 		//TODO: check this
 		// else if (cloneid != null) {

dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts

@@ -27,16 +27,23 @@ const routes: Routes = [
 			}
 		}
 	},
-	// {
+	{
-	// 	path: 'new/:dmpId/:dmpSectionIndex',
+		path: ':dmpId/:dmpSectionId',
-	// 	component: DescriptionWizardComponent,
+		canActivate: [AuthGuard],
-	// 	canActivate: [AuthGuard],
+		component: DescriptionEditorComponent,
-	// 	data: {
+		canDeactivate: [PendingChangesGuard],
-	// 		breadcrumb: true,
+		resolve: {
-	// 		title: 'GENERAL.TITLES.DATASET-NEW'
+			'entity': DescriptionEditorResolver
-	// 	},
+		},
-	// 	canDeactivate:[CanDeactivateGuard]
+		data: {
-	// },
+			...BreadcrumbService.generateRouteDataConfiguration({
+				title: 'BREADCRUMBS.EDIT-DESCRIPTION'
+			}),
+			authContext: {
+				permissions: [AppPermission.EditDescription]
+			}
+		}
+	},
 
 	// {
 	// 	path: 'edit/:id/finalize',

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html

@@ -45,8 +45,8 @@
 			</div>
 		</div>
 	</div>
-	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup.get('commentFieldValue'+fieldSet.id)?.get('value')" class="col-12">
+	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup.get('comment')" class="col-12">
-		<rich-text-editor-component [form]="propertiesFormGroup.get('commentFieldValue'+fieldSet.id).get('value')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup.get('commentFieldValue'+fieldSet.id).disabled"></rich-text-editor-component>
+		<rich-text-editor-component [form]="propertiesFormGroup.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup.get('commentFieldValue'+fieldSet.id).disabled"></rich-text-editor-component>
 	</div>
 </div>
 <ng-container *ngIf="fieldSet && isVisibleByVisibilityService && tableRow">

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html

@@ -11,25 +11,25 @@
 		<i>{{fieldSet.extendedDescription}}</i> 
 	</h5>
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT" class="col-12">
-		<input matInput [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
+		<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('value')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
-		<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-		<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
+		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
 	</mat-form-field>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT" 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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -38,11 +38,11 @@
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<mat-select [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [required]="isRequired" [multiple]="field.data.multipleSelect">
+				<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('value')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [required]="isRequired" [multiple]="field.data.multipleSelect">
 					<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}
 					</mat-option>
 				</mat-select>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 			</mat-form-field>
 		</div>
@@ -51,16 +51,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -70,16 +70,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -89,97 +89,97 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 		</div>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12">
-		<mat-checkbox [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
+		<mat-checkbox [formControl]="propertiesFormGroup?.get(field.id).get('value')" [required]="isRequired">
 			{{field.data.label}}</mat-checkbox>
 	</div>
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12">
-		<textarea matInput class="text-area" [formControl]="propertiesFormGroup.get(field.id).get('value')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired"
+		<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('value')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired"
 		 placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
-			<button mat-icon-button type="button" *ngIf="!propertiesFormGroup.get(field.id).get('value').disabled && propertiesFormGroup.get(field.id).get('value').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup.get(field.id).get('value').patchValue('')">
+			<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('value').disabled && propertiesFormGroup?.get(field.id).get('value').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('value').patchValue('')">
 			<mat-icon>close</mat-icon>
 		</button>
-		<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value')['errors'] && propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 	<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
 		<rich-text-editor-component class="col-12"
-									[form]="propertiesFormGroup.get(field.id).get('value')"
+									[form]="propertiesFormGroup?.get(field.id).get('value')"
 									[placeholder]="field.data.label"
 									[required]="isRequired"
 									[wrapperClasses]="'full-width editor ' +
-														((isRequired && propertiesFormGroup.get(field.id).get('value').touched && propertiesFormGroup.get(field.id).get('value').hasError('required')) ? 'required' : '')"
+														((isRequired && propertiesFormGroup?.get(field.id).get('value').touched && propertiesFormGroup?.get(field.id).get('value').hasError('required')) ? 'required' : '')"
-									[editable]="!propertiesFormGroup.get(field.id).get('value').disabled">
+									[editable]="!propertiesFormGroup?.get(field.id).get('value').disabled">
 		</rich-text-editor-component>
-		<div [class]="(propertiesFormGroup.get(field.id).get('value')['errors'] && propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched) ? 'visible' : 'invisible'" class="col-12">
+		<div [class]="(propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched) ? 'visible' : 'invisible'" class="col-12">
 			<div class="mat-form-field form-field-subscript-wrapper">
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value')['errors'] && propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 			</div>
 		</div>
 	</ng-container>
 	<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD">
 		<div class="col-12 d-flex justify-content-center">
 			<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)"
-						  [multiple]="false" [accept]="typesToString()" [disabled]="propertiesFormGroup.get(field.id).get('value').disabled">
+						  [multiple]="false" [accept]="typesToString()" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
-				<ngx-dropzone-preview *ngIf="propertiesFormGroup.get(field.id).get('value').value && propertiesFormGroup.get(field.id).get('value').value.name" class="file-preview"
+				<ngx-dropzone-preview *ngIf="propertiesFormGroup?.get(field.id).get('value').value && propertiesFormGroup?.get(field.id).get('value').value.name" class="file-preview"
 									  [removable]="true" (removed)="onRemove()">
-					<ngx-dropzone-label class="file-label">{{ propertiesFormGroup.get(field.id).get('value').value.name }}</ngx-dropzone-label>
+					<ngx-dropzone-label class="file-label">{{ propertiesFormGroup?.get(field.id).get('value').value.name }}</ngx-dropzone-label>
 				</ngx-dropzone-preview>
 			</ngx-dropzone>
 		</div>
 		<div class="col-12 d-flex justify-content-center attach-btn">
-			<button *ngIf="!propertiesFormGroup.get(field.id).get('value').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"
+			<button *ngIf="!propertiesFormGroup?.get(field.id).get('value').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"
-					[disabled]="!!propertiesFormGroup.get(field.id).get('value').value || propertiesFormGroup.get(field.id).get('value').disabled">
+					[disabled]="!!propertiesFormGroup?.get(field.id).get('value').value || propertiesFormGroup?.get(field.id).get('value').disabled">
 				<mat-icon class="mr-2">upload</mat-icon>
 				<mat-label>{{ (field.data.label | translate)}}</mat-label>
 			</button>
 
-			<button *ngIf="propertiesFormGroup.get(field.id).get('value').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"
+			<button *ngIf="propertiesFormGroup?.get(field.id).get('value').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"
-					[disabled]="propertiesFormGroup.get(field.id).get('value').disabled">
+					[disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
 				<mat-icon class="mr-2">download</mat-icon>
 				<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
 			</button>
 		</div>
 	</ng-container>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION" class="col-12">
-		<mat-radio-group [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
+		<mat-radio-group [formControl]="propertiesFormGroup?.get(field.id).get('value')" [required]="isRequired">
-			<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup.get(field.id).get('key').value}}" value="true">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }}</mat-radio-button>
+			<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup?.get(field.id).value}}" value="true">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }}</mat-radio-button>
-			<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup.get(field.id).get('key').value}}" value="false">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }}</mat-radio-button>
+			<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup?.get(field.id).value}}" value="false">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }}</mat-radio-button>
 		</mat-radio-group>
-		<small class="text-danger d-block" *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+		<small class="text-danger d-block" *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 		</small>
-		<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</small>
+		<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup?.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</small>
 	</div>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.RADIO_BOX" class="col-12">
-		<mat-radio-group [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
+		<mat-radio-group [formControl]="propertiesFormGroup?.get(field.id).get('value')" [required]="isRequired">
 			<mat-radio-button *ngFor="let option of field.data.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
 		</mat-radio-group>
-		<small class="text-danger d-block" *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+		<small class="text-danger d-block" *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 		</small>
-		<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} *</small>
+		<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup?.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} *</small>
 	</div>
 
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
 		<input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [required]="isRequired"
-		 [formControl]="propertiesFormGroup.get(field.id).get('value')">
+		 [formControl]="propertiesFormGroup?.get(field.id).get('value')">
 		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
 		<mat-datepicker #date></mat-datepicker>
-		<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">
+		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">
 			{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 		</mat-error>
 	</mat-form-field>
@@ -188,16 +188,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -208,16 +208,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -227,16 +227,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 												[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 											  [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -246,16 +246,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 												[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 											  [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -266,16 +266,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 												[configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 											  [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -286,16 +286,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 												[configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 											  [configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -306,16 +306,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 												[configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 											  [configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -326,16 +326,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="registriesAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="registriesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -346,16 +346,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="servicesAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="servicesAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -365,7 +365,7 @@
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{('DATASET-EDITOR.FIELDS.TAGS' | translate) + (isRequired? ' *': '')}}"></app-multiple-auto-complete>
+				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="propertiesFormGroup?.get(field.id).get('value')" placeholder="{{('DATASET-EDITOR.FIELDS.TAGS' | translate) + (isRequired? ' *': '')}}"></app-multiple-auto-complete>
 			</mat-form-field>
 		</div>
 	</div>
@@ -374,16 +374,16 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="researchersAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="researchersAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
 				</ng-container>
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
@@ -394,15 +394,15 @@
 		<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('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="organisationsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="organisationsAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 				</ng-container>
 
@@ -415,18 +415,18 @@
 		<div class="row" *ngIf="datasetIdInitialized">
 			<mat-form-field class="col-md-12">
 				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}"
-					   [required]="isRequired" [disabled]="propertiesFormGroup.get(field.id).get('value').disabled">
+					   [required]="isRequired" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 			</mat-form-field>
 			<mat-form-field class="col-md-12">
 				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')"
-							[disabled]="propertiesFormGroup.get(field.id).get('value').disabled">
+							[disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
 					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
 						{{ type.name }}
 					</mat-option>
 				</mat-select>
-					<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 			</mat-form-field>
 		</div>
@@ -435,10 +435,10 @@
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CURRENCY" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
 					 [configuration]="currencyAutoCompleteConfiguration" [required]="isRequired">
 					</app-single-auto-complete>
-					<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 			</mat-form-field>
 		</div>
@@ -448,7 +448,7 @@
 		<div class="row align-items-baseline">
 			<mat-form-field class="col-md-4">
 				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
-				<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 			</mat-form-field>
 			<mat-form-field class="col-md-4">
@@ -457,12 +457,12 @@
 						{{ type.name }}
 					</mat-option>
 				</mat-select>
-					<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 			</mat-form-field>
 			<div class="col-md-2">
-				<button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="propertiesFormGroup.get(field.id).get('value').disabled">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
+				<button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
-					<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 				</div>
 			<div class="col-md-1">

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts

@@ -123,36 +123,37 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 		});
 
 		//TODO: validate that this logic is correct. Validation contenxt path might need to be fixed.
-		if (this.propertiesFormGroup.get(this.field.id).get('value') == null) {
+		// if (this.propertiesFormGroup.get(this.field.id).get('value') == null) {
-			const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
+		// 	const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
-			item.key = this.field.id;
+		// 	item.key = this.field.id;
-			this.propertiesFormGroup.addControl(this.field.id, item.buildForm());
+		// 	this.propertiesFormGroup.addControl(this.field.id, item.buildForm());
-		}
+		// }
 
-		if (this.propertiesFormGroup.get(this.field.id).get('value').value) {
+		// if (this.propertiesFormGroup.get(this.field.id).get('value').value) {
-			this.visibilityRulesService.updateValueAndVisibility(this.field?.id, this.propertiesFormGroup.get(this.field.id).get('value').value);
+		// 	this.visibilityRulesService.updateValueAndVisibility(this.field?.id, this.propertiesFormGroup.get(this.field.id).get('value').value);
-		}
+		// }
 
 		this.isRequired = this.field.validations?.includes(DescriptionTemplateFieldValidationType.Required);
 
-		if (this.field?.data?.fieldType === DescriptionTemplateFieldType.SELECT) {
+		//TODO: refactor
-			if ((this.field.data as DescriptionTemplateSelectData).multipleSelect) {
+		// if (this.field?.data?.fieldType === DescriptionTemplateFieldType.SELECT) {
-				const originalValue = <string>this.propertiesFormGroup.get(this.field.id).get('value').value;
+		// 	if ((this.field.data as DescriptionTemplateSelectData).multipleSelect) {
-				if (originalValue !== null && typeof originalValue === 'string') {
+		// 		const originalValue = <string>this.propertiesFormGroup.get(this.field.id).get('value').value;
-					let values = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).slice(1, -1).split(', ').filter((value) => !value.includes('"'));
+		// 		if (originalValue !== null && typeof originalValue === 'string') {
-					let specialValue = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).split('"').filter((value) => !value.startsWith('[') && !value.endsWith(']') && !values.includes(value) && value !== ', ');
+		// 			let values = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).slice(1, -1).split(', ').filter((value) => !value.includes('"'));
-					specialValue.forEach(value => values.push(value));
+		// 			let specialValue = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).split('"').filter((value) => !value.startsWith('[') && !value.endsWith(']') && !values.includes(value) && value !== ', ');
-					if (!originalValue.startsWith('[') && !originalValue.endsWith(']')) {
+		// 			specialValue.forEach(value => values.push(value));
-						values = undefined;
+		// 			if (!originalValue.startsWith('[') && !originalValue.endsWith(']')) {
-						values = [originalValue];
+		// 				values = undefined;
-					}
+		// 				values = [originalValue];
-					this.propertiesFormGroup.get(this.field.id).get('value').patchValue(values);
+		// 			}
-					values.forEach(element => {
+		// 			this.propertiesFormGroup.get(this.field.id).get('value').patchValue(values);
-						this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
+		// 			values.forEach(element => {
-					});
+		// 				this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
-				}
+		// 			});
-			}
+		// 		}
-		}
+		// 	}
+		// }
 
 		// Setup autocomplete configuration if needed
 		if (this.field?.data?.fieldType === DescriptionTemplateFieldType.EXTERNAL_SELECT) {
@@ -303,8 +304,8 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 				};
 				break;
 			case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
-				const value = this.propertiesFormGroup.get(this.field.id).get('value').value;
+				// const value = this.propertiesFormGroup.get(this.field.id).get('value').value;
-				const disabled = this.propertiesFormGroup.get(this.field.id).disabled;
+				// const disabled = this.propertiesFormGroup.get(this.field.id).disabled;
 				//TODO: Refactor this.
 				// this.form.removeControl('value');
 				// this.form.addControl('value', new DatasetIdModel(value).buildForm());
@@ -323,8 +324,8 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 				};
 				break;
 			case DescriptionTemplateFieldType.VALIDATION:
-				const value1 = this.propertiesFormGroup.get(this.field.id).get('value').value;
+				// const value1 = this.propertiesFormGroup.get(this.field.id).get('value').value;
-				const disabled1 = this.propertiesFormGroup.get(this.field.id).disabled;
+				// const disabled1 = this.propertiesFormGroup.get(this.field.id).disabled;
 				//TODO: Refactor this.
 				// this.form.removeControl('value');
 				// this.form.addControl('value', new DatasetIdModel(value1).buildForm());
@@ -344,21 +345,23 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 		}
 
 		// this.form = this.visibilityRulesService.getFormGroup(this.field.id);
-		this.propertiesFormGroup.get(this.field.id).get('value').valueChanges
-			.pipe(
-				takeUntil(this._destroyed),
-				distinctUntilChanged()
-			)
-			.subscribe(item => {
-				// if (this.field?.data?.fieldType === DescriptionTemplateFieldType.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Select && this.form.get('data').value.multipleSelect) {
-				// 		item.forEach(element => {
-				// 			this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
-				// 		});
 		
-				// } else {
+		//TODO: refactor
-				this.visibilityRulesService.updateValueAndVisibility(this.field?.id, item);
+		// this.propertiesFormGroup.get(this.field.id).get('value').valueChanges
-				// }
+		// 	.pipe(
-			});
+		// 		takeUntil(this._destroyed),
+		// 		distinctUntilChanged()
+		// 	)
+		// 	.subscribe(item => {
+		// 		// if (this.field?.data?.fieldType === DescriptionTemplateFieldType.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Select && this.form.get('data').value.multipleSelect) {
+		// 		// 		item.forEach(element => {
+		// 		// 			this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
+		// 		// 		});
+
+		// 		// } else {
+		// 		this.visibilityRulesService.updateValueAndVisibility(this.field?.id, item);
+		// 		// }
+		// 	});
 	}
 
 	// _optionRemove(event) {

dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html

@@ -16,7 +16,7 @@
 					<div class="col-12">
 						<div *ngIf="!fieldSet?.multiplicity?.tableView" class="row">
 							<!-- <app-form-field-set class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-field-set> -->
-							<app-form-field-set class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [fieldSet]="fieldSet" [path]="path + '.' + (i+1)" [visibilityRulesService]="visibilityRulesService" [isChild]="false"></app-form-field-set>
+							<app-form-field-set *ngFor="let fieldSetPropertiesControl of propertiesFormGroup.get('fieldSets')?.get(fieldSet.id)?.get('items')?.controls" class="align-self-center col" [propertiesFormGroup]="fieldSetPropertiesControl.get('fields')" [fieldSet]="fieldSet" [path]="path + '.' + (i+1)" [visibilityRulesService]="visibilityRulesService" [isChild]="false"></app-form-field-set>
 						</div>
 						<ng-container *ngIf="fieldSet?.multiplicity?.tableView">
 							<div class="row">

dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts

@@ -57,13 +57,13 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On
 		// 	this.changeDetector.markForCheck();
 		// });
 		// Set comment fields to properties
-		this.section.fieldSets.forEach(fieldSet => {
+		// this.section.fieldSets.forEach(fieldSet => {
-			if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) {
+		// 	if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) {
-				const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
+		// 		const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
-				item.key = 'commentFieldValue' + fieldSet.id;
+		// 		item.key = 'commentFieldValue' + fieldSet.id;
-				this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm());
+		// 		this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm());
-			}
+		// 	}
-		});
+		// });
 
 		//TODO uncomment
 		// if (this.tocentry) {//maybe not needed as well

dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts

@@ -199,6 +199,12 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 			this._resetObserver();
 
 		}
+		if (changes['descriptionTemplate'] && changes.descriptionTemplate != null) {
+			this.tocentries = this.getTocEntries(this.descriptionTemplate);
+			if (this.visibilityRulesService) {
+				this.hiddenEntries = this._findHiddenEntries(this.tocentries);
+			}
+		}
 
 		if ('visibilityRulesService') {
 			if (this._visibilityRulesSubscription) {

dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html

@@ -95,9 +95,9 @@
 											</div>
 										</li>
 									</ol>
-									<ul *ngIf="section.hasTemplates" class="add-dataset-option">
+									<ul *ngIf="item.id && section.hasTemplates" class="add-dataset-option">
 										<li>
-											<a class="add-dataset-action" (click)="addDescription(section.id)">
+											<a class="add-dataset-action" [routerLink]="['/descriptions/edit/' + item.id + '/' + section.id]">
 												<mat-icon>add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
 											</a>
 										</li>