Toc

dmp-frontend/src/app/entities/model/section.ts

@@ -9,4 +9,5 @@ export class Section {
   defaultVisibility: boolean;
   ordinal: number;
   groupFields: GroupBase<any>[];
+  page:number;
 }

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

@@ -4,10 +4,13 @@
 			
 					<div *ngFor = "let section of dataModel.sections; let i = index;">							
 							<div *ngIf="section.groupFields.length>0 else sectionHeader">												
-									<h3>{{section.title}}</h3>
+									<div  *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
 									<div *ngFor="let group of section.groupFields">
+											<div *ngIf="shouldIShow(group);"	>	
 										<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
+											</div>
 									</div>					
+								
 						</div>
 						<ng-template #sectionHeader>     
 							<h2>{{section.title}}</h2>
@@ -45,7 +48,7 @@
 							</div>
 							<div class="panel-body" id="collapse-panel" class="panel-collapse">
 									<div *ngIf="dataModel.groups.length">
-											<toc [dataModel]="dataModel" (setPage)="setPage(2)"></toc>
+											<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 									</div>
 							</div>
 						</div>

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

@@ -248,11 +248,12 @@ export class DynamicFormComponent implements OnInit {
     this.payLoad = JSON.stringify(this.form.value);
   }
 
-  shouldIShow(groupFields) {
+  shouldIShow(element) { //pagination , pages are declared in xml for every groupfield
-    debugger;
+    
-    if (this.pagination.currentPage == groupFields[0].page){
+    if (this.pagination.currentPage == element.page){
       return true;
     }
+  else 
      return false;
 
 
@@ -277,7 +278,7 @@ export class DynamicFormComponent implements OnInit {
     if (page < 1 || page > this.pagination.totalPages) {
       return;
     }
-    var pagesize = 3;
+    var pagesize = 4;
     // get pagination object from service
     this.pagination = this.pagerService.getPagination(this.dataModel.groups, this.dataModel.groups.length, page, pagesize);
 

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

@@ -7,8 +7,8 @@
                                 <li>
                                     <a (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
                                     <ul *ngFor="let field of group.groupFields">
-                                        <li *ngIf="field.visible == 'true'">
+                                        <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
-                                            <a (click)='scrollToElemID(field.key)'>{{field.label}}</a>
+                                            <a (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
                                         </li>
                                     </ul>
                                 </li>

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

@@ -16,7 +16,7 @@ export class TocComponent implements OnInit{
     private headers = new Array();
 
     @Output()
-    setPage:EventEmitter<number> = new EventEmitter();
+    setPage:EventEmitter<number> = new EventEmitter<number>();
 
     ngOnInit(){
       var len =  this.dataModel.groups.length; // I don't use headers , I use datamodel.groupfields
@@ -26,9 +26,10 @@ export class TocComponent implements OnInit{
 
     }
 
-    scrollToElemID(elemID, page){
+    scrollToElemID(elemID, _page){
       console.log("going to id:"+elemID)
-     // this.setPage.emit(2);
+      var page = parseInt(_page)
+      this.setPage.emit(page);
       scroll("#"+elemID);
     }
 

dmp-frontend/src/app/services/dataModelBuilder.service.ts

@@ -363,6 +363,7 @@ export class dataModelBuilder {
                 newSection.id = section._id;
                 newSection.title = section.title;
                 newSection.ordinal = section._ordinal;
+                newSection.page = section._page;
                 newSection.groupFields = new Array();
                 fieldGroups.forEach(fldgroup => {
                     if (fldgroup.section == newSection.id)