User Dataset Editor. Pages/ Sections/Fieldsets that have all inputs hidden, are hidden as well (Both on template and table of contents).

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

@@ -165,7 +165,6 @@
 					</div>
 
 					<div class="col-12">
-						<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
 						<div class="heading">1.4 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}</div>
 						<div class="full-width basic-info-input">
 							<table class="col-12 user-table">
@@ -179,13 +178,11 @@
 										<td>{{user.name}}</td>
 										<td >{{user.email}}</td>
 										<td>
-											<!-- <button mat-raised-button class="delete-btn" (click)="removeUser(user)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate}}</button> -->
 											<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(user)" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
 									<tr *ngIf="!userChipList || !userChipList.length">
 										<td style="text-align: end; line-height: 3em;" colspan="2" >
-											<!-- ...No users yet -->
 											{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NO-USERS-YET' | translate}}
 										</td>
 									</tr>
@@ -197,18 +194,11 @@
 					<div class="col-12">
 						<div class="row justify-content-end">
 							<div class="col d-flex justify-content-end" style="overflow: hidden;">
-								<!-- <div class="row">
+								<div style="min-width: 20em;max-width: 25em;" [@add-new-user-field]="inputUserState">
-									<input matInput #email class = "col-8 email-input" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}">
+									<mat-form-field appearance="legacy">
-									<button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button>
+										<input matInput #email placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
-								</div> -->
+									</mat-form-field>
-								<!-- <div class="row"> -->
+								</div>
-									<div style="min-width: 20em;max-width: 25em;" [@add-new-user-field]="inputUserState">
-										<mat-form-field appearance="legacy">
-											<input matInput #email placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
-										</mat-form-field>
-									</div>
-									<!-- <button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button> -->
-								<!-- </div> -->
 							</div>
 
 							<div class="col-auto">

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts

@@ -249,7 +249,6 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 		});
 	}
 	onOptionSelected(){
-		console.log('this option selected emited');
 		try{
 			const profiles = this.formGroup.get('profiles').value as {id:string, label:string}[];
 			profiles.sort((a,b)=> a.label.localeCompare(b.label));

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

@@ -78,7 +78,7 @@
 			<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll(fieldsetEntry.id)">
 				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
 				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
-				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)">
+				<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">
@@ -121,12 +121,15 @@
 			<!-- SECTION CASE -->
 
 			<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
-				<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
+				<ng-container *ngFor="let sectionEntry of tocentry.subEntries; let j = index;">
-					<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
+					<div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)">
-					 [datasetProfileId]="datasetProfileId"
+						<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
-					 (askedToScroll)="onAskedToScroll($event)"
+						 [datasetProfileId]="datasetProfileId"
-					 ></app-form-section>
+						 (askedToScroll)="onAskedToScroll($event)"
-				</div>
+						 [hiddenEntriesIds]="hiddenEntriesIds"
+						 ></app-form-section>
+					</div>
+				</ng-container>
 			</div>
 		</ng-container>
 		

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

@@ -22,6 +22,7 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	@Input() pathName: string;
 	@Input() path: string;
 	@Input() linkToScroll: LinkToScroll;
+	@Input() hiddenEntriesIds: string[] = [];
 	//trackByFn = (index, item) => item ? item['id'] : null;
 	panelExpanded = true;
 	// sub = true;

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

@@ -21,8 +21,8 @@
 					<!--FIRST LEVEL ALWAYS PAGE-->
 					<mat-accordion [multi]="true">
 						
-						<div *ngFor="let pageEntry of tocentries; let z = index;">
+						<ng-container *ngFor="let pageEntry of tocentries; let z = index;">
-							<mat-expansion-panel [expanded]="true" #expansionPanel>
+							<mat-expansion-panel [expanded]="true" #expansionPanel *ngIf="!hiddenEntriesIds.includes(pageEntry.id)">
 
 								<mat-expansion-panel-header>
 									<mat-panel-title>
@@ -34,17 +34,18 @@
 <!-- 
 								<h4  class="toc-page-header"> 
 								</h4> -->
