From 5513259606583bcefcfeae570807d224bc86d107 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 12 Sep 2023 18:06:18 +0530 Subject: [PATCH] fixes: table column updates --- frontend/src/Editor/EditorFunc.jsx | 21 +++----- .../Inspector/Components/Table/Table.jsx | 5 +- frontend/src/Editor/Inspector/Inspector.jsx | 7 ++- frontend/src/_stores/utils.js | 51 +++++++++++++++++++ 4 files changed, 65 insertions(+), 19 deletions(-) diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index c62e9e42bc..c4cccb8d58 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -8,18 +8,7 @@ import { } from '@/_services'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; -import _, { - defaults, - cloneDeep, - isEqual, - isEmpty, - debounce, - omit, - update, - difference, - isNull, - isUndefined, -} from 'lodash'; +import _, { cloneDeep, isEqual, isEmpty, debounce, omit, isNull, isUndefined } from 'lodash'; import { Container } from './Container'; import { EditorKeyHooks } from './EditorKeyHooks'; import { CustomDragLayer } from './CustomDragLayer'; @@ -47,7 +36,7 @@ import { WidgetManager } from './WidgetManager'; import config from 'config'; import queryString from 'query-string'; import { toast } from 'react-hot-toast'; -const { produce, enablePatches, setAutoFreeze, applyPatches } = require('immer'); +const { produce, enablePatches, setAutoFreeze } = require('immer'); import { createWebsocketConnection } from '@/_helpers/websocketConnection'; import RealtimeCursors from '@/Editor/RealtimeCursors'; import { initEditorWalkThrough } from '@/_helpers/createWalkThrough'; @@ -66,7 +55,7 @@ import { useDataQueries, useDataQueriesStore } from '@/_stores/dataQueriesStore' import { useAppVersionStore, useAppVersionActions } from '@/_stores/appVersionStore'; import { useQueryPanelStore } from '@/_stores/queryPanelStore'; import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore'; -import { computeAppDiff, resetAllStores } from '@/_stores/utils'; +import { computeAppDiff, computeComponentPropertyDiff, resetAllStores } from '@/_stores/utils'; import { setCookie } from '@/_helpers/cookie'; import { shallow } from 'zustand/shallow'; import { useEditorActions, useEditorState, useEditorStore } from '@/_stores/editorStore'; @@ -820,7 +809,9 @@ const EditorComponent = (props) => { isUpdatingEditorStateInProcess: false, }); } else if (!isEmpty(props?.editingVersion)) { - const updateDiff = computeAppDiff(appDefinitionDiff, currentPageId, appDiffOptions); + // param diff ofr table columns needs the complte column data or else the json structure is not correct computeComponentPropertyDiff function handles this + const paramDiff = computeComponentPropertyDiff(appDefinitionDiff, appDefinition, appDiffOptions); + const updateDiff = computeAppDiff(paramDiff, currentPageId, appDiffOptions); updateAppVersion(appId, props.editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion) .then(() => { diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx index 52aa71b4d4..df4b0a9be1 100644 --- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx @@ -893,7 +893,8 @@ class TableComponent extends React.Component { column[item] = value; const newColumns = columns.value; newColumns[index] = column; - this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties'); + + this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties', true); }; getItemStyle = (isDragging, draggableStyle) => ({ @@ -938,7 +939,7 @@ class TableComponent extends React.Component { const columns = component.component.definition.properties.columns; const actions = component.component.definition.properties.actions || { value: [] }; - + console.log('-arpit---newCol Inspector----', { columns, component }); if (!component.component.definition.properties.displaySearchBox) paramUpdated({ name: 'displaySearchBox' }, 'value', true, 'properties'); const displaySearchBox = component.component.definition.properties.displaySearchBox.value; diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx index 40de8505d0..857c2859bf 100644 --- a/frontend/src/Editor/Inspector/Inspector.jsx +++ b/frontend/src/Editor/Inspector/Inspector.jsx @@ -119,7 +119,7 @@ export const Inspector = ({ return null; }; - function paramUpdated(param, attr, value, paramType) { + function paramUpdated(param, attr, value, paramType, isParamFromTableColumn = false) { console.log({ param, attr, value, paramType }); let newComponent = JSON.parse(JSON.stringify(component)); let newDefinition = _.cloneDeep(newComponent.component.definition); @@ -146,7 +146,10 @@ export const Inspector = ({ } newDefinition[paramType] = allParams; newComponent.component.definition = newDefinition; - componentDefinitionChanged(newComponent, { componentPropertyUpdated: true }); + componentDefinitionChanged(newComponent, { + componentPropertyUpdated: true, + isParamFromTableColumn: isParamFromTableColumn, + }); } function layoutPropertyChanged(param, attr, value, paramType) { diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js index d178c9fef8..bfd67d7d75 100644 --- a/frontend/src/_stores/utils.js +++ b/frontend/src/_stores/utils.js @@ -48,6 +48,57 @@ export const computeAppDiff = (appDiff, currentPageId, opts) => { return { updateDiff, type, operation }; }; +// for table column diffs, we need to compute the diff for each column separately and send the the entire column data +function generatePath(obj, targetKey, currentPath = '') { + for (const key in obj) { + const newPath = currentPath ? currentPath + '.' + key : key; + + if (key === targetKey) { + return newPath; + } + + if (typeof obj[key] === 'object' && obj[key] !== null) { + const result = generatePath(obj[key], targetKey, newPath); + if (result) { + return result; + } + } + } + return null; +} + +function getValueFromJson(json, path) { + let value = json; + path.split('.').forEach((key) => { + value = value[key]; + }); + return value; +} + +function updateValueInJson(json, path, value) { + let obj = json; + const keys = path.split('.'); + const lastKey = keys.pop(); + keys.forEach((key) => { + obj = obj[key]; + }); + obj[lastKey] = value; + return json; +} + +export const computeComponentPropertyDiff = (appDiff, definition, opts) => { + if (!opts?.isParamFromTableColumn) { + return appDiff; + } + const path = generatePath(appDiff, 'columns'); + + const value2 = getValueFromJson(definition, path); + + const _diff = updateValueInJson(_.cloneDeep(appDiff), path, value2); + + return _diff; +}; + const updateFor = (appDiff, currentPageId, opts) => { const updateTypeMappings = [ {