From c1787d7871fd5d6f376271fcc81fd4fe047e83dd Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 11 Aug 2025 14:17:21 -0700 Subject: [PATCH 1/3] Fix first widget is now removed upon clicking Cancel --- client/src/components/Canvas/views/Home.jsx | 53 +++++++++++++------ .../Canvas/views/HomeTabs/MyDashboard.jsx | 2 +- client/src/components/Dashboard.jsx | 16 +++++- 3 files changed, 52 insertions(+), 19 deletions(-) diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index d44c8c4..921b0e0 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -13,14 +13,44 @@ import { v4 as uuid } from 'uuid'; export default function Home({...props}) { // deconstructing props - const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, - isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props; + const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, + isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props; - const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => { + // const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => { + // setLayout(prev => [ + // ...prev, + // { + // i: ID, + // x: (prev.length * 3) % 12, + // y: Infinity, + // w: w, + // h: h, + // minW: minw, + // minH: minh, + // maxW: maxw, + // maxH: maxh, + // static: false, + // resizeHandles: ['se'] + // } + // ]); + // onEditWidgets(); + // }; + + function appendWidget(name, w, h, minw, minh, maxw, maxh) { + beginEditIfNeeded(); // Save state before anything else + + const newID = uuid(); // could be replaced with something else like guid + + setWidgetArray([ // updating widget array containing info on the types of widgets + ...widgetArray, + {i: newID, widget: name } + ]); + // onAddWidget(newID, w, h, minw, minh, maxw, maxh); // updating array containing info on layout of widgets + setLayout(prev => [ ...prev, { - i: ID, + i: newID, x: (prev.length * 3) % 12, y: Infinity, w: w, @@ -31,18 +61,8 @@ export default function Home({...props}) { maxH: maxh, static: false, resizeHandles: ['se'] - } + }, ]); - onEditWidgets(); - }; - - function appendWidget(name, w, h, minw, minh, maxw, maxh) { - const newID = uuid(); // could be replaced with something else like guid - setWidgetArray([ // updating widget array containing info on the types of widgets - ...widgetArray, - {i: newID, widget: name } - ]); - onAddWidget(newID, w, h, minw, minh, maxw, maxh); // updating array containing info on layout of widgets } const onEditWidgets = () => { @@ -70,6 +90,7 @@ export default function Home({...props}) { setIsEditable(false); setIsDelete(false); setOriginalLayout([]); // Clear backup layout + setOriginalWidgets([]); } const onDeleteWidgets = () => { @@ -98,7 +119,7 @@ export default function Home({...props}) { } // Prop Forwarding - const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget }; + const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget }; const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget }; return ( diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index 3856ba4..cddcde1 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -26,7 +26,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet }; // Show large 'Add Widget' button when dashboard is empty - if ( !widgetArray.length ) { + if ( !layout.length ) { return ( { + if ( !isEditable ) { + // Save deep copies to preserve state + setOriginalLayout(structuredClone(layout)); + setOriginalWidgets(structuredClone(widgetArray)); + setIsEditable(true); + setIsDelete(false); + } + }; + const onCancel = () => { - // This is a test comment console.log("canceling changes..."); if (originalLayout.length) { setLayout(originalLayout.map(item => ({ @@ -25,9 +35,11 @@ export default function Dashboard() { static: true }))); }; + setWidgetArray(originalWidgets.length ? originalWidgets : []); setIsEditable(false); setIsDelete(false); setOriginalLayout([]); + setOriginalWidgets([]); } // Prevent navigation while in Edit mode without saving or cancelling @@ -46,7 +58,7 @@ export default function Dashboard() { // Prop Forwarding const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, - onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray + onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, setOriginalWidgets, beginEditIfNeeded }; const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode }; const headerProps = { onChangeView: handleViewChange }; From 77bba49dc88e337af4787c264256ff350239c700 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 11 Aug 2025 14:40:05 -0700 Subject: [PATCH 2/3] Refactor onSave and onCancel to track both layout and widgetArray useState() in order to restore state on cancel --- client/src/components/Canvas/views/Home.jsx | 2 +- client/src/components/Dashboard.jsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index 921b0e0..2516a76 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -13,7 +13,7 @@ import { v4 as uuid } from 'uuid'; export default function Home({...props}) { // deconstructing props - const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, + const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, setOriginalWidgets, isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props; // const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => { diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx index c6667ea..a8dc9d5 100644 --- a/client/src/components/Dashboard.jsx +++ b/client/src/components/Dashboard.jsx @@ -19,9 +19,8 @@ export default function Dashboard() { const beginEditIfNeeded = () => { if ( !isEditable ) { - // Save deep copies to preserve state - setOriginalLayout(structuredClone(layout)); - setOriginalWidgets(structuredClone(widgetArray)); + setOriginalLayout(layout); + setOriginalWidgets(widgetArray); setIsEditable(true); setIsDelete(false); } From cab0fe3a0bec1dfd350beecac58f1e2a249b6666 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 11 Aug 2025 14:53:17 -0700 Subject: [PATCH 3/3] Fix layout of newly added Widgets --- client/src/components/Canvas/views/Home.jsx | 11 ++++++++--- .../components/Canvas/views/HomeTabs/MyDashboard.jsx | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index 2516a76..6d0dfd0 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -40,7 +40,10 @@ export default function Home({...props}) { beginEditIfNeeded(); // Save state before anything else const newID = uuid(); // could be replaced with something else like guid - + const COLS = 16; + const W = w ?? 3; + const H = h ?? 3; + setWidgetArray([ // updating widget array containing info on the types of widgets ...widgetArray, {i: newID, widget: name } @@ -51,8 +54,10 @@ export default function Home({...props}) { ...prev, { i: newID, - x: (prev.length * 3) % 12, - y: Infinity, + // x: (prev.length * 3) % 12, + // y: Infinity, + x: (prev.length * W) % COLS, + y: 0, w: w, h: h, minW: minw, diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index cddcde1..91364e2 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -48,7 +48,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet useCSSTransforms={false} // remove the sliding animation of the widgets className="layout" layout={layout} - cols={15} // Total columns in grid + cols={16} // Total columns in grid rowHeight={30} // Height of a single row in px isBounded={true} // Total width of the grid margin={[15, 5]} // [horizontal, vertical] gap