From 0c6419464a011eab3e89e64a1b768e576f669ac5 Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com> Date: Tue, 28 Mar 2023 16:25:23 +0530 Subject: [PATCH] Added dynamic column support in table widget (#5792) * Created dynamic column in table widget * Added column data field in table inspector * Fixed generating previous dynamic column when dynamic column toggle is turned off * Updated logic to display dynamic column * Fixed issues on editable & updated logic * Fixed issue on displaying dynamic column in viewer --- .../src/Editor/Components/Table/Table.jsx | 28 ++- .../Table/columns/autogenerateColumns.js | 25 ++- .../Editor/Components/Table/columns/index.jsx | 3 +- .../Inspector/Components/Table/Table.jsx | 159 +++++++++--------- .../src/Editor/WidgetManager/widgetConfig.js | 15 ++ 5 files changed, 145 insertions(+), 85 deletions(-) diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 01cc72f33b..9c8d41e062 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -122,6 +122,7 @@ export function Table({ const [tableDetails, dispatch] = useReducer(reducer, initialState()); const [hoverAdded, setHoverAdded] = useState(false); + const [generatedColumn, setGeneratedColumn] = useState([]); const mergeToTableDetails = (payload) => dispatch(reducerActions.mergeToTableDetails(payload)); const mergeToFilterDetails = (payload) => dispatch(reducerActions.mergeToFilterDetails(payload)); const mounted = useMounted(); @@ -194,7 +195,6 @@ export function Table({ const changesToBeSavedAndExposed = { dataUpdates: newDataUpdates, changeSet: newChangeset }; mergeToTableDetails(changesToBeSavedAndExposed); - fireEvent('onCellValueChanged'); return setExposedVariables({ ...changesToBeSavedAndExposed, updatedData: clonedTableData }); } @@ -284,9 +284,15 @@ export function Table({ } }, [color, darkMode]); - let tableData = []; + let tableData = [], + dynamicColumn = []; + + const useDynamicColumn = resolveReferences(component.definition.properties?.useDynamicColumn?.value); if (currentState) { tableData = resolveReferences(component.definition.properties.data.value, currentState, []); + dynamicColumn = useDynamicColumn + ? resolveReferences(component.definition.properties?.columnData?.value, currentState, []) ?? [] + : []; if (!Array.isArray(tableData)) tableData = []; } @@ -295,7 +301,7 @@ export function Table({ const tableRef = useRef(); const columnData = generateColumnsData({ - columnProperties: component.definition.properties.columns.value, + columnProperties: useDynamicColumn ? generatedColumn : component.definition.properties.columns.value, columnSizes, currentState, handleCellValueChange, @@ -349,8 +355,6 @@ export function Table({ ] // Hack: need to fix ); - console.log('columns--- ', columns); - const data = useMemo( () => tableData, [ @@ -362,15 +366,23 @@ export function Table({ ); useEffect(() => { - if (tableData.length != 0 && component.definition.properties.autogenerateColumns?.value && mode === 'edit') { - autogenerateColumns( + if ( + tableData.length != 0 && + component.definition.properties.autogenerateColumns?.value && + (useDynamicColumn || mode === 'edit') + ) { + const generatedColumnFromData = autogenerateColumns( tableData, component.definition.properties.columns.value, component.definition.properties?.columnDeletionHistory?.value ?? [], + useDynamicColumn, + dynamicColumn, setProperty ); + + useDynamicColumn && setGeneratedColumn(generatedColumnFromData); } - }, [JSON.stringify(tableData)]); + }, [JSON.stringify(tableData), JSON.stringify(dynamicColumn)]); const computedStyles = { // width: `${width}px`, diff --git a/frontend/src/Editor/Components/Table/columns/autogenerateColumns.js b/frontend/src/Editor/Components/Table/columns/autogenerateColumns.js index bf413e4b41..1602558cfb 100644 --- a/frontend/src/Editor/Components/Table/columns/autogenerateColumns.js +++ b/frontend/src/Editor/Components/Table/columns/autogenerateColumns.js @@ -1,7 +1,30 @@ import _ from 'lodash'; import { v4 as uuidv4 } from 'uuid'; -export default function autogenerateColumns(tableData, existingColumns, columnDeletionHistory, setProperty) { +export default function autogenerateColumns( + tableData, + existingColumns, + columnDeletionHistory, + useDynamicColumn, + dynamicColumn = [], + setProperty +) { + if (useDynamicColumn) { + if (dynamicColumn.length > 0 && dynamicColumn[0].name) { + const generatedColumns = dynamicColumn.map((item) => { + return { + ...item, + id: uuidv4(), + name: item?.name, + key: item?.key || item?.name, + autogenerated: true, + }; + }); + return generatedColumns; + } + return []; + } + const firstRow = tableData?.[0] ?? {}; const firstRowWithoutNestedElements = Object.fromEntries( diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx index b1df1a1bb4..829ba33030 100644 --- a/frontend/src/Editor/Components/Table/columns/index.jsx +++ b/frontend/src/Editor/Components/Table/columns/index.jsx @@ -75,7 +75,8 @@ export default function generateColumnsData({ customRule: column?.customRule, Cell: function ({ cell, isEditable }) { const rowChangeSet = changeSet ? changeSet[cell.row.index] : null; - let cellValue = rowChangeSet ? rowChangeSet[column.name] ?? cell.value : cell.value; + let cellValue = rowChangeSet ? rowChangeSet[column.key || column.name] ?? cell.value : cell.value; + const rowData = tableData[cell.row.index]; if ( cell.row.index === 0 && diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx index c9ac6a2889..e645667afa 100644 --- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx @@ -920,6 +920,9 @@ class TableComponent extends React.Component { const enabledSort = component.component.definition.properties.enabledSort?.value ? resolveReferences(component.component.definition.properties.enabledSort?.value, currentState) : true; + const useDynamicColumn = component.component.definition.properties.useDynamicColumn?.value + ? resolveReferences(component.component.definition.properties.useDynamicColumn?.value, currentState) ?? false + : false; const renderCustomElement = (param, paramType = 'properties') => { return renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState); @@ -946,84 +949,90 @@ class TableComponent extends React.Component { title: 'Columns', children: (
-
- -
- { - this.onDragEnd(result); - }} - > - - {({ innerRef, droppableProps, placeholder }) => ( -
- {columns.value.map((item, index) => { - const resolvedItemName = resolveReferences(item.name, this.state.currentState); - return ( - - {(provided, snapshot) => ( -
- -
-
-
- -
-
-
- {resolvedItemName} + {!useDynamicColumn && ( + <> +
+ +
+ { + this.onDragEnd(result); + }} + > + + {({ innerRef, droppableProps, placeholder }) => ( +
+ {columns.value.map((item, index) => { + const resolvedItemName = resolveReferences(item.name, this.state.currentState); + return ( + + {(provided, snapshot) => ( +
+ +
+
+
+ +
+
+
+ {resolvedItemName} +
+
+
+ this.removeColumn(index)} + width="10" + height="16" + viewBox="0 0 10 16" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + +
-
- this.removeColumn(index)} - width="10" - height="16" - viewBox="0 0 10 16" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - - -
-
+
- -
- )} - - ); - })} - {placeholder} -
- )} - - + )} + + ); + })} + {placeholder} +
+ )} + + + + )} +
{renderCustomElement('useDynamicColumn')}
+ {useDynamicColumn &&
{renderCustomElement('columnData')}
}
), }); diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index 052e961e4a..accec8c3c0 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/frontend/src/Editor/WidgetManager/widgetConfig.js @@ -134,6 +134,17 @@ export const widgets = [ // }, // }, }, + useDynamicColumn: { + type: 'toggle', + displayName: 'Use dynamic column', + validation: { + schema: { type: 'boolean' }, + }, + }, + columnData: { + type: 'code', + displayName: 'Column data', + }, rowsPerPage: { type: 'code', displayName: 'Number of rows per page', @@ -400,6 +411,10 @@ export const widgets = [ value: "{{ [ \n\t\t{ id: 1, name: 'Sarah', email: 'sarah@example.com'}, \n\t\t{ id: 2, name: 'Lisa', email: 'lisa@example.com'}, \n\t\t{ id: 3, name: 'Sam', email: 'sam@example.com'}, \n\t\t{ id: 4, name: 'Jon', email: 'jon@example.com'} \n] }}", }, + useDynamicColumn: { value: '{{false}}' }, + columnData: { + value: "{{[{name: 'email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: true}]}}", + }, rowsPerPage: { value: '{{10}}' }, serverSidePagination: { value: '{{false}}' }, enableNextButton: { value: '{{true}}' },