more description editor changes

dmp-frontend/src/app/core/pipes/field-value.pipe.ts

@@ -11,8 +11,8 @@ export class FieldValuePipe implements PipeTransform {
 	}
 
 	transform(controlValue: any): string | null {
-		let value = controlValue.value;
+		let value = controlValue?.value;
-		let renderStyle = controlValue.viewStyle?.renderStyle;
+		let renderStyle = controlValue?.viewStyle?.renderStyle;
 		if (renderStyle && value) {
 			switch (renderStyle) {
 				case DescriptionTemplateFieldType.CURRENCY:

dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html

@@ -99,8 +99,8 @@
 			<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;">
 				<div *ngIf="previewForm && showPreview && firstField?.get('data')?.get('fieldType')?.value" [@fade-in-fast]>
 					<!-- Check what we need to do with this.	 -->
-					<!-- <app-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId">
+					<!-- <app-description-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId">
-					</app-form-section-inner> -->
+					</app-description-form-section-inner> -->
 				</div>
 			</div>
 

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

@@ -136,8 +136,8 @@
 					[linkToScroll]="linkToScroll"
 					(fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form>
 				</div>
-			</div>
 			{{formGroup?.value | json}}
+			</div>
 		</form>
 	</div>
 </div>

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

@@ -159,7 +159,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
 		definitionSection?.fieldSets?.forEach(definitionFieldSet => {
 			const fieldSetResult = this.calculateFieldSetProperties(definitionFieldSet, item);
 			if (fieldSetResult != null) {
-				result = new Map([...result, ...fieldSetResult]);
+				result.set(definitionFieldSet.id, fieldSetResult);
 			}
 		});
 
@@ -175,9 +175,8 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
 		return result;
 	}
 
-	private calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> {
+	public calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): 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] ?? {};
@@ -194,9 +193,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
 			} as DescriptionPropertyDefinitionFieldSetItem]
 		}
 
-		result.set(definitionFieldSet.id, new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue));
+		return new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue);
-
-		return result;
 	}
 
 }
@@ -289,8 +286,8 @@ export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements Des
 		}
 
 		const formGroup = this.formBuilder.group({});
-		formGroup.addControl('comment', new FormControl({ value: this.comment, disabled: disabled }, context.getValidation('comment').validators));
+		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));
+		formGroup.addControl('ordinal', new FormControl({ value: 5, disabled: disabled }, context.getValidation('ordinal').validators));
 
 
 		const fieldsFormGroup = this.formBuilder.group({});

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

@@ -1,15 +0,0 @@
-<div class="form">
-	<div class="row d-flex flex-row">
-		<div class="col-auto ml-auto close-btn" (click)="close()">
-			<mat-icon>close</mat-icon>
-		</div>
-	</div>
-	<div *ngIf="data.formGroup" mat-dialog-content class="row">
-		<app-form-composite-field class="align-self-center col" [form]="data.formGroup" [datasetProfileId]="data.datasetProfileId" [altVisibilityRulesService]="visibilityRulesService"
-								  [isChild]="false" [showDelete]="false" [showTitle]="false" [placeholderTitle]="true"></app-form-composite-field>
-	</div>
-	<div mat-dialog-actions class="row">
-		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'DATASET-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!data.formGroup.valid" (click)="save()">{{'DATASET-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
-	</div>
-</div>

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

@@ -1,31 +0,0 @@
-import {Component, Inject} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import { VisibilityRulesService } from "../../visibility-rules/visibility-rules.service";
-
-@Component({
-	selector: 'app-form-composite-field-dialog',
-	templateUrl: 'form-composite-field-dialog.component.html'
-})
-export class FormCompositeFieldDialogComponent {
-
-	public visibilityRulesService: VisibilityRulesService;
-
-	constructor(
-		private dialogRef: MatDialogRef<FormCompositeFieldDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
-	) {
-		this.visibilityRulesService = data.visibilityRulesService;
-	}
-
-	cancel() {
-		this.dialogRef.close();
-	}
-
-	save() {
-		this.dialogRef.close(this.data.formGroup);
-	}
-
-	public close() {
-		this.dialogRef.close(false);
-	}
-}

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

