From bb98e7cfcfa33c6f029448fde53cceff5d39d883 Mon Sep 17 00:00:00 2001 From: annampak Date: Tue, 10 Oct 2017 17:10:00 +0300 Subject: [PATCH] Toc navigate to the same page, pagination cursor --- dmp-frontend/src/app/app-routing.module.ts | 4 +- .../src/app/form/dynamic-form.component.html | 12 +++--- .../src/app/form/dynamic-form.component.ts | 11 +++++- .../fields/dynamic-form-field.component.html | 2 +- .../fields/dynamic-form-field.component.ts | 12 ++++++ .../form/tableOfContents/toc.component.html | 37 ++++++++++++++----- dmp-frontend/src/styles.css | 4 ++ 7 files changed, 62 insertions(+), 20 deletions(-) diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts index af24b0197..6bb89a47e 100644 --- a/dmp-frontend/src/app/app-routing.module.ts +++ b/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 diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 45f1f29b9..da0ce1c4c 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -48,24 +48,22 @@
-

Angular 2 - Pagination Example with logic like Google

-
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index 89484f166..5c4654651 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/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); } diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html index 2c02462e1..1d05e2bbf 100644 --- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html +++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html @@ -46,7 +46,7 @@
-
+
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts index ffdbcdad1..5ee007706 100644 --- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts +++ b/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; @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) diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html index f7bb3d402..edd5f6801 100644 --- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html +++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html @@ -2,25 +2,42 @@ - + \ No newline at end of file diff --git a/dmp-frontend/src/styles.css b/dmp-frontend/src/styles.css index 6fcf8c78c..272697696 100644 --- a/dmp-frontend/src/styles.css +++ b/dmp-frontend/src/styles.css @@ -65,4 +65,8 @@ body { .form-groupCustom { border: 2px solid #A11515; } + + .cursor-link{ + cursor: pointer; + } \ No newline at end of file