Add table view in preview of datataset profile editor and dataset editor.

dmp-frontend/src/app/core/formatting.module.ts

@@ -7,6 +7,8 @@ import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
 import { EnumUtils } from './services/utilities/enum-utils.service';
 import { JsonParserPipe } from './pipes/json-parser.pipe';
 import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe';
+import {FieldValuePipe} from "@app/core/pipes/field-value.pipe";
+import {ColumnClassPipe} from "@app/core/pipes/column-class.pipe";
 
 //
 //
@@ -21,7 +23,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
 		DateFormatPipe,
 		DateTimeFormatPipe,
 		DateTimeCultureFormatPipe,
-		JsonParserPipe
+		JsonParserPipe,
+		FieldValuePipe,
+		ColumnClassPipe
 	],
 	exports: [
 		NgForLimitPipe,
@@ -29,7 +33,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
 		DateFormatPipe,
 		DateTimeFormatPipe,
 		DateTimeCultureFormatPipe,
-		JsonParserPipe
+		JsonParserPipe,
+		FieldValuePipe,
+		ColumnClassPipe
 	],
 	providers: [
 		EnumUtils,
@@ -39,7 +45,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
 		DateFormatPipe,
 		DateTimeFormatPipe,
 		DateTimeCultureFormatPipe,
-		JsonParserPipe
+		JsonParserPipe,
+		FieldValuePipe,
+		ColumnClassPipe
 	]
 })
 export class FormattingModule { }

dmp-frontend/src/app/core/pipes/column-class.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+	name: 'columnClass'
+})
+export class ColumnClassPipe implements PipeTransform{
+
+	transform(value: number): any {
+		return 'col-' + Math.ceil(12/value);
+	}
+}

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

@@ -0,0 +1,56 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {DatePipe} from "@angular/common";
+import {DatasetProfileFieldViewStyle} from "@app/core/common/enum/dataset-profile-field-view-style";
+
+@Pipe({
+	name: 'fieldValue'
+})
+export class FieldValuePipe implements PipeTransform {
+
+	constructor(private date: DatePipe) {
+	}
+
+	transform(controlValue: any): string | null {
+		let value = controlValue.value;
+		let renderStyle = controlValue.viewStyle?.renderStyle;
+		if (renderStyle && controlValue) {
+			switch (renderStyle) {
+				case DatasetProfileFieldViewStyle.Currency:
+					if (value) {
+						return JSON.parse(value).name;
+					}
+					break;
+				case DatasetProfileFieldViewStyle.BooleanDecision:
+					return value == 'true' ? 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' : 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.NO';
+				case DatasetProfileFieldViewStyle.CheckBox:
+					return value ? 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' : 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.NO';
+				case DatasetProfileFieldViewStyle.RadioBox:
+					if (value && controlValue.data.options) {
+						return controlValue.data.options.find(option => option.value === value).label;
+					}
+					break;
+				case DatasetProfileFieldViewStyle.DatePicker:
+					return this.date.transform(controlValue.value, 'dd/MM/yyyy');
+				case DatasetProfileFieldViewStyle.FreeText:
+					return value;
+				case DatasetProfileFieldViewStyle.ComboBox:
+					if (value && controlValue.data.options && !controlValue.data.multiList) {
+						return controlValue.data.options.find(option => value == option.value).label;
+					} else if (value && controlValue.data.options && controlValue.data.multiList) {
+						return controlValue.data.options.filter(option => value.includes(option.value)).map(option => option.label).join(',');
+					}
+					break;
+				case DatasetProfileFieldViewStyle.RichTextArea:
+					if(value) {
+						return value.replace(/&nbsp;/g, ' ').replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm, " ").replace(/<[^>]*>/g, '');
+					}
+					break;
+				case DatasetProfileFieldViewStyle.TextArea:
+					return value;
+				default:
+					return null;
+			}
+		}
+		return null;
+	}
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html

