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

now can delete widgets

See merge request vkuchenik/website-framework!31

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

@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function CancelButton ({onCancel}) {
+  return (
+    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+  )
+}

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

@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function SaveButton ({onSave}) {
+  return (
+    <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+  )
+}

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

@@ -1,13 +1,26 @@
-import { useSlotRecipe, chakra } from "@chakra-ui/react"
+import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
 
-export default function Widget({ title }) {
+export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) {
+  console.log("rendering widget");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe();
 
   return (
     <>
-      <chakra.div css={styles.header} className="widget-handle" >
+      {console.log("This widgets id is: ", id)}
-        {title}
+      <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
+        {isDelete ? (
+          <>
+            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+              <Text className="widget-handle" w="100%">{title}</Text>
+              <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
+            </Flex>
+          </>
+        ):(
+          <>
+            <Text className="widget-handle" >{title}</Text>
+          </>
+        )}
       </chakra.div>
       <chakra.div css={styles.canvas} >
         This is their widget content - drag or resize me!

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

@@ -6,22 +6,16 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
 import { Gas } from "./DashboardCanvasNav/Gas";
 import { Seismic } from "./DashboardCanvasNav/Seismic";
 import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useDebugValue } from "react";
+import { CancelButton } from "../components/CancelButton";
+import { SaveButton } from "../components/SaveButton";
 
 export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+  const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
   const [originalLayout, setOriginalLayout] = useState([]);
 
-  useEffect(() => {
-    setLayout(prevLayout => 
-      prevLayout.map(item => ({
-        ...item,
-        static: !isEditable  // static false means resizable/editable
-      }))
-    );
-  }, [isEditable]);
-
   const onAddWidget = () => {
     const newId = newCounter.toString();
     setLayout(prev => [
@@ -37,6 +31,16 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
     setNewCounter(prev => prev + 1);
   };
 
+  useEffect(() => {
+    console.log("static change effect");
+    setLayout(prevLayout => 
+      prevLayout.map(item => ({
+        ...item,
+        static: !isEditable  // static false means resizable/editable
+      }))
+    );
+  }, [isEditable]);
+
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
@@ -44,23 +48,35 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
   }
 
   const onSave = () => {
-    setOriginalLayout([]) // Clear backup layout
+    console.log("saving widgets...");
     setIsEditable(false);
+    setIsDelete(false);
+    setOriginalLayout([]) // Clear backup layout
   }
 
   const onCancel = () => {
+    console.log("canceling changes...");
     if (originalLayout.length) { 
       setLayout(originalLayout.map(item => ({
         ...item, 
         static: true
       })));
     };
-    setOriginalLayout([]); 
     setIsEditable(false);
+    setIsDelete(false);
+    setOriginalLayout([]); 
   }
 
-  const onDeleteWidgets = (id) => {
+  const onDeleteWidgets = () => {
-    setLayout(prev => prev.filter(w => w.i !== id));
+    console.log("Start deleting widgets...");
+    setOriginalLayout(layout);
+    setIsEditable(true);
+    setIsDelete(true);
+  }
+
+  const DeleteWidget = (id) => {
+    console.log("Deleting widget with id: ", id);
+    setLayout(layout => layout.filter(w => w.i !== id));
   }
 
   return (
@@ -96,10 +112,10 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
         </Tabs.List>
 
         <HStack >
-          {isEditable ? (
+          {isEditable || isDelete ? (
             <>
-              <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+              <SaveButton onSave={onSave} />
-              <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+              <CancelButton onCancel={onCancel} />
             </>
           ):(
             <>
@@ -119,6 +135,9 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
         <WidgetCanvas 
           layout={layout}
           onLayoutChange={onLayoutChange}
+          isEditable={isEditable}
+          isDelete={isDelete}
+          DeleteWidget={DeleteWidget}
         />
       </Tabs.Content>
       <Tabs.Content value="gas">

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

@@ -7,7 +7,8 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../../components/Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas({layout, onLayoutChange}) {
+export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget}) {
+  console.log("rendering widgetcanvas");
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
@@ -24,26 +25,26 @@ export default function WidgetCanvas({layout, onLayoutChange}) {
     };
 
     return (
-        <chakra.div width="100%">
+      <chakra.div width="100%">
-            <ResponsiveGridLayout
+        <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) => (
+          {layout.map((item) => (
-                    // this flex wrapper allows the widget to shrink down to the header size, no less
+              // this flex wrapper allows the widget to shrink down to the header size, no less
-                    <Flex key={item.i} css={styles.root} height="100%" >
+              <Flex key={item.i} css={styles.root} height="100%" >
-                        <Widget title="VDAP Widget" />
+                  <Widget id={item.i} title="VDAP Widget" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
-                    </Flex>
+              </Flex>
-                ))}
+          ))}
-            </ResponsiveGridLayout>
+        </ResponsiveGridLayout>
-        </chakra.div>
+    </chakra.div>
-    );
+  );
 }

client/src/theme.js

@@ -70,7 +70,9 @@ const widgetRecipe = defineSlotRecipe({
       bg: "base200",
       cursor: "move",
       borderRadius: "sm",
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      textAlign: "left",
+      pl: "2"
     },
     canvas: {
       flex: "1 1 auto",