fabric8-planner
Version:
A planner front-end for Fabric8.
214 lines • 8.88 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { cloneDeep } from 'lodash';
import { LabelService } from './../../services/label.service';
// ngrx stuff
import { Store } from '@ngrx/store';
import * as LabelActions from './../../actions/label.actions';
var LabelSelectorComponent = /** @class */ (function () {
function LabelSelectorComponent(labelService, store) {
this.labelService = labelService;
this.store = store;
this.allowUpdate = true;
this.onSelectLabel = new EventEmitter();
this.onOpenSelector = new EventEmitter();
this.onCloseSelector = new EventEmitter();
this.activeAddLabel = false;
this.backup = [];
this.colorPickerActive = false;
this.colors = [];
this.createDisabled = true;
this.labels = [];
this.newSelectedColor = {};
this.searchValue = '';
this.allLabels = [];
this.selectedLabels = [];
this._selectedLabelsBackup = [];
}
Object.defineProperty(LabelSelectorComponent.prototype, "allLabelsSetter", {
set: function (labels) {
var _this = this;
this.allLabels = labels.slice();
this.createDisabled = true;
this.backup = cloneDeep(this.allLabels.map(function (label) {
return {
id: label.id,
color: label.backgroundColor,
border: label.borderColor,
name: label.name,
selected: false
};
}));
if (this.searchValue.length) {
this.labels =
cloneDeep(this.backup.filter(function (i) { return i.name.indexOf(_this.searchValue) > -1; }));
}
else {
this.labels = cloneDeep(this.backup);
}
if (this.labelnameInput) {
this.labelnameInput.nativeElement.value = '';
this.labelnameInput.nativeElement.focus();
}
this.updateSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(LabelSelectorComponent.prototype, "selectedLabelsSetter", {
set: function (labels) {
this.selectedLabels = cloneDeep(labels);
this._selectedLabelsBackup = cloneDeep(labels);
this.updateSelection();
},
enumerable: true,
configurable: true
});
LabelSelectorComponent.prototype.ngOnInit = function () {
this.colors = [
{ color: '#fbdebf', border: '#f39d3c' },
{ color: '#f7bd7f', border: '#f39d3c' },
{ color: '#fbeabc', border: '#f39d3c' },
{ color: '#f9d67a', border: '#f39d3c' },
{ color: '#e4f5bc', border: '#ace12e' },
{ color: '#cfe7cd', border: '#6ec664' },
{ color: '#9ecf99', border: '#6ec664' },
{ color: '#bedee1', border: '#3a9ca6' },
{ color: '#7dbdc3', border: '#3a9ca6' },
{ color: '#beedf9', border: '#35caed' },
{ color: '#7cdbf3', border: '#35caed' },
{ color: '#c7bfff', border: '#8461f7' },
{ color: '#a18fff', border: '#8461f7' },
{ color: '#ededed', border: '#bbbbbb' },
{ color: '#d1d1d1', border: '#bbbbbb' }
];
this.newSelectedColor = this.colors[Math.floor(Math.random() * this.colors.length)];
};
LabelSelectorComponent.prototype.onSelect = function (event) {
var findSelectedIndex = this.selectedLabels.findIndex(function (i) { return i.id === event.id; });
if (findSelectedIndex > -1) {
this.selectedLabels.splice(findSelectedIndex, 1);
}
else {
var findLabel = cloneDeep(this.allLabels.find(function (i) { return i.id === event.id; }));
if (findLabel) {
this.selectedLabels.push(findLabel);
}
}
this.updateSelection();
this.onSelectLabel.emit(cloneDeep(this.selectedLabels));
};
LabelSelectorComponent.prototype.updateSelection = function () {
var _this = this;
this.labels.forEach(function (label, index) {
if (_this.selectedLabels.find(function (l) { return label.id === l.id; })) {
_this.labels[index].selected = true;
}
else {
_this.labels[index].selected = false;
}
});
this.backup.forEach(function (label, index) {
if (_this.selectedLabels.find(function (l) { return label.id === l.id; })) {
_this.backup[index].selected = true;
}
else {
_this.backup[index].selected = false;
}
});
};
LabelSelectorComponent.prototype.onSearch = function (event) {
var needle = event.trim();
this.searchValue = needle;
if (needle.length) {
this.labels = cloneDeep(this.backup.filter(function (i) {
return i.name.toLocaleLowerCase().indexOf(needle.toLocaleLowerCase()) > -1;
}));
}
else {
this.labels = cloneDeep(this.backup);
}
};
LabelSelectorComponent.prototype.clickOnAddLabel = function () {
this.newSelectedColor = this.colors[Math.floor(Math.random() * this.colors.length)];
this.activeAddLabel = true;
};
LabelSelectorComponent.prototype.closeAddLabel = function () {
this.activeAddLabel = false;
};
LabelSelectorComponent.prototype.toggleColorPicker = function () {
this.colorPickerActive = !this.colorPickerActive;
};
LabelSelectorComponent.prototype.selectColor = function (color) {
this.newSelectedColor = color;
};
LabelSelectorComponent.prototype.createLabel = function (name) {
if (name.trim() === '' || this.createDisabled) {
return;
}
this.createDisabled = true;
var labelPayload = {
attributes: {
'name': name,
'background-color': this.newSelectedColor.color,
'border-color': this.newSelectedColor.border
},
type: 'labels'
};
this.store.dispatch(new LabelActions.Add(labelPayload));
};
LabelSelectorComponent.prototype.onOpen = function (event) {
this.onOpenSelector.emit('open');
};
LabelSelectorComponent.prototype.onClose = function (event) {
var _this = this;
// Setting search input to empty string
this.dropdownRef.setSearchText('');
// Thus reset the value
this.labels = cloneDeep(this.backup);
var compare1 = this.selectedLabels.filter(function (i) { return _this._selectedLabelsBackup.findIndex(function (b) { return b.id === i.id; }) === -1; });
var compare2 = this._selectedLabelsBackup.filter(function (i) { return _this.selectedLabels.findIndex(function (b) { return b.id === i.id; }) === -1; });
if (compare1.length !== 0 || compare2.length !== 0) {
this.onCloseSelector.emit(cloneDeep(this.selectedLabels));
}
};
LabelSelectorComponent.prototype.openDropdown = function () {
this.dropdownRef.openDropdown();
};
LabelSelectorComponent.prototype.closeDropdown = function () {
this.dropdownRef.closeDropdown();
};
LabelSelectorComponent.prototype.onAddLabelInput = function (val) {
if (val.trim().length === 0 && val.length) {
this.labelnameInput.nativeElement.value = '';
this.createDisabled = true;
}
else {
this.createDisabled = false;
}
};
LabelSelectorComponent.decorators = [
{ type: Component, args: [{
selector: 'label-selector',
template: require('./label-selector.component.html'),
styles: [require('./label-selector.component.css').toString()]
},] },
];
/** @nocollapse */
LabelSelectorComponent.ctorParameters = function () { return [
{ type: LabelService, },
{ type: Store, },
]; };
LabelSelectorComponent.propDecorators = {
'labelnameInput': [{ type: ViewChild, args: ['labelname',] },],
'dropdownRef': [{ type: ViewChild, args: ['dropdown',] },],
'allLabelsSetter': [{ type: Input, args: ['allLabels',] },],
'selectedLabelsSetter': [{ type: Input, args: ['selectedLabels',] },],
'allowUpdate': [{ type: Input },],
'onSelectLabel': [{ type: Output },],
'onOpenSelector': [{ type: Output },],
'onCloseSelector': [{ type: Output },],
};
return LabelSelectorComponent;
}());
export { LabelSelectorComponent };
//# sourceMappingURL=label-selector.component.js.map