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

Added input validation

See merge request vkuchenik/website-framework!58

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

@@ -13,7 +13,7 @@ export default function AddWidgetMenu({appendWidget}) {
           <Menu.Content>
             <Menu.Item 
               value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}  // width and height are passed through here for each widget
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
             >
               Alert Level
             </Menu.Item>

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

@@ -1,13 +1,18 @@
 import Widget from "./Widget";
-import { Stack, Box, Field, Input, Button, Text } from "@chakra-ui/react";
+import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
+import { LuAsterisk } from "react-icons/lu";
 
 export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit, reset, formState: {errors} } = useForm();
   const onSubmit = (data) => {
-    console.log(data);
+    console.log("data: ", data);
+    if (data.volcanoname === '') {
+      return null;
+    }
     setIsSubmit(true);
+    reset();
   }
   const [isSubmit, setIsSubmit] = useState(false);
 
@@ -16,6 +21,7 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
   return (
     <Widget title="Alert Level" {...widgetProps}>
       {!isSubmit ? (
+        // DISPLAYING INPUT FIElDS AND LABELS
         <Box 
           as="form" 
           onSubmit={handleSubmit(onSubmit)}
@@ -26,23 +32,34 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
           pr={3}
           display="flex"
           flexDir="column"
-          gap="3"
+          gap="10"
         >
-          <Field.Root orientation="horizontal" >
+          <Field.Root orientation="horizontal">
             <Stack direction="column" gap="3" width="100%">
-              <Stack direction="row" display="flex" flexShrink={1} spacing={4} align="center" width="100%">
+              <Stack direction="row" width="100%">
                 <Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
+                {/* place select drop down menu here instead of asking for input */}
                 <Input {...register("countryname")} placeholder="Enter country name"/>
               </Stack>
-              <Stack direction="row" display="flex" spacing={4} align="center" width="100%">
-                <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">Volcano Name</Field.Label>
-                <Input {...register("countryname")} placeholder="Enter volcano name"/>
-              </Stack>
+              <Flex position="relative" dir="column" gap="0.5" width="100%">
+                <Stack direction="row" width="100%">
+                  <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">
+                    Volcano Name <LuAsterisk color="tomato" />
+                  </Field.Label>
+                  <Input 
+                    border={errors.volcanoname ? "2px solid" : undefined}
+                    borderColor={errors.volcanoname ? "tomato" : undefined} 
+                    {...register("volcanoname", { required: 'This field is required.' })} 
+                    placeholder="Enter volcano name"/>
+                </Stack>
+                {errors.volcanoname && <Box cursor="default" userSelect="none" position="absolute" top="40px" left="8.5rem" style={{ color: 'tomato' }}>{errors.volcanoname.message}</Box>}
+              </Flex>
             </Stack>
           </Field.Root>
-          <Button type="submit" size="sm" onClick={() => setIsSubmit(true)}>Submit</Button>
+          <Button type="submit" size="sm">Submit</Button>
         </Box>
       ):(
+        // DISPLAYING ALERT LEVEL DATA
         <Box p={1} mt={1} ml="auto" mr="auto" width="200px">
           <Box
             bg="bg" 

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

@@ -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={16} // Total columns in grid
+        cols={15} // 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