Redesign steps in dataset editor #7545

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html

@@ -68,8 +68,8 @@
 					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
 					<div class="stepper-options" id="stepper-options">
 						<div class="col stepper-list">
-							<div (click)="changeStep()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
+							<div (click)="table0fContents.onToCentrySelected()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
-							<div (click)="changeStep()" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+							<div (click)="table0fContents.onToCentrySelected()" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
 							<div class="row toc-pane-container" #boundary>
 								<div #spacer></div>
 								<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
 import {MatDialog} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -60,7 +60,7 @@ import {VisibilityRulesService} from '@app/ui/misc/dataset-description-form/visi
 import {PopupNotificationDialogComponent} from '@app/library/notification/popup/popup-notification.component';
 import {CheckDeactivateBaseComponent} from '@app/library/deactivate/deactivate.component';
 import {PrefillDatasetComponent} from "@app/ui/dataset/dataset-wizard/prefill-dataset/prefill-dataset.component";
-import {ToCEntry} from "@app/ui/misc/dataset-description-form/dataset-description.component";
+import {ToCEntry, ToCEntryType} from "@app/ui/misc/dataset-description-form/dataset-description.component";
 
 @Component({
 	selector: 'app-dataset-wizard-component',
@@ -1154,45 +1154,78 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
 		});
 	}
 
-	checkSelectedParent(entry: ToCEntry, selected: ToCEntry = null) {
+	getEntryVisibleFieldSets(entry: ToCEntry): ToCEntry[] {
-		if(!selected) {
+		let fieldSets = [];
-			selected = this.table0fContents.tocentrySelected;
+		if(entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)) {
+			fieldSets.push(entry);
+		} else if(entry.type !== ToCEntryType.FieldSet) {
+			entry.subEntries.forEach(subEntry => {
+				fieldSets = fieldSets.concat(this.getEntryVisibleFieldSets(subEntry));
+			});
 		}
-		if(entry.numbering === selected.numbering) {
+		return fieldSets;
-			return true;
+	}
+
+	get visibleFieldSets(): ToCEntry[]{
+		let fieldSets = [];
+		let arrays= this.table0fContents?this.table0fContents.tocentries.
+		filter(entry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)).map(entry => {
+			return this.getEntryVisibleFieldSets(entry);
+			})
+		:[];
+		arrays.forEach(array => {
+			fieldSets = fieldSets.concat(array);
+		});
+		return fieldSets;
+	}
+
+	getFirstFieldSet(entry: ToCEntry): ToCEntry {
+		if(entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)) {
+			return entry;
 		} else {
-			return !!entry.subEntries.find(subEntry => this.checkSelectedParent(subEntry, selected))
+			let subEntries = entry.subEntries.filter(subEntry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === subEntry.id));
+			if(subEntries.length > 0) {
+				return this.getFirstFieldSet(subEntries[0]);
+			} else {
+				return null;
+			}
 		}
 	}
 
 	public changeStep(selected: ToCEntry = null) {
 		if(selected) {
-			let index = this.table0fContents.tocentries.findIndex(entry => this.checkSelectedParent(entry, selected));
+			let fieldSet = this.getFirstFieldSet(selected);
-			console.log(index);
+			let index = this.visibleFieldSets.findIndex(entry => entry.id === fieldSet.id);
-			this.step = index + 1;
+			this.step = index + (selected.type === ToCEntryType.FieldSet?1:0.5);
 		} else {
-			this.table0fContents.onToCentrySelected(null);
 			this.step = 0;
 		}
 	}
 
 	get maxStep() {
-		return this.table0fContents?this.table0fContents.tocentries.length:0;
+		return this.visibleFieldSets.length;
 	}
 
 	public nextStep() {
 		if (this.step < this.maxStep) {//view is changing
 			this.step++;
-			this.table0fContents.internalTable.selected = this.table0fContents.tocentries[this.step - 1];
+			let entry = this.visibleFieldSets[Math.floor(this.step) - 1];
-			this.resetScroll();
+			this.table0fContents.onToCentrySelected(entry);
+			this.scroll(entry);
 		}
 	}
 
 	public previousStep() {
 		if (this.step > 0) {
 			this.step--;
-			this.table0fContents.internalTable.selected = this.step > 0?this.table0fContents.tocentries[this.step - 1]:null;
+			if(this.step > 0) {
-			this.resetScroll();
+				let entry = this.visibleFieldSets[Math.floor(this.step) - 1];
+				this.table0fContents.onToCentrySelected(entry);
+				this.scroll(entry);
+			} else {
+				this.table0fContents.onToCentrySelected();
+				this.resetScroll();
+			}
 		}
 	}
 
@@ -1200,6 +1233,10 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
 		document.getElementById('dataset-editor-form').scrollTop = 0;
 	}
 
+	private scroll(entry: ToCEntry) {
+		document.getElementById(entry.id).scrollIntoView();
+	}
+
 	isDirty() {
 		return this.formGroup.dirty && this.hasChanges; // do we need this.formGroup.dirty
 	}

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
+import {Component, EventEmitter, Inject, OnInit, Output, Input, ViewChildren, QueryList} from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { FormArray } from '@angular/forms';
 import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
@@ -22,6 +22,7 @@ export class TableOfContentsInternal implements OnInit {
 	@Input() showErrors: boolean = false;
 	@Input() hiddenEntries: string[] =[];
 	@Input() visibilityRulesService: VisibilityRulesService;
+	@ViewChildren(TableOfContentsInternal) internalTables: QueryList<TableOfContentsInternal>;
 
 	constructor(){
 	}

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

@@ -201,7 +201,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 	ngOnChanges(changes: SimpleChanges) {
 
 		if(this.selectedFieldsetId){
-			this.tocentrySelected = this._findTocEntryById(this.selectedFieldsetId,this.tocentries);
+			this.onToCentrySelected(this._findTocEntryById(this.selectedFieldsetId,this.tocentries));
 			this._actOnObservation = false;
 			setTimeout(() => {
 				this._actOnObservation = true;
@@ -265,7 +265,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 					try{
 						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);
+							this.onToCentrySelected(this._findTocEntryById(target_id,this.tocentries));
 						}
 					}catch{
 
@@ -441,18 +441,11 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
 
 	}
 
-	onToCentrySelected(entry: ToCEntry){
+	onToCentrySelected(entry: ToCEntry = null){
 		this.tocentrySelected = entry;
 		this.entrySelected.emit(entry);
 	}
 
-
-	public seekToFirstElement(){//only on tocentry mode
-		if(this.tocentries && this.tocentries.length){
-			this.tocentrySelected = this.tocentries[0];
-		}
-	}
-
 	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
 		if(!tocentries || !tocentries.length){
 			return null;