Merge branch 'fix/edit-mode-scope2' into 'main'

Fix/edit mode scope2

See merge request vkuchenik/website-framework!39

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({ view, setView, layout, setLayout, onLayoutChange, 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();
 
@@ -21,11 +21,20 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
             {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
+                    darkMode={ darkMode }
                     view={ view }
-                    setView={ setView } 
+                    setView={ setView }
                     layout={ layout }
                     setLayout={ setLayout }
+                    originalLayout={ originalLayout }
+                    setOriginalLayout={ setOriginalLayout }
                     onLayoutChange={ onLayoutChange }
+                    onChangeView={ onChangeView }
+                    onCancel={ onCancel }
+                    isEditable={ isEditable }
+                    setIsEditable={ setIsEditable }
+                    isDelete={ isDelete }
+                    setIsDelete={ setIsDelete }
                 />
             )}
             {view === "global" && <GlobalMapCanvas />}

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -11,11 +11,11 @@ import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 import DeleteAllButton from "../components/DeleteAllButton";
 
-export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
+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 [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
-  const [isDelete, setIsDelete] = useState(false);
+  // const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
-  const [originalLayout, setOriginalLayout] = useState([]);
+  // const [originalLayout, setOriginalLayout] = useState([]);
 
   const onAddWidget = () => {
     const newId = newCounter.toString();
@@ -55,18 +55,19 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     setOriginalLayout([]) // Clear backup layout
   }
 
-  const onCancel = () => {
+  // Lifting up to Dashboard.jsx for prop drilling
-    console.log("canceling changes...");
+  // const onCancel = () => {
-    if (originalLayout.length) { 
+  //   console.log("canceling changes...");
-      setLayout(originalLayout.map(item => ({
+  //   if (originalLayout.length) { 
-        ...item, 
+  //     setLayout(originalLayout.map(item => ({
-        static: true
+  //       ...item, 
-      })));
+  //       static: true
-    };
+  //     })));
-    setIsEditable(false);
+  //   };
-    setIsDelete(false);
+  //   setIsEditable(false);
-    setOriginalLayout([]); 
+  //   setIsDelete(false);
-  }
+  //   setOriginalLayout([]); 
+  // }
 
   const onDeleteWidgets = () => {
     console.log("Start deleting widgets...");
@@ -100,15 +101,15 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       // Prevent navigation away from 'My Dashboard' while in Edit mode
       onValueChange={(e) => {
         const nextView = e.value;
-
+        onChangeView(nextView); 
-        if (view === "widget" && isEditable && nextView !== "widget") {
+      //   if (view === "widget" && isEditable && nextView !== "widget") {
-          const confirmed = window.confirm(
+      //     const confirmed = window.confirm(
-            "You have unsaved changes. Do you wish to discard them and continue?"
+      //       "You have unsaved changes. Do you wish to discard them and continue?"
-          );
+      //     );
-          if (!confirmed) return;
+      //     if (!confirmed) return;
-          onCancel();
+      //     onCancel();
-        }
+      //   }
-        setView(nextView);
+      //   setView(nextView);
       }}
     >
       <Flex 

client/src/components/layout/Dashboard.jsx

@@ -10,7 +10,9 @@ export default function Dashboard() {
   const styles = recipe();
 
   const [darkMode, setDarkMode] = useState(false);
-  // Lifted State - defaults to widget dashboard
+  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+  const [isDelete, setIsDelete] = useState(false);
+  const [originalLayout, setOriginalLayout] = useState([]);
   const [view, setView] = useState("widget");
   const [layout, setLayout] = useState([
     { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
@@ -18,6 +20,31 @@ 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) {
+      const confirmed = window.confirm(
+        "You have unsaved changes. Discard them and continue?"
+      );
+      if (!confirmed) return; 
+      onCancel(); // Discards the layout
+    }
+    setView(nextView);
+  };
+
   return (
     <>
       <Grid css={styles}
@@ -30,6 +57,7 @@ export default function Dashboard() {
           <Header
             view={ view }
             setView={ setView }
+            onChangeView={ handleViewChange }
           />
         </GridItem>
         <GridItem colSpan={1}>
@@ -37,7 +65,9 @@ export default function Dashboard() {
             darkMode={ darkMode }
             setDarkMode={ setDarkMode }
             view={ view }
-            onChangeView={ setView }
+            onChangeView={ handleViewChange }
+            isEditabe={ isEditable }
+            // onChangeView={ setView }
           />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
@@ -47,7 +77,15 @@ export default function Dashboard() {
             setView={ setView }
             layout={ layout }
             setLayout={ setLayout }
+            originalLayout={ originalLayout }
+            setOriginalLayout={ setOriginalLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}
+            onChangeView={ handleViewChange }
+            onCancel={ onCancel }
+            isEditable={ isEditable }
+            setIsEditable={ setIsEditable }
+            isDelete={ isDelete }
+            setIsDelete={ setIsDelete }
           />
         </GridItem> 
       </Grid>

client/src/components/layout/Header/Header.jsx

@@ -8,7 +8,7 @@ const user = {
   // avatar: "src\\assets\\user_profile.svg"
 }
 
-export default function Header({ view, setView }) {
+export default function Header({ view, setView, onChangeView }) {
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
 
@@ -25,6 +25,7 @@ export default function Header({ view, setView }) {
           avatar={user.avatar} 
           view={ view }
           setView={ setView }
+          onChangeView={ onChangeView }
         />
       </Flex>
     </chakra.div>

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 (
 		<Menu.Root>
 			<Menu.Trigger focusRing="none">
@@ -21,10 +21,10 @@ export default function UserAvatarMenu({ view, setView, name, avatar }) {
 				{/* zIndex: overlay = 1300 */}
 				<Menu.Positioner zIndex="overlay"> 
 					<Menu.Content>
-						<Menu.Item value="account" onClick={() => setView("account")}>
+						<Menu.Item value="account" onClick={() => onChangeView("account")}>
 							Account
 						</Menu.Item>
-						<Menu.Item value="settings" onClick={() => setView("settings")}>
+						<Menu.Item value="settings" onClick={() => onChangeView("settings")}>
 							Settings
 						</Menu.Item>
 						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>