@@ -0,0 +1,26 @@
+<div class="form">
+	<div class="row d-flex flex-row">
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div *ngIf="fieldSet && propertiesFormGroup" mat-dialog-content class="row">
+		<!-- <app-form-composite-field class="align-self-center col" [form]="data.formGroup" [datasetProfileId]="data.datasetProfileId" [altVisibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="false" [showTitle]="false" [placeholderTitle]="true"></app-form-composite-field> -->
+
+		<div class="col-12">
+			<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path"></app-description-form-field-set-title>
+		</div>
+		<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
+			<div class="row">
+				<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
+			</div>
+			<app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup.get('fields')" [field]="field" [fieldSet]="fieldSet"></app-description-form-field>
+		</div>
+
+
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'DATASET-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DATASET-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
+	</div>
+</div>

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

@@ -0,0 +1,34 @@
+import { Component, Inject } from "@angular/core";
+import { UntypedFormGroup } from "@angular/forms";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { DescriptionTemplateFieldSet } from "@app/core/model/description-template/description-template";
+
+@Component({
+	selector: 'app-description-form-fieldset-editor-dialog',
+	templateUrl: 'form-fieldset-editor-dialog.component.html'
+})
+export class FormFieldSetEditorDialogComponent {
+
+	fieldSet: DescriptionTemplateFieldSet;
+	propertiesFormGroup: UntypedFormGroup;
+
+	constructor(
+		private dialogRef: MatDialogRef<FormFieldSetEditorDialogComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: any
+	) {
+		this.fieldSet = data.fieldSet;
+		this.propertiesFormGroup = data.propertiesFormGroup;
+	}
+
+	cancel() {
+		this.dialogRef.close();
+	}
+
+	save() {
+		this.dialogRef.close(this.propertiesFormGroup);
+	}
+
+	public close() {
+		this.dialogRef.close(false);
+	}
+}

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

@@ -1,6 +1,6 @@
 <div class="col-12">
 	<div class="row">
-		<h5 *ngIf="fieldSet.title && !isChild" class="col-auto compositeField toc-compositeField-header" [id]="fieldSet.id">
+		<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
 			{{path}}
 			{{fieldSet.title}}
 		</h5>

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

@@ -1,4 +1,4 @@
-.compositeField {
+.field-set {
 	// font-weight: bold;
 	// color: #3a3737;
 	// max-width: 100%;
@@ -15,6 +15,8 @@
 
 .info-icon{
 	margin-top: 1.625rem;
+	width: auto;
+	height: auto;
 }
 
 h6 {

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

@@ -2,11 +2,11 @@ import { Component, Input, OnInit } from '@angular/core';
 import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
 
 @Component({
-	selector: 'app-form-composite-title',
+	selector: 'app-description-form-field-set-title',
-	templateUrl: './form-composite-title.component.html',
+	templateUrl: './field-set-title.component.html',
-	styleUrls: ['./form-composite-title.component.scss']
+	styleUrls: ['./field-set-title.component.scss']
 })
-export class DescriptionFormCompositeTitleComponent implements OnInit {
+export class DescriptionFormFieldSetTitleComponent implements OnInit {
 
 	@Input() fieldSet: DescriptionTemplateFieldSet;
 	@Input() isChild: Boolean = false;

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

@@ -1,65 +1,71 @@
-<!-- <div *ngIf="fieldSet && isVisibleByVisibilityService && !tableRow" class="dynamic-form-composite-field row"> -->
+<div *ngIf="fieldSet" class="dynamic-form-composite-field row">
-<div *ngIf="fieldSet && !tableRow" class="dynamic-form-composite-field row">
+	<div *ngIf="showTitle" class="col-12">
-	<!-- <div *ngIf="fieldSet.fields.length === 1 && this.visibilityRulesService.isVisibleMap[fieldSet.fields.id] ?? true" class="col-12"> -->
+		<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
-	<div *ngIf="fieldSet.fields.length === 1" class="col-12">
+	</div>
-		<div class="row">
+	<div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
-			<div *ngIf="showTitle" class="col-12">
+		<div class="row" *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls">
-				<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title>
+			<div class="col">
-			</div>
-			<div class="col-12">
 				<div class="row">
-					<app-form-field class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [field]="fieldSet.fields[0]" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
+					<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
-					<div *ngIf="showDelete" class="col-auto align-self-center">
+						<ng-container>
-						<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(fieldSet.fields[0].id).disabled">
+							<div class="row">
-							<mat-icon>delete</mat-icon>
+								<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
-						</button>
+							</div>
+							<app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="fieldSetItemPropertiesControl.get('fields')" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-description-form-field>
+						</ng-container>
 					</div>
 				</div>
 			</div>
-		</div>
+			<div *ngIf="propertiesFormGroup.get('items').length > 1" class="col-auto align-self-center">
-	</div>
+				<button mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(i);" [disabled]="fieldSetItemPropertiesControl.disabled">
-	<div *ngIf="fieldSet.fields.length > 1" class="col-12">
-		<div class="row">
-			<div *ngIf="showTitle" class="col-12">
-				<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title>
-			</div>
-			<div class="col align-self-center">
-			<!-- <div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField"> -->
-				<div *ngFor="let fieldSetFormGroup of propertiesFormGroup.get('fieldSet.id'); let i = index;" class="col-12 compositeField">
-					<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
-
-					<!-- <ng-container *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true"> -->
-					<ng-container>
-						<div class="row">
-							<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
-						</div>
-						<app-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup" [field]="field" [fieldSet]="fieldSet" [fieldSetFormGroup]="fieldSetFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
-					</ng-container>
-				</div>
-			</div>
-			</div>
-			<div *ngIf="showDelete" class="col-auto align-self-center">
-				<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
 					<mat-icon>delete</mat-icon>
 				</button>
 			</div>
 		</div>
+		<div *ngIf="(fieldSet.multiplicity.max - 1) > (propertiesFormGroup.get('items').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
+			<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
+				<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
+					<mat-icon>add_circle</mat-icon>
+				</button>
+				<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
+				<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
+			</span>
+		</div>
 	</div>
-	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup.get('comment')" class="col-12">
+	<div *ngIf="fieldSet?.multiplicity?.tableView" class="col-12">
-		<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>
+		<table class="table table-bordered" style="table-layout: fixed">
+			<tr>
+				<th *ngFor="let field of fieldSet.fields; let i = index;" class="text-wrap">{{field.data?.label}}</th>
+				<th class="actions"></th>
+			</tr>
+			<tr *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls; let j = index">
+				<td *ngFor="let field of fieldSet.fields;" class="text-wrap">{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}}</td>
+				<td class="actions">
+					<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editTableMultiplicityFieldInDialog(j)" [disabled]="fieldSetItemPropertiesControl.disabled">
+						<mat-icon>edit</mat-icon>
+					</button>
+					<button *ngIf="propertiesFormGroup.get('items').length > 1" mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(j);" [disabled]="fieldSetItemPropertiesControl.disabled">
+						<mat-icon>delete</mat-icon>
+					</button>
+				</td>
+			</tr>
+			<tr *ngIf="(fieldSet.multiplicity.max - 1) > propertiesFormGroup?.get('items')?.controls.length">
+				<td [colSpan]="fieldSet.fields.length + 1" class="text-center">
+					<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
+						<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
+							<mat-icon>add_circle</mat-icon>
+						</button>
+						<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
+						<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
+					</span>
+				</td>
+			</tr>
+		</table>
+	</div>
+</div>
+<!-- comment only on top level fieldset -->
+<div class="row">
+	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup?.get('items')?.at(0)?.get('comment')" class="col-12">
+		<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
 	</div>
 </div>
-<ng-container *ngIf="fieldSet && isVisibleByVisibilityService && tableRow">
-	<ng-container *ngFor="let field of fieldSet.fields;">
-		<!-- <td *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true" class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td> -->
-		<td class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td>
-	</ng-container>
-	<td class="actions">
-		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="propertiesFormGroup.get(field.id).disabled">
-			<mat-icon>edit</mat-icon>
-		</button>
-		<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(field.id).disabled">
-			<mat-icon>delete</mat-icon>
-		</button>
-	</td>
-</ng-container>

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

@@ -1,17 +1,8 @@
 .compositeField {
   padding-left: 0em !important;
-//   padding-top: 2em !important;
 }
 
-// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-// 	background: #fafafa !important;
-// }
-
-// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
-// 	font-size: 1rem;
-// 	padding: 0.6em 0 1em 0 !important;
-// }
-
 .actions {
 	width: 110px;
+	display: flex;
 }

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

@@ -1,14 +1,17 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from "@angular/material/dialog";
 import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
 import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
+import { DescriptionPropertyDefinitionEditorModel, DescriptionPropertyDefinitionFieldSetEditorModel } from '../../../description-editor.model';
+import { FormFieldSetEditorDialogComponent } from './dialog-editor/form-fieldset-editor-dialog.component';
+import { cloneAbstractControl } from '@app/utilities/enhancers/utils';
 
 @Component({
-	selector: 'app-form-field-set',
+	selector: 'app-description-form-field-set',
 	templateUrl: './form-field-set.component.html',
 	styleUrls: ['./form-field-set.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush
@@ -17,6 +20,16 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
 
 	@Input() fieldSet: DescriptionTemplateFieldSet;
 	@Input() propertiesFormGroup: UntypedFormGroup;
+
+	get isMultiplicityEnabled() {
+		return this.fieldSet.multiplicity != null && this.fieldSet.multiplicity.min != 0 && this.fieldSet.multiplicity.max != 0;
+	}
+
+
+
+
+
+
 	isVisibleByVisibilityService: boolean = true;
 	@Input() visibilityRulesService: VisibilityRulesService;
 	@Input() path: String;
@@ -53,31 +66,53 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
 		// }
 	}
 
-	// editCompositeFieldInDialog() {
+	addMultiplicityField() {
-	// 	const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, {
+		const formArray = this.propertiesFormGroup?.get('items') as UntypedFormArray;
-	// 		width: '750px',
+		if (formArray.disabled) {
-	// 		disableClose: true,
+			return;
-	// 		data: {
+		}
-	// 			formGroup: cloneAbstractControl(this.form),
+
-	// 			datasetProfileId: this.datasetProfileId,
+		const item: DescriptionPropertyDefinitionFieldSetEditorModel = new DescriptionPropertyDefinitionEditorModel().calculateFieldSetProperties(this.fieldSet, null);
-	// 			visibilityRulesService: this.visibilityRulesService
+		//TODO: akis
-	// 		}
+		formArray.push((item.buildForm().get('items') as UntypedFormArray).at(0));
-	// 	});
+	}
-	// 	dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+
-	// 		if (data) {
+	deleteMultiplicityField(fieldSetIndex: number): void {
-	// 			this.form.patchValue(data.value);
+		const formArray = this.propertiesFormGroup.get('items') as UntypedFormArray;
-	// 			this.changeDetector.detectChanges();
+		formArray.removeAt(fieldSetIndex);
-	// 		}
+		formArray.controls.forEach((fieldSet, index) => {
-	// 	});
+			fieldSet.get('ordinal').setValue(index + 1);
-	// }
+		});
+
+		//TODO: akis
+		//Reapply validators
+		// DmpBlueprintEditorModel.reApplySectionValidators(
+		// 	{
+		// 		formGroup: this.formGroup,
+		// 		validationErrorModel: this.editorModel.validationErrorModel
+		// 	}
+		// );
+		formArray.markAsDirty();
+	}
+
+	editTableMultiplicityFieldInDialog(fieldSetIndex: number) {
+		const dialogRef = this.dialog.open(FormFieldSetEditorDialogComponent, {
+			width: '750px',
+			disableClose: true,
+			data: {
+				fieldSet: this.fieldSet,
+				propertiesFormGroup: cloneAbstractControl((this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex))
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+			if (data) {
+				(this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex).patchValue(data.value);
+				this.changeDetector.detectChanges();
+			}
+		});
+	}
+
 
-	// deleteCompositeField() {
-	// 	if (this.isChild) {
-	// 		this.deleteMultipeFieldFromCompositeFormGroup();
-	// 	} else {
-	// 		this.deleteCompositeFieldFormGroup();
-	// 	}
-	// }
 
 	// deleteCompositeFieldFormGroup() {
 

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

@@ -1,8 +1,5 @@
-<div *ngIf="field && visible" [id]="field.id"
+<div *ngIf="field && visible" [id]="field.id" [ngSwitch]="this.field?.data?.fieldType" class="dynamic-form-field row">
- [ngSwitch]="this.field?.data?.fieldType" class="dynamic-form-field row">
+	<h5 *ngIf="fieldSet.title && !isChild">{{fieldSet.title}}</h5>
- {{field.id | json}}
-
-	<!-- <h5 *ngIf="fieldSet.title && !isChild">{{fieldSet.title}}</h5> -->
 	<mat-icon *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
 
 	<h5 *ngIf="fieldSet.description && !isChild" class="col-12">{{fieldSet.description}}
@@ -20,13 +17,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -49,15 +44,13 @@
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS" class="col-12">
 		<div class="row">
-			<mat-form-field class="col-md-12" >
+			<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">
-					 [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">
-					 [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}}
@@ -70,13 +63,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -89,13 +80,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -109,21 +98,15 @@
 			{{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>
-		 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-form-field>
 	<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
-		<rich-text-editor-component class="col-12"
+		<rich-text-editor-component class="col-12" [form]="propertiesFormGroup?.get(field.id).get('value')" [placeholder]="field.data.label" [required]="isRequired" [wrapperClasses]="'full-width editor ' +
-									[form]="propertiesFormGroup?.get(field.id).get('value')"
+														((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">
-									[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' : '')"
-									[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="mat-form-field form-field-subscript-wrapper">
@@ -133,23 +116,19 @@
 	</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)"
+			<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" [removable]="true" (removed)="onRemove()">
-				<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-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>
@@ -175,8 +154,7 @@
 	</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"
+		<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')">
@@ -188,13 +166,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -208,13 +184,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -227,13 +201,11 @@
 		<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">
-												[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">
-											  [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}}
@@ -246,13 +218,11 @@
 		<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">
-												[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">
-											  [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}}
@@ -262,17 +232,15 @@
 		</div>
 	</div>
 
- 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAXONOMIES" class="col-12">
+	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAXONOMIES" class="col-12">
 		<div *ngIf="field.data" class="row">
 			<mat-form-field class="col-md-12">
 				<ng-container *ngIf="field.data.multipleSelect">
-					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')"
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
-												[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">
-											  [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}}
@@ -286,13 +254,11 @@
 		<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">
-												[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">
-											  [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}}
@@ -306,13 +272,11 @@
 		<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">
-												[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">
-											  [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}}
@@ -326,13 +290,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -346,13 +308,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -374,13 +334,11 @@
 		<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">
-					 [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">
-					 [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}}
@@ -394,13 +352,11 @@
 		<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">
-					 [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">
-					 [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>
@@ -414,20 +370,18 @@
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
 		<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? ' *': '')}}"
+				<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>
 			</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? ' *': '')"
+				<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-error>
 			</mat-form-field>
 		</div>
 	</div>
@@ -435,11 +389,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">
-					 [configuration]="currencyAutoCompleteConfiguration" [required]="isRequired">
+				</app-single-auto-complete>
-					</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-error>
 			</mat-form-field>
 		</div>
 	</div>
@@ -457,14 +410,14 @@
 						{{ 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-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>
-					<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-error>
-				</div>
+			</div>
 			<div class="col-md-1">
 				<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
 				<mat-icon *ngIf="validationIcon !== 'loading'" [ngClass]="{'success': validationIcon === 'done', 'fail': validationIcon === 'clear'}">{{validationIcon}}</mat-icon>

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

@@ -6,7 +6,7 @@ import { MatDialog } from "@angular/material/dialog";
 import { DescriptionTemplateFieldType } from '@app/core/common/enum/description-template-field-type';
 import { DescriptionTemplateFieldValidationType } from '@app/core/common/enum/description-template-field-validation-type';
 import { ReferenceType } from '@app/core/common/enum/reference-type';
-import { DescriptionTemplateExternalSelectData, DescriptionTemplateExternalSelectSource, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateSelectData, DescriptionTemplateUploadData } from '@app/core/model/description-template/description-template';
+import { DescriptionTemplateExternalSelectData, DescriptionTemplateExternalSelectSource, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateUploadData } from '@app/core/model/description-template/description-template';
 import { FetcherReference, Reference } from '@app/core/model/reference/reference';
 import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
@@ -20,11 +20,10 @@ import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+import { map, takeUntil } from 'rxjs/operators';
-import { DescriptionFieldEditorModel } from '../../../description-editor.model';
 
 @Component({
-	selector: 'app-form-field',
+	selector: 'app-description-form-field',
 	templateUrl: './form-field.component.html',
 	styleUrls: ['./form-field.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush

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

@@ -11,75 +11,24 @@
 				<h6 class='panel-desc' *ngIf="section.description" [innerHTML]="section.description"></h6>
 			</mat-panel-description>
 			<div *ngFor="let fieldSet of section.fieldSets; let i = index;" class="col-12" [id]="fieldSet.id" (click)="onAskedToScroll(fieldSet.id)">
-				<!-- <div class="row" *ngIf="((this.visibilityRulesService.isVisibleMap[fieldsetEntry.form.get('id').value] ?? true) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)) && !hiddenEntriesIds.includes(fieldsetEntry.id)"> -->
 				<div class="row">
 					<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 *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">
-								<div class="col-12">
-									<app-form-composite-title class="row" [fieldSet]="fieldSet"></app-form-composite-title>
-								</div>
-							</div>
-							<!-- <table class="table table-bordered" style="table-layout: fixed">
-								<tr>
-									<ng-container *ngFor="let fieldFormGroup of fieldsetEntry.form.get('fields')['controls']; let i = index;">
-										<th *ngIf="this.visibilityRulesService.isVisibleMap[fieldFormGroup.get('id').value] ?? true" class="text-wrap">{{fieldFormGroup.get('data').value.label}}</th>
-									</ng-container>
-									<th class="actions"></th>
-								</tr>
-								<tr app-form-field-set [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0" [tableRow]="true"></tr>
-								<ng-container *ngIf="fieldsetEntry.form && fieldsetEntry.form.get('multiplicity').value.tableView">
-									<tr app-form-field-set *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="true" [showDelete]="true" [tableRow]="true"></tr>
-								</ng-container>
-								<tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)">
-									<td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center">
-										<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
-											<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
-												<mat-icon>add_circle</mat-icon>
-											</button>
-											<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
-											<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
-										</span>
-									</td>
-								</tr>
-							</table> -->
-						</ng-container>
-					</div>
-
-					<!-- <div *ngIf="fieldsetEntry.form && !fieldsetEntry.form.get('multiplicity').value.tableView" class="col-12">
 						<div class="row">
-							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index">
+							<app-description-form-field-set class="align-self-center col" 
-								<div class="row">
+							[propertiesFormGroup]="propertiesFormGroup.get('fieldSets')?.get(fieldSet.id)" 
-									<app-form-field-set class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true" [showDelete]="true"></app-form-field-set>
+							[fieldSet]="fieldSet" 
-								</div>
+							[path]="path + '.' + (i+1)" 
-							</div>
+							[visibilityRulesService]="visibilityRulesService" 
-							<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
+							[isChild]="false"></app-description-form-field-set>
-								<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
-									<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
-										<mat-icon>add_circle</mat-icon>
-									</button>
-									<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
-									<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
-								</span>
-							</div>
-							<div *ngIf="fieldsetEntry.form.get('hasCommentField').value" class="col-12">
-								<rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="' mb-2'" [editable]="!fieldsetEntry.form.get('commentFieldValue').disabled">
-								</rich-text-editor-component>
-							</div>
 						</div>
-					</div> -->
+					</div>
 				</div>
 			</div>
 
 			<div *ngIf="section?.sections?.length > 0" class="col-12">
 				<ng-container *ngFor="let innerSection of section.sections; let j = index;">
-					<!-- <div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)"> -->
 					<div class="row">
-						<app-form-section class="col-12" [section]="innerSection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" (askedToScroll)="onAskedToScroll($event)" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" [linkToScroll]="subsectionLinkToScroll"></app-form-section>
+						<app-description-form-section class="col-12" [section]="innerSection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" (askedToScroll)="onAskedToScroll($event)" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" [linkToScroll]="subsectionLinkToScroll"></app-description-form-section>
 					</div>
 				</ng-container>
 			</div>

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

@@ -12,7 +12,6 @@ import {
 import { UntypedFormGroup } from '@angular/forms';
 import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
 import { BaseComponent } from '@common/base/base.component';
-import { DescriptionFieldEditorModel } from '../../../description-editor.model';
 import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
 import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum';
 import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component';
@@ -20,7 +19,7 @@ import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.
 
 
 @Component({
-	selector: 'app-form-section',
+	selector: 'app-description-form-section',
 	templateUrl: './form-section.component.html',
 	styleUrls: ['./form-section.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush
@@ -56,20 +55,6 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On
 		// this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
 		// 	this.changeDetector.markForCheck();
 		// });
-		// Set comment fields to properties
-		// this.section.fieldSets.forEach(fieldSet => {
-		// 	if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) {
-		// 		const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
-		// 		item.key = 'commentFieldValue' + fieldSet.id;
-		// 		this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm());
-		// 	}
-		// });
-
-		//TODO uncomment
-		// if (this.tocentry) {//maybe not needed as well
-		// 	this.form = this.tocentry.form as UntypedFormGroup;
-		// }
-		// this.initMultipleFieldsVisibility(); 
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
@@ -86,180 +71,4 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On
 			}
 		}
 	}
-
-	// setMultipleFieldVisibility(parentCompositeField, compositeField: DatasetDescriptionCompositeFieldEditorModel, idMappings: { old: string, new: string }[]) {
-	// 	// ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT
-	// 	const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(parentCompositeField);
-	// 	if (compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length) {
-
-	// 		compositeFieldVisibilityDependencies.forEach(x => {
-	// 			const visRule: Rule = {
-	// 				targetField: compositeField.id,
-	// 				sourceField: x.sourceControlId,
-	// 				requiredValue: x.sourceControlValue
-	// 			}
-	// 			this.visibilityRulesService.addNewRule(visRule);
-	// 		});
-	// 	}
-
-	// 	// console.log('idMappings ', idMappings);
-	// 	parentCompositeField.fields.forEach(element => {
-	// 		// console.log(this.visibilityRulesService.getVisibilityDependency(element.id));
-	// 		const dependency = this.visibilityRulesService.getVisibilityDependency(element.id);
-	// 		if (dependency && dependency.length) {
-	// 			// * INNER VISIBILITY DEPENDENCIES
-	// 			// * IF INNER INPUT HIDES ANOTHER INNER INPUT
-	// 			const innerDependency = parentCompositeField.fields.reduce((innerD, currentElement) => {
-	// 				const innerDependecies = dependency.filter(d => d.sourceControlId === currentElement.id);
-	// 				return [...innerD, ...innerDependecies];
-	// 			}, []) as VisibilityRuleSource[];
-	// 			if (innerDependency.length) {
-	// 				//Build visibility source
-	// 				const updatedRules = innerDependency.map(x => {
-	// 					const newId = idMappings.find(y => y.old === x.sourceControlId);
-	// 					return { ...x, sourceControlId: newId.new };
-	// 				});
-	// 				// const visRule: VisibilityRule = {
-	// 				// 	targetControlId: idMappings.find(x => x.old === element.id).new,
-	// 				// 	sourceVisibilityRules: updatedRules
-	// 				// }
-
-
-	// 				const rules = updatedRules.map(x => {
-	// 					return {
-	// 						requiredValue: x.sourceControlValue,
-	// 						sourceField: x.sourceControlId,
-	// 						targetField: idMappings.find(l => l.old === element.id).new,
-	// 						type: ''
-	// 					} as Rule;
-	// 				});
-
-	// 				rules.forEach(rule => {
-	// 					this.visibilityRulesService.addNewRule(rule);
-	// 				})
-
-	// 				// this.visibilityRulesService.appendVisibilityRule(visRule);
-	// 			}
-
-	// 		}
-
-
-	// 		// * OUTER DEPENDENCIES
-
-	// 		// * IF INNER INPUT HIDES OUTER INPUTS
-	// 		const innerIds = idMappings.map(x => x.old) as string[];
-
-	// 		const outerTargets = this.visibilityRulesService.getVisibilityTargets(element.id).filter(x => !innerIds.includes(x));
-
-	// 		outerTargets.forEach(target => {
-
-	// 			const outerRules = (this.visibilityRulesService.getVisibilityDependency(target) as VisibilityRuleSource[]).filter(x => x.sourceControlId === element.id);
-	// 			const updatedRules = outerRules.map(x => {
-	// 				return { ...x, sourceControlId: idMappings.find(y => y.old === element.id).new };
-	// 			});
-
-	// 			// const visRule: VisibilityRule = {
-	// 			// 	targetControlId: target,
-	// 			// 	sourceVisibilityRules: updatedRules
-	// 			// }
-
-
-	// 			const rules = updatedRules.map(x => {
-	// 				return {
-	// 					requiredValue: x.sourceControlValue,
-	// 					sourceField: x.sourceControlId,
-	// 					targetField: target,
-	// 					type: ''
-	// 				} as Rule;
-	// 			})
-	// 			rules.forEach(rule => {
-	// 				this.visibilityRulesService.addNewRule(rule);
-	// 			})
-	// 			// this.visibilityRulesService.appendVisibilityRule(visRule);
-	// 		});
-	// 		// * IF INNER INPUT IS HIDDEN BY OUTER INPUT
-	// 		if (dependency && dependency.length) {
-	// 			const fieldsThatHideInnerElement = dependency.filter(x => !innerIds.includes(x.sourceControlId));
-	// 			if (fieldsThatHideInnerElement.length) {
-	// 				fieldsThatHideInnerElement.forEach(x => {
-	// 					const visRule: Rule = {
-	// 						targetField: idMappings.find(l => l.old === element.id).new,
-	// 						sourceField: x.sourceControlId,
-	// 						requiredValue: x.sourceControlValue
-	// 					}
-	// 					const shouldBeVisibile = this.visibilityRulesService.checkTargetVisibilityProvidedBySource(x.sourceControlId, element.id);
-	// 					this.visibilityRulesService.addNewRule(visRule, shouldBeVisibile);
-	// 				});
-	// 			}
-	// 		}
-	// 		// console.log(`for ${element.id} targets are`, outerTargets);
-	// 	});
-	// }
-
-	// initMultipleFieldsVisibility() {
-	// 	(this.form.get('compositeFields') as UntypedFormArray).controls.forEach(control => {
-	// 		let parentCompositeField = (control as UntypedFormGroup).getRawValue();
-	// 		if (parentCompositeField.multiplicityItems && parentCompositeField.multiplicityItems.length > 0) {
-	// 			parentCompositeField.multiplicityItems.forEach(compositeField => {
-	// 				let idMappings: { old: string, new: string }[] = [{ old: parentCompositeField.id, new: compositeField.id }];
-	// 				parentCompositeField.fields.forEach((field, index) => {
-	// 					idMappings.push({ old: field.id, new: compositeField.fields[index].id });
-	// 				});
-	// 				this.setMultipleFieldVisibility(parentCompositeField, compositeField, idMappings);
-	// 			})
-	// 		}
-	// 	});
-	// }
-
-	// addMultipleField(fieldsetIndex: number) {
-	// 	if (this.form.get('compositeFields').get('' + fieldsetIndex).disabled) {
-	// 		return;
-	// 	}
-	// 	const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as UntypedFormGroup).getRawValue();
-	// 	const multiplicityItemsArray = (<UntypedFormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));
-
-	// 	const ordinal = multiplicityItemsArray.length ? multiplicityItemsArray.controls.reduce((ordinal, currentControl) => {
-	// 		const currentOrdinal = currentControl.get('ordinal').value as number;
-
-	// 		if (currentOrdinal >= ordinal) {
-	// 			return currentOrdinal + 1;
-	// 		}
-	// 		return ordinal as number;
-	// 	}, 0) : 0;
-	// 	const idMappings = [] as { old: string, new: string }[];
-	// 	const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, ordinal, idMappings);
-
-	// 	this.setMultipleFieldVisibility(compositeFieldToBeCloned, compositeField, idMappings);
-	// 	multiplicityItemsArray.push(compositeField.buildForm());
-	// }
-
-	// deleteCompositeFieldFormGroup(compositeFildIndex: number) {
-	// 	const numberOfItems = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').value.length;
-	// 	for (let i = 0; i < numberOfItems; i++) {
-	// 		const multiplicityItem = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').get('' + i).value;
-	// 		this.form.get('compositeFields').get('' + compositeFildIndex).get('fields').get('' + i).patchValue(multiplicityItem);
-	// 	}
-	// 	(<UntypedFormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
-	// }
-
-	// deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
-	// 	const multiplicityItemsArray = (<UntypedFormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems')));
-	// 	multiplicityItemsArray.removeAt(fildIndex);
-	// 	multiplicityItemsArray.controls.forEach((control, i) => {
-	// 		try {
-	// 			control.get('ordinal').setValue(i);
-	// 		} catch {
-	// 			throw 'Could not find ordinal';
-	// 		}
-	// 	});
-	// }
-
-	// onAskedToScroll(id: string) {
-	// 	this.panelExpanded = true;
-	// 	this.askedToScroll.emit(id);
-	// }
-
-	// visibleControls(controls: any[]) {
-	// 	return controls.filter(control => this.visibilityRulesService.isVisibleMap[control.get('id').value));
-	// }
 }

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

@@ -15,7 +15,7 @@
 							</mat-expansion-panel-header>
 							<ng-container *ngFor="let section of page.sections; let i = index;">
 								<div class="row">
-									<app-form-section class="col-12" [section]="section" [path]="(z+1)+'.'+(i+1)" [pathName]="'pages.'+z+'.sections.'+i" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" (askedToScroll)="onAskedToScroll(expansionPanel, $event)" [linkToScroll]="linkToScroll"></app-form-section>
+									<app-description-form-section class="col-12" [section]="section" [path]="(z+1)+'.'+(i+1)" [pathName]="'pages.'+z+'.sections.'+i" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" (askedToScroll)="onAskedToScroll(expansionPanel, $event)" [linkToScroll]="linkToScroll"></app-description-form-section>
 								</div>
 							</ng-container>
 						</mat-expansion-panel>

dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts

@@ -5,7 +5,8 @@ import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-ed
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { NgxDropzoneModule } from "ngx-dropzone";
-import { DescriptionFormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
+import { FormFieldSetEditorDialogComponent } from './components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component';
+import { DescriptionFormFieldSetTitleComponent } from './components/form-field-set/field-set-title/field-set-title.component';
 import { DescriptionFormFieldSetComponent } from './components/form-field-set/form-field-set.component';
 import { DescriptionFormFieldComponent } from './components/form-field/form-field.component';
 import { DescriptionFormSectionComponent } from './components/form-section/form-section.component';
@@ -26,7 +27,8 @@ import { DescriptionFormComponent } from './description-form.component';
 		DescriptionFormSectionComponent,
 		DescriptionFormFieldSetComponent,
 		DescriptionFormFieldComponent,
-		DescriptionFormCompositeTitleComponent
+		DescriptionFormFieldSetTitleComponent,
+		FormFieldSetEditorDialogComponent
 	],
 	exports: [
 		DescriptionFormComponent