1
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
2
|
import {ActivatedRoute} from '@angular/router';
|
3
|
import{EnvProperties} from './properties/env-properties';
|
4
|
|
5
|
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [term]="keyword"> </paging>
|
6
|
|
7
|
@Component({
|
8
|
selector: 'paging-no-load',
|
9
|
template: `
|
10
|
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination">
|
11
|
|
12
|
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
|
13
|
<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>
|
14
|
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li>
|
15
|
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>
|
16
|
<li class="uk-active"><span >{{currentPage | number}}</span></li>
|
17
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{(currentPage +1) | number}}</a></li>
|
18
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
|
19
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
|
20
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
|
21
|
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage(currentPage +1)" aria-label="Next">
|
22
|
<span class="uk-icon">
|
23
|
<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>
|
24
|
</span>
|
25
|
</a>
|
26
|
</li>
|
27
|
|
28
|
|
29
|
</ul>
|
30
|
|
31
|
`
|
32
|
})
|
33
|
|
34
|
export class pagingFormatterNoLoad {
|
35
|
@Input() public currentPage: number = 1;
|
36
|
// @Input() public navigateTo: string;
|
37
|
@Input() public term: string='';
|
38
|
@Input() public size: number=10;
|
39
|
@Input() public totalResults: number = 10;
|
40
|
@Input() public limitPaging: boolean = false;
|
41
|
|
42
|
// @Input() public params;
|
43
|
|
44
|
@Output() pageChange = new EventEmitter();
|
45
|
|
46
|
private limit: number;
|
47
|
properties:EnvProperties;
|
48
|
|
49
|
constructor (private route: ActivatedRoute) {
|
50
|
}
|
51
|
|
52
|
ngOnInit() {
|
53
|
console.info("In paging -- CurrentPage:"+this.currentPage+" "+"total Pages = "+this.getTotalPages() +" Results num:"+this.totalResults);
|
54
|
this.route.data
|
55
|
.subscribe((data: { envSpecific: EnvProperties }) => {
|
56
|
this.properties = data.envSpecific;
|
57
|
this.limit = this.properties.pagingLimit;
|
58
|
}
|
59
|
);
|
60
|
}
|
61
|
getTotalPages(){
|
62
|
let total: number = 0;
|
63
|
//let limit: number = 20;//OpenaireProperties.getPagingLimit();
|
64
|
|
65
|
var i= this.totalResults/this.size;
|
66
|
var integerI=parseInt(''+i);
|
67
|
total = parseInt(''+((i==integerI)?i:i+1));
|
68
|
|
69
|
if(this.limitPaging) {
|
70
|
if((this.currentPage == this.limit) && (total > this.limit)) {
|
71
|
total = this.limit;
|
72
|
} else if((this.currentPage > this.limit) && (total > this.limit)) {
|
73
|
total = this.currentPage;
|
74
|
}
|
75
|
}
|
76
|
return total;
|
77
|
}
|
78
|
onPrev(){
|
79
|
this.currentPage=this.currentPage-1;
|
80
|
this.pageChange.emit({
|
81
|
value: this.currentPage
|
82
|
});
|
83
|
|
84
|
}
|
85
|
|
86
|
onNext(){
|
87
|
|
88
|
this.currentPage=this.currentPage+1;
|
89
|
this.pageChange.emit({
|
90
|
value: this.currentPage
|
91
|
});
|
92
|
}
|
93
|
onPage(pageNum: number){
|
94
|
|
95
|
this.currentPage=pageNum;
|
96
|
this.pageChange.emit({
|
97
|
value: this.currentPage
|
98
|
});
|
99
|
}
|
100
|
}
|