dual-pick-list-ng
Version:
Dual pick list Component for Angular 2+
323 lines (322 loc) • 16.1 kB
JavaScript
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';
var DualPickListPipe = /** @class */ (function () {
function DualPickListPipe() {
}
/**
* @param {?} items
* @param {?} field
* @param {?} value
* @return {?}
*/
DualPickListPipe.prototype.transform = function (items, field, value) {
if (!items)
return [];
if (!field)
return items;
if (!value || value === '')
return items;
if (typeof value === 'boolean')
return items.filter(function (it) { return it[field] == value || isNullOrUndefined(it[field]); });
else
return items.filter(function (it) {
if (typeof it[field] === 'string')
return it[field].indexOf(value) > -1;
else
return it[field] == value;
});
};
return DualPickListPipe;
}());
DualPickListPipe.decorators = [
{ type: Pipe, args: [{
name: 'searchfilterDualPickList'
},] },
{ type: Injectable },
];
/**
* @nocollapse
*/
DualPickListPipe.ctorParameters = function () { return []; };
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;
};
var PickListComponent = /** @class */ (function () {
function PickListComponent() {
var _this = this;
this.onTransaction = new EventEmitter();
this.dispatchTransaction = function (notMove, toMove) {
_this.onTransaction.emit({
notMove: notMove.map((function (i) {
var isSelected = i.isSelected, rest = __rest(i, ["isSelected"]);
return rest;
})),
toMove: toMove.map((function (i) {
var isSelected = i.isSelected, rest = __rest(i, ["isSelected"]);
return rest;
}))
});
};
}
/**
* @return {?}
*/
PickListComponent.prototype.ngOnInit = function () {
this.iconsDirection = 'glyphicon glyphicon-arrow-' + this.position;
this.items = this.list.map(function (it) { return Object.assign({}, it, { isSelected: false }); }).slice();
this.header = this.headerConfig.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
this.filterBy = this.header[0].key;
};
/**
* @param {?} objChange
* @return {?}
*/
PickListComponent.prototype.ngOnChanges = function (objChange) {
if (objChange.list)
this.items = objChange.list.currentValue.slice();
if (objChange.headerConfig)
this.header = objChange.headerConfig.currentValue.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
if (objChange.filterBy)
this.filterBy = objChange.filterBy.currentValue;
};
/**
* @return {?}
*/
PickListComponent.prototype.moveAll = function () {
this.dispatchTransaction([], this.items);
};
/**
* @return {?}
*/
PickListComponent.prototype.moveJustSelected = function () {
this.dispatchTransaction(this.items.filter(function (it) { return !it.isSelected; }), this.items.filter(function (it) { return it.isSelected; }));
};
/**
* @param {?} field
* @return {?}
*/
PickListComponent.prototype.setFilterBy = function (field) {
this.filterBy = field;
};
/**
* @return {?}
*/
PickListComponent.prototype.transact = function () {
this.dispatchTransaction(this.items, []);
};
return PickListComponent;
}());
PickListComponent.decorators = [
{ type: Component, args: [{
selector: 'app-pick-list',
template: "\n <div>\n <label>{{textLabel ? textLabel: 'Not Selected'}}</label>\n <div class=\"form-group input-icon-right\" style=\"margin-bottom: 0px\">\n <i class=\"glyphicon glyphicon-search\"></i>\n <input type=\"text\"\n class=\"form-control\"\n [(ngModel)]=\"filter\"\n placeholder=\"{{placeHolder ? placeHolder :'Search'}}\">\n </div>\n\n <div class=\"btn-group buttons\">\n\n <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>\n <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>\n\n <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>\n <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>\n\n </div>\n\n <div style=\"overflow: scroll; height: 192px\" >\n <table class=\"table table-bordered\" >\n <thead>\n <tr>\n <th *ngFor=\"let h of header\" class=\"text-left\" (click)=\"setFilterBy(h.key)\" [ngClass]=\"{'filter-by': filterBy === h.key}\">{{h.text}}</th>\n </tr>\n </thead>\n <tbody class=\"text-left\">\n <tr *ngFor=\"let itemList of items | searchfilterDualPickList : filterBy : filter\" (click)=\"itemList.isSelected = !itemList.isSelected\" [ngClass]=\"{'dl-selected':itemList.isSelected}\">\n <td *ngFor=\"let l of header | searchfilterDualPickList : 'hidden' : false \" class=\"text-left\">\n <span *ngIf=\"!l.custom\">{{itemList[l.key]}}</span>\n <select *ngIf=\"l.select\" class=\"form-control\" name=\"{{'selectLeft'+'-'+index}}\" id=\"selectLeft+'-'+index\" [(ngModel)]=\"itemList[l.key]\" style=\"height: inherit;\" (ngChange)=\"transact()\">\n <option *ngFor=\"let item of l.select.list\" value=\"{{item.id}}\">{{item.text}}</option>\n </select>\n <input *ngIf=\"l.checkbox\" type=\"checkbox\" [(ngModel)]=\"itemList[l.key]\" (change)=\"transact()\">\n <button *ngIf=\"l.button\" class=\"btn btn-default\" (click)=\"l.button.onClick(itemList)\">{{l.text}}</button>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n ",
styles: ["\n .dl-selected{\n background: #efefef !important;\n }\n\n .filter-by{\n background: #eee !important;\n }\n "]
},] },
];
/**
* @nocollapse
*/
PickListComponent.ctorParameters = function () { return []; };
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;
};
var DualPickListComponent = /** @class */ (function () {
function DualPickListComponent() {
var _this = this;
this.onTransaction = new EventEmitter();
this.dispatchTransaction = function () {
var /** @type {?} */ left = _this.itemsLeft.map((function (i) {
var left = i.left, right = i.right, isSelected = i.isSelected, rest = __rest$1(i, ["left", "right", "isSelected"]);
return rest;
}));
var /** @type {?} */ right = _this.itemsRight.map((function (i) {
var left = i.left, right = i.right, isSelected = i.isSelected, rest = __rest$1(i, ["left", "right", "isSelected"]);
return rest;
}));
_this.onTransaction.emit({
leftList: left,
rightList: right
});
};
}
/**
* @return {?}
*/
DualPickListComponent.prototype.ngOnInit = function () {
this.itemsLeft = this.list.filter(function (i) { return i.left; }).slice().map(function (it) { return Object.assign({}, it, { isSelected: false }); });
this.itemsRight = this.list.filter(function (i) { return i.right; }).slice().map(function (it) { return Object.assign({}, it, { isSelected: false }); });
this.headerLeft = this.headerConfig.left.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
this.headerRight = this.headerConfig.right.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
this.filterLeftBy = this.headerLeft[0].key;
this.filterRightBy = this.headerRight[0].key;
};
/**
* @param {?} objChange
* @return {?}
*/
DualPickListComponent.prototype.ngOnChanges = function (objChange) {
if (objChange.list) {
this.itemsLeft = objChange.list.currentValue.filter(function (i) { return i.left; }).slice().map(function (it) { return Object.assign({}, it, { isSelected: false }); });
this.itemsRight = objChange.list.currentValue.filter(function (i) { return i.right; }).slice().map(function (it) { return Object.assign({}, it, { isSelected: false }); });
}
if (objChange.headerConfig) {
this.headerLeft = objChange.headerConfig.currentValue.left.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
this.headerRight = objChange.headerConfig.currentValue.right.slice().filter(function (i) { return !i.hidden || isNullOrUndefined(i.hidden); });
}
};
/**
* @param {?} data
* @return {?}
*/
DualPickListComponent.prototype.getTransactionFromLeft = function (data) {
this.itemsRight = this.itemsRight.concat(data.toMove).map(function (i) { return Object.assign({}, i, { isSelected: false, left: false, right: true }); });
this.itemsLeft = data.notMove.map(function (it) { return it; });
this.dispatchTransaction();
};
/**
* @param {?} data
* @return {?}
*/
DualPickListComponent.prototype.getTransactionFromRight = function (data) {
this.itemsLeft = this.itemsLeft.concat(data.toMove).map(function (i) { return Object.assign({}, i, { isSelected: false, left: true, right: false }); });
this.itemsRight = data.notMove.map(function (it) { return it; });
this.dispatchTransaction();
};
return DualPickListComponent;
}());
DualPickListComponent.decorators = [
{ type: Component, args: [{
selector: 'app-dual-pick-list',
template: "\n <div class=\"bootstrap-duallistbox-container\">\n <div class=\"col-md-6\">\n <app-pick-list [position]=\"'right'\" [textLabel]=\"textKeyLeftList\" [list]=\"itemsLeft\" [placeHolder]=\"placeHolder\" [headerConfig]=\"headerLeft\" (onTransaction)=\"getTransactionFromLeft($event)\"></app-pick-list>\n </div>\n <div class=\"box2 col-md-6\">\n <app-pick-list [position]=\"'left'\" [textLabel]=\"textKeyRightList\" [list]=\"itemsRight\" [placeHolder]=\"placeHolder\" [headerConfig]=\"headerRight\" (onTransaction)=\"getTransactionFromRight($event)\"></app-pick-list>\n </div>\n\n </div>\n ",
styles: ["\n\n "]
},] },
];
/**
* @nocollapse
*/
DualPickListComponent.ctorParameters = function () { return []; };
DualPickListComponent.propDecorators = {
'textKeyLeftList': [{ type: Input },],
'textKeyRightList': [{ type: Input },],
'list': [{ type: Input },],
'placeHolder': [{ type: Input },],
'headerConfig': [{ type: Input },],
'onTransaction': [{ type: Output },],
};
var DualPickListModule = /** @class */ (function () {
function DualPickListModule() {
}
return DualPickListModule;
}());
DualPickListModule.decorators = [
{ type: NgModule, args: [{
imports: [
BrowserModule,
FormsModule
],
declarations: [
PickListComponent,
DualPickListPipe,
DualPickListComponent
],
exports: [
DualPickListComponent,
PickListComponent,
DualPickListPipe
]
},] },
];
/**
* @nocollapse
*/
DualPickListModule.ctorParameters = function () { return []; };
var TypeSelectDualPickListModel = /** @class */ (function () {
/**
* @param {?} id
* @param {?} text
*/
function TypeSelectDualPickListModel(id, text) {
this.id = id;
this.text = text;
}
return TypeSelectDualPickListModel;
}());
var HeaderTypeButtonDualPickListModel = /** @class */ (function () {
/**
* @param {?=} onClickFn
*/
function HeaderTypeButtonDualPickListModel(onClickFn) {
if (onClickFn === void 0) { onClickFn = null; }
this.onClick = onClickFn;
}
return HeaderTypeButtonDualPickListModel;
}());
var ItemDualPickListModel = /** @class */ (function () {
function ItemDualPickListModel() {
}
return ItemDualPickListModel;
}());
var HeaderTypeSelectDualPickListModel = /** @class */ (function () {
/**
* @param {?=} list
*/
function HeaderTypeSelectDualPickListModel(list) {
if (list === void 0) { list = []; }
this.list = list;
}
return HeaderTypeSelectDualPickListModel;
}());
var HeaderDualPickListModel = /** @class */ (function () {
/**
* @param {?} text
* @param {?} key
* @param {?=} custom
* @param {?=} selectList
* @param {?=} buttonFn
* @param {?=} checkbox
*/
function HeaderDualPickListModel(text, key, custom, selectList, buttonFn, checkbox) {
if (custom === void 0) { custom = false; }
if (selectList === void 0) { selectList = null; }
if (buttonFn === void 0) { buttonFn = null; }
if (checkbox === void 0) { 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;
}
return HeaderDualPickListModel;
}());
/**
* 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.es5.js.map