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