Merge branch 'add/persistant-widget-state' into 'main'

Add persistant widget state across sidebar 'dashboard' button and canvas...

See merge request vkuchenik/website-framework!27

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

@@ -9,10 +9,15 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
-export default function Canvas({ view }) {
+export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
     return (
         <Box height="100%" width="100%">
-            {view === "widget" && <DashboardCanvas />}
+            {view === "widget" && 
+                <DashboardCanvas 
+                    layout={ layout }
+                    setLayout={ setLayout }
+                    onLayoutChange={ onLayoutChange }
+                />}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}

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

@@ -8,14 +8,14 @@ import { Seismic } from "./DashboardCanvasNav/Seismic";
 import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
 import { useState, useEffect } from "react";
 
-export function DashboardCanvas() {
+export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [newCounter, setNewCounter] = useState(3);
-  const [layout, setLayout] = useState([
+  // const [layout, setLayout] = useState([
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
+  //   { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
+  //   { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
+  //   { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
-  ]);
+  // ]);
   const [originalLayout, setOriginalLayout] = useState([]);
 
   useEffect(() => {
@@ -68,10 +68,10 @@ export function DashboardCanvas() {
     setLayout(prev => prev.filter(w => w.i !== id));
   }
 
-  const onLayoutChange = (newLayout) => { 
+  // const onLayoutChange = (newLayout) => { 
-    setLayout(newLayout);
+  //   setLayout(newLayout);
-    console.log('Updated layout:', newLayout)
+  //   console.log('Updated layout:', newLayout)
-  };
+  // };
 
   return (
     /* HEADER */

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

@@ -14,8 +14,6 @@ export default function RegionalMapCanvas() {
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
-
-            
             >
                 <Text fontsize="2xl" fontWeight="bold" color="gray.700">
                     Regional Map Canvas coming soon!

client/src/components/layout/Dashboard.jsx

@@ -11,6 +11,16 @@ export default function Dashboard() {
 
   // Lifted State - defaults to widget dashboard
   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 },
+    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
+    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
+  ]);
+
+  const onLayoutChange = (newLayout) => { 
+      setLayout(newLayout);
+      console.log('Updated layout:', newLayout)
+    };
 
   return (
     <>
@@ -62,7 +72,12 @@ export default function Dashboard() {
           <Sidebar onChangeView={ setView }/>
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
-          <Canvas view={ view }/>
+          <Canvas 
+            view={ view }
+            layout={ layout }
+            setLayout={ setLayout }
+            onLayoutChange={( newLayout ) => setLayout( newLayout )}
+          />
         </GridItem> 
       </Grid>
     </>