dmp-frontend/src/app/ui/description/editor/description-editor.component.html

@@ -99,15 +99,15 @@
 							<div class="col-12">
 								<div class="container stepper-list ml-1">
 									<div class="row" *ngIf="!descriptionInfoValid()">
-										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
+										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
 									</div>
 									<div class="row" *ngIf="descriptionInfoValid()">
-										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
 									</div>
 									<div class="row toc-pane-container" #boundary>
 										<div #spacer></div>
 										<div class="col-12">
-											<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="reachedBase == false" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
+											<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
 										</div>
 									</div>
 								</div>
@@ -118,13 +118,13 @@
 							<div class="col-12">
 								<div class="row mt-3 stepper-actions justify-content-center">
 									<div class="col-auto mb-1">
-										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': reachedBase}" (click)="previousStep()">
+										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
 										</div>
 									</div>
 
-									<div *ngIf="!reachedLast" class="col-auto mb-1">
+									<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
 										<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
 											<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
 											<span class="material-icons">chevron_right</span>
@@ -136,7 +136,7 @@
 											<span class="material-icons">chevron_right</span>
 										</div>
 									</div>
-									<div *ngIf="reachedLast && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
+									<div  *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
 										<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
 											{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
 										</button>
@@ -151,14 +151,14 @@
 						</div>
 					</div>
 					<div class="col-12 col-md form" id="description-editor-form">
-						<app-description-base-fields-editor-component [hidden]="!reachedBase" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
+						<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
 						<app-description-form
 						*ngIf="formGroup && formGroup.get('properties')"
 						[propertiesFormGroup]="formGroup.get('properties')"
 						[descriptionId]="formGroup.get('id').value"
 						[descriptionTemplate]="item.descriptionTemplate"
 						[visibilityRulesService]="visibilityRulesService"
-						[hidden]="reachedBase"
+						[hidden]="this.step === 0"
 						[linkToScroll]="linkToScroll"
 						[validationErrorModel]="editorModel.validationErrorModel"
 						[isNew]="isNew || isCopy"

dmp-frontend/src/app/ui/description/editor/description-editor.component.ts

@@ -71,10 +71,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 	isFinalized = false;
 	showTocEntriesErrors = false;
 	@ViewChild('table0fContents') table0fContents: TableOfContentsComponent;
-
+	step: number = 0;
-	reachedBase: boolean = true;
-	reachedLast: boolean = false;
-	reachedFirst: boolean = false;
 
 	pageToFieldSetMap: Map<string, DescriptionFieldIndicator[]> = new Map<string, DescriptionFieldIndicator[]>();
 
@@ -552,19 +549,15 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 	public changeStep(selected: ToCEntry = null, execute: boolean = true) {
 		if (execute) {
 			if (selected) {
-				this.reachedBase = false;
+				if (this.step == 0) {
-				this.reachedFirst = selected.isFirstEntry;
+					this.step = 1;
-				this.reachedLast = selected.isLastEntry;
+				}
-
 				const element = document.getElementById(selected.id);
 				if (element) {
 					element.scrollIntoView({ behavior: 'smooth' });
 				}
 			} else {
-				this.reachedBase = true;
+				this.step = 0;
-				this.reachedFirst = false;
-				this.reachedLast = false;
-
 				this.resetScroll();
 			}
 		}
@@ -576,10 +569,38 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 
 	public nextStep() {
 		this.tableOfContentsService.nextClicked();
+		// if (this.step < this.maxStep) {//view is changing
+		// 	this.step = Math.floor(this.step + 1);
+		// 	let entry = this.visibleFieldSets[this.step - 1];
+		// 	const targetElement = document.getElementById(entry.id);
+		// 	if (targetElement) {
+		// 		this.table0fContents.onToCentrySelected(entry, false);
+		// 		this.scroll(entry);
+		// 	} else {
+		// 		this.nextStep();
+		// 	}
+		// }
 	}
 
 	public previousStep() {
-		this.tableOfContentsService.previousClicked();
+		this.tableOfContentsService.nextClicked();
+
+		// if (this.step > 0) {
+		// 	this.step = Math.ceil(this.step - 1);
+		// 	if (this.step >= 1) {
+		// 		let entry = this.visibleFieldSets[this.step - 1];
+		// 		const targetElement = document.getElementById(entry.id);
+		// 		if (targetElement) {
+		// 			this.table0fContents.onToCentrySelected(entry, false);
+		// 			this.scroll(entry);
+		// 		} else {
+		// 			this.previousStep();
+		// 		}
+		// 	} else {
+		// 		this.table0fContents.onToCentrySelected(null, false);
+		// 		this.resetScroll();
+		// 	}
+		// }
 	}
 
 	private scroll(entry: ToCEntry) {

dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts

@@ -28,8 +28,7 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 
 	private _tocentrySelected: ToCEntry = null;
 	get tocentrySelected() {
-		return this._tocentrySelected;
+		return this.hasFocus ? this._tocentrySelected : null;
-		// return this.hasFocus ? this._tocentrySelected : null;
 	}
 	set tocentrySelected(value) {
 		this._tocentrySelected = value;
@@ -50,50 +49,13 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 		}
 
 		this.tableOfContentsService.getNextClickedEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
-			let next: ToCEntry;
+			//TODO: implement function to find next element
-
+			// call onToCentrySelected()
-			if (!this.tocentrySelected) next = this._getHeadField(this.tocentries[0]);
-			else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
-				next = this.tocentrySelected;
-				while (next?.subEntries && next?.subEntries?.length > 0 && !next?.nextEntry) {
-					next = next?.subEntries[0];
-				}
-			}
-			else next = this.tocentrySelected?.nextEntry;
-
-			while (!this._isVisible(next?.id) && !next?.isLastEntry) {
-				next = next?.nextEntry;
-			}
-
-			if (!next || !this._isVisible(next?.id)) {
-				this.onToCentrySelected(null);
-			} else {
-				this.onToCentrySelected(next);
-			}
 		});
 
 		this.tableOfContentsService.getPreviousEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
