D-Net

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

@Component({

    selector: 'organizationsTab',

    template: `

        <div *ngIf=" !organizations || organizations.length == 0" class="uk-alert uk-alert-primary uk-animation-fade" role="alert">

            No organizations available

        </div>

        <div *ngIf="  organizations && organizations.length > 0">

            <div *ngIf="organizations.length > pageSize" class="uk-margin-bottom">

              {{organizations.length}} organizations, page {{organizationsPage}} of {{totalPages(organizations.length)}}

              <paging-no-load class="uk-float-right" [currentPage]="organizationsPage" [totalResults]="organizations.length" [size]="pageSize" (pageChange)="updateOrganizationsPage($event)"></paging-no-load>

            </div>

            <div *ngFor="let item of organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)">

                <p *ngIf=" item != undefined && item['id'] != undefined">

                    <!--a href="{{item['url']}}"-->

                    <a [queryParams]="{organizationId: item.id}" routerLinkActive="router-link-active" routerLink="/search/organization">

                        {{item['name']}}

                    </a>

                </p>

                <p *ngIf="item['id'] == undefined">

                    {{item['name']}}

                </p>

            </div>

        </div>

    `

})

export class OrganizationsTabComponent {

    @Input() organizations: {"name": string, "id": string}[];

    public organizationsPage: number = 1;

    public pageSize: number = 10;

    constructor () {}

    ngOnInit() {}

    ngOnDestroy() {}

    totalPages(totalResults: number): number {

      let totalPages:any = totalResults/this.pageSize;

      if(!(Number.isInteger(totalPages))) {

          totalPages = (parseInt(totalPages, this.pageSize) + 1);

      }

      return totalPages;

    }

    updateOrganizationsPage($event) {

      this.organizationsPage = $event.value;

    }

}