From 2bbfdb8d3b160a537165fce9a32b1ecdf6162edb Mon Sep 17 00:00:00 2001 From: Wayne Date: Mon, 23 Sep 2024 16:55:52 +0900 Subject: [PATCH] Add actualStart actualEnd date in edit project --- .../CreateProject/CreateProject.tsx | 293 ++++++++++-------- 1 file changed, 169 insertions(+), 124 deletions(-) diff --git a/src/components/CreateProject/CreateProject.tsx b/src/components/CreateProject/CreateProject.tsx index ac95e99..e6b7fd3 100644 --- a/src/components/CreateProject/CreateProject.tsx +++ b/src/components/CreateProject/CreateProject.tsx @@ -16,7 +16,6 @@ import TaskSetup from "./TaskSetup"; import StaffAllocation from "./StaffAllocation"; import Milestone from "./Milestone"; import { Task, TaskTemplate } from "@/app/api/tasks"; -import AssignIcon from '@mui/icons-material/AssignmentIndOutlined'; import { FieldErrors, FormProvider, @@ -54,6 +53,7 @@ import { } from "../Swal/CustomAlerts"; import dayjs from "dayjs"; import { DELETE_PROJECT } from "@/middleware"; +import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil"; export interface Props { isEditMode: boolean; @@ -137,8 +137,8 @@ const CreateProject: React.FC = ({ title: t("Do you want to submit?"), confirmButtonText: t("Submit"), successTitle: t("Submit Success"), - errorTitle: t("Submit Fail") - } + errorTitle: t("Submit Fail"), + }; const [buttonData, setButtonData] = useState<{ buttonName: string; title: string; @@ -147,26 +147,23 @@ const CreateProject: React.FC = ({ errorTitle: string; buttonText: string; buttonIcon: any; - buttonColor: any - }> ({ + buttonColor: any; + }>({ ...defaultBtn, buttonText: t("Submit Project"), buttonIcon: , - buttonColor : "success" - }) - + buttonColor: "success", + }); const disableChecking = () => { - return (loading || - formProps.getValues("projectDeleted") === true || - formProps.getValues("projectStatus")?.toLowerCase() === - "deleted" || - // !!formProps.getValues("projectActualStart") && - !!( - formProps.getValues("projectStatus")?.toLowerCase() === - "completed" - )) - } + return ( + loading || + formProps.getValues("projectDeleted") === true || + formProps.getValues("projectStatus")?.toLowerCase() === "deleted" || + // !!formProps.getValues("projectActualStart") && + !!(formProps.getValues("projectStatus")?.toLowerCase() === "completed") + ); + }; const handleCancel = () => { router.replace("/projects"); @@ -200,7 +197,11 @@ const CreateProject: React.FC = ({ let hasErrors = false; // Tab - Staff Allocation and Resource - if (data.totalManhour === null || data.totalManhour <= 0 || Number.isNaN(data.totalManhour)) { + if ( + data.totalManhour === null || + data.totalManhour <= 0 || + Number.isNaN(data.totalManhour) + ) { formProps.setError("totalManhour", { message: "totalManhour value is not valid", type: "required", @@ -209,7 +210,11 @@ const CreateProject: React.FC = ({ hasErrors = true; } - if (data.ratePerManhour === null || data.ratePerManhour <= 0 || Number.isNaN(data.ratePerManhour)) { + if ( + data.ratePerManhour === null || + data.ratePerManhour <= 0 || + Number.isNaN(data.ratePerManhour) + ) { formProps.setError("ratePerManhour", { message: "ratePerManhour value is not valid", type: "required", @@ -316,17 +321,28 @@ const CreateProject: React.FC = ({ 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(() => { + successDialog( + buttonName === "submit" + ? defaultBtn.successTitle + : buttonData.successTitle, + t, + ).then(() => { router.replace("/projects"); }); } else { - errorDialog(response.message ?? (buttonName==="submit"? defaultBtn.errorTitle : buttonData.errorTitle), t).then(() => { + errorDialog( + response.message ?? + (buttonName === "submit" + ? defaultBtn.errorTitle + : buttonData.errorTitle), + t, + ).then(() => { if ( response.errorPosition !== null && response.errorPosition === "projectCode" @@ -337,34 +353,29 @@ const CreateProject: React.FC = ({ }); setTabIndex(0); } - + return false; }); } - } + }; if (buttonName === "complete") { - submitDialogWithWarning( - handleSubmit, - t, - { title: buttonData.title, - confirmButtonText: buttonData.confirmButtonText, - text: "Completing project will restrict any further changes to the project, are you sure to proceed?" - },) + submitDialogWithWarning(handleSubmit, t, { + title: buttonData.title, + confirmButtonText: buttonData.confirmButtonText, + text: "Completing project will restrict any further changes to the project, are you sure to proceed?", + }); } else if (buttonName === "submit") { - submitDialog( - handleSubmit, - t, - { title: defaultBtn.title, confirmButtonText: defaultBtn.confirmButtonText }, - ); + submitDialog(handleSubmit, t, { + title: defaultBtn.title, + confirmButtonText: defaultBtn.confirmButtonText, + }); } else { - submitDialog( - handleSubmit, - t, - { title: buttonData.title, confirmButtonText: buttonData.confirmButtonText }, - ); + submitDialog(handleSubmit, t, { + title: buttonData.title, + confirmButtonText: buttonData.confirmButtonText, + }); } - } catch (e) { setServerError(t("An error has occurred. Please try again later.")); } @@ -432,77 +443,86 @@ const CreateProject: React.FC = ({ const errors = formProps.formState.errors; // auto calculate the total project manhour - const expectedProjectFee = formProps.watch("expectedProjectFee") - const ratePerManhour = formProps.watch("ratePerManhour") - const totalManhour = formProps.watch("totalManhour") - const [firstLoaded, setFirstLoaded] = useState(false) + const expectedProjectFee = formProps.watch("expectedProjectFee"); + const ratePerManhour = formProps.watch("ratePerManhour"); + const totalManhour = formProps.watch("totalManhour"); + const [firstLoaded, setFirstLoaded] = useState(false); React.useMemo(() => { - if ((firstLoaded && expectedProjectFee > 0 && ratePerManhour > 0)) { - console.log(ratePerManhour, formProps.watch("totalManhour")) - formProps.setValue("totalManhour", Math.ceil(expectedProjectFee / ratePerManhour)) + if (firstLoaded && expectedProjectFee > 0 && ratePerManhour > 0) { + console.log(ratePerManhour, formProps.watch("totalManhour")); + formProps.setValue( + "totalManhour", + Math.ceil(expectedProjectFee / ratePerManhour), + ); } else { - setFirstLoaded(true) + setFirstLoaded(true); } - }, [expectedProjectFee, ratePerManhour]) + }, [expectedProjectFee, ratePerManhour]); React.useMemo(() => { - if ((expectedProjectFee > 0 && ratePerManhour > 0) && (totalManhour === null || Number.isNaN(totalManhour) || totalManhour <= 0)) { - formProps.setValue("totalManhour", Math.ceil(expectedProjectFee / ratePerManhour)) + if ( + expectedProjectFee > 0 && + ratePerManhour > 0 && + (totalManhour === null || Number.isNaN(totalManhour) || totalManhour <= 0) + ) { + formProps.setValue( + "totalManhour", + Math.ceil(expectedProjectFee / ratePerManhour), + ); } - }, [totalManhour]) + }, [totalManhour]); const updateButtonData = () => { const status = formProps.getValues("projectStatus")?.toLowerCase(); //Button Parameters// switch (status) { - case "pending to start" : + 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 : , - buttonColor: "success" - }) + title: t("Do you want to start?"), + confirmButtonText: t("Start"), + successTitle: t("Start Success"), + errorTitle: t("Start Fail"), + buttonText: t("Start Project"), + buttonIcon: , + buttonColor: "success", + }); break; - case "on-going" : + 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 : , - buttonColor: "info" - }) + title: t("Do you want to complete?"), + confirmButtonText: t("Complete"), + successTitle: t("Complete Success"), + errorTitle: t("Complete Fail"), + buttonText: t("Complete Project"), + buttonIcon: , + buttonColor: "info", + }); break; - case "completed" : + 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 : , - buttonColor: "secondary" - }) + title: t("Do you want to reopen?"), + confirmButtonText: t("Reopen"), + successTitle: t("Reopen Success"), + errorTitle: t("Reopen Fail"), + buttonText: t("Reopen Project"), + buttonIcon: , + buttonColor: "secondary", + }); } - } + }; useEffect(() => { if (!isEditMode) { setLoading(false); - } - else if (formProps?.getValues("projectName")) { + } else if (formProps?.getValues("projectName")) { setLoading(false); updateButtonData(); - }}, [formProps] - ) + } + }, [formProps]); return ( <> @@ -512,43 +532,70 @@ const CreateProject: React.FC = ({ component="form" onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)} > - {isEditMode && !(formProps.getValues("projectDeleted") === true) && !loading && ( - - {t("Edit Project")}: {`<${defaultInputs?.projectCode}>`} - - {/* {!formProps.getValues("projectActualStart") && ( */} - - {!( - // formProps.getValues("projectActualStart") && - // formProps.getValues("projectActualEnd") - ( - formProps.getValues("projectStatus")?.toLowerCase() === - "completed" || - formProps.getValues("projectStatus")?.toLowerCase() === - "deleted" - ) - ) && - abilities.includes(DELETE_PROJECT) && ( + {isEditMode && + !(formProps.getValues("projectDeleted") === true) && + !loading && ( + + + {t("Edit Project")}: {`<${defaultInputs?.projectCode}>`} + + {(defaultInputs?.projectActualEnd || + defaultInputs?.projectActualStart) && ( + + {defaultInputs?.projectActualStart && ( + + {t("Project Start Date: {{date}}", { + date: dayjs(defaultInputs.projectActualStart).format( + OUTPUT_DATE_FORMAT, + ), + })} + + )} + {defaultInputs?.projectActualEnd && ( + + {t("Project End Date: {{date}}", { + date: dayjs(defaultInputs.projectActualEnd).format( + OUTPUT_DATE_FORMAT, + ), + })} + + )} + + )} + + {/* {!formProps.getValues("projectActualStart") && ( */} - )} - - - )} + {!( + // formProps.getValues("projectActualStart") && + // formProps.getValues("projectActualEnd") + ( + formProps.getValues("projectStatus")?.toLowerCase() === + "completed" || + formProps.getValues("projectStatus")?.toLowerCase() === + "deleted" + ) + ) && + abilities.includes(DELETE_PROJECT) && ( + + )} + + + )} = ({ variant="contained" startIcon={} type="submit" - disabled={ - disableChecking() - } + disabled={disableChecking()} > {isEditMode ? t("Save") : t("Confirm")}