File

packages/core/src/lib/pagination/pagination.ts

Description

This class can be used to control the loading behaviour of external data.

Index

Properties
Methods

Constructor

constructor(config?: ListConfig, total?: number)

You can init each Pagination instance with an optional config. If no config is provided, it will default to {page: 1, size: 25}.

Parameters :
Name Type Optional
config ListConfig<T> Yes
total number Yes

Properties

Private change
Default value : new Subject()

Subject for tracking changes.

Public change$
Type : Observable<any>
Default value : this.change.asObservable()

Observable that is nexted when the pagination has changed.

Protected config
Type : ListConfig<T>

The pagination config

Public pages
Type : Array<any>

Array to iterate over the number of pages.

Protected total
Type : number

The total number of items that is being paginated. It can be changed via setTotal.

Methods

first
first()

Loads the first Page

Returns : void
getPage
getPage()

Retrieves the current page

Returns : number
getPages
getPages()

Retrieves the number of pages

Returns : number
isActive
isActive(page: number)

Returns true if the given page number is currently active.

Parameters :
Name Type Optional
page number No
Returns : boolean
isFirst
isFirst()

Returns true if the current page is the first one

Returns : boolean
isLast
isLast()

Returns true if the current page is the last one

Returns : boolean
last
last()

Loads the last page

Returns : void
Protected load
load(config?: ListConfig)

Merges config and fires next on change

Parameters :
Name Type Optional
config ListConfig<T> Yes
Returns : void
next
next()

Loads the next page. Throws error if already on last page.

Returns : void
params
params()

Returns an object with all relevant infos about the current state of pagination

Returns : { page: number; pages: number; total: number; from: number; to: any; size: any; availableSizes: a...
prev
prev()

Loads the previous page. Throws error if already on first page.

Returns : void
select
select(page: number, silent)

Selects the given page number

Parameters :
Name Type Optional Default value
page number No
silent No false
Returns : void
setTotal
setTotal(total: number)

Sets the total number of items and calculcates the page count.

Parameters :
Name Type Optional
total number No
Returns : void
slice
slice(items: Array)

slices a given array according to the current pagination state

Parameters :
Name Type Optional
items Array<any> No
Returns : Array<any>
updateSize
updateSize(size: number)

updates the size of the pages.

Parameters :
Name Type Optional
size number No
Returns : void

Pagination

Pagination can be used to keep track of the pages of arbitrary items.

const pagination = new Pagination({ size: 10 });
pagination.setTotal(50); //tells the pagination that it should paginate over 50 items.
pagination.getPages(); //5

See list.ts/list.component for example usage.

import { Subject, Observable } from 'rxjs';
import { ListConfig } from '../list/list-config.interface';

/** This class can be used to control the loading behaviour of external data. */
export class Pagination<T> {
  /** The total number of items that is being paginated. It can be changed via setTotal. */
  protected total: number;
  /** The pagination config */
  protected config: ListConfig<T>;
  /** Array to iterate over the number of pages. */
  public pages: Array<any>;
  /** Subject for tracking changes. */
  private change = new Subject();
  /** Observable that is nexted when the pagination has changed. */
  public change$: Observable<any> = this.change.asObservable();

  /** You can init each Pagination instance with an optional config.
   * If no config is provided, it will default to ```{page: 1, size: 25}```. */
  constructor(config?: ListConfig<T>, total?: number) {
    this.config = { page: 1, size: 25 };
    Object.assign(this.config, config);
    Object.assign(this.config, {
      availableSizes: Array.from(
        new Set(
          [this.config.size]
            .concat(this.config.availableSizes || [10, 25, 50, 100], [this.config.size])
            .sort((a, b) => a - b),
        ),
      ),
    });
    if (total) {
      this.setTotal(total);
    }
  }

  /** Retrieves the current page */
  getPage(): number {
    return this.config.page;
  }

  /** Retrieves the number of pages */
  getPages(): number {
    return this.pages ? this.pages.length : 0;
  }

  /** Loads the next page. Throws error if already on last page. */
  next(): void {
    if (this.isLast()) {
      return; // already last page
    }
    this.config.page += 1;
    this.load();
  }

  /** Loads the previous page. Throws error if already on first page. */
  prev(): void {
    if (this.isFirst()) {
      return; // already first page
    }
    this.config.page -= 1;
    this.load();
  }

  /**
   * Sets the total number of items and calculcates the page count.
   * */
  setTotal(total: number) {
    /* if (this.total !== total) {
      this.change.next(this.config);
    } */
    this.total = total;
    this.pages = new Array(Math.ceil(this.total / this.config.size));
    if (this.config.page !== 1 && this.config.page > this.pages.length) {
      this.config.page = this.pages.length || 1;
      this.load();
    }
  }

  /** Merges config and fires next on change */
  protected load(config?: ListConfig<T>): void {
    if (config) {
      Object.assign(this.config, config);
    }
    this.change.next(this.config);
  }

  /** Selects the given page number */
  select(page: number, silent = false): void {
    if (page === this.config.page || silent) {
      this.config.page = page;
      return;
    }
    this.load({ page: page });
  }

  /** Loads the first Page */
  first(): void {
    this.load({ page: 1 });
  }

  /** Loads the last page */
  last() {
    if (!this.pages) {
      throw new Error(`Cannot load last page without knowing the item count.
        Call setTotal(itemCount) before loading.`);
    }
    this.load({ page: this.pages.length });
  }

  /** Returns true if the given page number is currently active.*/
  isActive(page: number): boolean {
    return this.config.page === page;
  }

  /** Returns true if the current page is the first one */
  isFirst(): boolean {
    return this.config.page === 1;
  }

  /** Returns true if the current page is the last one */
  isLast(): boolean {
    if (!this.pages) {
      return true;
    }
    return this.config.page === this.pages.length;
  }

  /** slices a given array according to the current pagination state */
  slice(items: Array<any>): Array<any> {
    return items.slice((this.config.page - 1) * this.config.size, this.config.page * this.config.size);
  }

  /** Returns an object with all relevant infos about the current state of pagination */
  params() {
    return {
      page: this.getPage(),
      pages: this.getPages(),
      total: this.total,
      from: (this.getPage() - 1) * this.config.size + 1,
      to: Math.min(this.getPage() * this.config.size, this.total),
      size: this.config.size,
      availableSizes: this.config.availableSizes,
    };
  }
  /** updates the size of the pages.  */
  updateSize(size: number) {
    if (!size) {
      return;
    }
    this.load({ size, page: 1 });
  }
}

result-matching ""

    No results matching ""