1 |
61381
|
k.triantaf
|
import {Component, Input} from '@angular/core';
|
2 |
|
|
import {Router, ActivatedRoute} from '@angular/router';
|
3 |
|
|
import {DomSanitizer} from '@angular/platform-browser';
|
4 |
|
|
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [term]="keyword"> </paging>
|
5 |
|
|
import {RouterHelper} from './routerHelper.class';
|
6 |
|
|
import {EnvProperties} from './properties/env-properties';
|
7 |
|
|
import {properties} from "../../../environments/environment";
|
8 |
|
|
@Component({
|
9 |
|
|
selector: 'paging',
|
10 |
|
|
template: `
|
11 |
|
|
|
12 |
|
|
|
13 |
|
|
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) "
|
14 |
|
|
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-pagination uk-margin-remove-bottom uk-flex uk-flex-middle'">
|
15 |
|
|
|
16 |
|
|
<!--li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',1)" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Previous">
|
17 |
|
|
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li-->
|
18 |
|
|
<li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Previous">
|
19 |
|
|
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
|
20 |
|
|
<!--<li *ngIf=" currentPage > 1"><a [href]="onPage((currentPage -1))">\<</a></li>-->
|
21 |
|
|
|
22 |
|
|
<li *ngIf=" currentPage -2 > 0"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage -2) | number}}</a></li>
|
23 |
|
|
<li *ngIf=" currentPage -1 > 0 "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage -1) | number}}</a></li>
|
24 |
|
|
<li class="uk-active"><span >{{currentPage | number}}</span></li>
|
25 |
|
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +1) | number}}</a></li>
|
26 |
|
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +2) | number}}</a></li>
|
27 |
|
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +3) | number}}</a></li>
|
28 |
|
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))" routerLinkActive="router-link-active" [routerLink]=baseUrl >{{(currentPage +4) | number}}</a></li>
|
29 |
|
|
|
30 |
|
|
<li *ngIf="getTotalPages() > currentPage"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Next">
|
31 |
|
|
<span class="uk-icon">
|
32 |
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
|
33 |
|
|
</span>
|
34 |
|
|
</a></li>
|
35 |
|
|
|
36 |
|
|
|
37 |
|
|
</ul>
|
38 |
|
|
`
|
39 |
|
|
})
|
40 |
|
|
|
41 |
|
|
export class PagingFormatter {
|
42 |
|
|
@Input() isDisabled: boolean = false;
|
43 |
|
|
@Input() currentPage: number = 1;
|
44 |
|
|
@Input() size: number=10;
|
45 |
|
|
@Input() totalResults: number = 10;
|
46 |
|
|
@Input() baseUrl:string="";
|
47 |
|
|
@Input() parameterNames:string[];
|
48 |
|
|
@Input() parameterValues:string[];
|
49 |
|
|
|
50 |
|
|
private limit: number;
|
51 |
|
|
properties:EnvProperties;
|
52 |
|
|
|
53 |
|
|
public routerHelper:RouterHelper = new RouterHelper();
|
54 |
|
|
|
55 |
|
|
constructor () {
|
56 |
|
|
}
|
57 |
|
|
|
58 |
|
|
ngOnInit() {
|
59 |
|
|
this.properties = properties;
|
60 |
|
|
this.limit = this.properties.pagingLimit;
|
61 |
|
|
}
|
62 |
|
|
getTotalPages(){
|
63 |
|
|
let total: number = 0;
|
64 |
|
|
//let limit: number = 20;//OpenaireProperties.getPagingLimit();
|
65 |
|
|
|
66 |
|
|
var i:number =parseInt(''+(this.totalResults/this.size));
|
67 |
|
|
total = (((this.totalResults/this.size) == i )? i :(i+1)) ;
|
68 |
|
|
|
69 |
|
|
if((this.currentPage == this.limit) && (total > this.limit)) {
|
70 |
|
|
total = this.limit;
|
71 |
|
|
} else if((this.currentPage > this.limit) && (total > this.limit)) {
|
72 |
|
|
total = this.currentPage;
|
73 |
|
|
}
|
74 |
|
|
|
75 |
|
|
return total;
|
76 |
|
|
}
|
77 |
|
|
|
78 |
|
|
// onPage(pageNum: number){
|
79 |
|
|
// return this.sanitizer.bypassSecurityTrustUrl( this.baseUrl+((this.baseUrl.indexOf("?") > -1 )?'&':'?')+ "page=" + (pageNum));
|
80 |
|
|
//
|
81 |
|
|
// }
|
82 |
|
|
}
|