admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3255-simplified-parts-management - Update and fix dashboard-grid.component.jsx

Browse Source
This commit is contained in:
Dave
2025-08-21 15:51:10 -04:00
parent 96e38d509f
commit ed6a8b210d
3 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/package-lock.json generated
View File

@@ -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",

2
client/package.json
View File

@@ -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",

31
client/src/components/dashboard-grid/dashboard-grid.component.jsx
View File

@@ -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) => {