fabric8-planner
Version:
A planner front-end for Fabric8.
169 lines • 7.15 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { cloneDeep } from 'lodash';
var CommonSelectorComponent = /** @class */ (function () {
function CommonSelectorComponent() {
this._internalItems = [];
this.selectedItems = [];
this._selectedItemsBackup = [];
this.allowMultiSelect = false;
this.closeOnSelect = true;
this.headerText = 'Default Header Text';
this.noValueLabel = 'None';
this.allowUpdate = true;
this.itemTruncate = 500;
this.toggleTruncate = 500;
this.onSelectItem = new EventEmitter();
this.onOpenSelector = new EventEmitter();
this.onCloseSelector = new EventEmitter();
this.backup = [];
this.searchValue = '';
this.menuItems = [];
this.isOpen = false;
}
Object.defineProperty(CommonSelectorComponent.prototype, "listItemSetter", {
set: function (val) {
var _this = this;
this.backup = cloneDeep(val);
if (this.searchValue.length) {
this.menuItems =
cloneDeep(this.backup.filter(function (i) { return i.value.indexOf(_this.searchValue) > -1; }));
}
else {
this.menuItems = cloneDeep(this.backup);
}
this.updateSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CommonSelectorComponent.prototype, "selectedItemsSetter", {
set: function (val) {
this.selectedItems = cloneDeep(val);
this._selectedItemsBackup = cloneDeep(val);
this.updateSelection();
},
enumerable: true,
configurable: true
});
CommonSelectorComponent.prototype.onSelect = function (event) {
// If 'No match found' selected then do nothing
if (event.key === null) {
return;
}
var findSelectedIndex = this.selectedItems.findIndex(function (i) { return i.key === event.key; });
if (this.allowMultiSelect) {
if (findSelectedIndex > -1) {
this.selectedItems.splice(findSelectedIndex, 1);
}
else {
var findItem = cloneDeep(this.backup.find(function (i) { return i.key === event.key; }));
if (findItem) {
this.selectedItems.push(findItem);
}
}
}
else {
var findItem = cloneDeep(this.backup.find(function (i) { return i.key === event.key; }));
if (findItem) {
this.selectedItems = [findItem];
}
}
this.updateSelection();
this.onSelectItem.emit(cloneDeep(this.selectedItems));
if (this.closeOnSelect && !this.allowMultiSelect) {
this.dropdownRef.closeDropdown();
}
};
CommonSelectorComponent.prototype.updateSelection = function () {
var _this = this;
this.menuItems.forEach(function (item, index) {
if (_this.selectedItems.find(function (a) { return item.key === a.key; })) {
_this.menuItems[index].selected = true;
}
else {
_this.menuItems[index].selected = false;
}
});
this.backup.forEach(function (item, index) {
if (_this.selectedItems.find(function (a) { return item.key === a.key; })) {
_this.backup[index].selected = true;
}
else {
_this.backup[index].selected = false;
}
});
};
CommonSelectorComponent.prototype.onSearch = function (event) {
var needle = event.trim();
this.searchValue = needle;
if (needle.length) {
this.menuItems = cloneDeep(this.backup.filter(function (i) {
return i.value.toLowerCase().indexOf(needle.toLowerCase()) > -1 ||
i.stickontop;
}));
if (!this.menuItems.length) {
this.menuItems = [{
key: null, value: 'No matches found.',
selected: false, cssLabelClass: undefined
}];
}
}
else {
this.menuItems = cloneDeep(this.backup);
}
};
CommonSelectorComponent.prototype.onOpen = function (event) {
this.isOpen = true;
this.onOpenSelector.emit('open');
};
CommonSelectorComponent.prototype.onClose = function (event) {
var _this = this;
this.isOpen = false;
// Setting search input to empty string
this.dropdownRef.setSearchText('');
// Thus reset the value
this.menuItems = cloneDeep(this.backup);
var compare1 = this.selectedItems.filter(function (i) { return _this._selectedItemsBackup.findIndex(function (b) { return b.key === i.key; }) === -1; });
var compare2 = this._selectedItemsBackup.filter(function (i) { return _this.selectedItems.findIndex(function (b) { return b.key === i.key; }) === -1; });
if (compare1.length !== 0 || compare2.length !== 0) {
this.onCloseSelector.emit(cloneDeep(this.selectedItems));
}
};
CommonSelectorComponent.prototype.openDropdown = function () {
if (this.allowUpdate) {
this.dropdownRef.openDropdown();
}
};
CommonSelectorComponent.prototype.closeDropdown = function () {
this.dropdownRef.closeDropdown();
};
CommonSelectorComponent.prototype.closeSelector = function () { };
CommonSelectorComponent.decorators = [
{ type: Component, args: [{
selector: 'common-selector',
template: require('./common-selector.component.html'),
styles: [require('./common-selector.component.css').toString()],
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
CommonSelectorComponent.ctorParameters = function () { return []; };
CommonSelectorComponent.propDecorators = {
'dropdownRef': [{ type: ViewChild, args: ['dropdown',] },],
'listItemSetter': [{ type: Input, args: ['items',] },],
'selectedItemsSetter': [{ type: Input, args: ['selectedItems',] },],
'allowMultiSelect': [{ type: Input, args: ['allowMultiSelect',] },],
'closeOnSelect': [{ type: Input, args: ['closeOnSelect',] },],
'headerText': [{ type: Input, args: ['headerText',] },],
'noValueLabel': [{ type: Input, args: ['noValueLabel',] },],
'allowUpdate': [{ type: Input, args: ['allowUpdate',] },],
'itemTruncate': [{ type: Input, args: ['itemTruncate',] },],
'toggleTruncate': [{ type: Input, args: ['toggleTruncate',] },],
'onSelectItem': [{ type: Output },],
'onOpenSelector': [{ type: Output },],
'onCloseSelector': [{ type: Output },],
};
return CommonSelectorComponent;
}());
export { CommonSelectorComponent };
//# sourceMappingURL=common-selector.component.js.map