rl-selection-list

rl-selection-list is a class that wires up two rl-ng-tables. It allows user to select multiple rows in one table and add them to the other table. Usually, rl-selection-list should be used with rl-ng-table.

Installation

To install this library, run:

$ npm install @railinc/rl-selection-list --save

Usage

you can import your library in any Angular application:

and then from your Angular Component:

import { RlSelectionList } from '@railinc/rl-selection-list';

Once your library is imported, you can use it in your Angular application:

Initialization

You can initialize a selectionList by providing the common object property name, the rows of from table and the rows of toTable

    this.selectionList = new RlSelectionList(
        ['token'],
        { sourceArray: this.fromTable.rows },
        { sourceArray: this.toTable.rows } 
    );

select(row, type)

You should bind your table cell click event with select(row, type):

    onFromTableCellClick(data) {
        this.selectionList.select(data.row, 'from');
    }

    onToTableCellClick(data) {
        this.selectionList.select(data.row, 'to');
    }

transferObject(from, to, removeAll)

You can transfer multiple rows from one table to the other table with transferObject(from, to, removeAll)

    transferRows(from, to, removeAll) {
        this.selectionList.transferObject(from, to, removeAll);
    }

<div>
  <button (click)="transferAttributes('from', 'to')" [disabled]="! getPendingList('from').length">
    Add
  </button>
  <button (click)="transferAttributes('from', 'to', true)" [disabled]="! this.fromTable.rows.length">
    Add All
  </button>
  <button (click)="transferAttributes('to', 'from')" [disabled]="! getPendingList('to').length">
    Remove
  </button>
  <button (click)="transferAttributes('to', 'from', true)" [disabled]="! this.toTable.rows.length">
    Remove All
  </button>
</div>

getPendingList(type)

getPendingList(type) is to check if from table or to table has selected rows. The parameter type can be either 'from' or 'to';

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Bruce Gong