Rename and Restructure

+ took out extra 'layout' directory. + 'Canvas' postfix removed from all files in the views directory. + "WidgetCanvas" renamed to "MyDashboard"
2025-08-05 12:57:18 -07:00
parent 03a335710f
commit ff95f2cbc0
27 changed files with 20 additions and 20 deletions
@@ -0,0 +1,72 @@
+import Header from './Header/Header.jsx';
+import Sidebar from './Sidebar/Sidebar.jsx';
+import Canvas from './Canvas/Canvas.jsx';
+import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
+import { useState } from 'react';
+
+export default function Dashboard() {
+  const recipe = useRecipe({ key: "dashboard" });
+  const styles = recipe();
+
+  const [darkMode, setDarkMode] = useState(false);
+  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([]);
+  const [widgetArray, setWidgetArray] = useState([]);
+
+  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);
+  };
+  
+  const onLayoutChange = (newLayout) => setLayout(newLayout);
+
+  // Prop Forwarding
+  const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, 
+    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray
+  };
+  const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
+  const headerProps = { onChangeView: handleViewChange };
+  
+  return (
+      <Grid css={styles}
+        templateRows="1fr 11fr"
+        // templateColumns="1fr 20fr"
+        templateColumns="auto 1fr"
+        height="100vh"
+        width="100vw"
+      >
+        <GridItem rowSpan={1} colSpan={2}>
+          <Header {...headerProps}/>
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Sidebar {...sidebarProps}/>
+        </GridItem>
+        <GridItem colSpan={1} width="100%" overflow="auto">
+          <Canvas {...canvasProps}/>
+        </GridItem>
+      </Grid>
+  );
+}