dual-pick-list-ng/dual-pick-list-ng.js

Dual pick list Component for Angular 2+

import { Component, EventEmitter, Injectable, Input, NgModule, Output, Pipe } from '@angular/core';
import { isNullOrUndefined } from 'util';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

class DualPickListPipe {
    /**
     * @param {?} items
     * @param {?} field
     * @param {?} value
     * @return {?}
     */
    transform(items, field, value) {
        if (!items)
            return [];
        if (!field)
            return items;
        if (!value || value === '')
            return items;
        if (typeof value === 'boolean')
            return items.filter(it => it[field] == value || isNullOrUndefined(it[field]));
        else
            return items.filter(it => {
                if (typeof it[field] === 'string')
                    return it[field].indexOf(value) > -1;
                else
                    return it[field] == value;
            });
    }
}
DualPickListPipe.decorators = [
    { type: Pipe, args: [{
                name: 'searchfilterDualPickList'
            },] },
    { type: Injectable },
];
/**
 * @nocollapse
 */
DualPickListPipe.ctorParameters = () => [];

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
class PickListComponent {
    constructor() {
        this.onTransaction = new EventEmitter();
        this.dispatchTransaction = (notMove, toMove) => {
            this.onTransaction.emit({
                notMove: notMove.map((i => {
                    let { isSelected } = i, rest = __rest(i, ["isSelected"]);
                    return rest;
                })),
                toMove: toMove.map((i => {
                    let { isSelected } = i, rest = __rest(i, ["isSelected"]);
                    return rest;
                }))
            });
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.iconsDirection = 'glyphicon glyphicon-arrow-' + this.position;
        this.items = [...this.list.map(it => { return Object.assign({}, it, { isSelected: false }); })];
        this.header = [...this.headerConfig].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
        this.filterBy = this.header[0].key;
    }
    /**
     * @param {?} objChange
     * @return {?}
     */
    ngOnChanges(objChange) {
        if (objChange.list)
            this.items = [...objChange.list.currentValue];
        if (objChange.headerConfig)
            this.header = [...objChange.headerConfig.currentValue].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
        if (objChange.filterBy)
            this.filterBy = objChange.filterBy.currentValue;
    }
    /**
     * @return {?}
     */
    moveAll() {
        this.dispatchTransaction([], this.items);
    }
    /**
     * @return {?}
     */
    moveJustSelected() {
        this.dispatchTransaction(this.items.filter(it => !it.isSelected), this.items.filter(it => it.isSelected));
    }
    /**
     * @param {?} field
     * @return {?}
     */
    setFilterBy(field) {
        this.filterBy = field;
    }
    /**
     * @return {?}
     */
    transact() {
        this.dispatchTransaction(this.items, []);
    }
}
PickListComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-pick-list',
                template: `
    <div>
      <label>{{textLabel ? textLabel: 'Not Selected'}}</label>
      <div class="form-group input-icon-right" style="margin-bottom: 0px">
        <i class="glyphicon glyphicon-search"></i>
        <input type="text"
               class="form-control"
               [(ngModel)]="filter"
               placeholder="{{placeHolder ? placeHolder :'Search'}}">
      </div>

      <div class="btn-group buttons">

        <button *ngIf="position==='right'" type="button" class="btn moveall btn-default" title="Move all" (click)="moveAll()"><i class="{{iconsDirection}}"></i> <i class="{{iconsDirection}}"></i></button>
        <button *ngIf="position==='right'" type="button" class="btn move btn-default" style="margin-left: 0" title="Move selected" (click)="moveJustSelected()"><i class="{{iconsDirection}}"></i></button>

        <button *ngIf="position==='left'" type="button" class="btn move btn-default" style="margin-left: 0" title="Move selected" (click)="moveJustSelected()"><i class="{{iconsDirection}}"></i></button>
        <button *ngIf="position==='left'" type="button" class="btn moveall btn-default" title="Move all" (click)="moveAll()"><i class="{{iconsDirection}}"></i> <i class="{{iconsDirection}}"></i></button>

      </div>

      <div style="overflow: scroll; height: 192px" >
        <table class="table table-bordered" >
          <thead>
          <tr>
            <th *ngFor="let h of header" class="text-left" (click)="setFilterBy(h.key)" [ngClass]="{'filter-by': filterBy === h.key}">{{h.text}}</th>
          </tr>
          </thead>
          <tbody class="text-left">
          <tr *ngFor="let itemList of items | searchfilterDualPickList : filterBy : filter" (click)="itemList.isSelected = !itemList.isSelected" [ngClass]="{'dl-selected':itemList.isSelected}">
            <td *ngFor="let l of header |  searchfilterDualPickList : 'hidden' : false " class="text-left">
              <span *ngIf="!l.custom">{{itemList[l.key]}}</span>
              <select *ngIf="l.select" class="form-control" name="{{'selectLeft'+'-'+index}}" id="selectLeft+'-'+index" [(ngModel)]="itemList[l.key]" style="height: inherit;" (ngChange)="transact()">
                <option *ngFor="let item of l.select.list" value="{{item.id}}">{{item.text}}</option>
              </select>
              <input *ngIf="l.checkbox" type="checkbox" [(ngModel)]="itemList[l.key]" (change)="transact()">
              <button *ngIf="l.button" class="btn btn-default" (click)="l.button.onClick(itemList)">{{l.text}}</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
  `,
                styles: [`
    .dl-selected{
      background: #efefef !important;
    }

    .filter-by{
      background: #eee !important;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
PickListComponent.ctorParameters = () => [];
PickListComponent.propDecorators = {
    'textLabel': [{ type: Input },],
    'list': [{ type: Input },],
    'placeHolder': [{ type: Input },],
    'headerConfig': [{ type: Input },],
    'position': [{ type: Input },],
    'onTransaction': [{ type: Output },],
};

var __rest$1 = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
class DualPickListComponent {
    constructor() {
        this.onTransaction = new EventEmitter();
        this.dispatchTransaction = () => {
            let /** @type {?} */ left = this.itemsLeft.map((i => {
                let { left, right, isSelected } = i, rest = __rest$1(i, ["left", "right", "isSelected"]);
                return rest;
            }));
            let /** @type {?} */ right = this.itemsRight.map((i => {
                let { left, right, isSelected } = i, rest = __rest$1(i, ["left", "right", "isSelected"]);
                return rest;
            }));
            this.onTransaction.emit({
                leftList: left,
                rightList: right
            });
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.itemsLeft = [...this.list.filter(i => i.left)].map(it => { return Object.assign({}, it, { isSelected: false }); });
        this.itemsRight = [...this.list.filter(i => i.right)].map(it => { return Object.assign({}, it, { isSelected: false }); });
        this.headerLeft = [...this.headerConfig.left].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
        this.headerRight = [...this.headerConfig.right].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
        this.filterLeftBy = this.headerLeft[0].key;
        this.filterRightBy = this.headerRight[0].key;
    }
    /**
     * @param {?} objChange
     * @return {?}
     */
    ngOnChanges(objChange) {
        if (objChange.list) {
            this.itemsLeft = [...objChange.list.currentValue.filter(i => i.left)].map(it => { return Object.assign({}, it, { isSelected: false }); });
            this.itemsRight = [...objChange.list.currentValue.filter(i => i.right)].map(it => { return Object.assign({}, it, { isSelected: false }); });
        }
        if (objChange.headerConfig) {
            this.headerLeft = [...objChange.headerConfig.currentValue.left].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
            this.headerRight = [...objChange.headerConfig.currentValue.right].filter(i => !i.hidden || isNullOrUndefined(i.hidden));
        }
    }
    /**
     * @param {?} data
     * @return {?}
     */
    getTransactionFromLeft(data) {
        this.itemsRight = this.itemsRight.concat(data.toMove).map(i => { return Object.assign({}, i, { isSelected: false, left: false, right: true }); });
        this.itemsLeft = data.notMove.map(it => it);
        this.dispatchTransaction();
    }
    /**
     * @param {?} data
     * @return {?}
     */
    getTransactionFromRight(data) {
        this.itemsLeft = this.itemsLeft.concat(data.toMove).map(i => { return Object.assign({}, i, { isSelected: false, left: true, right: false }); });
        this.itemsRight = data.notMove.map(it => it);
        this.dispatchTransaction();
    }
}
DualPickListComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-dual-pick-list',
                template: `
      <div class="bootstrap-duallistbox-container">
          <div class="col-md-6">
              <app-pick-list [position]="'right'" [textLabel]="textKeyLeftList" [list]="itemsLeft" [placeHolder]="placeHolder" [headerConfig]="headerLeft" (onTransaction)="getTransactionFromLeft($event)"></app-pick-list>
          </div>
          <div class="box2 col-md-6">
              <app-pick-list [position]="'left'" [textLabel]="textKeyRightList" [list]="itemsRight" [placeHolder]="placeHolder" [headerConfig]="headerRight" (onTransaction)="getTransactionFromRight($event)"></app-pick-list>
          </div>

      </div>
    `,
                styles: [`

    `]
            },] },
];
/**
 * @nocollapse
 */
DualPickListComponent.ctorParameters = () => [];
DualPickListComponent.propDecorators = {
    'textKeyLeftList': [{ type: Input },],
    'textKeyRightList': [{ type: Input },],
    'list': [{ type: Input },],
    'placeHolder': [{ type: Input },],
    'headerConfig': [{ type: Input },],
    'onTransaction': [{ type: Output },],
};

class DualPickListModule {
}
DualPickListModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    BrowserModule,
                    FormsModule
                ],
                declarations: [
                    PickListComponent,
                    DualPickListPipe,
                    DualPickListComponent
                ],
                exports: [
                    DualPickListComponent,
                    PickListComponent,
                    DualPickListPipe
                ]
            },] },
];
/**
 * @nocollapse
 */
DualPickListModule.ctorParameters = () => [];

class TypeSelectDualPickListModel {
    /**
     * @param {?} id
     * @param {?} text
     */
    constructor(id, text) {
        this.id = id;
        this.text = text;
    }
}

class HeaderTypeButtonDualPickListModel {
    /**
     * @param {?=} onClickFn
     */
    constructor(onClickFn = null) {
        this.onClick = onClickFn;
    }
}

class ItemDualPickListModel {
    constructor() {
    }
}

class HeaderTypeSelectDualPickListModel {
    /**
     * @param {?=} list
     */
    constructor(list = []) {
        this.list = list;
    }
}

class HeaderDualPickListModel {
    /**
     * @param {?} text
     * @param {?} key
     * @param {?=} custom
     * @param {?=} selectList
     * @param {?=} buttonFn
     * @param {?=} checkbox
     */
    constructor(text, key, custom = false, selectList = null, buttonFn = null, checkbox = null) {
        this.text = text;
        this.key = key;
        this.custom = custom;
        this.select = selectList ? new HeaderTypeSelectDualPickListModel(selectList) : null;
        this.button = buttonFn ? new HeaderTypeButtonDualPickListModel(buttonFn) : null;
        this.checkbox = checkbox;
    }
}

/**
 * Generated bundle index. Do not edit.
 */

export { DualPickListModule, TypeSelectDualPickListModel, HeaderTypeButtonDualPickListModel, ItemDualPickListModel, HeaderTypeSelectDualPickListModel, HeaderDualPickListModel, DualPickListComponent as ɵc, PickListComponent as ɵa, DualPickListPipe as ɵb };
//# sourceMappingURL=dual-pick-list-ng.js.map