-			let previous: ToCEntry;
+			//TODO: implement function to find previous element
-
+			// call onToCentrySelected()
-			if (!this.tocentrySelected) previous = this._getHeadField(this.tocentries[0]);
-			else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
-				previous = this.tocentrySelected;
-				while (previous?.subEntries && previous?.subEntries?.length > 0 && !previous?.previousEntry) {
-					previous = previous?.subEntries[0];
-				}
-				previous = previous.previousEntry;
-			}
-			else previous = this.tocentrySelected?.previousEntry;
-
-			while (!this._isVisible(previous?.id) && !previous?.isFirstEntry) {
-				previous = previous.previousEntry;
-			}
-
-			if (!previous || !this._isVisible(previous?.id)) {
-				this.onToCentrySelected(null);
-			} else {
-				this.onToCentrySelected(previous);
-			}
 		});
 	}
 
@@ -146,7 +108,8 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 		).subscribe(x => {
 			if (x.isIntersecting) {
 				const target_id = x.target.id;
-				if (this._isVisible(target_id)) {
+				console.log(target_id);
+				if (this.visibilityRulesService.isVisibleMap[target_id] ?? true) {
 					this.tocentrySelected = TableOfContentsComponent._findTocEntryById(target_id, this.tocentries);
 				}
 			}
@@ -168,21 +131,14 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 					if (tocentry != null) {
 						tempResult.push(tocentry);
 
-						previousTocentry = this._getTailField(tocentry);
+						previousTocentry = tocentry;
 					}
 				} else {
 					let tocentry = this._buildRecursivelySection(section, previousTocentry); // the nested fieldsets inherit the previousTocEntry
 					if (tocentry) {
-
-						// explanation: previous-section[last-field].next = current-section[first-field] 
-						let firstTocentryOfCurrentSection = this._getHeadField(tocentry);
-						if (tempResult.length > 0) {
-							tempResult[tempResult.length - 1] = this._setTocentryNext(tempResult[tempResult.length - 1], firstTocentryOfCurrentSection);
-						}
-						
 						tempResult.push(tocentry);
 					
-						previousTocentry = this._getTailField(tocentry);
+						previousTocentry = tocentry;
 					}
 				}
 			});
@@ -408,10 +364,6 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
 			return previous;
 		}
 	}
-
-	private _isVisible(entryId: string): boolean {
-		return this.visibilityRulesService.isVisibleMap[entryId] ?? true;
-	}
 }
 
 export interface LinkToScroll {