-								<div *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
+								<ng-container *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
-									<div class="row">
+									<div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)">
 										<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
 											[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
 											[linkToScroll]="linkToScroll"
 											(askedToScroll)="onAskedToScroll(expansionPanel, $event)"
+											[hiddenEntriesIds]="hiddenEntriesIds"
 											></app-form-section>
 									</div>
-								</div>
+								</ng-container>
 							</mat-expansion-panel>
-						</div>
+						</ng-container>
 					</mat-accordion>
 				</ng-template>
 

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

@@ -7,7 +7,7 @@ import { DatasetProfileTableOfContentsInternalSection } from '@app/ui/admin/data
 import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
 import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
 import { BaseComponent } from '@common/base/base.component';
-import { takeUntil } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'app-dataset-description',
@@ -29,8 +29,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 	@Input() TOCENTRY_ID_PREFIX="";
 
-
+	public hiddenEntriesIds:string[] = [];
-	private _form: FormGroup;
 
 	constructor(
 		private visibilityRulesService: VisibilityRulesService,
@@ -50,6 +49,16 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		// }
 		
 		this.tocentries = this.getTocEntries();
+		this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
+
+		this.visibilityRulesService.visibilityChange
+		.pipe(
+			takeUntil(this._destroyed),
+			debounceTime(100)
+		)
+		.subscribe(_=>{
+			this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
+		})
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
@@ -153,7 +162,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 	
 	getTocEntries(): ToCEntry[] {
-		if (this.form == null) { return []; }
+		if (!this.form) { return []; }
 		const result: ToCEntry[] = [];
 
 		//build parent pages
@@ -189,6 +198,38 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		return result;
 
 	}
+	private _findHiddenEntries(tocentries:ToCEntry[]):string[]{
+		if(!tocentries) return [];
+
+		const invisibleEntries:string[] = []
+		tocentries.forEach(entry=>{
+			if(entry.type === ToCEntryType.FieldSet){
+				const isVisible = this.visibilityRulesService.checkElementVisibility(entry.id);
+				if(!isVisible){
+					invisibleEntries.push(entry.id);
+				}else{
+					//check field inputs
+					const fields = entry.form.get('fields') as FormArray;
+
+					const oneFieldAtLeastIsVisible = fields.controls.some(field=> this.visibilityRulesService.checkElementVisibility(field.get('id').value));
+					if(!oneFieldAtLeastIsVisible){
+						invisibleEntries.push(entry.id);
+					}
+				}
+			}else{
+				const hiddenEntries = this._findHiddenEntries(entry.subEntries);
+
+				if(entry.subEntries&&  (entry.subEntries.every(e=> hiddenEntries.includes(e.id)))){
+					//all children all hidden then hide parent node;
+					invisibleEntries.push(entry.id);
+				}else{
+					invisibleEntries.push(...hiddenEntries);
+				}
+			}
+		})
+
+		return invisibleEntries;
+	}
 
 }
 export interface ToCEntry {

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html

@@ -1,6 +1,6 @@
 <div *ngFor="let entry of tocentries; index as idx">
 	<!-- check if is visible -->
-	<ng-container *ngIf="visibilityRulesService.checkElementVisibility(entry.id)">
+	<ng-container *ngIf="!hiddenEntries.includes(entry.id)">
 
 		<!-- Is fieldset and has no visible inputs -->
 		<ng-container *ngIf="!(entry.type === tocEntryTypeEnum.FieldSet && !visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(entry.form))">
@@ -33,7 +33,8 @@
 				(entrySelected)="onEntrySelected($event)"
 				[selected]="selected"
 				[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
-				[showErrors]="showErrors">
+				[showErrors]="showErrors"
+				[hiddenEntries]="hiddenEntries">
 		
 				</table-of-contents-internal>
 			</div>

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts

@@ -25,6 +25,7 @@ export class TableOfContentsInternal implements OnInit {
 	tocEntryTypeEnum = ToCEntryType;
 	@Input() TOCENTRY_ID_PREFIX="";
 	@Input() showErrors: boolean = false;
+	@Input() hiddenEntries: string[] =[];
 
 
 	constructor(public visibilityRulesService: VisibilityRulesService){

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html

@@ -31,6 +31,7 @@
 		[showErrors]="showErrors"
 		(entrySelected)="onToCentrySelected($event)"
 		[selected]="tocentrySelected"
+		[hiddenEntries]="hiddenEntries"
 		
 		>
 	

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts

@@ -54,8 +54,8 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 	private _tocentrySelected:ToCEntry = null;
 	private _intersectionObserver: IntersectionObserver;
 	private _actOnObservation: boolean = true;
+	public hiddenEntries:string[] = [];
 	get tocentrySelected(){
-	
 		return this.hasFocus?this._tocentrySelected: null;
 	}
 	set tocentrySelected(value){
@@ -80,9 +80,9 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 		.pipe(takeUntil(this._destroyed))
 		.pipe(debounceTime(200))
 		.subscribe(_=>{
-			// console.log('visibility was changed');
 			if(this.hasFocus){
 				this._resetObserver();
+				this.hiddenEntries = this._findHiddenEntries(this.tocentries);
 			}
 		})
 
@@ -90,6 +90,8 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 			this.tocentries = this.getTocEntries(this.formGroup.get('datasetProfileDefinition'));
 			const fg = this.formGroup.get('datasetProfileDefinition');
 			this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, fg);
+			this.hiddenEntries = this._findHiddenEntries(this.tocentries);
+
 		}else{
 			
 			//emit value every 500ms
@@ -154,6 +156,39 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 
 	}
 
+	private _findHiddenEntries(tocentries:ToCEntry[]):string[]{
+		if(!tocentries) return [];
+
+		const invisibleEntries:string[] = []
+		tocentries.forEach(entry=>{
+			if(entry.type === ToCEntryType.FieldSet){
+				const isVisible = this.visibilityRulesService.checkElementVisibility(entry.id);
+				if(!isVisible){
+					invisibleEntries.push(entry.id);
+				}else{
+					//check field inputs
+					const fields = entry.form.get('fields') as FormArray;
+
+					const oneFieldAtLeastIsVisible = fields.controls.some(field=> this.visibilityRulesService.checkElementVisibility(field.get('id').value));
+					if(!oneFieldAtLeastIsVisible){
+						invisibleEntries.push(entry.id);
+					}
+				}
+			}else{
+				const hiddenEntries = this._findHiddenEntries(entry.subEntries);
+
+				if(entry.subEntries&&  (entry.subEntries.every(e=> hiddenEntries.includes(e.id)))){
+					//all children all hidden then hide parent node;
+					invisibleEntries.push(entry.id);
+				}else{
+					invisibleEntries.push(...hiddenEntries);
+				}
+			}
+		})
+
+		return invisibleEntries;
+	}
+
 	ngOnChanges(changes: SimpleChanges) {
 		
 		if(this.selectedFieldsetId){
@@ -184,7 +219,6 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 		if(this._intersectionObserver){//clean up
 			this._intersectionObserver.disconnect();
 			this._intersectionObserver = null;
-			// console.log('Clean Up observer');
 		}
 	
 		const options = {
@@ -197,8 +231,6 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 			if(!this._actOnObservation){
 				return;
 			}
-			// console.log('observer called for element', entries );
-			//   console.log('from observer', observer);
 
 			entries.forEach(ie=>{
 				if(ie.isIntersecting){
@@ -206,7 +238,6 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 						const target_id = ie.target.id.replace(this.TOCENTRY_ID_PREFIX,'');
 						if(this.visibilityRulesService.checkElementVisibility(target_id)){
 							this.tocentrySelected = this._findTocEntryById(target_id,this.tocentries);
-							// console.log('target id', target_id);
 						}
 					}catch{
 
@@ -215,7 +246,6 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 			})
 		}, options);
 
-		// console.log('Initializing Intersection Observer');
 		const fieldsetsEtries = this._getAllFieldSets(this.tocentries); 
 
 		fieldsetsEtries.forEach(e=>{
@@ -385,7 +415,6 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 
 	onToCentrySelected(entry: ToCEntry){
 		this.tocentrySelected = entry;
-		// console.log('entry selected', entry);
 	}