update

src/components/EditStaff/EditStaff.tsx

@@ -21,7 +21,7 @@ import { fetchGradeCombo } from "@/app/api/grades/actions";
 import { fetchSkillCombo } from "@/app/api/skill/actions";
 import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 // import StaffInfo from "./StaffInfo";
-import { Check, Close } from "@mui/icons-material";
+import { Check, Close, RestartAlt } from "@mui/icons-material";
 import { ServerFetchError } from "@/app/utils/fetchUtil";
 import StaffInfo from "./StaffInfo";
 import { IndividualStaff } from "@/app/api/staff";
@@ -91,14 +91,6 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
         let haveError = false;
         let regex_email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
         let regex_phone = /^\d{8}$/
-        // let removeSkillSetId: List<number> = []
-
-        // if (data.skillSetId && defaultSkillset.length > data.skillSetId) {
-        //   removeSkillSetId = differenceBy(defaultSkillset, data.skillSetId)
-        // }
-        console.log(data.skillSetId)
-        console.log(defaultSkillset)
-        console.log(differenceBy(data.skillSetId, defaultSkillset))
 
         if (!regex_email.test(data.email)) {
           haveError = true
@@ -163,8 +155,9 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
           ...data,
           // removeSkillSetId: removeSkillSetId
         }
-        await saveStaff(postData)
-        router.replace("/settings/staff")
+        console.log(postData)
+        // await saveStaff(postData)
+        // router.replace("/settings/staff")
       } catch (e: any) {
         console.log(e);
         formProps.setError("staffId", { message: t("Please Enter Employ Type."), type: "required" })
@@ -183,6 +176,8 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
   };
 
   const resetStaff = useCallback(() => {
+    console.log(dayjs(Staff.joinDate).format(INPUT_DATE_FORMAT))
+    console.log(formProps.getValues("joinDate"))
     formProps.reset({
       staffId: Staff.staffId,
       name: Staff.name,
@@ -200,18 +195,17 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
       phone2: Staff.phone2,
       emergContactName: Staff.emergContactName,
       emergContactPhone: Staff.emergContactPhone,
-      joinDate: dayjs(Staff.joinDate).format(INPUT_DATE_FORMAT) || "",
+      joinDate: Staff.joinDate ? dayjs(Staff.joinDate).format(INPUT_DATE_FORMAT) : "",
       joinPositionId: Staff.joinPosition?.id,
       departDate: !Staff.departDate ? "" : dayjs(Staff.departDate).format(INPUT_DATE_FORMAT),
       departReason: Staff.departReason,
       remark: Staff.remark,
     });
-  }, []);
+  }, [Staff,formProps]);
   
   useEffect(() => {
-    console.log(Staff)
     resetStaff()
-  }, [Staff, combos]);
+  }, [Staff, formProps, combos]);
 
   return (
     <>
@@ -228,6 +222,13 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
           )}
           {Staff && <StaffInfo combos={combos}/>}
           <Stack direction="row" justifyContent="flex-end" gap={1}>
+          <Button
+              variant="text"
+              startIcon={<RestartAlt />}
+              onClick={resetStaff}
+            >
+              {t("Reset")}
+            </Button>
             <Button
               variant="outlined"
               startIcon={<Close />}

src/components/EditStaff/StaffInfo.tsx

@@ -43,6 +43,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
     resetField,
     setValue,
     getValues,
+    watch,
     clearErrors,
   } = useFormContext<CreateStaffInputs>();
 
@@ -59,12 +60,17 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
   const resetStaff = useCallback(() => {
     console.log(defaultValues);
     if (defaultValues !== undefined) {
-      //   resetField("description");
+        resetField("joinDate");
+        resetField("departDate");
     }
   }, [defaultValues]);
+    
+  useEffect(() => {
+    resetStaff()
+  }, [defaultValues]);
 
-  const joinDate = getValues("joinDate");
-  const departDate = getValues("departDate");
+  const joinDate = watch("joinDate");
+  const departDate = watch("departDate");
 
   useEffect(() => {
     if (joinDate) clearErrors("joinDate");
@@ -410,6 +416,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
                 <DatePicker
                   sx={{ width: "100%" }}
                   label={t("Join Date")}
+                  // defaultValue={dayjs(getValues("joinDate"))}
                   value={joinDate ? dayjs(joinDate) : null}
                   onChange={(date) => {
                     if (!date) return;

src/components/EditTeam/Allocation.tsx

@@ -184,7 +184,7 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
   const resetStaff = React.useCallback(() => {
     clearQueryInput();
     clearValues();
-  }, [clearQueryInput, clearValues]);
+  }, [clearQueryInput, clearValues]); 
 
   const formProps = useForm({});