ng-metamagic-extensions
Version:
[](https://badge.fury.io/js/ng-metamagic-extensions) []() [ • 8.4 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Created by dattaram on 1/6/17.
*/
var core_1 = require("@angular/core");
var itemselector_service_1 = require("./itemselector.service");
var ItemSelectorComponent = (function () {
function ItemSelectorComponent(itemSelectorService) {
this.itemSelectorService = itemSelectorService;
this.availableRecords = new core_1.EventEmitter();
this.selectedRecords = new core_1.EventEmitter();
this.selectedData = [];
}
ItemSelectorComponent.prototype.ngOnInit = function () {
};
ItemSelectorComponent.prototype.ngAfterViewInit = function () {
if (this.httpMethod && this.httpUrl) {
this.itemSelectorService.fetchData(this, this.httpUrl, this.httpMethod);
}
else if (this.MultiSelectBindData) {
this.setData(this.MultiSelectBindData);
}
};
ItemSelectorComponent.prototype.setStyles = function () {
var height;
if (this.height) {
height = this.height + 'px';
}
else {
height = '300px';
}
var styles = {
'position': 'relative',
'height': height
};
return styles;
};
ItemSelectorComponent.prototype.setData = function (httpResponse) {
var responsedata = httpResponse;
var dr = this.dataReader.split(".");
for (var ir = 0; ir < dr.length; ir++) {
responsedata = responsedata[dr[ir]];
}
responsedata.forEach(function (option, index) {
option['isSelected'] = false;
});
this.availableData = responsedata;
};
ItemSelectorComponent.prototype.itemCkick = function (data, index) {
this.switchingObject = data;
this.objectIndex = index;
};
ItemSelectorComponent.prototype.rightSwitch = function () {
var _this = this;
if (!this.switchingObject.isSelected) {
this.selectedData.push(this.switchingObject);
this.switchingObject.isSelected = true;
this.availableData.forEach(function (option, index) {
if (option.isSelected) {
_this.availableData.splice(index, 1);
}
});
this.dataEmitter();
}
};
ItemSelectorComponent.prototype.leftSwitch = function () {
var _this = this;
if (this.switchingObject.isSelected) {
this.availableData.push(this.switchingObject);
this.switchingObject.isSelected = false;
this.selectedData.forEach(function (option, index) {
if (!option.isSelected) {
_this.selectedData.splice(index, 1);
}
});
this.dataEmitter();
}
};
ItemSelectorComponent.prototype.upSwitch = function () {
if (this.switchingObject.isSelected) {
var index = this.selectedData[this.objectIndex];
this.selectedData[this.objectIndex] = this.selectedData[this.objectIndex - 1];
this.selectedData[this.objectIndex - 1] = index;
this.dataEmitter();
}
};
ItemSelectorComponent.prototype.downSwitch = function () {
if (this.switchingObject.isSelected) {
if (this.selectedData.length - 1 != this.objectIndex) {
var index = this.selectedData[this.objectIndex];
this.selectedData[this.objectIndex] = this.selectedData[this.objectIndex + 1];
this.selectedData[this.objectIndex + 1] = index;
this.dataEmitter();
}
}
};
ItemSelectorComponent.prototype.moveTop = function () {
var tempArray = [];
if (this.selectedData.length > 1) {
tempArray[0] = this.selectedData[this.objectIndex];
this.selectedData.splice(this.objectIndex, 1);
this.selectedData.forEach(function (option) {
tempArray.push(option);
});
this.selectedData = tempArray;
this.dataEmitter();
}
};
ItemSelectorComponent.prototype.moveDown = function () {
if (this.switchingObject.isSelected && this.selectedData.length > 1) {
this.selectedData.splice(this.objectIndex, 1);
this.selectedData[this.selectedData.length] = this.switchingObject;
}
this.dataEmitter();
};
ItemSelectorComponent.prototype.dataEmitter = function () {
this.availableRecords.emit(this.availableData);
this.selectedRecords.emit(this.selectedData);
};
return ItemSelectorComponent;
}());
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "height", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "httpUrl", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "dataReader", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "httpMethod", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "MultiSelectBindData", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "displayField", void 0);
__decorate([
core_1.Input()
], ItemSelectorComponent.prototype, "valueField", void 0);
__decorate([
core_1.Output()
], ItemSelectorComponent.prototype, "availableRecords", void 0);
__decorate([
core_1.Output()
], ItemSelectorComponent.prototype, "selectedRecords", void 0);
ItemSelectorComponent = __decorate([
core_1.Component({
selector: 'item-selector',
template: " \n <div class=\"col-lg-5\">\n <div class=\"list-group\" [ngStyle]=\"setStyles()\">\n <button type=\"button\" class=\"list-group-item active\">Available</button>\n <div style=\"height:100%;overflow-y: auto;position:relative;\" >\n <button type=\"button\" class=\"list-group-item\" *ngFor=\"let data of availableData; let i = index\" (click)=\"itemCkick(data,i)\">{{data[displayField]}}</button>\n </div>\n \n </div>\n </div>\n <div class=\"col-lg-2\">\n <div class=\"list-group text-center\" [ngStyle]=\"setStyles()\">\n <button type=\"button\" class=\"list-group-item active\" >Action</button>\n <button-action (onClick)=\"moveTop()\" [type]=\"'default'\" [tooltipMessage]=\"'move top'\" icon=\"triangle-top\"></button-action>\n <button-action (onClick)=\"upSwitch()\" [type]=\"'default'\" [tooltipMessage]=\"'move up'\" icon=\"chevron-up\"></button-action>\n <button-action (onClick)=\"leftSwitch()\" [type]=\"'default'\" [tooltipMessage]=\"'move left'\" icon=\"chevron-left\"></button-action>\n <button-action (onClick)=\"rightSwitch()\" [type]=\"'default'\" [tooltipMessage]=\"'move right'\" icon=\"chevron-right\"></button-action>\n <button-action (onClick)=\"downSwitch()\" [type]=\"'default'\" [tooltipMessage]=\"'move down'\" icon=\"chevron-down\"></button-action>\n <button-action (onClick)=\"moveDown()\" [type]=\"'default'\" [tooltipMessage]=\"'bottom'\" icon=\"triangle-bottom\"></button-action>\n </div>\n </div>\n <div class=\"col-lg-5\">\n <div class=\"list-group\" [ngStyle]=\"setStyles()\">\n <button type=\"button\" class=\"list-group-item active\">selected</button>\n <div style=\"height:100%;overflow-y: auto;position:relative;\" >\n <button type=\"button\" class=\"list-group-item\" *ngFor=\"let data of selectedData; let i = index\" (click)=\"itemCkick(data,i)\">{{data[displayField]}}</button>\n </div>\n </div>\n </div>\n \n ",
providers: [itemselector_service_1.ItemSelectorService]
})
], ItemSelectorComponent);
exports.ItemSelectorComponent = ItemSelectorComponent;