Discard pagination service. Listen to url changes on page param instead.
This commit is contained in:
parent
c27ca22877
commit
2f86c38e21
|
@ -1,4 +1,4 @@
|
||||||
<div class="ui-g dynamic-form">
|
<div class="ui-g dynamic-form">
|
||||||
<ng-sidebar-container class="ui-g" style="height: 100vh;">
|
<ng-sidebar-container class="ui-g" style="height: 100vh;">
|
||||||
<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
|
<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
|
||||||
<table-of-content [model]="dataModel"></table-of-content>
|
<table-of-content [model]="dataModel"></table-of-content>
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
|
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
|
||||||
<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
|
<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
|
||||||
<div class="ui-g-12">
|
<div class="ui-g-12">
|
||||||
<p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()" (activeIndex)="this.paginationService.setCurrentIndex($event)"
|
<p-steps [model]="stepperItems" [(activeIndex)]="this.currentPage"
|
||||||
[readonly]="false"></p-steps>
|
[readonly]="false"></p-steps>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-12">
|
<div class="ui-g-12">
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||||
|
|
||||||
<div *ngFor="let section of dataModel.sections; let i = index;">
|
<div *ngFor="let section of dataModel.sections; let i = index;">
|
||||||
<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)"
|
<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)"
|
||||||
[path]="i+1" [pathName]="'sections.'+i"></df-section>
|
[path]="i+1" [pathName]="'sections.'+i"></df-section>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { PaginationService } from './pagination/pagination-service';
|
import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
|
||||||
import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
|
|
||||||
import { TestModel } from '../testModel/testmodel';
|
import { TestModel } from '../testModel/testmodel';
|
||||||
import { DatasetModel } from '../models/DatasetModel';
|
import { DatasetModel } from '../models/DatasetModel';
|
||||||
import { Rule } from '../models/Rule';
|
import { Rule } from '../models/Rule';
|
||||||
|
import { Section } from '../models/Section';
|
||||||
|
|
||||||
import { JsonSerializer } from '../utilities/JsonSerializer';
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||||
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
|
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
|
||||||
|
@ -67,12 +67,12 @@ export class DynamicFormComponent implements OnInit {
|
||||||
visibleSidebar: boolean = false;
|
visibleSidebar: boolean = false;
|
||||||
|
|
||||||
private progressbar: boolean = false;
|
private progressbar: boolean = false;
|
||||||
|
private currentPage: number;
|
||||||
|
|
||||||
private fragment: string;
|
private fragment: string;
|
||||||
constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
|
constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
|
||||||
private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
|
private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
|
||||||
, private visibilityRulesService: VisibilityRulesService
|
, private visibilityRulesService: VisibilityRulesService
|
||||||
, private paginationService:PaginationService
|
|
||||||
) {
|
) {
|
||||||
this.datasetId = route.snapshot.params['id'];
|
this.datasetId = route.snapshot.params['id'];
|
||||||
}
|
}
|
||||||
|
@ -88,12 +88,25 @@ export class DynamicFormComponent implements OnInit {
|
||||||
response => {
|
response => {
|
||||||
this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
|
this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
|
||||||
this.pages = this.getPages(this.dataModel);
|
this.pages = this.getPages(this.dataModel);
|
||||||
this.createPagination();
|
//this.createPagination();
|
||||||
this.form = this.dataModel.buildForm();
|
this.form = this.dataModel.buildForm();
|
||||||
this.visibilityRulesService.formGroup = this.form;
|
this.visibilityRulesService.formGroup = this.form;
|
||||||
let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
|
let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
|
||||||
this.visibilityRulesService.buildVisibilityRules(rules)
|
this.visibilityRulesService.buildVisibilityRules(rules)
|
||||||
this.progressbar = true;
|
this.progressbar = true;
|
||||||
|
|
||||||
|
this.route.fragment.subscribe((fragment: string) => {
|
||||||
|
if (fragment && document.querySelector('#' + fragment)) {
|
||||||
|
document.querySelector('#' + fragment).scrollIntoView();
|
||||||
|
this.visibleSidebar = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.route.queryParams.subscribe((params) => {
|
||||||
|
if (params && "page" in params && !isNaN(params["page"]))
|
||||||
|
this.currentPage = Number.parseInt(params["page"]);
|
||||||
|
//this.visibleSidebar = true;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log("Could not load dmp");
|
console.log("Could not load dmp");
|
||||||
|
@ -127,16 +140,19 @@ export class DynamicFormComponent implements OnInit {
|
||||||
return pageSet;
|
return pageSet;
|
||||||
}
|
}
|
||||||
|
|
||||||
createPagination() {
|
shouldDisplaySection(section: Section): Boolean {
|
||||||
this.pages.forEach(item => {
|
return section.page == this.currentPage;
|
||||||
this.stepperItems.push({
|
|
||||||
label: '',
|
|
||||||
command: (event: any) => {
|
|
||||||
this.paginationService.setCurrentIndex(event.index)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
//createPagination() {
|
||||||
|
// this.pages.forEach(item => {
|
||||||
|
// this.stepperItems.push({
|
||||||
|
// label: '',
|
||||||
|
// command: (event: any) => {
|
||||||
|
// this.paginationService.setCurrentIndex(event.index)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
//}
|
||||||
/* scrollToElemID(elemID) {
|
/* scrollToElemID(elemID) {
|
||||||
scroll("#" + elemID);
|
scroll("#" + elemID);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,10 @@
|
||||||
import { PaginationService } from '../pagination/pagination-service';
|
import { ActivatedRouteSnapshot, Router, ActivatedRoute } from '@angular/router';
|
||||||
import { ActivatedRouteSnapshot, Router, ActivatedRoute } from '@angular/router';
|
|
||||||
|
|
||||||
export class BaseTableOfContent {
|
export class BaseTableOfContent {
|
||||||
constructor(public router: Router, public route: ActivatedRoute, public paginationService: PaginationService) {
|
constructor(public router: Router, public route: ActivatedRoute) { }
|
||||||
this.route.fragment.subscribe((fragment: string) => {
|
|
||||||
setTimeout(function() {
|
|
||||||
if (fragment) document.querySelector('#' + fragment).scrollIntoView();
|
|
||||||
}, );
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollToId(elementId, page: number) {
|
scrollToId(elementId, page: number) {
|
||||||
this.paginationService.setCurrentIndex(page-1);
|
//this.paginationService.setCurrentIndex(page-1);
|
||||||
this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { fragment: elementId });
|
this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { fragment: elementId, queryParams: { page: page } });
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
import { PaginationService } from '../../pagination/pagination-service';
|
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
||||||
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
|
||||||
import { BaseTableOfContent } from '../base-table-of-content.component';
|
import { BaseTableOfContent } from '../base-table-of-content.component';
|
||||||
import { CompositeField } from '../../../models/CompositeField';
|
import { CompositeField } from '../../../models/CompositeField';
|
||||||
import { Field } from '../../../models/Field';
|
import { Field } from '../../../models/Field';
|
||||||
|
@ -18,7 +17,7 @@ export class TableOfContentsFieldComponent extends BaseTableOfContent{
|
||||||
@Input() index:number;
|
@Input() index:number;
|
||||||
@Input() public path:string;
|
@Input() public path:string;
|
||||||
@Input() public page: number;
|
@Input() public page: number;
|
||||||
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
|
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
|
||||||
super(router, route,paginationService)
|
super(router, route)
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
import { PaginationService } from '../../pagination/pagination-service';
|
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
||||||
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
|
||||||
import { BaseTableOfContent } from '../base-table-of-content.component';
|
import { BaseTableOfContent } from '../base-table-of-content.component';
|
||||||
import { CompositeField } from '../../../models/CompositeField';
|
import { CompositeField } from '../../../models/CompositeField';
|
||||||
import { FieldGroup } from '../../../models/FieldGroup';
|
import { FieldGroup } from '../../../models/FieldGroup';
|
||||||
|
@ -21,7 +20,7 @@ export class TableOfContentsFieldSetComponent extends BaseTableOfContent {
|
||||||
@Input() index: number;
|
@Input() index: number;
|
||||||
@Input() public path: string;
|
@Input() public path: string;
|
||||||
@Input() public page: number;
|
@Input() public page: number;
|
||||||
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
|
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
|
||||||
super(router, route,paginationService)
|
super(router, route)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { PaginationService } from '../../pagination/pagination-service';
|
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
||||||
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
|
||||||
import { BaseTableOfContent } from '../base-table-of-content.component';
|
import { BaseTableOfContent } from '../base-table-of-content.component';
|
||||||
import { FieldGroup } from '../../../models/FieldGroup';
|
import { FieldGroup } from '../../../models/FieldGroup';
|
||||||
import { Section } from '../../../models/Section';
|
import { Section } from '../../../models/Section';
|
||||||
|
@ -23,8 +22,8 @@ export class TableOfContentsGroupComponent extends BaseTableOfContent {
|
||||||
setPage:EventEmitter<number> = new EventEmitter<number>();
|
setPage:EventEmitter<number> = new EventEmitter<number>();
|
||||||
|
|
||||||
*/
|
*/
|
||||||
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
|
constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
|
||||||
super(router, route,paginationService)
|
super(router, route)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { PaginationService } from '../../pagination/pagination-service';
|
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
||||||
import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
|
|
||||||
import { BaseTableOfContent } from '../base-table-of-content.component';
|
import { BaseTableOfContent } from '../base-table-of-content.component';
|
||||||
import { Section } from '../../../models/Section';
|
import { Section } from '../../../models/Section';
|
||||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
@ -19,8 +18,8 @@ export class TableOfContentsSectionComponent extends BaseTableOfContent implemen
|
||||||
@Input() index: number;
|
@Input() index: number;
|
||||||
@Input() public path: string;
|
@Input() public path: string;
|
||||||
@Input() public page: number;
|
@Input() public page: number;
|
||||||
constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService){
|
constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService){
|
||||||
super(router,route,paginationService)
|
super(router,route)
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue