openaire-library/utils/pagingFormatterNoLoad.compo...

77 lines
2.9 KiB
TypeScript

import {Component, Input, Output, EventEmitter} from '@angular/core';
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [term]="keyword"> </paging>
@Component({
selector: 'paging-no-load',
template: `
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination">
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<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>
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
<li class="uk-active"><span >{{currentPage}}</span></li>
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{currentPage +1}}</a></li>
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{currentPage +4}}</a></li>
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage(currentPage +1)" aria-label="Next">
<span class="uk-icon">
<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>
</span>
</a>
</li>
</ul>
`
})
export class pagingFormatterNoLoad {
@Input() public currentPage: number = 1;
// @Input() public navigateTo: string;
@Input() public term: string='';
@Input() public size: number=10;
@Input() public totalResults: number = 10;
// @Input() public params;
@Output() pageChange = new EventEmitter();
constructor () {
}
ngOnInit() {
console.info("In paging -- CurrentPage:"+this.currentPage+" "+"total Pages = "+this.getTotalPages() +" Results num:"+this.totalResults);
}
getTotalPages(){
var i= this.totalResults/this.size;
var integerI=parseInt(''+i);
return parseInt(''+((i==integerI)?i:i+1));
}
onPrev(){
this.currentPage=this.currentPage-1;
this.pageChange.emit({
value: this.currentPage
});
}
onNext(){
this.currentPage=this.currentPage+1;
this.pageChange.emit({
value: this.currentPage
});
}
onPage(pageNum: number){
this.currentPage=pageNum;
this.pageChange.emit({
value: this.currentPage
});
}
}