@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
168 lines (167 loc) • 9.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
const CheckBox_1 = require("../../../components/CheckBox");
const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
const Tag_1 = require("../../../components/Tag");
const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
const Select_1 = require("../../../components/Select");
const options = [
{ value: 'number', label: 'Number' },
{ value: 'text', label: 'Text' },
{ value: 'date', label: 'Date' },
{ value: 'boolean', label: 'Boolean' },
];
const renderFreeTextColumnSummary = (data) => {
return (React.createElement(rebass_1.Box, { fontSize: 2 },
React.createElement(rebass_1.Box, null,
"Column Identifier: ",
React.createElement(Tag_1.Tag, null, data.ColumnId)),
data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
"Column Name: ",
React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
React.createElement(rebass_1.Box, { mt: 3 },
"Data Type: ",
React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
"Default Value: ",
React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
"Editor Type: ",
React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
};
exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
const isValidFreeTextColumn = (data, api) => {
const columns = api.columnApi.getUIAvailableColumns();
if (!data.ColumnId) {
return 'Column Id cannot be empty';
}
const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
if (hasAlreadyExistingId) {
return 'A Column already exists with that id';
}
if (!data.FreeTextColumnSettings.DataType) {
return 'No data type specified for column';
}
return true;
};
exports.isValidFreeTextColumn = isValidFreeTextColumn;
const FreeTextColumnSettingsWizardSection = (props) => {
const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
const inEdit = props.isEdit;
const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
const ErrorMessage = validCheck === true ? null : validCheck;
const handleColumnIdChange = (event) => {
let e = event.target;
const ColumnId = e.value;
props.onChange({
...data,
ColumnId,
});
};
const handleColumnNameChange = (event) => {
let e = event.target;
const ColumnName = e.value;
props.onChange({
...data,
FriendlyName: ColumnName,
});
};
const handleDataTypeChange = (DataType) => {
const newData = {
...data,
FreeTextColumnSettings: {
...data.FreeTextColumnSettings,
DataType,
},
};
delete newData.DefaultValue;
if (!DataType) {
delete newData.FreeTextColumnSettings?.DataType;
}
props.onChange(newData);
};
const onDynamicSelectChanged = (event) => {
let e = event.target;
const TextEditor = e.value;
props.onChange({
...data,
TextEditor,
});
};
const handleDefaultValueChange = (event) => {
let e = event.target;
let DefaultValue = e.value;
if (data.FreeTextColumnSettings.DataType === 'date') {
DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
Pattern,
});
}
props.onChange({
...data,
DefaultValue,
});
};
const handleSpecialColumnSettingsChange = (
// settings: SpecialColumnSettings
settings) => {
props.onChange({
...data,
FreeTextColumnSettings: {
...data?.FreeTextColumnSettings,
...settings,
},
});
};
return (React.createElement(React.Fragment, null,
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
setColumnNameFocused(true);
}, onBlur: () => {
setColumnNameFocused(false);
}, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
React.createElement(rebass_1.Box, { style: { maxWidth: 500 } },
React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
props.onChange({
...data,
DefaultValue,
});
} })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
: data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.FreeTextColumnSettings.DataType === 'number'
? 'number'
: data.FreeTextColumnSettings.DataType === 'date'
? 'date'
: 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
HeaderToolTip: e.target.value,
}) })),
' ',
data.FreeTextColumnSettings.DataType == 'text' && (React.createElement(FormLayout_1.FormRow, { label: "Cell Editor" },
React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
React.createElement(rebass_1.Box, { mt: 2 },
React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
};
exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;