diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index 82d1258..5e20a67 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas" import { DashboardCanvas } from "./views/DashboardCanvas"; import { DASHBOARD_VIEWS } from "@/constants/viewKeys"; -export default function Canvas({ isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) { +export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) { const recipe = useRecipe({ key: "canvas" }); const styles = recipe(); @@ -30,6 +30,7 @@ export default function Canvas({ isEditable, setIsEditable, isDelete, setIsDelet setOriginalLayout={ setOriginalLayout } onLayoutChange={ onLayoutChange } onChangeView={ onChangeView } + onCancel={ onCancel } isEditable={ isEditable } setIsEditable={ setIsEditable } isDelete={ isDelete } diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx index 8b7e7be..b27c5b5 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -11,7 +11,7 @@ import { CancelButton } from "../components/CancelButton"; import { SaveButton } from "../components/SaveButton"; import DeleteAllButton from "../components/DeleteAllButton"; -export function DashboardCanvas({ isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) { +export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) { // const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) // const [isDelete, setIsDelete] = useState(false); const [newCounter, setNewCounter] = useState(3); @@ -55,18 +55,19 @@ export function DashboardCanvas({ isEditable, setIsEditable, isDelete, setIsDele setOriginalLayout([]) // Clear backup layout } - const onCancel = () => { - console.log("canceling changes..."); - if (originalLayout.length) { - setLayout(originalLayout.map(item => ({ - ...item, - static: true - }))); - }; - setIsEditable(false); - setIsDelete(false); - setOriginalLayout([]); - } + // Lifting up to Dashboard.jsx for prop drilling + // const onCancel = () => { + // console.log("canceling changes..."); + // if (originalLayout.length) { + // setLayout(originalLayout.map(item => ({ + // ...item, + // static: true + // }))); + // }; + // setIsEditable(false); + // setIsDelete(false); + // setOriginalLayout([]); + // } const onDeleteWidgets = () => { console.log("Start deleting widgets..."); diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index 28dde76..4a61747 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -20,6 +20,19 @@ export default function Dashboard() { { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true } ]); + const onCancel = () => { + console.log("canceling changes..."); + if (originalLayout.length) { + setLayout(originalLayout.map(item => ({ + ...item, + static: true + }))); + }; + setIsEditable(false); + setIsDelete(false); + setOriginalLayout([]); + } + // Prevent navigation while in Edit mode without saving or cancelling const handleViewChange = (nextView) => { if (view === "widget" && isEditable) { @@ -68,6 +81,7 @@ export default function Dashboard() { setOriginalLayout={ setOriginalLayout } onLayoutChange={( newLayout ) => setLayout( newLayout )} onChangeView={ handleViewChange } + onCancel={ onCancel } isEditable={ isEditable } setIsEditable={ setIsEditable } isDelete={ isDelete } diff --git a/client/src/components/layout/Header/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx index 250542c..3158e89 100644 --- a/client/src/components/layout/Header/UserAvatarMenu.jsx +++ b/client/src/components/layout/Header/UserAvatarMenu.jsx @@ -1,7 +1,7 @@ import { Avatar, Menu, Portal, Box } from "@chakra-ui/react" -export default function UserAvatarMenu({ view, setView, name, avatar }) { +export default function UserAvatarMenu({ view, setView, onChangeView, name, avatar }) { return ( @@ -21,10 +21,10 @@ export default function UserAvatarMenu({ view, setView, name, avatar }) { {/* zIndex: overlay = 1300 */} - setView("account")}> + onChangeView("account")}> Account - setView("settings")}> + onChangeView("settings")}> Settings console.log("Log out triggered")}>