my-test123
Version:
A planner front-end for Fabric8.
206 lines • 8.53 kB
JavaScript
import { EventService } from './../../services/event.service';
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { cloneDeep } from 'lodash';
import { LabelService } from './../../services/label.service';
var LabelSelectorComponent = /** @class */ (function () {
function LabelSelectorComponent(labelService, eventService) {
this.labelService = labelService;
this.eventService = eventService;
this.allLabels = [];
this.selectedLabels = [];
this.onSelectLable = new EventEmitter();
this.onOpenSelector = new EventEmitter();
this.onCloseSelector = new EventEmitter();
this.activeAddLabel = false;
this.backup = [];
this.colorPickerActive = false;
this.colors = [];
this.createDisabled = false;
this.labels = [];
this.newSelectedColor = {};
this.searchValue = '';
}
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.ngOnChanges = function (changes) {
var _this = this;
if (changes.allLabels) {
this.backup = cloneDeep(this.allLabels.map(function (label) {
return {
id: label.id,
color: label.attributes['background-color'],
border: label.attributes['border-color'],
name: label.attributes.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 (changes.selectedLabels) {
this.updateSelection();
}
};
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.onSelectLable.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.indexOf(needle) > -1; }));
}
else {
this.labels = cloneDeep(this.backup);
}
};
LabelSelectorComponent.prototype.clickOnAddLabel = function () {
var _this = this;
this.newSelectedColor = this.colors[Math.floor(Math.random() * this.colors.length)];
this.activeAddLabel = true;
setTimeout(function () {
_this.labelnameInput.nativeElement.focus();
}, 10);
};
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) {
var _this = this;
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.labelService.createLabel(labelPayload)
.subscribe(function (data) {
_this.createDisabled = false;
_this.newSelectedColor = _this.colors[Math.floor(Math.random() * _this.colors.length)];
_this.allLabels = [cloneDeep(data)].concat(_this.allLabels);
var newLabel = {
id: data.id,
color: data.attributes['background-color'],
border: data.attributes['border-color'],
name: data.attributes.name,
selected: false
};
// Emit new label
// TODO: Should be replaced by ngrx/store
_this.eventService.labelAdd.next(data);
_this.backup = [cloneDeep(newLabel)].concat(_this.backup);
if (_this.searchValue === '' ||
(_this.searchValue !== '' &&
name.indexOf(_this.searchValue) > -1)) {
_this.labels = [cloneDeep(newLabel)].concat(_this.labels);
}
_this.labelnameInput.nativeElement.value = '';
_this.labelnameInput.nativeElement.focus();
}, function (err) {
console.log(err);
_this.labelnameInput.nativeElement.value = '';
_this.createDisabled = true;
});
};
LabelSelectorComponent.prototype.onOpen = function (event) {
this.onOpenSelector.emit('open');
};
LabelSelectorComponent.prototype.onClose = function (event) {
this.onCloseSelector.emit(cloneDeep(this.selectedLabels));
};
LabelSelectorComponent.prototype.openDropdown = function () {
this.dropdownRef.openDropdown();
};
LabelSelectorComponent.prototype.closeDropdown = function () {
this.dropdownRef.closeDropdown();
};
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: EventService, },
]; };
LabelSelectorComponent.propDecorators = {
'labelnameInput': [{ type: ViewChild, args: ['labelname',] },],
'dropdownRef': [{ type: ViewChild, args: ['dropdown',] },],
'allLabels': [{ type: Input },],
'selectedLabels': [{ type: Input },],
'onSelectLable': [{ type: Output },],
'onOpenSelector': [{ type: Output },],
'onCloseSelector': [{ type: Output },],
};
return LabelSelectorComponent;
}());
export { LabelSelectorComponent };
//# sourceMappingURL=label-selector.component.js.map