D-Net

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

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

import {DomSanitizer} from '@angular/platform-browser';

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

import {RouterHelper} from './routerHelper.class';

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

@Component({

  selector: 'paging',

  template: `

   <ul  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " 

        class="uk-pagination uk-margin-remove-bottom uk-flex uk-flex-middle">

   <!--li *ngIf=" currentPage  > 1" ><a  [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',1)"   routerLinkActive="router-link-active" [routerLink]=baseUrl 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  > 1" ><a  [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))"   routerLinkActive="router-link-active" [routerLink]=baseUrl 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  > 1"><a [href]="onPage((currentPage -1))">\<</a></li>-->

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

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

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

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

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

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

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

    <li *ngIf="getTotalPages()  > currentPage"><a  [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"   routerLinkActive="router-link-active" [routerLink]=baseUrl 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 PagingFormatter {

  @Input() currentPage: number = 1;

  @Input() size: number=10;

  @Input() totalResults: number = 10;

  @Input() baseUrl:string="";

  @Input() parameterNames:string[];

  @Input() parameterValues:string[];

  private limit: number;

  properties:EnvProperties;

  public routerHelper:RouterHelper = new RouterHelper();

  constructor (private route: ActivatedRoute, private _router: Router, private sanitizer:DomSanitizer) {

   }

  ngOnInit() {

    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:number =parseInt(''+(this.totalResults/this.size));

    total = (((this.totalResults/this.size) == i )? i :(i+1)) ;

    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;

  }

  // onPage(pageNum: number){

  //   return this.sanitizer.bypassSecurityTrustUrl( this.baseUrl+((this.baseUrl.indexOf("?") > -1  )?'&':'?')+ "page=" + (pageNum));

  //

  // }

}