fabric8-planner
Version:
A planner front-end for Fabric8.
257 lines • 10.4 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { cloneDeep } from 'lodash';
import { Logger } from 'ngx-base';
import { WorkItemService } from './../../services/work-item.service';
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, workItemService) {
this.logger = logger;
this.workItemService = workItemService;
// pristine old value that is needed for the cancel operation.
this.oldValue = null;
this.fieldValue = null;
this.dropdownMenuItems = [];
this.dropdownSelectedItems = [];
this.loadingField = false;
this.markupCallBack = null;
this.showField = true;
this.editAllow = true;
// 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
};
}
Object.defineProperty(DynamicFieldComponent.prototype, "fieldValueSetter", {
// this is the input for dynamic field key and value
set: function (val) {
var _this = this;
this.fieldValue = cloneDeep(val);
this.loadingField = false;
// if it's an enum type
// set the dropdown values
// to support the dropdown
if (this.fieldValue.field.type.kind === 'enum') {
this.dropdownMenuItems = this.extractEnumKeyValues(this.fieldValue.field.type.values);
this.dropdownSelectedItems =
this.dropdownMenuItems.filter(function (v) { return v.key === _this.fieldValue.value; });
}
// if it's an boolean type
// set the dropdown values
// to support the dropdown
if (this.fieldValue.field.type.kind === 'boolean') {
this.dropdownMenuItems = this.extractBooleanKeyValues();
this.dropdownSelectedItems =
this.dropdownMenuItems.filter(function (v) { return v.key === _this.fieldValue.value; });
}
// if it's a markup type
// make the call back on update
// to support the markup value
if (this.fieldValue.field.type.kind === 'markup') {
if (this.fieldValue.value == null) {
this.showField = false;
}
else if (this.markupCallBack != null) {
this.markupCallBack(this.fieldValue.value.content, this.fieldValue.value.rendered);
this.markupCallBack = null;
}
}
this.oldValue = this.fieldValue.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DynamicFieldComponent.prototype, "editAllowSetter", {
set: function (val) {
this.editAllow = val;
this.datePickerOptions.componentDisabled = !this.editAllow;
},
enumerable: true,
configurable: true
});
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 () {
var _this = this;
if (this.fieldValue.field.type.kind === 'enum') {
return this.fieldValue.field.type.values
.findIndex(function (v) { return v === _this.fieldValue.value; }) > -1;
}
else {
return true;
}
// 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 (possibleOptions) {
return possibleOptions.map(function (v) {
return {
key: v,
value: v
};
}).slice();
};
DynamicFieldComponent.prototype.extractBooleanKeyValues = function () {
var values = [{
key: null,
value: 'None'
}, {
key: 'true',
value: 'Yes'
}, {
key: 'false',
value: 'No'
}];
return values;
};
DynamicFieldComponent.prototype.onChangeDropdown = function (newOptions) {
var newValue = newOptions
.map(function (option) { return option.key; })
.join();
var oldValue = this.oldValue;
var field = this.fieldValue.field;
var key = this.fieldValue.key;
this.loadingField = true;
this.onUpdate.emit({
newValue: newValue, oldValue: oldValue,
field: field, key: key
});
};
DynamicFieldComponent.prototype.onChangeMarkup = function (newMarkupValue) {
// if (newMarkupValue)
// this.form.patchValue(this.toUpdateObject(this.attributeKey, newMarkupValue));
// this.save();
};
DynamicFieldComponent.prototype.onDateChanged = function (newDate) {
var newValue = newDate.jsdate.toISOString();
var oldValue = this.oldValue;
var field = this.fieldValue.field;
var key = this.fieldValue.key;
this.loadingField = true;
this.onUpdate.emit({
newValue: newValue, oldValue: oldValue,
field: field, key: key
});
};
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.saveInputField = function (event) {
this.loadingField = true;
var newValue = event.value;
var oldValue = this.oldValue;
var field = this.fieldValue.field;
var key = this.fieldValue.key;
this.onUpdate.emit({
newValue: newValue, oldValue: oldValue,
field: field, key: key
});
};
DynamicFieldComponent.prototype.toUpdateObject = function (key, value) {
var object = {};
object[key] = value;
return object;
};
DynamicFieldComponent.prototype.markupUpdate = function (event) {
this.markupCallBack = event.callBack;
if (event.rawText === this.oldValue.content) {
this.markupCallBack(this.oldValue.content, this.oldValue.rendered);
this.markupCallBack = null;
}
else {
var newValue = {
content: event.rawText,
markup: 'Markdown'
};
var oldValue = this.oldValue;
var field = this.fieldValue.field;
var key = this.fieldValue.key;
this.onUpdate.emit({
newValue: newValue, oldValue: oldValue,
field: field, key: key
});
}
};
DynamicFieldComponent.prototype.showPreview = function (event) {
var rawText = event.rawText;
var callBack = event.callBack;
this.workItemService.renderMarkDown(rawText)
.subscribe(function (renderedHtml) {
callBack(rawText, renderedHtml);
});
};
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, },
{ type: WorkItemService, },
]; };
DynamicFieldComponent.propDecorators = {
'fieldValueSetter': [{ type: Input, args: ['keyValueField',] },],
'attributeDesc': [{ type: Input },],
'editAllowSetter': [{ type: Input, args: ['editAllow',] },],
'onUpdate': [{ type: Output },],
};
return DynamicFieldComponent;
}());
export { DynamicFieldComponent };
//# sourceMappingURL=dynamic-field.component.js.map