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

widget menu refactoring

See merge request vkuchenik/website-framework!59

client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx

@@ -1,37 +0,0 @@
-import { IoIosArrowBack } from "react-icons/io";
-import { Menu, Portal } from "@chakra-ui/react";
-import AlertLevel from "./AlertLevelWidget";
-
-export default function AddWidgetMenu({appendWidget}) {
-  return (
-    <Menu.Root>
-      <Menu.TriggerItem>
-        <IoIosArrowBack /> Add Widget
-      </Menu.TriggerItem>
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item 
-              value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item>
-              CO2
-            </Menu.Item>
-            <Menu.Item>
-              IVANS
-            </Menu.Item>
-            <Menu.Item>
-              Plume Heights
-            </Menu.Item>
-            <Menu.Item>
-              Alert Level Changes
-            </Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  )
-}

client/src/components/Canvas/CanvasComponents/DialogPopup.jsx

@@ -0,0 +1,33 @@
+import { Dialog, Portal, CloseButton, Button } from "@chakra-ui/react";
+
+export default function DialogPopup({dialog}) {
+  console.log("3. dialog popup")
+  return(
+    <Dialog.RootProvider value={dialog}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Leave Your Changes Behind?</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <p>
+                Click 'No' to go back and save your changes before navigating away from MyDashboard.
+              </p>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline">No</Button>
+              </Dialog.ActionTrigger>
+              <Button bg="tomato">Yes</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.RootProvider>
+  );
+}

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -1,10 +1,8 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
-// import AddWidgetMenu from './AddWidgetMenu';
+import { Box, Menu, Portal } from '@chakra-ui/react'
+import WidgetMenu from './WidgetMenu';
 
 export default function FirstWidgetButton({ appendWidget }) {
-    return (
-        <Menu.Root positioning={{ placement: "bottom-middle" }} >
+  const triggerItem = (<>
     <Menu.Trigger asChild>
       <Box
         p={6}
@@ -26,25 +24,13 @@ export default function FirstWidgetButton({ appendWidget }) {
           boxShadow: "lg",
         }}
       >
-                    Add First Widget
+        Add Your First Widget
       </Box>
     </Menu.Trigger>
-            <Portal>
-                <Menu.Positioner>
-                    <Menu.Content>
-                        <Menu.Item 
-                            value="AlertLevel" 
-                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
-                        >
-                            Alert Level
-                        </Menu.Item>
-                        <Menu.Item value="co2">CO2</Menu.Item>
-                        <Menu.Item value="ivans">IVANS</Menu.Item>
-                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Portal>
-        </Menu.Root>
+  </>);
+  const positioning = { placement: "bottom-middle" };
+  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
+  return (
+    <WidgetMenu {...WidgetMenuProps} />
   );
 }

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

@@ -1,9 +1,11 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { IoIosArrowBack } from "react-icons/io";
 import { FiSettings } from "react-icons/fi";
-import AddWidgetMenu from "./AddWidgetMenu";
+import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
-  const addWidgetMenuProps = { appendWidget }
+  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -14,7 +16,7 @@ export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget})
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu {...addWidgetMenuProps}/>
+            <WidgetMenu {...WidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}

client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx

@@ -0,0 +1,26 @@
+import { Menu, Portal } from "@chakra-ui/react";
+import AlertLevel from "./AlertLevelWidget";
+
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
+  return (
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item 
+              value="AlertLevel" 
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
+            >
+              Alert Level
+            </Menu.Item>
+            <Menu.Item value="co2">CO2</Menu.Item>
+            <Menu.Item value="ivans">IVANS</Menu.Item>
+            <Menu.Item value="plume heights">Plume Heights</Menu.Item>
+            <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  )
+}

client/src/components/Dashboard.jsx

@@ -1,8 +1,9 @@
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
 import { useState } from 'react';
+import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
@@ -16,6 +17,7 @@ export default function Dashboard() {
   const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
+  const dialog = useDialog();
 
   const beginEditIfNeeded = () => {
     if ( !isEditable ) {
@@ -43,12 +45,17 @@ export default function Dashboard() {
   
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
+    console.log("1. handling view change")
     if (view === "mydashboard" && isEditable) {
-      const confirmed = window.confirm(
-        "You have unsaved changes. Discard them and continue?"
-      );
-      if (!confirmed) return; 
-      onCancel(); // Discards the layout
+      console.log("2. currently editing");
+      dialog.setOpen(true);
+      return;
+
+      // const confirmed = window.confirm(
+      //   "You have unsaved changes. Discard them and continue?"
+      // );
+      // if (!confirmed) return; 
+      // onCancel();
     }
     setView(nextView);
   };
@@ -63,6 +70,8 @@ export default function Dashboard() {
   const headerProps = { onChangeView: handleViewChange };
   
   return (
+    <> 
+      <DialogPopup dialog={dialog} />
       <Grid css={styles}
         templateRows="1fr 11fr"
         // templateColumns="1fr 20fr"
@@ -80,5 +89,6 @@ export default function Dashboard() {
           <Canvas {...canvasProps}/>
         </GridItem>
       </Grid>
+    </>
   );
 }