updated

src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx

@@ -1,9 +1,9 @@
-
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import React, { useEffect, useState } from "react";
 import {
   Badge,
   Button,
+  FormControl,
   FormLabel,
   Menu,
   MenuButton,
@@ -16,39 +16,41 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  FormErrorMessage
 } from "@chakra-ui/react";
 import {
-  useGetIOByIdQuery,
   useGetIOprepopulateDataQuery,
   useUpdateStatusIoMutation,
 } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
 
-const UpdateIOStatus = ({ isOpen, onClose , status}) => {
+const UpdateIOStatus = ({ isOpen, onClose, status }) => {
   const params = useParams();
   const id = params?.id;
-  const [selectedItem, setSelectedItem] = useState(status?.[0]?.statusAdmin);
+  const [selectedItem, setSelectedItem] = useState();
   const [isLoadingg, setIsLoading] = useState(false);
-  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
+  const [error, setError] = useState("");
   const [selectedStatusId, setSelectedStatusId] = useState(status?.[0]?.id);
-  useEffect(() => {
-    setSelectedItem(status?.[0]?.statusAdmin)
-    setSelectedStatusId(status?.[0]?.id)
-  }, [status])
-  
-  
-
-  
 
+  const { data } = useGetIOprepopulateDataQuery();
   const [updateStatusIo] = useUpdateStatusIoMutation();
 
+  useEffect(() => {
+    setSelectedStatusId(status?.[0]?.id);
+  }, [status]);
+
   const handleMenuItemClick = (item, id) => {
     setSelectedItem(item);
     setSelectedStatusId(id);
   };
 
   const handleSubmit = async () => {
-    setIsLoading(true)
+    if (!selectedStatusId) {
+      setError("Status is required.");
+      return;
+    }
+    setError("");
+    setIsLoading(true);
     try {
       const res = await updateStatusIo({
         data: {
@@ -57,109 +59,117 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
         id,
       });
       console.log(res);
-      setIsLoading(false)
-      onClose()
-    } catch (error) {}
+      setIsLoading(false);
+      handleClose();
+    } catch (error) {
+      setIsLoading(false);
+    }
   };
 
+  const handleClose = () => {
+    setSelectedItem("")
+    onClose()
+  }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={handleClose}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-            Status
-          </FormLabel>
-          <Menu>
-            <MenuButton
-              as={Button}
-              rightIcon={<ChevronDownIcon />}
-              fontSize={"sm"}
-              fontWeight={500}
-              w={"100%"}
-              textAlign={"left"}
-            >
-              <Badge 
-          rounded={"full"}
-          pt={1.5}
-          pb={1.5}
-          ps={4}
-          pe={4}
-          mt={1.5}
-          mb={1.5}
-          textTransform={"none"}
-          colorScheme={
-            selectedItem === "Draft"
-              ? "gray"
-              : selectedItem === "Processing"
-              ? "yellow"
-              : selectedItem === "Open"
-              ? "blue"
-              : selectedItem === "Closed"
-              ? "green"
-              : selectedItem === "Exited"
-              ? "red"
-              : selectedItem === "Canclled"
-              ? "orange"
-              : "purple"
-          } 
-          py={"3px"} px={"8px"}>
-                    {selectedItem ? selectedItem: "No action"}
-                  </Badge>
-            </MenuButton>
-            
-            <MenuList w={"400px"}>
-              {status?.map(({ id, statusAdmin }) => (
-                <MenuItem
-                  key={id}
-                  fontSize={"sm"}
-                  onClick={() => handleMenuItemClick(statusAdmin, id)}
-                >
+          <FormControl isInvalid={!!error}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+              Status
+            </FormLabel>
+            <Menu>
+              <MenuButton
+                as={Button}
+                rightIcon={<ChevronDownIcon />}
+                fontSize={"sm"}
+                fontWeight={500}
+                w={"100%"}
+                textAlign={"left"}
+              >
+                {selectedItem ? (
                   <Badge 
-          rounded={"full"}
-          pt={1.5}
-          pb={1.5}
-          ps={4}
-          pe={4}
-          mt={1.5}
-          mb={1.5}
-          textTransform={"none"}
-          
-          // variant={"solid"}
-          colorScheme={
-            statusAdmin === "Draft"
-              ? "gray"
-              : statusAdmin === "Processing"
-              ? "yellow"
-              : statusAdmin === "Open"
-              ? "blue"
-              : statusAdmin === "Closed"
-              ? "green"
-              : statusAdmin === "Exited"
-              ? "red"
-              : statusAdmin === "Canclled"
-              ? "orange"
-              : "purple"
-          }
-          py={"1px"} px={"8px"}>
-                    {statusAdmin}
+                    rounded={"full"}
+                    pt={1.5}
+                    pb={1.5}
+                    ps={4}
+                    pe={4}
+                    mt={1.5}
+                    mb={1.5}
+                    textTransform={"none"}
+                    colorScheme={
+                      selectedItem === "Draft"
+                        ? "gray"
+                        : selectedItem === "Processing"
+                        ? "yellow"
+                        : selectedItem === "Open"
+                        ? "blue"
+                        : selectedItem === "Closed"
+                        ? "green"
+                        : selectedItem === "Exited"
+                        ? "red"
+                        : selectedItem === "Canclled"
+                        ? "orange"
+                        : "purple"
+                    } 
+                    py={"3px"} px={"8px"}
+                  >
+                    {selectedItem}
                   </Badge>
-                </MenuItem>
-              ))}
-            </MenuList>
-          </Menu>
+                ) : "Select Item"}
+              </MenuButton>
+
+              {status?.length > 0 ?<MenuList w={"400px"}>
+                {status?.map(({ id, statusAdmin }) => (
+                  <MenuItem
+                    key={id}
+                    fontSize={"sm"}
+                    onClick={() => handleMenuItemClick(statusAdmin, id)}
+                  >
+                    <Badge 
+                      rounded={"full"}
+                      pt={1.5}
+                      pb={1.5}
+                      ps={4}
+                      pe={4}
+                      mt={1.5}
+                      mb={1.5}
+                      textTransform={"none"}
+                      colorScheme={
+                        statusAdmin === "Draft"
+                          ? "gray"
+                          : statusAdmin === "Processing"
+                          ? "yellow"
+                          : statusAdmin === "Open"
+                          ? "blue"
+                          : statusAdmin === "Closed"
+                          ? "green"
+                          : statusAdmin === "Exited"
+                          ? "red"
+                          : statusAdmin === "Canclled"
+                          ? "orange"
+                          : "purple"
+                      }
+                      py={"1px"} px={"8px"}
+                    >
+                      {statusAdmin}
+                    </Badge>
+                  </MenuItem>
+                ))}
+              </MenuList>:""}
+            </Menu>
+            <FormErrorMessage fontSize={'xs'} fontWeight={600} >{error}</FormErrorMessage>
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
-            // bg={"hsla(139, 100%, 14%, 1)"}
             colorScheme="forestGreen"
             mr={3}
             color={"#fff"}
-            // _hover={{
-            //   bg: "hsl(139deg 98.99% 26.59%)",
-            // }}
             size={"sm"}
             rounded={"sm"}
             onClick={handleSubmit}
@@ -167,7 +177,7 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
           >
             Save
           </Button>
-          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
+          <Button size={"sm"} rounded={"sm"} mr={3} onClick={handleClose}>
             Close
           </Button>
         </ModalFooter>