src/app/api/staff/actions.ts

@@ -107,9 +107,17 @@ export interface CreateStaffInputs {
     salaryPoint: number;
   }
 
+  export interface NewStaffResponse {
+    id?: number | null;
+    name?: string | null;
+    staffId?: string | null;
+    message?: string | null;
+    errorPosition?: string | null;
+  }
+
 export const saveStaff = async (data: CreateStaffInputs) => {
   // try {
-    const newStaffList = await serverFetchJson(`${BASE_API_URL}/staffs/save`, {
+    const newStaffList = await serverFetchJson<NewStaffResponse>(`${BASE_API_URL}/staffs/save`, {
       method: "POST",
       body: JSON.stringify(data),
       headers: { "Content-Type": "application/json" },

src/components/CreateStaff/CreateStaff.tsx

@@ -45,9 +45,12 @@ interface formProps {
 
 const CreateStaff: React.FC<formProps> = ({ combos }) => {
   const { t } = useTranslation();
-  const formProps = useForm<CreateStaffInputs>();
+  const formProps = useForm<CreateStaffInputs>({
+    defaultValues: {
+      teamHistory: []
+    }
+  });
   const [serverError, setServerError] = useState("");
-  const [errorMsg, setErrorMsg] = useState("An error has occurred. Please try again later.")
   const router = useRouter();
   // const [tabIndex, setTabIndex] = useState(0);
 
@@ -67,7 +70,7 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
 
   const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
     async (data) => {
-      try {
+      // try {
         console.log(data);
         formProps.clearErrors()
         let haveError = false;
@@ -129,16 +132,18 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
           haveError = true
           formProps.setError("currentPositionId", { message: t("Please Enter Current Position"), type: "required" })
         }
+        console.log(data.teamHistory)
+        console.log(haveError)
         if (haveError) {
           return
         }
-        const teamHistory = data.teamHistory
+        const teamHistory = data.teamHistory.length !== 0 ? data.teamHistory
         .map((item) => ({
           id: item.id,
           team: combos.team.filter(team => team.label === item.team)[0].id,
           from: dayjs(item.from).format('YYYY-MM-DD'),
         }))
-        .sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime())
+        .sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime()) : []
         
         const gradeHistory = data.gradeHistory
         .map((item) => ({
@@ -166,7 +171,7 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
           // id: id,
           ...data,
           salaryEffectiveInfo: salaryEffectiveInfo,
-          teamHistory: teamHistory ?? [],
+          teamHistory: teamHistory,
           gradeHistory: gradeHistory ?? [],
           positionHistory: positionHistory ?? [],
           delTeamHistory: data.delTeamHistory ? data.delTeamHistory : [],
@@ -176,19 +181,23 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
         console.log("passed")
         console.log(postData)
         // return
-        await saveStaff(postData)
-        router.replace("/settings/staff")
-      } catch (e: any) {
-        console.log(e);
-        formProps.setError("staffId", { message: t("Please Enter Employ Type."), type: "required" })
-        let msg = ""
-        if (e.message === "Duplicated StaffId Found") {
-          msg = t("Duplicated StaffId Found")
+        const res = await saveStaff(postData)
+        console.log(res)
+        if (!res.id) {
+          setServerError(res.message!!);
+          // formProps.setError(res.errorPosition as keyof CreateStaffInputs, {
+          //   message: res.message!!,
+          //   type: "required",
+          // });
+          return
         } 
-        setServerError(`${t(errorMsg)} ${msg} `);
-      }
+        router.replace("/settings/staff")
+      // } catch (e: any) {
+      //   console.log(e);
+      //   setServerError(`An error has occurred. Please try again later.`);
+      // }
     },
-    [errorMsg, router]
+    [router]
   );
   
   

src/components/CreateStaff/StaffInfo.tsx

@@ -82,6 +82,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
     formState: { errors, defaultValues },
     control,
     reset,
+    watch,
     resetField,
     setValue,
     getValues,
@@ -119,15 +120,15 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
     setTableKey(key)
   }, [isOpen])
 
-  const joinDate = getValues("joinDate");
-  const departDate = getValues("departDate");
+  const joinDate = watch("joinDate");
+  const departDate = watch("departDate");
+  const staffId = watch("staffId");
 
   useEffect(() => {
-    if(joinDate)
-        clearErrors("joinDate")
-    if(departDate)
-        clearErrors("departDate")
-  }, [joinDate, departDate])
+    if(joinDate) clearErrors("joinDate")
+    if(departDate) clearErrors("departDate")
+    if (staffId) clearErrors("staffId")
+  }, [staffId, joinDate, departDate])
 
   return (
     <Card sx={{ display: "block" }}>

src/components/EditStaff/EditStaff.tsx

@@ -112,7 +112,6 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, In
       delPositionHistory: [],
   }});
 
-  
   const [serverError, setServerError] = useState("");
   const router = useRouter();
   

src/components/EditStaff/StaffInfo.tsx

@@ -116,11 +116,13 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
 
   const joinDate = watch("joinDate");
   const departDate = watch("departDate");
+  const staffId = watch("staffId");
   
   useEffect(() => {
     if (joinDate) clearErrors("joinDate");
     if (departDate) clearErrors("departDate");
-  }, [joinDate, departDate]);
+    if (staffId) clearErrors("staffId")
+  }, [staffId, joinDate, departDate]);
 
   return (
     <Card sx={{ display: "block" }}>

src/components/EditStaff/TeamHistoryModal.tsx

@@ -114,6 +114,7 @@ const TeamHistoryModal: React.FC<Props> = ({
     const doSave = useCallback(async () => {
       try {
         if (isSaved()) {
+          console.log(_rows)
           setValue(thisField, _rows)
           onClose()
         }
@@ -208,7 +209,6 @@ const TeamHistoryModal: React.FC<Props> = ({
     
       useEffect(()=> {
         console.log(_rows)
-        // setValue(thisField, _rows)
         setValue('delTeamHistory', _delRows)
     }, [_rows, _delRows])