From 54b2661ebd19b9919157ba3aaacb26c81f2b26cf Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Tue, 15 Jun 2021 09:58:51 +0300
Subject: [PATCH] Ui fixes.

* Fix issue on table of contents in dataset editor. Invalid fields that are hidden via visibility rules, are not computed in in the validity of the tocEntry.
---
 .../form-field/form-field.component.html      | 68 +++++++++----------
 .../table-of-contents-internal.html           |  6 +-
 .../table-of-contents-internal.ts             | 38 ++++++++---
 .../table-of-contents.html                    |  2 +-
 4 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
index d8d11022f..08563bcd6 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
@@ -17,16 +17,16 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@@ -45,46 +45,46 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.InternalDmpEntities" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="multipleAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@@ -138,18 +138,18 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ExternalDatasets" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="externalDatasetAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-					</mat-error>
-				</div>
+				</ng-container>
+				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 		</div>
@@ -158,16 +158,16 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="dataRepositoriesAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@@ -178,16 +178,16 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Registries" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="registriesAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@@ -198,16 +198,16 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Services" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<div *ngIf="form.get('data').value.multiAutoComplete">
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
 					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="servicesAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
-				</div>
-				<div *ngIf="!(form.get('data').value.multiAutoComplete)">
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
 					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					 [configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 					</app-single-auto-complete>
-				</div>
+				</ng-container>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
index 187b6cca6..f78625aa2 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
@@ -10,7 +10,7 @@
 			[ngStyle]="calculateStyle(entry)"
 			[ngClass]="calculateClass(entry)"
 			>
-				<span [class.text-danger]="showErrors && entry.form.invalid && ( (entry.type === tocEntryTypeEnum.FieldSet) || entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx]) ">
+				<span [class.text-danger]="showErrors && entry.form.invalid && ( entry.type === tocEntryTypeEnum.FieldSet   || (entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx])) && invalidChildsVisible(entry) ">
 					{{entry.numbering}}. {{entry.label}} 
 				</span>
 				<!-- <mat-icon style="transform: translateY(3px);" class="text-danger"
@@ -34,7 +34,9 @@
 				[selected]="selected"
 				[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
 				[showErrors]="showErrors"
-				[hiddenEntries]="hiddenEntries">
+				[hiddenEntries]="hiddenEntries"
+				[visibilityRulesService]="visibilityRulesService"
+				>
 		
 				</table-of-contents-internal>
 			</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
index f76b0728d..5e65e1c16 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
@@ -1,13 +1,8 @@
-import { DOCUMENT } from '@angular/common';
 import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
-import { BaseComponent } from '@common/base/base.component';
-import { interval, Subject, Subscription } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
-import { type } from 'os';
 import { SimpleChanges } from '@angular/core';
+import { FormArray } from '@angular/forms';
 import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
-import { Rule } from '@app/core/model/dataset-profile-definition/rule';
 
 @Component({
 	selector: 'table-of-contents-internal',
@@ -26,11 +21,9 @@ export class TableOfContentsInternal implements OnInit {
 	@Input() TOCENTRY_ID_PREFIX="";
 	@Input() showErrors: boolean = false;
 	@Input() hiddenEntries: string[] =[];
+	@Input() visibilityRulesService: VisibilityRulesService;
 
-
-	constructor(public visibilityRulesService: VisibilityRulesService){
-		
-	
+	constructor(){
 	}
 	ngOnInit(): void {
 		// console.log('component created');
@@ -140,4 +133,29 @@ export class TableOfContentsInternal implements OnInit {
 		
 		return tocEntryFound? tocEntryFound: null;
 	}
+	public invalidChildsVisible(entry: ToCEntry):boolean {
+		if(!entry || !this.visibilityRulesService){
+			return false;
+		}
+
+		if(entry.type!= this.tocEntryTypeEnum.FieldSet){
+			return entry.subEntries.some(_ => this.invalidChildsVisible(_));
+		}
+		if(entry.type === this.tocEntryTypeEnum.FieldSet){
+			const fieldsArray = entry.form.get('fields') as FormArray;
+	
+			const hasError = !fieldsArray.controls.every(field=>{//every invalid field should be invisible
+				if(field.invalid){
+					const id = field.get('id').value;
+					const isVisible = this.visibilityRulesService.checkElementVisibility(id);
+					if(isVisible){
+						return false;
+					}
+				}
+				return true;
+			});
+			return hasError;
+		}
+		return false;
+	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
index a37d53947..d4ca182f3 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
@@ -32,7 +32,7 @@
 		(entrySelected)="onToCentrySelected($event)"
 		[selected]="tocentrySelected"
 		[hiddenEntries]="hiddenEntries"
-		
+		[visibilityRulesService]="visibilityRulesService"
 		>
 	
 		</table-of-contents-internal>