my-test123
Version:
A planner front-end for Fabric8.
225 lines • 10 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Logger } from 'ngx-base';
var DynamicUpdateEvent = /** @class */ (function () {
function DynamicUpdateEvent() {
}
return DynamicUpdateEvent;
}());
export { DynamicUpdateEvent };
/*
* NOTE: this control is not using the FormGroup "properly", like with
* a formControlName as an Input(). This is due to some components having
* problems with that (namely the Datepicker). We may want to revisit this
* later.
*/
/*
* This class represents one single dynamic data field. It uses the
* Angular form facilities to create a form group and display the
* control. If new data types should be supported, add them to this
* component.
*/
var DynamicFieldComponent = /** @class */ (function () {
function DynamicFieldComponent(logger) {
this.logger = logger;
// event when value is updated, emits new value as the event.
this.onUpdate = new EventEmitter();
this.buttonsVisible = false;
this.datePickerOptions = {
dateFormat: 'dd mmm yyyy',
selectionTxtFontSize: '14px',
openSelectorOnInputClick: true,
editableDateField: false,
showClearDateBtn: false,
componentDisabled: false
};
}
DynamicFieldComponent.prototype.ngOnInit = function () {
// get the attribute key from the descriptor
this.attributeKey = this.attributeDesc.key;
// store the pristine value.
this.oldValue = this.form.value[this.attributeKey];
// if this is a datepicker, we need to convert the data type.
if (this.attributeDesc.type.kind === 'instant') {
// the datepicker we use does not support calling functions from the model attribute.
this.dateValue = this.toDateModel(this.form.value[this.attributeKey]);
}
// we don't need to listen for @Input changes to the work item, because the form will
// be re-created from the schema on every load of a work item in the parent detail view.
// BUT: if we want to use this component on other dialogs that may not be re-created,
// we might need to listen to changes using OnChanges().
};
DynamicFieldComponent.prototype.isValid = function () {
return this.form.controls[this.attributeKey].valid;
};
DynamicFieldComponent.prototype.isButtonsVisible = function () {
return this.buttonsVisible;
};
DynamicFieldComponent.prototype.focusIn = function () {
this.buttonsVisible = true;
};
DynamicFieldComponent.prototype.extractEnumKeyValues = function () {
var result = [];
var selectedFound = false;
for (var i = 0; i < this.attributeDesc.type.values.length; i++) {
result.push({
key: this.attributeDesc.type.values[i],
value: this.attributeDesc.type.values[i],
selected: this.attributeDesc.type.values[i] === this.form.value[this.attributeKey] ? true : false,
cssLabelClass: undefined
});
if (this.attributeDesc.type.values[i] === this.form.value[this.attributeKey])
selectedFound = true;
}
;
// insert neutral element on index 0, setting it selected when no other selected entry was found.
result.splice(0, 0, {
key: undefined,
value: 'None',
selected: selectedFound ? false : true,
cssLabelClass: 'neutral-entry'
});
return result;
};
DynamicFieldComponent.prototype.extractBooleanKeyValues = function () {
var values = [{
key: undefined,
value: 'None',
selected: typeof this.form.value[this.attributeKey] != 'boolean' && (typeof this.form.value[this.attributeKey] == 'undefined' || this.form.value[this.attributeKey] == '') ? true : false,
cssLabelClass: 'neutral-entry'
}, {
key: 'true',
value: 'Yes',
selected: this.form.value[this.attributeKey] == true ? true : false
}, {
key: 'false',
value: 'No',
selected: typeof this.form.value[this.attributeKey] == 'boolean' && !this.form.value[this.attributeKey] ? true : false
}];
return values;
};
DynamicFieldComponent.prototype.onChangeDropdown = function (newOption) {
// key == value in this setup!
if (!newOption)
this.form.patchValue(this.toUpdateObject(this.attributeKey, ''));
else
this.form.patchValue(this.toUpdateObject(this.attributeKey, newOption));
this.save();
};
DynamicFieldComponent.prototype.onChangeBoolean = function (newOption) {
if (typeof newOption == 'undefined')
this.form.patchValue(this.toUpdateObject(this.attributeKey, undefined));
else if (newOption == 'true')
this.form.patchValue(this.toUpdateObject(this.attributeKey, true));
else
this.form.patchValue(this.toUpdateObject(this.attributeKey, false));
this.save();
};
DynamicFieldComponent.prototype.onChangeMarkup = function (newMarkupValue) {
if (newMarkupValue)
this.form.patchValue(this.toUpdateObject(this.attributeKey, newMarkupValue));
this.save();
};
DynamicFieldComponent.prototype.onDateChanged = function (newDate) {
var date = newDate.jsdate.toISOString();
this.form.patchValue(this.toUpdateObject(this.attributeKey, date));
this.save();
};
DynamicFieldComponent.prototype.toDateModel = function (dateValue) {
if (!dateValue)
return undefined;
else {
var date = new Date(dateValue);
var convertedDate = { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, day: date.getUTCDate() };
return convertedDate;
}
};
DynamicFieldComponent.prototype.baseChangeBaseType = function (newValue) {
this.form.patchValue(this.toUpdateObject(this.attributeKey, newValue));
};
DynamicFieldComponent.prototype.toUpdateObject = function (key, value) {
var object = {};
object[key] = value;
return object;
};
DynamicFieldComponent.prototype.save = function () {
this.buttonsVisible = false;
try {
// based on the data type, we're converting the data before storing it.
if (this.attributeDesc.type.kind === 'integer') {
var number = parseInt(this.form.value[this.attributeKey]);
if (isNaN(number))
throw ('invalid data for field - not an integer');
else
this.form.patchValue(this.toUpdateObject(this.attributeKey, number));
}
else if (this.attributeDesc.type.kind === 'float') {
var number = parseFloat(this.form.value[this.attributeKey]);
if (isNaN(number))
throw ('invalid data for field - not a float');
else
this.form.patchValue(this.toUpdateObject(this.attributeKey, number));
}
else if (this.attributeDesc.type.kind === 'enum') {
var value = this.form.value[this.attributeKey];
if (this.attributeDesc.type.values.indexOf(value) == -1 && value != '')
throw ('invalid data for field - not in valid values');
else
this.form.patchValue(this.toUpdateObject(this.attributeKey, value));
} // no else needed, the value is already in the form data structure.
this.error = null;
}
catch (error) {
this.error = error;
}
// emit onUpdate event
if (this.onUpdate) {
var newValue = void 0, oldValue = void 0;
if (this.attributeDesc.type.kind === 'markup') {
// if we're dealing with marup, we need to encapsulate the values.
newValue = { markup: 'Markdown', content: this.form.value[this.attributeKey] };
oldValue = { markup: 'Markdown', content: this.oldValue };
}
else {
// all other data types are delivered normalized.
newValue = this.form.value[this.attributeKey];
oldValue = this.oldValue;
}
var updateEvent = {
form: this.form,
formControlName: this.attributeKey,
newValue: newValue,
oldValue: oldValue,
attributeDesc: this.attributeDesc
};
this.logger.log('Emit dynamic form control update for key ' + this.attributeKey);
this.onUpdate.emit(updateEvent);
}
;
// update the oldValue
this.oldValue = this.form.value[this.attributeKey];
};
DynamicFieldComponent.prototype.cancel = function () {
// setting the form value to the (old) data value and mark it as pristine
this.form.controls[this.attributeKey].patchValue(this.oldValue);
this.form.controls[this.attributeKey].markAsPristine();
};
DynamicFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'alm-dynamic-field',
template: require('./dynamic-field.component.html'),
styles: [require('./dynamic-field.component.css').toString()]
},] },
];
/** @nocollapse */
DynamicFieldComponent.ctorParameters = function () { return [
{ type: Logger, },
]; };
DynamicFieldComponent.propDecorators = {
'attributeDesc': [{ type: Input },],
'form': [{ type: Input },],
'onUpdate': [{ type: Output },],
};
return DynamicFieldComponent;
}());
export { DynamicFieldComponent };
//# sourceMappingURL=dynamic-field.component.js.map