diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 0732ad538..f0c098fd1 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -9,7 +9,7 @@
- +
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index 2ef455627..bac035ad9 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -61,13 +61,13 @@ export class DynamicFormComponent implements OnInit { id: string; datasetId: string; pathName: string; - pages: Set; + pages: Array; stepperItems: MenuItem[] = new Array(); activeStepperIndex: number = 1; visibleSidebar: boolean = false; private progressbar: boolean = false; - private currentPage: number = 0; + private currentPageIndex: number = 0; private fragment: string; constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService, @@ -86,8 +86,8 @@ export class DynamicFormComponent implements OnInit { this.serverService.getSingleDataset(this.datasetId).subscribe( response => { - this.dataModel = new JsonSerializer().fromJSONObject(response, DatasetModel); - this.pages = this.getPages(this.dataModel); + this.dataModel = new JsonSerializer().fromJSONObject(response, DatasetModel); + this.pages = this.getPages(this.dataModel); this.createPagination(); this.form = this.dataModel.buildForm(); this.visibilityRulesService.formGroup = this.form; @@ -96,15 +96,18 @@ export class DynamicFormComponent implements OnInit { this.progressbar = true; this.route.fragment.subscribe((fragment: string) => { - if (fragment && document.querySelector('#' + fragment)) { - document.querySelector('#' + fragment).scrollIntoView(); - this.visibleSidebar = true; + if (fragment && document.querySelector('#' + fragment)) { + ;//this.adjustScrolling(document.querySelector('#' + fragment)); + // this.visibleSidebar = true; } }); this.route.queryParams.subscribe((params) => { - if (params && "page" in params && !isNaN(params["page"])) - this.currentPage = Number.parseInt(params["page"]); + if (params && "page" in params && !isNaN(params["page"])) + { + var page = Number.parseInt(params["page"]); + this.currentPageIndex = this.pages.indexOf(page); + } //this.visibleSidebar = true; }); }, @@ -132,16 +135,18 @@ export class DynamicFormComponent implements OnInit { this.visibleSidebar = !this.visibleSidebar; } - getPages(model: DatasetModel): Set { - let pageSet = new Set(); - model.sections.forEach(section => { - pageSet.add(section.page); - }) - return pageSet; + getPages(model: DatasetModel): Array { + let pageSet = new Set(); + + model.sections.forEach(section => { + pageSet.add(section.page); + }); + + return Array.from(pageSet).sort((a, b) => a - b); } shouldDisplaySection(section: Section): Boolean { - return (section.page - 1) == this.currentPage; + return (section.page) == this.pages[this.currentPageIndex]; } createPagination() { @@ -151,6 +156,15 @@ export class DynamicFormComponent implements OnInit { }) }); } + + changePageIndex(index: any) { + this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index] } }); + } + + adjustScrolling(topElement: HTMLElement) { + var scrollElement = document.querySelector('#scrollContainer').parentElement; + scrollElement.scrollTop = topElement.offsetTop; + } /* scrollToElemID(elemID) { scroll("#" + elemID); }