From 7f4cf41c2e7c8394e040f230a563ec00e344249e Mon Sep 17 00:00:00 2001 From: annampak Date: Mon, 9 Oct 2017 16:36:29 +0300 Subject: [PATCH] Pagination --- dmp-frontend/src/app/app.module.ts | 3 +- .../src/app/form/dynamic-form.component.html | 21 +++++++++ .../src/app/form/dynamic-form.component.ts | 36 +++++++++++--- .../src/app/services/pagination.service.ts | 47 +++++++++++++++++++ 4 files changed, 100 insertions(+), 7 deletions(-) create mode 100644 dmp-frontend/src/app/services/pagination.service.ts diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index d95a89b22..1c0deaccf 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -18,6 +18,7 @@ import { AuthGuard } from './guards/auth.guard'; import { PageNotFoundComponent } from './not-found.component'; import { TocComponent } from './form/tableOfContents/toc.component'; import { ProjectsModule } from './projects/project.module'; +import { PaginationService } from './services/pagination.service'; @NgModule({ declarations: [ @@ -40,7 +41,7 @@ import { ProjectsModule } from './projects/project.module'; AppRoutingModule ], - providers: [ServerService, dataModelBuilder, AuthGuard], + providers: [ServerService, dataModelBuilder, AuthGuard, PaginationService], bootstrap: [AppComponent] }) export class AppModule { diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 6fb122208..45f1f29b9 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -47,7 +47,28 @@ +
+

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 93edfdd41..89484f166 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -10,7 +10,7 @@ import { ServerService } from '../../app/services/server.service'; import { dataModelBuilder } from '../../app/services/dataModelBuilder.service'; import { DataModel } from '../entities/DataModel'; import { GroupBase } from './dynamic-form-group/group-base'; - +import { PaginationService } from '../../app/services/pagination.service'; @Component({ selector: 'dynamic-form', @@ -24,7 +24,11 @@ export class DynamicFormComponent implements OnInit { payLoad = ''; @Input() dirtyValues: number = 0; - constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) { + // pagination object + @Input() pagination: any = {}; + + 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()); } @@ -51,11 +55,11 @@ export class DynamicFormComponent implements OnInit { this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups); this.form.valueChanges.subscribe(data => { - // console.log('Form changes', data); + // console.log('Form changes', data); let dirtyValuesArray: Array = []; let count = 0; let countDirtyValues = 0; - Object.keys(this.form.controls).forEach((c) => { + Object.keys(this.form.controls).forEach((c) => { //count++; let currentControl = this.form.controls[c]; if (currentControl.dirty) @@ -66,12 +70,12 @@ export class DynamicFormComponent implements OnInit { grp.groupFields.forEach((fld) => { if (fld.visible == true || fld.visible == "true") count++; - if(fld.value != undefined) + if (fld.value != undefined) countDirtyValues++; }); }); //console.log(count); - // var percentage = Math.floor(dirtyValuesArray.length * 100 / count); + // var percentage = Math.floor(dirtyValuesArray.length * 100 / count); var percentage = Math.floor(countDirtyValues * 100 / count); this.dirtyValues = percentage; }) @@ -83,6 +87,9 @@ export class DynamicFormComponent implements OnInit { console.log(this.form); this.route.paramMap //this is how i get the projects's id + + // initialize to page 1 + this.setPage(1); }, (error) => console.log(error) ); @@ -103,6 +110,23 @@ export class DynamicFormComponent implements OnInit { this.onValueChanged(); // (re)set validation messages now } + setPage(page: number) { + if (page < 1 || page > this.pagination.totalPages) { + return; + } + + // get pagination object from service + this.pagination = this.pagerService.getPagination(this.dataModel.groups.length, page); + + // get current page of items + this.dataModel.sections.forEach(section => { + if(section.groupFields.length > 0){ + section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1); + } + }); + //this.dataModel.groups = this.dataModel.groups.slice(this.pager.startIndex, this.pager.endIndex + 1); +} + onValueChanged(data?: any) { debugger; if (!this.form) { return; } diff --git a/dmp-frontend/src/app/services/pagination.service.ts b/dmp-frontend/src/app/services/pagination.service.ts new file mode 100644 index 000000000..98f684c0d --- /dev/null +++ b/dmp-frontend/src/app/services/pagination.service.ts @@ -0,0 +1,47 @@ +export class PaginationService { + getPagination(totalGroups: number, currentPage: number = 1, pageSize: number = 3) { + // calculate total pages + let totalPages = Math.ceil(totalGroups / pageSize); + + let startPage: number, endPage: number; + if (totalPages <= 10) { + // less than 10 total pages so show all + startPage = 1; + endPage = totalPages; + } else { + // more than 10 total pages so calculate start and end pages + if (currentPage <= 6) { + startPage = 1; + endPage = 10; + } else if (currentPage + 4 >= totalPages) { + startPage = totalPages - 9; + endPage = totalPages; + } else { + startPage = currentPage - 5; + endPage = currentPage + 4; + } + } + + // calculate start and end item indexes + let startIndex = (currentPage - 1) * pageSize; + let endIndex = Math.min(startIndex + pageSize - 1, totalGroups - 1); + + // create an array of pages to ng-repeat in the pager control + let pages = []; + for (var i = 1; i