Toc navigate to the same page, pagination cursor

dmp-frontend/src/app/app-routing.module.ts

@@ -17,7 +17,9 @@ const appRoutes: Routes = [
 @NgModule({
   imports: [
     RouterModule.forRoot(
-      appRoutes)
+      appRoutes
+     // { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -48,24 +48,22 @@
 
 
 <div class="text-center">
-	<p>Angular 2 - Pagination Example with logic like Google</p>
-
 	<!-- pagination -->
 	<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
 		<li [ngClass]="{disabled:pagination.currentPage === 1}">
-			<a (click)="setPage(1)">First</a>
+			<a (click)="setPage(1)" class="cursor-link" >First</a>
 		</li>
 		<li [ngClass]="{disabled:pagination.currentPage === 1}">
-			<a (click)="setPage(pagination.currentPage - 1)">Previous</a>
+			<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
 		</li>
 		<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-			<a (click)="setPage(page)">{{page}}</a>
+			<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
 		</li>
 		<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-			<a (click)="setPage(pagination.currentPage + 1)">Next</a>
+			<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
 		</li>
 		<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-			<a (click)="setPage(pagination.totalPages)">Last</a>
+			<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
 		</li>
 	</ul>
 </div>

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -23,10 +23,11 @@ export class DynamicFormComponent implements OnInit {
   form: FormGroup;
   payLoad = '';
   @Input() dirtyValues: number = 0;
-
   // pagination object
   @Input() pagination: any = {};
 
+  private fragment: string;
+
   constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
     private route: ActivatedRoute, private pagerService: PaginationService) {
     this.form = this.qcs.toFormGroup(new Array(), new Array());
@@ -40,6 +41,8 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
 
+    this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
+
     console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
     let id = this.route.snapshot.paramMap.get('id'); //get the project id
 
@@ -96,6 +99,12 @@ export class DynamicFormComponent implements OnInit {
 
   }
 
+  ngAfterViewChecked(): void { //navigate to certain section of the page
+    try {
+      document.querySelector('#' + this.fragment).scrollIntoView();
+    } catch (e) { }
+  }
+
   onSubmit() {
     this.payLoad = JSON.stringify(this.form.value);
   }

dmp-frontend/src/app/form/fields/dynamic-form-field.component.html

@@ -46,7 +46,7 @@
           
     <div *ngSwitchCase="'radiobox'">
             <ng-container *ngFor="let answrBase of field.answers">
-                <div style="display: inline-block;margin-right:10px;">
+                <div style="display: inline-block;margin-right:10px;" [id]="field.key">
                     <label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
                     <input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field)"  [required]="field.required"/>
                 </div>

dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts

@@ -1,6 +1,7 @@
 import { DataModel } from '../../entities/DataModel';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
+import { ActivatedRoute} from '@angular/router';
 
 import { FieldBase } from './field-base';
 import { GroupBase } from '../../form/dynamic-form-group/group-base';
@@ -18,6 +19,10 @@ export class DynamicFormFieldComponent {
     @Input() field: FieldBase<any>;
     @Input() form: FormGroup;
 
+    private fragment: string;
+
+    constructor (private route: ActivatedRoute){}
+
     get isValid() {
         return this.form.controls[this.field.key].valid;
     }
@@ -41,8 +46,15 @@ export class DynamicFormFieldComponent {
             }
 
         }
+
+        this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
     }
 
+    ngAfterViewChecked(): void { //navigate to certain section of the page
+        try {
+          document.querySelector('#' + this.fragment).scrollIntoView();
+        } catch (e) { }
+      }
     ruleVisibleMethod(field, rule, dataModel) { //visibility rule -- checks if target field is visible
         dataModel.fields.forEach(fld => {
             if (fld.label == rule._target && fld.visible == true)

dmp-frontend/src/app/form/tableOfContents/toc.component.html

@@ -2,12 +2,29 @@
     <nav id="toc" data-toggle="toc">
         <ul class="nav flex-column">
             <li class="nav-item">
-                <div  *ngFor="let group of dataModel.groups">
+                <div *ngFor="let section of dataModel.sections">
+                    <div  *ngFor="let group of section.groupFields">
+                            <ul>
+                                    <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
+                                        <ul *ngFor="let field of group.groupFields">
+                                            <li *ngIf="field.visible == 'true'">
+                                                <a class="nav-link" [routerLink]="['.']" fragment="{{field.key}}">{{field.label}}</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+            
+                                </ul>
+                    </div>
+                   
+
+
+                </div>
+                <!-- <div *ngFor="let group of dataModel.groups">
                     <ul>
-                        <li><a class="nav-link" href="#{{group.key}}">{{group.title}}</a>
+                        <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
                             <ul *ngFor="let field of group.groupFields">
-                                  <li *ngIf= "field.visible == 'true'" >                                       
-                                      <a class="nav-link"  href="#field.key">{{field.label}}</a>
+                                <li *ngIf="field.visible == 'true'">
+                                    <a class="nav-link" href="#field.key">{{field.label}}</a>
                                 </li>
                             </ul>
                         </li>
@@ -15,7 +32,7 @@
                     </ul>
 
 
-                </div>               
+                </div> -->
 
 
 

dmp-frontend/src/styles.css

@@ -66,3 +66,7 @@ body {
     border: 2px solid #A11515;
   } 
 
+  .cursor-link{
+    cursor: pointer;
+  }
+