From ed6a8b210db47dddc0f4d807c88055f5e0f2972b Mon Sep 17 00:00:00 2001 From: Dave Date: Thu, 21 Aug 2025 15:51:10 -0400 Subject: [PATCH] feature/IO-3255-simplified-parts-management - Update and fix dashboard-grid.component.jsx --- client/package-lock.json | 39 ++++++++++++------- client/package.json | 2 +- .../dashboard-grid.component.jsx | 31 +++++++++------ 3 files changed, 44 insertions(+), 28 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index c1b5ffa7b..22990a380 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -59,7 +59,7 @@ "react-dom": "^18.3.1", "react-drag-listview": "^2.0.0", "react-grid-gallery": "^1.0.1", - "react-grid-layout": "1.3.4", + "react-grid-layout": "^1.5.2", "react-i18next": "^15.7.1", "react-icons": "^5.5.0", "react-image-lightbox": "^5.1.4", @@ -8228,6 +8228,12 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-equals": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz", + "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==", + "license": "MIT" + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -10524,13 +10530,6 @@ "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==", "license": "MIT" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", - "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.", - "license": "MIT" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -13330,22 +13329,32 @@ } }, "node_modules/react-grid-layout": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.3.4.tgz", - "integrity": "sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.2.tgz", + "integrity": "sha512-vT7xmQqszTT+sQw/LfisrEO4le1EPNnSEMVHy6sBZyzS3yGkMywdOd+5iEFFwQwt0NSaGkxuRmYwa1JsP6OJdw==", "license": "MIT", "dependencies": { - "clsx": "^1.1.1", - "lodash.isequal": "^4.0.0", + "clsx": "^2.1.1", + "fast-equals": "^4.0.3", "prop-types": "^15.8.1", - "react-draggable": "^4.0.0", - "react-resizable": "^3.0.4" + "react-draggable": "^4.4.6", + "react-resizable": "^3.0.5", + "resize-observer-polyfill": "^1.5.1" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, + "node_modules/react-grid-layout/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/react-i18next": { "version": "15.7.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.1.tgz", diff --git a/client/package.json b/client/package.json index 94009c206..f92ce376b 100644 --- a/client/package.json +++ b/client/package.json @@ -58,7 +58,7 @@ "react-dom": "^18.3.1", "react-drag-listview": "^2.0.0", "react-grid-gallery": "^1.0.1", - "react-grid-layout": "1.3.4", + "react-grid-layout": "^1.5.2", "react-i18next": "^15.7.1", "react-icons": "^5.5.0", "react-image-lightbox": "^5.1.4", diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx index 546481e2e..90372c101 100644 --- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx +++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx @@ -32,12 +32,19 @@ const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); +// Coerce incoming layouts to the object shape expected by ResponsiveRGL +const coerceLayouts = (layouts) => { + if (!layouts) return {}; + return Array.isArray(layouts) ? {} : layouts; +}; + export function DashboardGridComponent({ currentUser, bodyshop }) { const { t } = useTranslation(); + const initial = bodyshop?.associations?.[0]?.user?.dashboardlayout || { items: [], layout: {}, layouts: {} }; const [state, setState] = useState({ - ...(bodyshop.associations[0].user.dashboardlayout - ? bodyshop.associations[0].user.dashboardlayout - : { items: [], layout: {}, layouts: [] }) + items: initial.items || [], + layout: initial.layout || {}, + layouts: coerceLayouts(initial.layouts) }); const notification = useNotification(); @@ -51,12 +58,13 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { const handleLayoutChange = async (layout, layouts) => { logImEXEvent("dashboard_change_layout"); - setState({ ...state, layout, layouts }); + const nextState = { ...state, layout, layouts }; + setState(nextState); const result = await updateLayout({ variables: { email: currentUser.email, - layout: { ...state, layout, layouts } + layout: nextState } }); @@ -81,19 +89,19 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { const handleAddComponent = (e) => { logImEXEvent("dashboard_add_component", { name: e }); - setState({ - ...state, + setState((prev) => ({ + ...prev, items: [ - ...state.items, + ...prev.items, { i: e.key, - x: (state.items.length * 2) % (state.cols || 12), + x: (prev.items.length * 2) % 12, y: 99, // puts it at the bottom w: componentList[e.key].w || 2, h: componentList[e.key].h || 2 } ] - }); + })); }; const dashboardData = useMemo(() => GenerateDashboardData(data), [data]); @@ -130,8 +138,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { className="layout" breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} - width="100%" - layouts={state.layouts} + layouts={state.layouts || {}} onLayoutChange={handleLayoutChange} > {state.items.map((item) => {