Merge branch 'add/widgets/conditional-editing' into 'main'

widgets only edited on btn click

See merge request vkuchenik/website-framework!25

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

@@ -5,7 +5,7 @@
 import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
-export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {    
+export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets}) {    
     return (
         // This uses Chakra's built in menu component
         <Menu.Root>
@@ -18,9 +18,9 @@ export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {
                 <Menu.Positioner>
                     <Menu.Content>
                         <Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
-                        <Menu.Item onClick={onEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
                         <Menu.Item 
-                            onClick={onRemoveWidgets}
+                            onClick={onDeleteWidgets}
                             color="fg.error"
                             _hover={{ bg: "bg.error", color: "fg.error "}}
                         >

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

@@ -6,16 +6,25 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
 import { Gas } from "./DashboardCanvasNav/Gas";
 import { Seismic } from "./DashboardCanvasNav/Seismic";
 import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export function DashboardCanvas() {
+  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+  const [newCounter, setNewCounter] = useState(3);
   const [layout, setLayout] = useState([
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    { 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: false },
+    { 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: false }
+    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
   ]);
 
-  const [newCounter, setNewCounter] = useState(3);
+  useEffect(() => {
+    setLayout(prevLayout => 
+      prevLayout.map(item => ({
+        ...item,
+        static: !isEditable  // static false means resizable/editable
+      }))
+    );
+  }, [isEditable]);
 
   const onAddWidget = () => {
     const newId = newCounter.toString();
@@ -32,7 +41,12 @@ export function DashboardCanvas() {
     setNewCounter(prev => prev + 1);
   };
 
-  const onRemoveWidget = (id) => {
+  const onEditWidgets = () => {
+    console.log("widgets are now editable")
+    setIsEditable(true);
+  }
+
+  const onDeleteWidgets = (id) => {
     setLayout(prev => prev.filter(w => w.i !== id));
   }
 
@@ -73,12 +87,12 @@ export function DashboardCanvas() {
           </Tabs.Trigger>
         </Tabs.List>
 
-        <HStack>
+        <HStack >
           <SearchBar />
-          <SettingsButton 
+          <SettingsButton visible={isEditable}
             onAddWidget={ onAddWidget }
-            // onEditWidgets={ onEditWidgets }
+            onEditWidgets={ onEditWidgets }
-            onDeleteWidgets={ onRemoveWidget }
+            onDeleteWidgets={ onDeleteWidgets }
           />
         </HStack>
       </Flex>

client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx

@@ -26,16 +26,16 @@ export default function WidgetCanvas({layout, onLayoutChange}) {
     return (
         <chakra.div width="100%">
             <ResponsiveGridLayout
-                className="layout"
+              className="layout"
-                layout={layout}
+              layout={layout}
-                cols={12} // Total columns in grid
+              cols={12} // Total columns in grid
-                rowHeight={30} //Height of a single row in px
+              rowHeight={30} //Height of a single row in px
-                isBounded={true} // Total width of the grid
+              isBounded={true} // Total width of the grid
-                margin={[10, 10]} // [horizontal, vertical] gap
+              margin={[10, 10]} // [horizontal, vertical] gap
-                onLayoutChange={onLayoutChange}
+              onLayoutChange={onLayoutChange}
-                draggableHandle=".widget-handle" // Make only the header draggable
+              draggableHandle=".widget-handle" // Make only the header draggable
-                onDragStart={handleDragStart}
+              onDragStart={handleDragStart}
-                onDragStop={handleDragStop}
+              onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
                     // this flex wrapper allows the widget to shrink down to the header size, no less