From 3e5dc85e0491f6ae2e99e8fd00c1813f17b9f377 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 10 Jan 2023 13:08:56 +0200
Subject: [PATCH] Fix visibility dependencies for table view. Add missing
 question titles if a field is table.

---
 .../src/app/core/pipes/field-value.pipe.ts    |  2 -
 ...file-editor-composite-field.component.html |  2 +-
 .../dataset-wizard.component.ts               |  1 -
 ...form-composite-field-dialog.component.html |  2 +-
 .../form-composite-field-dialog.component.ts  |  5 +-
 .../form-composite-field.component.html       |  6 +-
 .../form-composite-field.component.ts         | 15 +++--
 .../form-section-inner.component.html         | 44 ++++++++------
 .../form-section-inner.component.ts           |  3 +
 .../form-section/form-section.component.html  | 59 +++++++++++--------
 .../form-section/form-section.component.ts    |  4 ++
 .../visibility-rules.service.ts               |  1 -
 12 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/dmp-frontend/src/app/core/pipes/field-value.pipe.ts b/dmp-frontend/src/app/core/pipes/field-value.pipe.ts
index e90453e0c..360b8e87e 100644
--- a/dmp-frontend/src/app/core/pipes/field-value.pipe.ts
+++ b/dmp-frontend/src/app/core/pipes/field-value.pipe.ts
@@ -14,8 +14,6 @@ export class FieldValuePipe implements PipeTransform {
 		let value = controlValue.value;
 		let renderStyle = controlValue.viewStyle?.renderStyle;
 		if (renderStyle && value) {
-			console.log(renderStyle);
-			console.log(value);
 			switch (renderStyle) {
 				case DatasetProfileFieldViewStyle.Currency:
 					if (value) {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
index 4d514f606..72d631d4f 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
+++ b/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" [tableView]="form.value.multiplicity.tableView">
+					<app-form-section-inner  [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView">
 					</app-form-section-inner>
 				</div>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
index 15f4e3452..df98a21bd 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
@@ -532,7 +532,6 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
 		if (profiledId && profiledId.length > 0) {
 			this.formGroup.removeControl('datasetProfileDefinition');
 			this.getDefinition(profiledId);
-			console.log(this.table0fContents.tocentries.length + 1);
 		}
 	}
 
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html
index db7baaf85..567ff7d61 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html
@@ -5,7 +5,7 @@
 		</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"
+		<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">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts
index db4e95837..d1a3625cb 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts
@@ -8,12 +8,13 @@ import {VisibilityRulesService} from "@app/ui/misc/dataset-description-form/visi
 })
 export class FormCompositeFieldDialogComponent {
 
+	public visibilityRulesService: VisibilityRulesService;
+
 	constructor(
-		private visibilityRulesService: VisibilityRulesService,
 		private dialogRef: MatDialogRef<FormCompositeFieldDialogComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
-		this.visibilityRulesService.buildVisibilityRules([], this.data.formGroup);
+		this.visibilityRulesService = data.visibilityRulesService;
 	}
 
 	cancel() {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
index f33132ffe..24f35ac7a 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
@@ -37,7 +37,7 @@
 							</a>
 						</div> -->
 					<div class="row">
-						<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{this.fieldFormGroup.get('data').value.label}}</h5>
+						<h5 *ngIf="placeholderTitle && this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" 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">
@@ -60,7 +60,9 @@
 	</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-wrap">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
+	<ng-container  *ngFor="let fieldFormGroup of form.get('fields')['controls'];">
+		<td *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" class="text-wrap">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
+	</ng-container>
 	<td class="actions">
 		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()">
 			<mat-icon>edit</mat-icon>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
index 387fcb785..3e28f1ef5 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
@@ -26,21 +26,23 @@ export class FormCompositeFieldComponent extends BaseComponent {
 	@Input() tableRow: boolean = false;
 	@Input() showTitle: boolean = true;
 	@Input() placeholderTitle: boolean = false;
+	@Input() altVisibilityRulesService: VisibilityRulesService;
 
 	constructor(
 		private dialog: MatDialog,
 		public visibilityRulesService: VisibilityRulesService,
 		private changeDetector: ChangeDetectorRef
-		//private markForConsiderationService: MarkForConsiderationService,
 	) {
 		super();
-		this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
-			this.changeDetector.markForCheck();
-		});
 	}
 
 	ngOnInit() {
-
+		if(this.altVisibilityRulesService) {
+			this.visibilityRulesService = this.altVisibilityRulesService;
+		}
+		this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
+			this.changeDetector.markForCheck();
+		});
 		if (this.tocentry) {
 			this.form = this.tocentry.form as FormGroup;
 		}
@@ -62,7 +64,8 @@ export class FormCompositeFieldComponent extends BaseComponent {
 			disableClose: true,
 			data: {
 				formGroup: cloneAbstractControl(this.form),
-				datasetProfileId: this.datasetProfileId
+				datasetProfileId: this.datasetProfileId,
+				visibilityRulesService: this.visibilityRulesService
 			}
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
index 4a89e6113..f620d2d6c 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
@@ -8,21 +8,28 @@
 					<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">
+				<ng-container *ngIf="tableView">
+					<div class="row">
+						<div class="col-12">
+							<app-form-composite-title class="row" [form]="compositeFieldFormGroup"></app-form-composite-title>
+						</div>
+					</div>
+					<table class="table table-bordered" style="table-layout: fixed">
+						<tr>
+							<ng-container *ngFor="let fieldFormGroup of compositeFieldFormGroup.get('fields')['controls']; let i = index;">
+								<th *ngIf="this.visibilityRulesService.checkElementVisibility(fieldFormGroup.get('id').value)" class="text-truncate" [matTooltip]="fieldFormGroup.get('data').value.label" >{{fieldFormGroup.get('data').value.label}}</th>
+							</ng-container>
+							<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]="visibleControls(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>
@@ -30,9 +37,10 @@
 								<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>
+							</td>
+						</tr>
+					</table>
+				</ng-container>
 			</div>
 
 			<div *ngIf="compositeFieldFormGroup && !tableView" class="col-12">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
index 03dd8abfd..b93dc7107 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
@@ -100,4 +100,7 @@ export class FormSectionInnerComponent extends BaseComponent implements OnInit,
 	// next(compositeField: CompositeField) {
 	// 	this.formFocusService.focusNext(compositeField);
 	// }
+	visibleControls(controls: any[]) {
+		return controls.filter(control => this.visibilityRulesService.checkElementVisibility(control.get('id').value));
+	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
index 6171b30ab..a71b95049 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
@@ -93,31 +93,40 @@
 							<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-wrap">{{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>
+						<ng-container *ngIf="fieldsetEntry.form.get('multiplicity').value.tableView">
+							<div class="row">
+								<div class="col-12">
+									<app-form-composite-title [tocentry]="fieldsetEntry" class="row" [form]="form"></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.checkElementVisibility(fieldFormGroup.get('id').value)"
+											class="text-wrap">{{fieldFormGroup.get('data').value.label}}</th>
+									</ng-container>
+									<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]="visibleControls(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>
+						</ng-container>
 					</div>
 
 					<div *ngIf="fieldsetEntry.form && !fieldsetEntry.form.get('multiplicity').value.tableView" class="col-12">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
index 860a5676f..a87a937a9 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
@@ -269,4 +269,8 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
 		this.panelExpanded = true;
 		this.askedToScroll.emit(id);
 	}
+
+	visibleControls(controls: any[]) {
+		return controls.filter(control => this.visibilityRulesService.checkElementVisibility(control.get('id').value));
+	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
index 40f9bca47..73e0bb5d8 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
@@ -346,7 +346,6 @@ export class VisibilityRulesService {
 	public addNewRule(rule: Rule, currentVisibility = this.DEFAULTVISIBILITY): void {
 		const targetId = rule.targetField;
 		const sourceId = rule.sourceField;
-		console.log(rule);
 		this.visibilityRuleContext.addToVisibilityRulesContext(rule);