@@ -204,7 +204,7 @@
 			</div>
 			<div  [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
 				<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value" [@fade-in-fast]>
-					<app-form-section-inner  [form]="previewForm">
+					<app-form-section-inner  [form]="previewForm" [tableView]="form.value.multiplicity.tableView">
 					</app-form-section-inner>
 				</div>
 			</div>

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

@@ -0,0 +1,15 @@
+<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"
+								  [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/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts

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

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html

@@ -1,20 +1,19 @@
-<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row">
+<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value) && !tableRow" [formGroup]="form" class="dynamic-form-composite-field row">
-
 	<!-- <div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12"> -->
 	<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
 		<div class="row">
-			<div class="col-12">
+			<div *ngIf="showTitle" class="col-12">
 				<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
 			</div>
 			<div class="col-12">
 				<div class="row">
 					<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
-						[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
+									[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
-						<div *ngIf="showDelete" class="col-auto align-self-center">
+					<div *ngIf="showDelete" class="col-auto align-self-center">
-							<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
+						<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
-								<mat-icon>delete</mat-icon>
+							<mat-icon>delete</mat-icon>
-							</button>
+						</button>
-						</div>
+					</div>
 				</div>
 			</div>
 			<!-- <button mat-icon-button type="button" *ngIf="!isChild" class="deleteBtn col-auto" (click)="DeleteField();">
@@ -26,7 +25,7 @@
 	<!-- <div *ngIf="form.get('fields').value.length > 1" class="col-12"> -->
 	<div *ngIf="form.get('fields').length > 1" class="col-12">
 		<div class="row">
-			<div class="col-12">
+			<div *ngIf="showTitle" class="col-12">
 				<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
 			</div>
 			<div class="col align-self-center">
@@ -37,6 +36,9 @@
 								Add one more field +
 							</a>
 						</div> -->
+					<div class="row">
+						<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{this.fieldFormGroup.get('data').value.label}}</h5>
+					</div>
 					<app-form-field *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" [form]="fieldFormGroup" class="col-12 compositeField" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
 					<!-- <div *ngIf="fieldFormGroup" class="col-12">
 							<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
@@ -57,3 +59,15 @@
 		</div>
 	</div>
 </div>
+<ng-container *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value) && tableRow">
+	<td *ngFor="let fieldFormGroup of form.get('fields')['controls'];" class="text-truncate"
+		[matTooltip]="fieldFormGroup.getRawValue() | fieldValue | translate">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
+	<td class="actions">
+		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()">
+			<mat-icon>edit</mat-icon>
+		</button>
+		<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
+			<mat-icon>delete</mat-icon>
+		</button>
+	</td>
+</ng-container>

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.scss

@@ -11,3 +11,7 @@
 // 	font-size: 1rem;
 // 	padding: 0.6em 0 1em 0 !important;
 // }
+
+.actions {
+	width: 110px;
+}

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts

@@ -1,12 +1,17 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
-import { FormArray, FormGroup } from '@angular/forms';
+import {FormArray, FormGroup} from '@angular/forms';
-import { BaseComponent } from '@common/base/base.component';
+import {BaseComponent} from '@common/base/base.component';
-import { takeUntil } from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators';
-import { ToCEntry } from '../../dataset-description.component';
+import {ToCEntry} from '../../dataset-description.component';
-import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
+import {VisibilityRulesService} from '../../visibility-rules/visibility-rules.service';
+import {
+	FormCompositeFieldDialogComponent
+} from "@app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {cloneAbstractControl} from "@app/utilities/enhancers/utils";
 
 @Component({
-	selector: 'app-form-composite-field',
+	selector: 'app-form-composite-field, [app-form-composite-field]',
 	templateUrl: './form-composite-field.component.html',
 	styleUrls: ['./form-composite-field.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,8 +23,12 @@ export class FormCompositeFieldComponent extends BaseComponent {
 	@Input() isChild: Boolean = false;
 	@Input() showDelete: Boolean = false;
 	@Input() tocentry: ToCEntry;
+	@Input() tableRow: boolean = false;
+	@Input() showTitle: boolean = true;
+	@Input() placeholderTitle: boolean = false;
 
 	constructor(
+		private dialog: MatDialog,
 		public visibilityRulesService: VisibilityRulesService,
 		private changeDetector: ChangeDetectorRef
 		//private markForConsiderationService: MarkForConsiderationService,
@@ -47,6 +56,23 @@ export class FormCompositeFieldComponent extends BaseComponent {
 	// 	this.markForConsiderationService.markForConsideration(this.compositeField);
 	// }
 
+	editCompositeFieldInDialog() {
+		const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, {
+			width: '750px',
+			disableClose: true,
+			data: {
+				formGroup: cloneAbstractControl(this.form),
+				datasetProfileId: this.datasetProfileId
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+			if (data) {
+				this.form.patchValue(data.value);
+				this.changeDetector.detectChanges();
+			}
+		});
+	}
+
 	deleteCompositeField() {
 		if (this.isChild) {
 			this.deleteMultipeFieldFromCompositeFormGroup();

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html

@@ -4,13 +4,38 @@
 		<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
 
 			<div class="col-12">
-				<div class="row">
+				<div *ngIf="!tableView" class="row">
 					<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
 						[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
 				</div>
+				<table *ngIf="tableView" class="table table-bordered" style="table-layout: fixed">
+					<tr>
+						<th *ngFor="let fieldFormGroup of compositeFieldFormGroup.get('fields')['controls']; let i = index;"
+							class="text-truncate" [matTooltip]="fieldFormGroup.get('data').value.label" >{{fieldFormGroup.get('data').value.label}}</th>
+						<th class="actions"></th>
+					</tr>
+					<tr app-form-composite-field [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+											  [isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" [tableRow]="true"></tr>
+					<ng-container *ngIf="compositeFieldFormGroup && tableView">
+						<tr app-form-composite-field *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index"
+							[form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+							[isChild]="true" [showDelete]="true" [tableRow]="true"></tr>
+					</ng-container>
+					<tr *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)">
+						<td [colSpan]="compositeFieldFormGroup.get('fields')['controls'].length + 1" class="text-center">
+							<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)" >
+								<button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
+									<mat-icon>add_circle</mat-icon>
+								</button>
+								<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
+								<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
+							</span>
+						</td>
+					</tr>
+				</table>
 			</div>
 
-			<div *ngIf="compositeFieldFormGroup" class="col-12">
+			<div *ngIf="compositeFieldFormGroup && !tableView" class="col-12">
 				<div class="row">
 					<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
 						<div class="row">
@@ -25,7 +50,7 @@
 								<mat-icon>add_circle</mat-icon>
 							</button>
 							<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
-							<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
+							<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
 						</span>
 					</div>
 					<ng-container *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="">

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss

@@ -43,3 +43,7 @@
 	height: auto !important;
 	min-height: 48px;
 }
+
+.actions {
+	width: 110px;
+}

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts

@@ -23,6 +23,7 @@ export class FormSectionInnerComponent extends BaseComponent implements OnInit,
 	@Input() path: string;
 	// @Input() i: number;
 	@Input() linkToScroll: LinkToScroll;
+	@Input() tableView: boolean = false;
 	//trackByFn = (index, item) => item ? item['id'] : null;
 	panelExpanded = true;
 	// sub = true;

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

@@ -37,7 +37,7 @@
 										<mat-icon>add_circle</mat-icon>
 									</button>
 									<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
-									<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
+									<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
 								</span>
 							</div>
 							<div *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="col-12">
@@ -89,13 +89,38 @@
 				<div class="row" *ngIf="(this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)) && !hiddenEntriesIds.includes(fieldsetEntry.id)">
 
 					<div class="col-12">
-						<div class="row">
+						<div *ngIf="!fieldsetEntry.form.get('multiplicity').value.tableView" class="row">
 							<app-form-composite-field [tocentry]="fieldsetEntry" class="align-self-center col" [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
 								[isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-composite-field>
 						</div>
+						<table *ngIf="fieldsetEntry.form.get('multiplicity').value.tableView" class="table table-bordered" style="table-layout: fixed">
+							<tr>
+								<th *ngFor="let fieldFormGroup of fieldsetEntry.form.get('fields')['controls']; let i = index;"
+									class="text-truncate" [matTooltip]="fieldFormGroup.get('data').value.label" >{{fieldFormGroup.get('data').value.label}}</th>
+								<th class="actions"></th>
+							</tr>
+							<tr app-form-composite-field [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
+								[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-composite-field *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index"
+									[form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+									[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]="fieldsetEntry.form.get('fields')['controls'].length + 1" class="text-center">
+							<span class="pointer d-inline-flex align-items-center" (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>
 					</div>
 
-					<div *ngIf="fieldsetEntry.form" class="col-12">
+					<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">
 								<div class="row">
@@ -110,7 +135,7 @@
 										<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' | translate}}</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">

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

@@ -1,36 +1,46 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
+import {AutoCompleteModule} from '@app/library/auto-complete/auto-complete.module';
-import { FormCompositeFieldComponent } from '@app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component';
+import {
-import { FormFieldComponent } from '@app/ui/misc/dataset-description-form/components/form-field/form-field.component';
+	FormCompositeFieldComponent
-import { FormProgressIndicationComponent } from '@app/ui/misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component';
+} from '@app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component';
-import { FormSectionComponent } from '@app/ui/misc/dataset-description-form/components/form-section/form-section.component';
+import {FormFieldComponent} from '@app/ui/misc/dataset-description-form/components/form-field/form-field.component';
-import { DatasetDescriptionFormComponent } from '@app/ui/misc/dataset-description-form/dataset-description-form.component';
+import {
-import { FormFocusService } from '@app/ui/misc/dataset-description-form/form-focus/form-focus.service';
+	FormSectionComponent
-import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
+} from '@app/ui/misc/dataset-description-form/components/form-section/form-section.component';
-import { CommonFormsModule } from '@common/forms/common-forms.module';
+import {
-import { CommonUiModule } from '@common/ui/common-ui.module';
+	DatasetDescriptionFormComponent
-import { FormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
+} from '@app/ui/misc/dataset-description-form/dataset-description-form.component';
-import { ExternalSourcesModule } from '../external-sources/external-sources.module';
+import {FormFocusService} from '@app/ui/misc/dataset-description-form/form-focus/form-focus.service';
-import { DatasetDescriptionComponent } from './dataset-description.component';
+import {VisibilityRulesService} from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
-import { FormProgressIndicationModule } from './components/form-progress-indication/form-progress-indication.module';
+import {CommonFormsModule} from '@common/forms/common-forms.module';
-import { FormSectionInnerComponent } from './components/form-section/form-section-inner/form-section-inner.component';
+import {CommonUiModule} from '@common/ui/common-ui.module';
+import {FormCompositeTitleComponent} from './components/form-composite-title/form-composite-title.component';
+import {ExternalSourcesModule} from '../external-sources/external-sources.module';
+import {DatasetDescriptionComponent} from './dataset-description.component';
+import {FormProgressIndicationModule} from './components/form-progress-indication/form-progress-indication.module';
+import {FormSectionInnerComponent} from './components/form-section/form-section-inner/form-section-inner.component';
 import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
 // import {TableEditorModule} from "@app/library/table-editor/table-editor.module";
 import {FileService} from "@app/core/services/file/file.service";
 import {NgxDropzoneModule} from "ngx-dropzone";
+import {
+	FormCompositeFieldDialogComponent
+} from "@app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component";
+import {FormattingModule} from "@app/core/formatting.module";
 
 
 @NgModule({
-  imports: [
+	imports: [
-    CommonUiModule,
+		CommonUiModule,
-    CommonFormsModule,
+		CommonFormsModule,
-    AutoCompleteModule,
+		AutoCompleteModule,
-    ExternalSourcesModule,
+		ExternalSourcesModule,
-    FormProgressIndicationModule,
+		FormProgressIndicationModule,
-    RichTextEditorModule,
+		RichTextEditorModule,
-    // TableEditorModule,
+		// TableEditorModule,
-    NgxDropzoneModule
+		NgxDropzoneModule,
-  ],
+		FormattingModule
+	],
 	declarations: [
 		DatasetDescriptionFormComponent,
 		DatasetDescriptionComponent,
@@ -38,7 +48,8 @@ import {NgxDropzoneModule} from "ngx-dropzone";
 		FormSectionInnerComponent,
 		FormCompositeFieldComponent,
 		FormFieldComponent,
-		FormCompositeTitleComponent
+		FormCompositeTitleComponent,
+		FormCompositeFieldDialogComponent
 	],
 	exports: [
 		DatasetDescriptionFormComponent,

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

@@ -10,6 +10,7 @@
 					<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
 						<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
 							<div class="row">
+								{{form | json}}
 								<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1"
 									[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
 									[linkToScroll]="linkToScroll"></app-form-section>
@@ -21,7 +22,7 @@
 				<ng-template #toctemplate>
 					<!--FIRST LEVEL ALWAYS PAGE-->
 					<mat-accordion [multi]="true">
-						
+
 						<ng-container *ngFor="let pageEntry of tocentries; let z = index;">
 							<mat-expansion-panel [expanded]="true" #expansionPanel *ngIf="!hiddenEntriesIds.includes(pageEntry.id)">
 
@@ -32,8 +33,8 @@
 										</h4>
 									</mat-panel-title>
 								</mat-expansion-panel-header>
-<!-- 
+<!--
-								<h4  class="toc-page-header"> 
+								<h4  class="toc-page-header">
 								</h4> -->
 								<ng-container *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
 									<div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)">

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts

@@ -40,7 +40,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		private visibilityRulesService: VisibilityRulesService,
 	) {
 		super();
-		
+
 	}
 
 	ngOnInit() {
@@ -48,7 +48,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		const rules_to_append = this._enrichWithMultiplicityRules(this.tocentries);
 
 		this.visibilityRulesService.buildVisibilityRules([...this.visibilityRules, ...rules_to_append ], this.form);
-		
+
 		// if (this.form) {
 		// 	this.form.valueChanges
 		// 		.pipe(takeUntil(this._destroyed))
@@ -57,7 +57,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		// 		});
 		// }
 		this.visibilityRulesInstance.emit(this.visibilityRulesService);
-		
+
 
 
 
@@ -139,15 +139,15 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 			const childIdsWithVisRules = (entry.form.get('fields') as FormArray).controls.reduce((all, s) =>
 			{
 				const sval = s.value as Field;
-				return this.visibilityRules.find(x => (x.targetField === sval.id) || (x.sourceField === sval.id)) ? [...all, sval] : all; 
+				return this.visibilityRules.find(x => (x.targetField === sval.id) || (x.sourceField === sval.id)) ? [...all, sval] : all;
 			},[]) as Field[];
-			
+
 
 			const innerCompositeFieldOriginalIds = (entry.form.get('fields') as FormArray).controls.map( x=> x.get('id').value) as string[];
 
 			//multiplicity items
 			const multiplicityItemsValue = entry.form.get('multiplicityItems').value as CompositeField[];
-			
+
 
 			// *********      FIELDS OF FIELDSET ARE EITHER TARGETS OR SOURCES *****
 
@@ -210,7 +210,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 								const newRule = {...x, targetField: field.id, sourceField: idMappings.find(l => l.original === x.sourceField).multiplicityIdValue} as Rule;
 								rules_to_append.push(newRule);
 							})
-							
+
 							//outer dependencies
 							const outerDep = original_as_target.filter( x=> !innerCompositeFieldOriginalIds.includes(x.sourceField));
 							outerDep.forEach(x=>{
@@ -222,10 +222,10 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 					})
 				});
 			}
-			
+
-			
+
-			
+
-			
+
 			// ** FIELDSET ITSELF IS TARGET
 			// ** source it can never be
 
@@ -239,7 +239,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 
 			if(compositeFieldAsTargetRules.length){
-				
+
 				compositeFieldAsTargetRules.forEach(x =>{
 					idCompositeFieldMappings.forEach(l=>{
 						const newRule = {...x, targetField: l.newValue};
@@ -264,7 +264,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 
 				const tempResult:ToCEntry[] = [];
-				
+
 				if(sections &&sections.length){
 					sections.controls.forEach(section=>{
 						tempResult.push(this._buildRecursively(section as FormGroup, ToCEntryType.Section));
@@ -300,9 +300,9 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 	}
 
 	private _sortByOrdinal(tocentries: ToCEntry[]){
-		
+
 		if(!tocentries || !tocentries.length) return;
-		
+
 		tocentries.sort(this._customCompare);
 		tocentries.forEach(entry=>{
 			this._sortByOrdinal(entry.subEntries);
@@ -327,7 +327,6 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		});
 	}
 
-	
 	getTocEntries(): ToCEntry[] {
 		if (!this.form) { return []; }
 		const result: ToCEntry[] = [];

dmp-frontend/src/app/utilities/enhancers/utils.ts

@@ -1,3 +1,5 @@
+import {AbstractControl, FormArray, FormControl, FormGroup} from "@angular/forms";
+
 export function isNullOrUndefined(object: any): boolean {
 	return object === null || object === undefined;
 }
@@ -5,3 +7,40 @@ export function isNullOrUndefined(object: any): boolean {
 export function isNumeric(val: any): val is number | string {
 	return !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
 }
+
+/**
+ * Deep clones the given AbstractControl, preserving values, validators, async validators, and disabled status.
+ * @param control AbstractControl
+ * @returns AbstractControl
+ */
+export function cloneAbstractControl<T extends AbstractControl>(control: T): T {
+	let newControl: T;
+
+	if (control instanceof FormGroup) {
+		const formGroup = new FormGroup({}, control.validator, control.asyncValidator);
+		const controls = control.controls;
+
+		Object.keys(controls).forEach(key => {
+			formGroup.addControl(key, cloneAbstractControl(controls[key]));
+		})
+
+		newControl = formGroup as any;
+	}
+	else if (control instanceof FormArray) {
+		const formArray = new FormArray([], control.validator, control.asyncValidator);
+
+		control.controls.forEach(formControl => formArray.push(cloneAbstractControl(formControl)))
+
+		newControl = formArray as any;
+	}
+	else if (control instanceof FormControl) {
+		newControl = new FormControl(control.value, control.validator, control.asyncValidator) as any;
+	}
+	else {
+		throw new Error('Error: unexpected control value');
+	}
+
+	if (control.disabled) newControl.disable({emitEvent: false});
+
+	return newControl;
+}

dmp-frontend/src/assets/i18n/de.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Order",
 						"COMMENT-PLACEHOLDER": "Please Specify",
 						"COMMENT-HINT": "Provide additional information or justification about your selection",

dmp-frontend/src/assets/i18n/en.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Order",
 						"COMMENT-PLACEHOLDER": "Please Specify",
 						"COMMENT-HINT": "Provide additional information or justification about your selection",

dmp-frontend/src/assets/i18n/es.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Orden",
 						"COMMENT-PLACEHOLDER": "Por favir especifique",
 						"COMMENT-HINT": "Proporcione información adicional o justifique su selección",

dmp-frontend/src/assets/i18n/gr.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Εντολή",
 						"COMMENT-PLACEHOLDER": "Παρακαλώ προσδιορίστε",
 						"COMMENT-HINT": "Προσθέστε επιπλέον πληροφορίες ή αιτιολόγηση σχετικά με την επιλογή σας",

dmp-frontend/src/assets/i18n/hr.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Dodaj polje",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Redoslijed",
 						"COMMENT-PLACEHOLDER": "Navedite",
 						"COMMENT-HINT": "Navedite dodatne informacije ili obrazložite izbor",

dmp-frontend/src/assets/i18n/pl.json

@@ -376,6 +376,7 @@
                         "MULTIPLICITY-PLACEHOLDER": "$Tekst zastępujący wielokrotność$",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Dodaj więcej",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
                         "ORDER": "Kolejność",
                         "COMMENT-PLACEHOLDER": "Proszę doprecyzować",
                         "COMMENT-HINT": "Podaj dodatkowe informacje lub uzasadnienie swojego wyboru",

dmp-frontend/src/assets/i18n/pt.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Ordem",
 						"COMMENT-PLACEHOLDER": "Por favor especifique",
 						"COMMENT-HINT": "Disponibilize informação ou justificação adicional sobre a sua seleção",

dmp-frontend/src/assets/i18n/sk.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Order",
 						"COMMENT-PLACEHOLDER": "Please Specify",
 						"COMMENT-HINT": "Provide additional information or justification about your selection",

dmp-frontend/src/assets/i18n/sr.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Redosled",
 						"COMMENT-PLACEHOLDER": "Navedite",
 						"COMMENT-HINT": "Navedite dodatne informacije ili obrazložite izbor",

dmp-frontend/src/assets/i18n/tr.json

@@ -376,6 +376,7 @@
 						"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
 						"MULTIPLICITY-TABLEVIEW": "View inputs in table",
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Düzen",
 						"COMMENT-PLACEHOLDER": "Lütfen Belirtiniz",
 						"COMMENT-HINT": "Seçiminiz hakkında gerekçe veya ek bilgi veriniz",