MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Pagination

This commit is contained in:
annampak 2017-10-09 16:36:29 +03:00
parent bc21e8f6d5
commit 7f4cf41c2e
4 changed files with 100 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/app.module.ts
View File

@ -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 {

21
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -47,7 +47,28 @@
</div>
<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>
</li>
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(pagination.currentPage - 1)">Previous</a>
</li>
<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
<a (click)="setPage(page)">{{page}}</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.currentPage + 1)">Next</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.totalPages)">Last</a>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="progress">

36
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -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<any> = [];
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; }

47
dmp-frontend/src/app/services/pagination.service.ts Normal file
View File

@ -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 <endPage + 1; i++)
pages.push(i);
// return object with all pager properties required by the view
return {
totalGroups: totalGroups,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}