Merge branch 'main' into 'widgets/alert-level'

# Conflicts:
#   client/src/components/Canvas/views/Home.jsx

client/src/components/Canvas/views/Home.jsx

@@ -13,16 +13,51 @@ import { v4 as uuid } from 'uuid';
 
 export default function Home({...props}) {
   // deconstructing props
-  const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
+  const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
-    isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+    isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+
+  // const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
+  //   setLayout(prev => [
+  //     ...prev,
+  //     {
+  //       i: ID,
+  //       x: (prev.length * 3) % 12,
+  //       y: Infinity,
+  //       w: w, 
+  //       h: h,
+  //       minW: minw,
+  //       minH: minh,
+  //       maxW: maxw,
+  //       maxH: maxh,
+  //       static: false,
+  //       resizeHandles: ['se']
+  //     }
+  //   ]);
+  //   onEditWidgets();
+  // };
+
+  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
+    beginEditIfNeeded(); // Save state before anything else
+    
+    const newID = uuid();      // could be replaced with something else like guid
+    const COLS = 16;
+    const W = w ?? 3;
+    const H = h ?? 3; 
+
+    setWidgetArray([           // updating widget array containing info on the types of widgets
+      ...widgetArray,
+      {i: newID, widget: name }
+    ]);
+    // onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
     
-  const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
     setLayout(prev => [
       ...prev,
       {
-        i: ID,
+        i: newID,
-        x: (prev.length * 3) % 12,
+        // x: (prev.length * 3) % 12,
-        y: Infinity,
+        // y: Infinity,
+        x: (prev.length * W) % COLS, 
+        y: 0,
         w: w, 
         h: h,
         minW: minw,
@@ -31,18 +66,8 @@ export default function Home({...props}) {
         maxH: maxh,
         static: false,
         resizeHandles: ['se']
-      }
+      },
     ]);
-    // onEditWidgets();
-  };
-
-  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
-    const newID = uuid();      // could be replaced with something else like guid
-    setWidgetArray([           // updating widget array containing info on the types of widgets
-      ...widgetArray,
-      {i: newID, widget: name, resizable: true }
-    ]);
-    onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
   }
 
   const onEditWidgets = () => {
@@ -70,6 +95,7 @@ export default function Home({...props}) {
     setIsEditable(false);
     setIsDelete(false);
     setOriginalLayout([]); // Clear backup layout
+    setOriginalWidgets([]);
   }
 
   const onDeleteWidgets = () => {
@@ -98,7 +124,7 @@ export default function Home({...props}) {
   }
 
   // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget };
+  const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
   const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
   
   return (

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -26,7 +26,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
   };
 
   // Show large 'Add Widget' button when dashboard is empty
-  if ( !widgetArray.length ) {
+  if ( !layout.length ) {
     return (
       <Flex
         align="center"
@@ -48,7 +48,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         useCSSTransforms={false}  // remove the sliding animation of the widgets
         className="layout"
         layout={layout}
-        cols={15} // Total columns in grid
+        cols={16} // Total columns in grid
         rowHeight={30} // Height of a single row in px
         isBounded={true} // Total width of the grid
         margin={[15, 5]} // [horizontal, vertical] gap

client/src/components/Dashboard.jsx

@@ -13,13 +13,22 @@ export default function Dashboard() {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [originalLayout, setOriginalLayout] = useState([]);
+  const [originalWidgets, setOriginalWidgets] = useState([]);
   const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
   const dialog = useDialog();
 
+  const beginEditIfNeeded = () => {
+    if ( !isEditable ) {
+      setOriginalLayout(layout);
+      setOriginalWidgets(widgetArray);
+      setIsEditable(true);
+      setIsDelete(false);
+    }
+  };
+
   const onCancel = () => {
-    // This is a test comment
     console.log("canceling changes...");
     if (originalLayout.length) { 
       setLayout(originalLayout.map(item => ({
@@ -27,9 +36,11 @@ export default function Dashboard() {
         static: true
       })));
     };
+    setWidgetArray(originalWidgets.length ? originalWidgets : []);
     setIsEditable(false);
     setIsDelete(false);
     setOriginalLayout([]); 
+    setOriginalWidgets([]);
   }
   
   // Prevent navigation while in Edit mode without saving or cancelling
@@ -53,7 +64,7 @@ export default function Dashboard() {
 
   // Prop Forwarding
   const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, 
-    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray
+    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, setOriginalWidgets, beginEditIfNeeded
   };
   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
   const headerProps = { onChangeView: handleViewChange };