2017-12-19 13:53:46 +01:00
|
|
|
import {Component, Input} from '@angular/core';
|
|
|
|
import {RouterHelper} from './routerHelper.class';
|
2018-05-18 17:59:13 +02:00
|
|
|
import {EnvProperties} from './properties/env-properties';
|
2020-11-18 17:06:27 +01:00
|
|
|
import {properties} from "../../../environments/environment";
|
2022-01-21 09:20:46 +01:00
|
|
|
|
2017-12-19 13:53:46 +01:00
|
|
|
@Component({
|
|
|
|
selector: 'paging',
|
|
|
|
template: `
|
2022-01-21 09:20:46 +01:00
|
|
|
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
|
|
|
|
[class.uk-disabled]="isDisabled" class="uk-pagination" [ngClass]="'uk-flex-' + position">
|
|
|
|
<li *ngIf="currentPage > 1">
|
|
|
|
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
|
|
|
|
[routerLink]=baseUrl aria-label="Previous">
|
|
|
|
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li *ngIf=" currentPage -2 > 0"><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage - 2) | number}}</a></li>
|
|
|
|
<li *ngIf=" currentPage -1 > 0 "><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage - 1) | number}}</a></li>
|
|
|
|
<li class="uk-active"><span>{{currentPage | number}}</span></li>
|
|
|
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage + 1) | number}}</a></li>
|
|
|
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage + 2) | number}}</a></li>
|
|
|
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage + 3) | number}}</a></li>
|
|
|
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a
|
|
|
|
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))"
|
|
|
|
[routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li>
|
|
|
|
<li *ngIf="getTotalPages() > currentPage">
|
|
|
|
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
|
|
|
|
[routerLink]=baseUrl aria-label="Next">
|
|
|
|
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2017-12-19 13:53:46 +01:00
|
|
|
`
|
|
|
|
})
|
|
|
|
|
|
|
|
export class PagingFormatter {
|
2020-07-14 15:13:44 +02:00
|
|
|
@Input() isDisabled: boolean = false;
|
2017-12-19 13:53:46 +01:00
|
|
|
@Input() currentPage: number = 1;
|
2022-01-21 09:20:46 +01:00
|
|
|
@Input() size: number = 10;
|
2017-12-19 13:53:46 +01:00
|
|
|
@Input() totalResults: number = 10;
|
2022-01-21 09:20:46 +01:00
|
|
|
@Input() baseUrl: string = "";
|
|
|
|
@Input() parameterNames: string[];
|
|
|
|
@Input() parameterValues: string[];
|
|
|
|
@Input() position: "left" | "center" | "right" = "right";
|
|
|
|
private readonly limit: number;
|
|
|
|
properties: EnvProperties = properties;
|
|
|
|
public routerHelper: RouterHelper = new RouterHelper();
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
this.limit = this.properties.pagingLimit;
|
2017-12-19 13:53:46 +01:00
|
|
|
}
|
2022-01-21 09:20:46 +01:00
|
|
|
|
|
|
|
getTotalPages() {
|
|
|
|
let total: number;
|
|
|
|
var i: number = parseInt('' + (this.totalResults / this.size));
|
|
|
|
total = (((this.totalResults / this.size) == i) ? i : (i + 1));
|
|
|
|
if ((this.currentPage == this.limit) && (total > this.limit)) {
|
2018-05-18 17:59:13 +02:00
|
|
|
total = this.limit;
|
2022-01-21 09:20:46 +01:00
|
|
|
} else if ((this.currentPage > this.limit) && (total > this.limit)) {
|
2018-02-05 14:14:59 +01:00
|
|
|
total = this.currentPage;
|
|
|
|
}
|
|
|
|
return total;
|
2017-12-19 13:53:46 +01:00
|
|
|
}
|
|
|
|
}
|