Add Table of contents for the Dataset Descriptor in the New DMP Wizard (ref #223)

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

@@ -48,9 +48,17 @@
 				 required>
 				<mat-hint>{{'QUICKWIZARD.HINT' | translate}}</mat-hint>
 			</mat-form-field>
-			<app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
-			 [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id">
-			</app-dataset-description-form>
+			<div class="row toc-pane-container" #boundary>
+				<div class="col-md-8 h-100 ">
+					<app-dataset-description-form class="w-100 h-100" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
+			 		[visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id" [linkToScroll]="linkToScroll">
+					</app-dataset-description-form>
+				</div>
+				<div #spacer></div>
+					<div class="col-md-4">
+						<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
+					</div>
+			</div>
 		</div>
 	</div>
 </div>

dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.scss

+.toc-pane-container {
+	&.is-sticky~.nav-spacer {
+		height: 500px; // the container size }
+		// height: calc(100vh - 100px); // the container size }
+	}
+}
+
+.is-sticky {
+	margin-top: 70px !important;
+}

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

@@ -9,6 +9,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from "@ngx-translate/core";
 import { Observable } from "rxjs";
 import { takeUntil } from "rxjs/operators";
+import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
 
 @Component({
 	selector: 'app-dataset-editor-wizard-component',
@@ -122,4 +123,9 @@ export class DatasetEditorWizardComponent extends BaseComponent implements OnIni
 			window.scrollTo(0, 0);
 		}
 	}
+
+	linkToScroll: LinkToScroll;
+	onStepFound(linkToScroll: LinkToScroll) {
+		this.linkToScroll = linkToScroll;
+	}
 }

dmp-frontend/src/app/ui/quick-wizard/quick-wizard.module.ts

@@ -14,6 +14,8 @@ import { QuickWizardEditorComponent } from '@app/ui/quick-wizard/quick-wizard-ed
 import { QuickWizardRoutingModule } from '@app/ui/quick-wizard/quick-wizard.routing';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
+import { TableOfContentsModule } from '../misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module';
+import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
 
 @NgModule({
 	imports: [
@@ -24,7 +26,9 @@ import { CommonUiModule } from '@common/ui/common-ui.module';
 		ConfirmationDialogModule,
 		QuickWizardRoutingModule,
 		DatasetDescriptionFormModule,
-		DmpModule
+		DmpModule,
+		TableOfContentsModule,
+		AngularStickyThingsModule
 	],
 	declarations: [
 		GrantEditorWizardComponent,