@arudovwen/react-form-builder
Version:
A complete form builder for react.
1,134 lines • 53.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
var _draftJs = require("draft-js");
var _draftjsToHtml = _interopRequireDefault(require("draftjs-to-html"));
var _reactDraftWysiwyg = require("react-draft-wysiwyg");
var _axios = _interopRequireDefault(require("axios"));
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
var _dynamicOptionList = _interopRequireDefault(require("./dynamic-option-list"));
var _requests = require("./stores/requests");
var _data = require("./data");
var _UUID = _interopRequireDefault(require("./UUID"));
var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
var _ApiExample = _interopRequireDefault(require("./ApiExample"));
var _TableInputColumns = _interopRequireDefault(require("./TableInputColumns"));
var _DynamicInputOptions = _interopRequireDefault(require("./DynamicInputOptions"));
var _FileReaderComponent = _interopRequireDefault(require("./FileReaderComponent"));
var _OptionsCreate = _interopRequireDefault(require("./OptionsCreate"));
var _OptionsCreateApi = _interopRequireDefault(require("./OptionsCreateApi"));
var _OptionsExample = _interopRequireDefault(require("./OptionsExample"));
var _MultiSelectInput = _interopRequireDefault(require("./MultiSelectInput"));
var _dataGridOptions = _interopRequireDefault(require("./data-grid-options"));
var _MultiSelectValue = _interopRequireDefault(require("./MultiSelectValue"));
var _ArithmeticComponent = _interopRequireDefault(require("./form-elements/ArithmeticComponent"));
var _azureFileSettings = _interopRequireDefault(require("./form-elements/azure-file-settings"));
const toolbar = {
options: ["inline", "list", "textAlign", "fontSize", "link", "history"],
inline: {
inDropdown: false,
className: undefined,
options: ["bold", "italic", "underline", "superscript", "subscript"]
}
};
const dateFormats = [{
label: "Day/Month/Year",
format: "dd/MM/yyyy"
}, {
label: "Month/Day/Year",
format: "MM/dd/yyyy"
}, {
label: "ISO (Year-Month-Day)",
format: "yyyy-MM-dd"
}, {
label: "Full Month Day, Year",
format: "MMMM d, yyyy"
}, {
label: "Abbreviated Month Day, Year",
format: "MMM d, yyyy"
}, {
label: "Day. Month. Year (Dots)",
format: "dd.MM.yyyy"
}, {
label: "Day Month Name Year",
format: "dd MMMM yyyy"
}, {
label: "Weekday, Month Day, Year",
format: "EEEE, MMMM d, yyyy"
}, {
label: "Short Weekday, Month Day, Year",
format: "EEE, MMM d, yyyy"
}, {
label: "Day-Month-Year",
format: "dd-MM-yyyy"
}, {
label: "Day-Month-Year",
format: "dd-MMM-yyyy"
}];
const currentDate = new Date();
class FormElementsEdit extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "getDocuments", async () => {
try {
const token = window.localStorage.getItem("token");
const localData = window.localStorage.getItem("userData");
const userData = localData ? JSON.parse(localData) : null;
const LoginInfo = window.localStorage.getItem("LoginInfo");
const loginData = LoginInfo ? JSON.parse(LoginInfo) : null;
this.setState({
fileLoading: true
});
const query = {
Page: 1,
Page_Size: 15,
count: 100000,
documentType: 0,
organizationId: userData?.id,
documentTabs: 2
};
const config = {
headers: {
Authorization: `Bearer ${token}`
}
};
// a4368688-3294-412e-a516-7e1bde2c32a6
if (!token) return;
const url = `${this.props.apiBaseUrl}/documents/v1/documentmanagement/get-documents-inbox?email=${loginData?.email}`;
const response = await _axios.default.post(url, query, config);
if (response.status === 200) {
this.setState({
documents: response.data.results?.map(i => ({
label: i?.title,
value: i?.documentMainId
}))
});
}
} finally {
this.setState({
fileLoading: false
});
}
});
(0, _defineProperty2.default)(this, "updateJsonElement", () => {
const this_element = JSON.stringify(this.state.element);
// to prevent ajax calls with no change
if (this.state.dirty) {
this.props.updateElement.call(this.props.preview, this_element);
this.setState({
dirty: false
});
}
});
this.state = {
element: this.props.element,
data: this.props.data,
dirty: false,
fileLoading: false,
documents: [],
multiFieldOptions: this.props.formData.filter(i => i.id !== this.props.element.id)
};
this.getDocuments = this.getDocuments.bind(this);
}
toggleRequired() {
// const this_element = this.state.element;
}
editElementProp(elemProperty, targProperty, e) {
// console.log(elemProperty);
// console.log(targProperty);
// console.log(e);
const this_element = this.state.element;
// Check if e is an event or direct value
if (e && e.target) {
this_element[elemProperty] = e.target[targProperty];
} else {
// Handle case where e is the direct value (like from TableInputColumn)
this_element[targProperty] = e;
}
this.setState({
element: this_element,
dirty: true
}, () => {
if (targProperty === "checked") {
this.updateElement();
}
});
}
onEditorStateChange(index, property, editorContent) {
// const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
const html = (0, _draftjsToHtml.default)((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, "").replace(/<\/p>/g, "").replace(/ /g, " ").replace(/(?:\r\n|\r|\n)/g, " ");
const this_element = this.state.element;
this_element[property] = html;
this.setState({
element: this_element,
dirty: true
});
}
updateElement() {
const this_element = this.state.element;
// to prevent ajax calls with no change
if (this.state.dirty) {
this.props.updateElement.call(this.props.preview, this_element);
this.setState({
dirty: false
});
}
}
convertFromHTML(content) {
const newContent = (0, _draftJs.convertFromHTML)(content);
if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
// to prevent crash when no contents in editor
return _draftJs.EditorState.createEmpty();
}
const contentState = _draftJs.ContentState.createFromBlockArray(newContent);
return _draftJs.EditorState.createWithContent(contentState);
}
addOptions() {
const optionsApiUrl = document.getElementById("optionsApiUrl").value;
if (optionsApiUrl) {
(0, _requests.get)(optionsApiUrl).then(response => {
this.props.element.options = [];
const {
options
} = this.props.element;
(response.data || response)?.forEach(x => {
// eslint-disable-next-line no-param-reassign
x.id = _UUID.default.uuid();
options.push(x);
});
const this_element = this.state.element;
this.setState({
element: this_element,
dirty: true
});
});
}
}
addOptionsFromSheet(data) {
const {
options
} = this.props.element;
data.forEach(x => {
// eslint-disable-next-line no-param-reassign
x.id = _UUID.default.uuid();
options.push(x);
});
const this_element = this.state.element;
this.setState({
element: this_element,
dirty: true
});
}
componentDidMount() {
this.getDocuments();
}
render() {
if (this.state.dirty) {
this.props.element.dirty = true;
}
const this_checked = this.props.element.hasOwnProperty("required") ? this.props.element.required : false;
// const this_read_only = this.props.element.hasOwnProperty('readOnly')
// ? this.props.element.readOnly
// : false;
const this_is_read_only = this.props.element.hasOwnProperty("isReadOnly") ? this.props.element.isReadOnly : false;
const this_default_today = this.props.element.hasOwnProperty("defaultToday") ? this.props.element.defaultToday : false;
const this_show_time_select = this.props.element.hasOwnProperty("showTimeSelect") ? this.props.element.showTimeSelect : false;
const this_show_time_select_only = this.props.element.hasOwnProperty("showTimeSelectOnly") ? this.props.element.showTimeSelectOnly : false;
const this_show_time_input = this.props.element.hasOwnProperty("showTimeInput") ? this.props.element.showTimeInput : false;
const this_hide_past_date = this.props.element.hasOwnProperty("hidePastDate") ? this.props.element.hidePastDate : false;
const this_hide_future_date = this.props.element.hasOwnProperty("hideFutureDate") ? this.props.element.hideFutureDate : false;
const this_checked_inline = this.props.element.hasOwnProperty("inline") ? this.props.element.inline : false;
const this_checked_bold = this.props.element.hasOwnProperty("bold") ? this.props.element.bold : false;
const this_checked_italic = this.props.element.hasOwnProperty("italic") ? this.props.element.italic : false;
const this_checked_center = this.props.element.hasOwnProperty("center") ? this.props.element.center : false;
// const this_checked_page_break = this.props.element.hasOwnProperty(
// 'pageBreakBefore',
// )
// ? this.props.element.pageBreakBefore
// : false;
const this_checked_toggle_password = this.props.element.hasOwnProperty("togglePassword") ? this.props.element.togglePassword : false;
const this_checked_toggle_negative = this.props.element.hasOwnProperty("toggleNegative") ? this.props.element.toggleNegative : false;
const this_checked_toggle_vibility = this.props.element.hasOwnProperty("toggleVisibility") ? this.props.element.toggleVisibility : false;
const this_checked_is_cascade = this.props.element.hasOwnProperty("isCascade") ? this.props.element.isCascade : false;
// const this_checked_alternate_form = this.props.element.hasOwnProperty(
// 'alternateForm',
// )
// ? this.props.element.alternateForm
// : false;
const {
canHavePageBreakBefore,
// canHaveAlternateForm,
canHaveDisplayHorizontal,
canHaveOptionCorrect,
canHaveOptionValue
} = this.props.element;
const canHaveImageSize = this.state.element.element === "Image" || this.state.element.element === "Camera";
const this_files = this.props.files.length ? this.props.files : [];
if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== "") {
this_files.unshift({
id: "",
file_name: ""
});
}
let editorState;
if (this.props.element.hasOwnProperty("content")) {
editorState = this.convertFromHTML(this.props.element.content);
}
if (this.props.element.hasOwnProperty("label")) {
editorState = this.convertFromHTML(this.props.element.label);
}
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "clearfix"
}, /*#__PURE__*/_react.default.createElement("h4", {
className: "float-left"
}, this.props.element.text), /*#__PURE__*/_react.default.createElement("i", {
className: "float-right fas fa-times dismiss-edit",
onClick: this.props.manualEditModeOff
})), this.props.element.hasOwnProperty("content") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "text-to-display"
}), ":"), /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, {
toolbar: toolbar,
defaultEditorState: editorState,
onBlur: this.updateElement.bind(this),
onEditorStateChange: this.onEditorStateChange.bind(this, 0, "content"),
stripPastedStyles: true
})), this.props.element.hasOwnProperty("file_path") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "fileSelect"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "choose-file"
}), ":"), /*#__PURE__*/_react.default.createElement("select", {
id: "fileSelect",
className: "form-control",
defaultValue: this.props.element.file_path,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "file_path", "value")
}, this_files.map(file => {
const this_key = `file_${file.id}`;
return /*#__PURE__*/_react.default.createElement("option", {
value: file.id,
key: this_key
}, file.file_name);
}))), this.props.element.hasOwnProperty("href") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
type: "text",
className: "form-control",
defaultValue: this.props.element.href,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "href", "value")
})), this.props.element.hasOwnProperty("label") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "display-label"
})), /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, {
toolbar: toolbar,
defaultEditorState: editorState,
onBlur: this.updateElement.bind(this),
onEditorStateChange: this.onEditorStateChange.bind(this, 0, "label"),
stripPastedStyles: true,
height: 100
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "is-required",
className: "custom-control-input",
type: "checkbox",
checked: this_checked,
value: true,
onChange: this.editElementProp.bind(this, "required", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "is-required"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "required"
}))), this.props.element.hasOwnProperty("isReadOnly") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "read-only",
className: "custom-control-input",
type: "checkbox",
checked: this_is_read_only,
value: true,
onChange: this.editElementProp.bind(this, "isReadOnly", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "read-only"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "read-only"
}))), this.props.element.hasOwnProperty("defaultToday") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "is-default-to-today",
className: "custom-control-input",
type: "checkbox",
checked: this_default_today,
value: true,
onChange: this.editElementProp.bind(this, "defaultToday", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "is-default-to-today"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "default-to-today"
}), "?")), this.props.element.hasOwnProperty("showTimeSelect") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "show-time-select",
className: "custom-control-input",
type: "checkbox",
checked: this_show_time_select,
value: true,
onChange: this.editElementProp.bind(this, "showTimeSelect", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "show-time-select"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "show-time-select"
}), "?")), this_show_time_select && this.props.element.hasOwnProperty("showTimeSelectOnly") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "show-time-select-only",
className: "custom-control-input",
type: "checkbox",
checked: this_show_time_select_only,
value: true,
onChange: this.editElementProp.bind(this, "showTimeSelectOnly", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "show-time-select-only"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "show-time-select-only"
}), "?")), this.props.element.hasOwnProperty("showTimeInput") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "show-time-input",
className: "custom-control-input",
type: "checkbox",
checked: this_show_time_input,
value: true,
onChange: this.editElementProp.bind(this, "showTimeInput", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "show-time-input"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "show-time-input"
}), "?")), this.props.element.hasOwnProperty("hidePastDate") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "hidePastDate",
className: "custom-control-input",
type: "checkbox",
checked: this_hide_past_date,
value: true,
onChange: this.editElementProp.bind(this, "hidePastDate", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "hidePastDate"
}, "Hide Past date")), this.props.element.hasOwnProperty("hideFutureDate") && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "hideFutureDate",
className: "custom-control-input",
type: "checkbox",
checked: this_hide_future_date,
value: true,
onChange: this.editElementProp.bind(this, "hideFutureDate", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "hideFutureDate"
}, "Hide Future date")), (this.state.element.element === "RadioButtons" || this.state.element.element === "Checkboxes") && canHaveDisplayHorizontal && /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "display-horizontal",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_inline,
value: true,
onChange: this.editElementProp.bind(this, "inline", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "display-horizontal"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "display-horizontal"
})))), this.props.element.hasOwnProperty("src") && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "srcInput"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "link-to"
}), ":"), /*#__PURE__*/_react.default.createElement("input", {
id: "srcInput",
type: "text",
className: "form-control",
defaultValue: this.props.element.src,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "src", "value")
}))), canHaveImageSize && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "do-center",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_center,
value: true,
onChange: this.editElementProp.bind(this, "center", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "do-center"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "center"
}), "?"))), /*#__PURE__*/_react.default.createElement("div", {
className: "row"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "col-sm-3"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "elementWidth"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "width"
}), ":"), /*#__PURE__*/_react.default.createElement("input", {
id: "elementWidth",
type: "text",
className: "form-control",
defaultValue: this.props.element.width,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "width", "value")
})), /*#__PURE__*/_react.default.createElement("div", {
className: "col-sm-3"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "elementHeight"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "height"
}), ":"), /*#__PURE__*/_react.default.createElement("input", {
id: "elementHeight",
type: "text",
className: "form-control",
defaultValue: this.props.element.height,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "height", "value")
})))), (this.state.element.element === "FileUpload" || this.state.element.element === "MultiFileUpload" || this.state.element.element === "AzureFileUpload") && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: " mb-4"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "fileSize"
}, "Max File Size"), /*#__PURE__*/_react.default.createElement("div", {
className: "flex border border-gray-300 rounded-lg overflow-hidden max-w-[150px]"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "maxFileSize",
type: "number",
min: 0,
className: "px-3.5 py-1.5 outline-none flex-1 text-sm min-w-0",
defaultValue: this.props.element.maxFileSize,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "maxFileSize", "value")
}), /*#__PURE__*/_react.default.createElement("span", {
className: "bg-gray-100 px-3.5 py-1.5 flex items-center justify-center text-sm font-medium"
}, "MB"))), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "fileType"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "choose-file-type"
}), ":"), /*#__PURE__*/_react.default.createElement("select", {
id: "fileType",
className: "form-control",
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "fileType", "value"),
value: this.props.element.fileType
}, _data.FileTypes.map((file, index) => /*#__PURE__*/_react.default.createElement("option", {
value: file.type,
key: index
}, file.typeName)))), this.state.element.element === "FileUpload" && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "fileType"
}, "File Result"), /*#__PURE__*/_react.default.createElement("select", {
id: "fileResult",
className: "form-control",
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "fileResult", "value"),
value: this.props.element.fileResult
}, /*#__PURE__*/_react.default.createElement("option", {
value: null,
disabled: true
}, "Select"), /*#__PURE__*/_react.default.createElement("option", {
value: "url"
}, "Url String"), /*#__PURE__*/_react.default.createElement("option", {
value: "base64"
}, "Base64 String"))), this.state.element.element === "AzureFileUpload" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_azureFileSettings.default, {
apiUrl: this.props.apiBaseUrl,
detail: this.props.element.azureSettings || {},
onValueChange: objData => {
this.editElementProp(this, "azureSettings", objData);
}
}))), this.state.element.element === "Signature" && this.props.element.readOnly ? /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "variableKey"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "variable-key"
}), ":"), /*#__PURE__*/_react.default.createElement("input", {
id: "variableKey",
type: "text",
className: "form-control",
defaultValue: this.props.element.variableKey,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "variableKey", "value")
}), /*#__PURE__*/_react.default.createElement("p", {
className: "help-block"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "variable-key-desc"
}), ".")) : /*#__PURE__*/_react.default.createElement("div", null), this.props.element.hasOwnProperty("step") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "rangeStep"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "step"
})), /*#__PURE__*/_react.default.createElement("input", {
id: "rangeStep",
type: "number",
className: "form-control",
defaultValue: this.props.element.step,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "step", "value")
}))), this.props.element.hasOwnProperty("min_value") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "rangeMin"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "min"
})), /*#__PURE__*/_react.default.createElement("input", {
id: "rangeMin",
type: "number",
className: "form-control",
defaultValue: this.props.element.min_value,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "min_value", "value")
}), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
defaultValue: this.props.element.min_label,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "min_label", "value")
}))), this.props.element.hasOwnProperty("max_value") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "rangeMax"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "max"
})), /*#__PURE__*/_react.default.createElement("input", {
id: "rangeMax",
type: "number",
className: "form-control",
defaultValue: this.props.element.max_value,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "max_value", "value")
}), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
defaultValue: this.props.element.max_label,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "max_label", "value")
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "grid grid-cols-2 date_range gap-x-3"
}, this.props.element.hasOwnProperty("canHaveMinLength") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "minLength"
}, "Min Length"), /*#__PURE__*/_react.default.createElement("input", {
type: "number",
style: {
width: "100%"
},
className: "!w-full form-control text-sm",
defaultValue: this.props.element.minLength,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "minLength", "value")
}))), this.props.element.hasOwnProperty("canHaveMaxLength") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "maxLength"
}, "Max Length"), /*#__PURE__*/_react.default.createElement("input", {
type: "number",
style: {
width: "100%"
},
className: "!w-full form-control text-sm",
defaultValue: this.props.element.maxLength,
min: this.props.element.minLength,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "maxLength", "value")
})))), this.props.element.hasOwnProperty("canTogglePassword") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "toggle-password",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_toggle_password,
value: true,
onChange: this.editElementProp.bind(this, "togglePassword", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "toggle-password"
}, "Can Toggle Password"))), this.props.element.hasOwnProperty("canToggleNegative") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "toggle-negative",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_toggle_negative,
value: true,
onChange: this.editElementProp.bind(this, "toggleNegative", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "toggle-negative"
}, "Can Allow Negative"))), this.props.element.hasOwnProperty("canMapFields") && /*#__PURE__*/_react.default.createElement("div", {
className: "mb-2 "
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "documentId"
}, "Select Mapped Fields"), /*#__PURE__*/_react.default.createElement(_MultiSelectInput.default, {
element: this.props.element,
options: this.state.multiFieldOptions,
value: this.props.element.mappedFields || [],
onChange: newValues => {
this.editElementProp(this, "mappedFields", newValues);
}
})), /*#__PURE__*/_react.default.createElement("div", null, this.props.element.hasOwnProperty("haveArithmetic") && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ArithmeticComponent.default, {
mappedFields: this.props.element.mappedFields || [],
calculationFields: this.props.element.calculationFields || [],
onChangeCalculationFields: newValues => {
this.editElementProp(this, "calculationFields", newValues);
},
isEditing: true
})))), this.props.element.hasOwnProperty("canToggleField") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mt-2 mb-3 custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "toggle-field-visibility",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_toggle_vibility,
onChange: this.editElementProp.bind(this, "toggleVisibility", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "toggle-field-visibility"
}, "Toggle Field Visibility")), this_checked_toggle_vibility && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "toggeIds"
}, "Dependent Fields/Values"), /*#__PURE__*/_react.default.createElement(_MultiSelectValue.default, {
element: this.props.element,
options: this.state.multiFieldOptions,
value: this.props.element.visibilityFields || [],
onChange: newValues => {
this.editElementProp(this, "visibilityFields", newValues);
}
}))), this.props.element.hasOwnProperty("canUseCascade") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mt-2 mb-3 custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "is-cascade",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_is_cascade,
onChange: this.editElementProp.bind(this, "isCascade", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "is-cascade"
}, "Use Cascade")), this_checked_is_cascade && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "toggeIds"
}, "Dependent Field"), /*#__PURE__*/_react.default.createElement("select", {
className: "form-control",
value: this.props.element.method,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "dependentField", "value")
}, /*#__PURE__*/_react.default.createElement("option", {
value: ""
}, "Select field"), this.state.multiFieldOptions.map((item, index) => /*#__PURE__*/_react.default.createElement("option", {
key: index,
value: item.field_name
}, item.label))))), this.props.element.hasOwnProperty("canMakeApiValidation") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mb-4"
}, /*#__PURE__*/_react.default.createElement(_ApiExample.default, null)), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "url"
}, "Api Url"), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
defaultValue: this.props.element.url,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "url", "value")
})), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "url"
}, "File Retrieval Api Url (optional)"), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
defaultValue: this.props.element.fileUrl,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "fileUrl", "value")
})), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "method"
}, "Method"), /*#__PURE__*/_react.default.createElement("select", {
className: "form-control",
defaultValue: this.props.element.method,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "method", "value")
}, /*#__PURE__*/_react.default.createElement("option", {
value: "get"
}, "GET"), /*#__PURE__*/_react.default.createElement("option", {
value: "post"
}, "POST"))), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "apiKey"
}, /*#__PURE__*/_react.default.createElement("span", null, " ", "Authorization Key", " ", /*#__PURE__*/_react.default.createElement("span", {
className: "text-muted"
}, "(Optional)"))), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
defaultValue: this.props.element.apiKey,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "apiKey", "value")
}))), this.props.element.hasOwnProperty("canSelectDocuments") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "documentId"
}, "Choose a document"), /*#__PURE__*/_react.default.createElement("select", {
id: "documentId",
className: "form-control",
value: this.props.element.documentId,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "documentId", "value")
}, /*#__PURE__*/_react.default.createElement("option", {
value: null
}, this.state.fileLoading ? "Fetching documents..." : "Select document"), this.state.documents?.map(item => /*#__PURE__*/_react.default.createElement("option", {
key: item.value,
value: JSON.stringify(item)
}, item.label))))), this.props.element.hasOwnProperty("minDate") || this.props.element.hasOwnProperty("maxDate") ? /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, (!this.props.element.hidePastDate || !this.props.element.hideFutureDate) && /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13"
}, "Date Range "), /*#__PURE__*/_react.default.createElement("div", {
className: "grid grid-cols-2 date_range gap-x-3"
}, !this.props.element.hidePastDate && /*#__PURE__*/_react.default.createElement("div", null, " ", /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
onChange: newValues => {
this.editElementProp(this, "minDate", newValues);
},
name: "minDate",
selected: this.props.element.minDate,
className: "form-control",
isClearable: true,
placeholderText: "Min Date Value"
})), !this.props.element.hideFutureDate && /*#__PURE__*/_react.default.createElement("div", null, " ", /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
onChange: newValues => {
this.editElementProp(this, "maxDate", newValues);
},
name: "maxDate",
selected: this.props.element.maxDate,
minDate: this.props.element.hidePastDate ? currentDate : this.props.element.minDate,
className: "form-control",
isClearable: true,
placeholderText: "Max Date Value"
})))) : null, this.props.element.hasOwnProperty("canSelectDateFormat") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13"
}, "Choose a date format"), /*#__PURE__*/_react.default.createElement("select", {
id: "dateFormat",
className: "form-control",
value: this.props.element.documentId,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "dateFormat", "value")
}, dateFormats?.map(item => /*#__PURE__*/_react.default.createElement("option", {
key: item.format,
value: item.format
}, item.label, " (", item.format, ")"))))), this.props.element.hasOwnProperty("canHaveDenonimator") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_TableInputColumns.default, {
value: this.props.element.denominators || [],
onChange: newValues => {
this.editElementProp(this, "denominators", newValues);
}
}))), this.props.element.hasOwnProperty("canHaveDynamicInputOptions") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "dynamicInputOptions"
}, "Add Inputs Key/Label"), /*#__PURE__*/_react.default.createElement(_DynamicInputOptions.default, {
initialFields: this.props.element.dynamicInputOptions,
onChange: newValues => {
this.editElementProp(this, "dynamicInputOptions", newValues);
}
}))), " ", this.props.element.hasOwnProperty("canHaveDataColumns") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "dynamicInputOptions"
}, "Add Data Columns"), /*#__PURE__*/_react.default.createElement(_dataGridOptions.default, {
value: this.props.element.dataColumns,
onChange: newValues => {
this.editElementProp(this, "dataColumns", newValues);
},
onGetUrl: url => {
this.editElementProp(this, "url", url);
}
}))), " ", this.props.element.hasOwnProperty("canHandleMultiOptions") && /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "firstLabel"
}, "First DropDown Detail"), /*#__PURE__*/_react.default.createElement("input", {
id: "firstLabel",
className: "input-style",
defaultValue: this.props.element.firstLabel,
placeholder: "Enter First label",
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "firstLabel", "value")
}), /*#__PURE__*/_react.default.createElement("div", {
className: "mt-1"
}, /*#__PURE__*/_react.default.createElement(_OptionsCreateApi.default, {
onChange: newValues => {
this.editElementProp(this, "firstDropdownOptions", newValues);
}
})), /*#__PURE__*/_react.default.createElement(_OptionsCreate.default, {
hideKey: true,
initialFields: this.props.element.firstDropdownOptions,
onChange: newValues => {
this.editElementProp(this, "firstDropdownOptions", newValues);
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label text-13",
htmlFor: "secondLabel"
}, "Second DropDown Detail"), /*#__PURE__*/_react.default.createElement("input", {
id: "secondLabel",
className: "input-style",
defaultValue: this.props.element.secondLabel,
placeholder: "Enter Second label",
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "secondLabel", "value")
}), /*#__PURE__*/_react.default.createElement("div", {
className: "mt-1"
}, /*#__PURE__*/_react.default.createElement(_OptionsCreateApi.default, {
onChange: newValues => {
this.editElementProp(this, "secondDropdownOptions", newValues);
}
})), /*#__PURE__*/_react.default.createElement(_OptionsCreate.default, {
initialFields: this.props.element.secondDropdownOptions,
onChange: newValues => {
this.editElementProp(this, "secondDropdownOptions", newValues);
}
}))), this.props.element.hasOwnProperty("default_value") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group-range"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "defaultSelected"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "default-selected"
})), /*#__PURE__*/_react.default.createElement("input", {
id: "defaultSelected",
type: "number",
className: "form-control",
defaultValue: this.props.element.default_value,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "default_value", "value")
}))), this.props.element.hasOwnProperty("static") && this.props.element.static && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "text-style"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "do-bold",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_bold,
value: true,
onChange: this.editElementProp.bind(this, "bold", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "do-bold"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "bold"
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "custom-control custom-checkbox"
}, /*#__PURE__*/_react.default.createElement("input", {
id: "do-italic",
className: "custom-control-input",
type: "checkbox",
checked: this_checked_italic,
value: true,
onChange: this.editElementProp.bind(this, "italic", "checked")
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: "do-italic"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "italic"
})))), this.props.element.showDescription && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "questionDescription"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "description"
})), /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
type: "text",
className: "form-control",
id: "questionDescription",
defaultValue: this.props.element.description,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "description", "value")
})), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "correctAnswer"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "correct-answer"
})), /*#__PURE__*/_react.default.createElement("input", {
id: "correctAnswer",
type: "text",
className: "form-control",
defaultValue: this.props.element.correct,
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "correct", "value")
})), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "optionsApiUrl"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "populate-options-from-api"
})), /*#__PURE__*/_react.default.createElement(_OptionsExample.default, null), /*#__PURE__*/_react.default.createElement("div", {
className: "row"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "col-sm-8"
}, /*#__PURE__*/_react.default.createElement("input", {
className: "input-style",
style: {
width: "100%"
},
type: "text",
id: "optionsApiUrl",
onBlur: this.updateElement.bind(this),
onChange: this.editElementProp.bind(this, "optionsApiUrl", "value"),
placeholder: "http://localhost:8080/api/optionsdata"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "col-sm-4"
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: this.addOptions.bind(this),
className: "button-style"
}, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
id: "populate"
}))))), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "control-label",
htmlFor: "optionsApiUrl"
}, "Populate from sheet (csv, xlsx)"), /*#__PURE__*/_react.default.createElement("div", {
className: "row"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "col-sm-6"
}, /*#__PURE__*/_react.default.createElement(_FileReaderComponent.default, {
name: "options",
setValue: (name, value) => {
this.addOptionsFromSheet(value);
}
})))), this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement(_dynamicOptionList.default, {
showCorrectColumn: this.props.showCorrectColumn,
canHaveOptionCorrect: canHaveOptionCorrect,
canHaveOptionValue: canHaveOptionValue,
data: this.props.preview.state.data,
updateElement: this.props.updateElement,
preview: this.props.preview,
element: this.props.element,
key: this.props.element.options.length
}));
}
}
exports.default = FormElementsEdit;
FormElementsEdit.defaultProps = {
className: "edit-element-fields"
};