add Complete Project warning msg

disable Save btn until loading finish
bug fixes

src/components/CreateProject/CreateProject.tsx

@@ -48,6 +48,7 @@ import {
   deleteDialog,
   errorDialog,
   submitDialog,
+  submitDialogWithWarning,
   successDialog,
 } from "../Swal/CustomAlerts";
 import dayjs from "dayjs";
@@ -129,6 +130,14 @@ const CreateProject: React.FC<Props> = ({
   const [tabIndex, setTabIndex] = useState(0);
   const { t } = useTranslation();
   const router = useRouter();
+
+  const defaultBtn = {
+    buttonName: "submit",
+    title: t("Do you want to submit?"),
+    confirmButtonText: t("Submit"),
+    successTitle: t("Submit Success"),
+    errorTitle: t("Submit Fail")
+  }
   const [buttonData, setButtonData] = useState<{
     buttonName: string;
     title: string;
@@ -139,16 +148,25 @@ const CreateProject: React.FC<Props> = ({
     buttonIcon: any;
     buttonColor: any
   }> ({
-    buttonName: "submit",
-    title: t("Do you want to submit?"),
-    confirmButtonText: t("Submit"),
-    successTitle: t("Submit Success"),
-    errorTitle: t("Submit Fail"),
+    ...defaultBtn,
     buttonText: t("Submit Project"),
-    buttonIcon: <PlayArrow />,
+    buttonIcon: <Check />,
     buttonColor : "success"
   })
 
+
+  const disableChecking = () => {
+    return (loading ||
+    formProps.getValues("projectDeleted") === true ||
+    formProps.getValues("projectStatus")?.toLowerCase() ===
+      "deleted" ||
+    // !!formProps.getValues("projectActualStart") &&
+    !!(
+      formProps.getValues("projectStatus")?.toLowerCase() ===
+      "completed"
+    ))
+  }
+
   const handleCancel = () => {
     router.replace("/projects");
   };
@@ -286,51 +304,66 @@ const CreateProject: React.FC<Props> = ({
         // save project
         setServerError("");
 
-        // const buttonName = (event?.nativeEvent as any).submitter.name;
+        const buttonName = (event?.nativeEvent as any).submitter.name;
 
+        const handleSubmit = async () => {
+          if (buttonName === "start") {
+            data.projectActualStart = dayjs().format("YYYY-MM-DD");
+          } else if (buttonName === "complete") {
+            data.projectActualEnd = dayjs().format("YYYY-MM-DD");
+          }
+          data.taskTemplateId =
+            data.taskTemplateId === "All" ? undefined : data.taskTemplateId;
+          const response = await saveProject(data);
+      
+          if (
+            response.id > 0 &&
+            response.message?.toLowerCase() === "success" &&
+            response.errorPosition === null
+          ) {
+            successDialog(buttonName==="submit"? defaultBtn.successTitle : buttonData.successTitle, t).then(() => {
+              router.replace("/projects");
+            });
+          } else {
+            errorDialog(response.message ?? (buttonName==="submit"? defaultBtn.errorTitle : buttonData.errorTitle), t).then(() => {
+              if (
+                response.errorPosition !== null &&
+                response.errorPosition === "projectCode"
+              ) {
+                formProps.setError("projectCode", {
+                  message: response.message,
+                  type: "invalid",
+                });
+                setTabIndex(0);
+              }
+      
+              return false;
+            });
+          }
+        }
 
-        submitDialog(
-          async () => {
-            if (buttonData.buttonName === "start") {
-              data.projectActualStart = dayjs().format("YYYY-MM-DD");
-            } else if (buttonData.buttonName === "complete") {
-              data.projectActualEnd = dayjs().format("YYYY-MM-DD");
-            }/* else if (buttonName === "reopen") {
-              data.projectActualEnd = dayjs().format("YYYY-MM-DD");
-            }*/
-
-            data.taskTemplateId =
-              data.taskTemplateId === "All" ? undefined : data.taskTemplateId;
-            const response = await saveProject(data);
+        if (buttonName === "complete") {
+          submitDialogWithWarning(
+            handleSubmit,
+            t,
+            { title: buttonData.title,
+              confirmButtonText: buttonData.confirmButtonText,
+              text: "<b style='color:red'>Completing project will restrict any further changes to the project, are you sure to proceed?</b>"
+            },)
+        } else if (buttonName === "submit") {
+          submitDialog(
+            handleSubmit,
+            t,
+            { title: defaultBtn.title, confirmButtonText: defaultBtn.confirmButtonText },
+          );
+        } else {
+          submitDialog(
+            handleSubmit,
+            t,
+            { title: buttonData.title, confirmButtonText: buttonData.confirmButtonText },
+          );
+        }
 
-            if (
-              response.id > 0 &&
-              response.message?.toLowerCase() === "success" &&
-              response.errorPosition === null
-            ) {
-              successDialog(buttonData.successTitle, t).then(() => {
-                router.replace("/projects");
-              });
-            } else {
-              errorDialog(response.message ?? buttonData.errorTitle, t).then(() => {
-                if (
-                  response.errorPosition !== null &&
-                  response.errorPosition === "projectCode"
-                ) {
-                  formProps.setError("projectCode", {
-                    message: response.message,
-                    type: "invalid",
-                  });
-                  setTabIndex(0);
-                }
-        
-                return false;
-              });
-            }
-          },
-          t,
-          { title: buttonData.title, confirmButtonText: buttonData.confirmButtonText },
-        );
       } catch (e) {
         setServerError(t("An error has occurred. Please try again later."));
       }
@@ -417,49 +450,56 @@ const CreateProject: React.FC<Props> = ({
     }
   }, [totalManhour])
 
+  const updateButtonData = () => {
+    const status = formProps.getValues("projectStatus")?.toLowerCase();
+
+    //Button Parameters//
+    switch (status) {
+      case "pending to start" :
+        setButtonData({
+          buttonName: "start",
+          title : t("Do you want to start?"),
+          confirmButtonText : t("Start"),
+          successTitle : t("Start Success"),
+          errorTitle : t("Start Fail"),
+          buttonText : t("Start Project"),
+          buttonIcon : <PlayArrow />,
+          buttonColor: "success"
+        })
+        break;
+      case "on-going" :
+        setButtonData({
+          buttonName: "complete",
+          title : t("Do you want to complete?"),
+          confirmButtonText : t("Complete"),
+          successTitle : t("Complete Success"),
+          errorTitle : t("Complete Fail"),
+          buttonText : t("Complete Project"),
+          buttonIcon : <DoneIcon />,
+          buttonColor: "info"
+        })
+        break;
+      case "completed" :
+        setButtonData({
+          buttonName: "reopen",
+          title : t("Do you want to reopen?"),
+          confirmButtonText : t("Reopen"),
+          successTitle : t("Reopen Success"),
+          errorTitle : t("Reopen Fail"),
+          buttonText : t("Reopen Project"),
+          buttonIcon : <AutorenewIcon />,
+          buttonColor: "secondary"
+        })
+    }
+  }
+
   useEffect(() => {
-    if (formProps?.getValues("projectName")){//defaultValues) {
+    if (!isEditMode) {
       setLoading(false);
-      const status = formProps.getValues("projectStatus")?.toLowerCase();
-
-      //Button Parameters//
-      switch (status) {
-        case "pending to start" :
-          setButtonData({
-            buttonName: "start",
-            title : t("Do you want to start?"),
-            confirmButtonText : t("Start"),
-            successTitle : t("Start Success"),
-            errorTitle : t("Start Fail"),
-            buttonText : t("Start Project"),
-            buttonIcon : <PlayArrow />,
-            buttonColor: "success"
-          })
-          break;
-        case "on-going" :
-          setButtonData({
-            buttonName: "complete",
-            title : t("Do you want to complete?"),
-            confirmButtonText : t("Complete"),
-            successTitle : t("Complete Success"),
-            errorTitle : t("Complete Fail"),
-            buttonText : t("Complete Project"),
-            buttonIcon : <DoneIcon />,
-            buttonColor: "info"
-          })
-          break;
-        case "completed" :
-          setButtonData({
-            buttonName: "reopen",
-            title : t("Do you want to reopen?"),
-            confirmButtonText : t("Reopen"),
-            successTitle : t("Reopen Success"),
-            errorTitle : t("Reopen Fail"),
-            buttonText : t("Reopen Project"),
-            buttonIcon : <AutorenewIcon />,
-            buttonColor: "secondary"
-          })
-      }
+    }
+    else if (formProps?.getValues("projectName")) {
+      setLoading(false);
+      updateButtonData();
     }}, [formProps]
   )
 
@@ -610,18 +650,12 @@ const CreateProject: React.FC<Props> = ({
               {t("Cancel")}
             </Button>
             <Button
+              name="submit"
               variant="contained"
               startIcon={<Check />}
               type="submit"
               disabled={
-                formProps.getValues("projectDeleted") === true ||
-                formProps.getValues("projectStatus")?.toLowerCase() ===
-                  "deleted" ||
-                // !!formProps.getValues("projectActualStart") &&
-                !!(
-                  formProps.getValues("projectStatus")?.toLowerCase() ===
-                  "completed"
-                )
+                disableChecking()
               }
             >
               {isEditMode ? t("Save") : t("Confirm")}

src/components/Swal/CustomAlerts.js

@@ -94,6 +94,31 @@ export const submitDialog = async (confirmAction, t, {...props} = {
   }
 }
 
+export const submitDialogWithWarning = async (confirmAction, t, {...props} = {
+  title: t("Do you want to submit?"),
+  text: t("Warning!"),
+  confirmButtonText: t("Submit"),
+}) => {
+  // console.log(props)
+  // const { t } = useTranslation("common")
+  const result = await Swal.fire({
+    icon: "warning",
+    title: props?.title,
+    html: props?.text,
+    cancelButtonText: t("Cancel"),
+    confirmButtonText: props?.confirmButtonText,
+    showCancelButton: true,
+    showConfirmButton: true,
+    customClass: {
+      container: "swal-container-class", // Add a custom class to the Swal.fire container element
+      popup: "swal-popup-class", // Add a custom class to the Swal.fire popup element
+    },
+  });
+  if (result.isConfirmed) {
+    confirmAction();
+  }
+}
+
 export const deleteDialog = async (confirmAction, t) => {
   // const { t } = useTranslation("common")
   const result = await Swal.fire({