Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[improvement] Table : adds number as a cell type (#4135)

Browse source 
* Number as cell type: table

* adds min and max value fields to the table cells
This commit is contained in:
Arpit 2022-10-07 17:37:03 +05:30 committed by GitHub
parent 0b016b516e
commit 6b655b7f17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/Editor/Components/Table/columns/index.jsx
View file

@ -151,6 +151,70 @@ export default function generateColumnsData({
}
return <span style={cellStyles}>{cellValue}</span>;
}
case 'number': {
const textColor = resolveReferences(column.textColor, currentState, '', { cellValue, rowData });
const cellStyles = {
color: textColor ?? '',
};
if (column.isEditable) {
const validationData = validateWidget({
validationObject: {
minValue: {
value: column.minValue,
},
maxValue: {
value: column.maxValue,
},
},
widgetValue: cellValue,
currentState,
customResolveObjects: { cellValue },
});
const { isValid, validationError } = validationData;
console.log('validationData', column.minValue, column.maxValue, validationData);
const cellStyles = {
color: textColor ?? '',
};
return (
<div>
<input
type="number"
style={{ ...cellStyles, maxWidth: width, minWidth: width - 10 }}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (e.target.defaultValue !== e.target.value) {
handleCellValueChange(
cell.row.index,
column.key || column.name,
Number(e.target.value),
cell.row.original
);
}
}
}}
onBlur={(e) => {
if (e.target.defaultValue !== e.target.value) {
handleCellValueChange(
cell.row.index,
column.key || column.name,
Number(e.target.value),
cell.row.original
);
}
}}
className={`form-control-plaintext form-control-plaintext-sm ${!isValid ? 'is-invalid' : ''}`}
defaultValue={cellValue}
/>
<div className="invalid-feedback">{validationError}</div>
</div>
);
}
return <span style={cellStyles}>{cellValue}</span>;
}
case 'text': {
return (
<textarea

33
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -170,6 +170,7 @@ class TableComponent extends React.Component {
options={[
{ name: 'Default', value: 'default' },
{ name: 'String', value: 'string' },
{ name: 'Number', value: 'number' },
{ name: 'Text', value: 'text' },
{ name: 'Badge', value: 'badge' },
{ name: 'Multiple badges', value: 'badges' },
@ -314,6 +315,38 @@ class TableComponent extends React.Component {
</div>
)}
{column.columnType === 'number' && column.isEditable && (
<div>
<div className="hr-text">{this.props.t('widget.Table.validation', 'Validation')}</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.minValue', 'Min value')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.minLength}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'minValue', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'minValue')}
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.maxValue', 'Max value')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.maxLength}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'maxValue', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'maxValue')}
/>
</div>
</div>
)}
{column.columnType === 'toggle' && (
<div>
<div className="field mb-2">

22
frontend/src/_helpers/utils.js
View file

@ -248,6 +248,8 @@ export function validateWidget({ validationObject, widgetValue, currentState, cu
const regex = validationObject?.regex?.value;
const minLength = validationObject?.minLength?.value;
const maxLength = validationObject?.maxLength?.value;
const minValue = validationObject?.minValue?.value;
const maxValue = validationObject?.maxValue?.value;
const customRule = validationObject?.customRule?.value;
const validationRegex = resolveWidgetFieldValue(regex, currentState, '', customResolveObjects);
@ -278,6 +280,26 @@ export function validateWidget({ validationObject, widgetValue, currentState, cu
}
}
const resolvedMinValue = resolveWidgetFieldValue(minValue, currentState, undefined, customResolveObjects);
if (resolvedMinValue !== undefined) {
if (widgetValue < parseInt(resolvedMinValue)) {
return {
isValid: false,
validationError: `Minimum value is ${resolvedMinValue}`,
};
}
}
const resolvedMaxValue = resolveWidgetFieldValue(maxValue, currentState, undefined, customResolveObjects);
if (resolvedMaxValue !== undefined) {
if (widgetValue > parseInt(resolvedMaxValue)) {
return {
isValid: false,
validationError: `Maximum value is ${resolvedMaxValue}`,
};
}
}
const resolvedCustomRule = resolveWidgetFieldValue(customRule, currentState, false, customResolveObjects);
if (typeof resolvedCustomRule === 'string') {
return { isValid: false, validationError: resolvedCustomRule };