fabric8-planner
Version:
A planner front-end for Fabric8.
217 lines • 8.33 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
var InlineInputComponent = /** @class */ (function () {
function InlineInputComponent() {
this.type = 'string';
this.disabled = false;
this.placeholder = 'Enter text here';
this.allowOnLineClickEdit = true;
this.onSave = new EventEmitter();
this.inputValue = '';
this.saving = false;
this.editing = false;
this.previousValue = '';
this.errorMessage = '';
}
Object.defineProperty(InlineInputComponent.prototype, "input", {
set: function (val) {
// convert special charecters only the input value is a string
var v = typeof (val) === 'string' ?
this.convertSpecialChar(val) : val;
this.inputValue = v;
this.previousValue = v;
},
enumerable: true,
configurable: true
});
InlineInputComponent.prototype.ngOnInit = function () {
};
InlineInputComponent.prototype.startEditing = function (onLineClick) {
this.errorMessage = '';
if (this.disabled) {
return;
}
// If field was clicked and onLineClick edit is allowed
// Or startEditing was called from the edit icon click
if ((onLineClick && this.allowOnLineClickEdit) || !onLineClick) {
// If the editing is started
if (!this.editing) {
// Set previous value as the value in the field
this.previousValue = this.inputField.nativeElement.value;
// Set editing value as true
this.editing = true;
}
this.inputField.nativeElement.focus();
}
else {
this.inputField.nativeElement.blur();
}
};
InlineInputComponent.prototype.saveClick = function () {
var _this = this;
this.errorMessage = '';
if (this.validateValue(this.inputField.nativeElement.value)) {
this.saving = true;
this.onSave.emit({
value: this.formatValue(this.inputField.nativeElement.value),
callBack: function (v, e) {
if (v === void 0) { v = ''; }
if (e === void 0) { e = ''; }
return _this.handleSave(v, e);
}
});
}
else {
this.errorMessage = "Invalid value for the field type " + this.type;
this.inputField.nativeElement.focus();
}
};
InlineInputComponent.prototype.formatValue = function (value) {
if (this.type === 'integer' || this.type === 'float') {
return parseFloat(value);
}
else {
return value;
}
};
InlineInputComponent.prototype.isFloat = function (val) {
var x = parseFloat(val);
return typeof x === 'number' && Number.isFinite(x) && x >= -2147483648 && x <= 2147483648;
};
InlineInputComponent.prototype.validateValue = function (value) {
if (this.type === 'integer') {
return /^\d+$/.test(value);
}
if (this.type === 'float') {
return this.isFloat(value);
}
return true;
};
InlineInputComponent.prototype.closeClick = function () {
if (this.editing) {
this.errorMessage = '';
this.inputValue = this.previousValue;
this.inputField.nativeElement.value = this.previousValue;
this.previousValue = '';
this.editing = false;
}
};
InlineInputComponent.prototype.handleSave = function (value, error) {
this.errorMessage = error;
this.saving = false;
if (this.errorMessage) { }
else {
this.editing = false;
this.inputValue = value;
}
};
InlineInputComponent.prototype.convertSpecialChar = function (str) {
return str.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, "'");
};
InlineInputComponent.prototype.submitOnEnter = function (event) {
event.preventDefault();
this.saveClick();
this.inputField.nativeElement.blur();
};
InlineInputComponent.prototype.onkeyDown = function (event, text) {
var keycode = event.keyCode ? event.keyCode : event.which;
this.errorMessage = '';
if (this.editing && keycode !== 13) {
// Checking if there is already a '.' in float value
if (this.type === 'float' &&
this.inputField.nativeElement.value.indexOf('.') > -1 &&
keycode === 190) {
event.preventDefault();
return;
}
switch (this.type) {
case 'integer':
if (this.checkNumber(keycode, event)) {
this.isNotValid = false;
}
else {
this.isNotValid = true;
event.preventDefault();
}
break;
case 'float':
if (this.checkNumber(keycode, event, true) || keycode === 190) {
this.isNotValid = false;
}
else {
this.isNotValid = true;
event.preventDefault();
}
break;
case 'string':
this.isNotValid = false;
break;
default:
break;
}
}
if (this.editing && this.type == 'float' && keycode == 13) {
this.saveClick();
}
if (this.isNotValid) {
this.errorMessage = "This is a " + this.type + " field";
}
};
/**
* This function checks every key entry if it's a number or not
* @param keycode
* @param event
* @param allowFloat allows the charecter key to be a '.'
*/
InlineInputComponent.prototype.checkNumber = function (keycode, event, allowFloat) {
if (allowFloat === void 0) { allowFloat = false; }
console.log(keycode, event);
var allowedCodes = [46, 8, 9, 27, 13, 110, 91, 17];
if (allowFloat) {
allowedCodes = allowedCodes.concat([190]);
}
if (allowedCodes.indexOf(keycode) !== -1 ||
// Allow: Ctrl+A
(keycode === 65 && (event.ctrlKey || event.metaKey)) ||
// Allow: Ctrl+C
(keycode === 67 && (event.ctrlKey || event.metaKey)) ||
// Allow: Ctrl+V
(keycode === 86 && (event.ctrlKey || event.metaKey)) ||
// Allow: Ctrl+X
(keycode === 88 && (event.ctrlKey || event.metaKey)) ||
// Allow: home, end, left, right
(keycode >= 48 && keycode <= 57)) {
// let it happen, is valid: true
return true;
}
// Ensure that it is a number and stop the keypress
if ((event.shiftKey || (keycode < 48 || keycode > 57)) && (keycode < 96 || keycode > 105)) {
return false;
}
};
InlineInputComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
selector: 'f8-inlineinput',
template: require('./inlineinput.component.html'),
styles: [require('./inlineinput.component.css').toString()]
},] },
];
/** @nocollapse */
InlineInputComponent.ctorParameters = function () { return []; };
InlineInputComponent.propDecorators = {
'inputField': [{ type: ViewChild, args: ['input',] },],
'type': [{ type: Input, args: ['type',] },],
'disabled': [{ type: Input, args: ['disabled',] },],
'input': [{ type: Input, args: ['value',] },],
'placeholder': [{ type: Input },],
'allowOnLineClickEdit': [{ type: Input },],
'onSave': [{ type: Output },],
};
return InlineInputComponent;
}());
export { InlineInputComponent };
//# sourceMappingURL=inlineinput.component.js.map