D-Net

import {Component, Input, Output, EventEmitter} from '@angular/core';

import {ActivatedRoute} from '@angular/router';

import{EnvProperties} from './properties/env-properties';

//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum"    [term]="keyword"> </paging>

@Component({

  selector: 'paging-no-load',

  template: `

   <ul disabled  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " [ngClass]="customClasses"

       class="uk-pagination uk-flex uk-flex-middle">

   <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) | number}}</a></li>

   <li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>

   <li class="uk-active"><span >{{currentPage | number}}</span></li>

   <li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{(currentPage +1) | number}}</a></li>

   <li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>

   <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>

   <li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</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 customClasses: string = '';

  // @Input() public navigateTo: string;

  @Input() public term: string='';

  @Input() public size: number=10;

  @Input() public totalResults: number = 10;

  @Input() public limitPaging: boolean = false;

  // @Input() public params;

  @Output() pageChange  = new EventEmitter();

  private limit: number;

  properties:EnvProperties;

  @Input()

  public loading:boolean = false;

  constructor (private route: ActivatedRoute) {

   }

  ngOnInit() {

      //console.info("In paging -- CurrentPage:"+this.currentPage+" "+"total Pages = "+this.getTotalPages()  +" Results num:"+this.totalResults);

      this.route.data

        .subscribe((data: { envSpecific: EnvProperties }) => {

           this.properties = data.envSpecific;

           this.limit = this.properties.pagingLimit;

         }

       );

  }

  getTotalPages(){

    let total: number = 0;

    //let limit: number = 20;//OpenaireProperties.getPagingLimit();

    var i= this.totalResults/this.size;

    var integerI=parseInt(''+i);

    total = parseInt(''+((i==integerI)?i:i+1));

    if(this.limitPaging) {

      if((this.currentPage == this.limit) && (total > this.limit)) {

        total = this.limit;

      } else if((this.currentPage > this.limit) && (total > this.limit)) {

        total = this.currentPage;

      }

    }

    return total;

  }

  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){

    if(!this.loading) {

      this.currentPage = pageNum;

      this.pageChange.emit({

        value: this.currentPage

      });

    }

  }

}