Update Salary Effective Model

src/components/EditStaff/EditStaff.tsx

@@ -53,7 +53,7 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo })
   const { t } = useTranslation();
   const searchParams = useSearchParams()
   const id = parseInt(searchParams.get("id") || "0");
-  const formProps = useForm<CreateStaffInputs & { salaryEffectiveInfo: SalaryEffectiveInfo[] }>({
+  const formProps = useForm<CreateStaffInputs & { salaryEffectiveInfo: SalaryEffectiveInfo[] } & { delSalaryEffectiveInfo: number[] }>({
     defaultValues: {
       staffId: Staff.staffId,
       name: Staff.name,
@@ -78,10 +78,11 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo })
       remark: Staff.remark,
       salaryEffectiveInfo: SalaryEffectiveInfo.map(item => {
         return ({
-        id: Math.random(),
+        id: item.id,
         salaryPoint: combos.salary.filter(sal => sal.id === item.salaryPoint)[0].label,
         date: dayjs(item.date).toDate(),
-      })})
+      })}),
+      delSalaryEffectiveInfo: []
   }});
   const [serverError, setServerError] = useState("");
   const router = useRouter();
@@ -154,9 +155,9 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo })
         const postData: CreateStaffInputs = {
           id: id,
           ...data,
-          salaryEffectiveInfo: SalaryEffectiveInfo.map(item => ({
+          salaryEffectiveInfo: data.salaryEffectiveInfo.map((item: SalaryEffectiveInfo) => ({
             id: item.id,
-            salaryPoint: item.salaryPoint,
+            salaryPoint: chopSalaryPoints(item.salaryPoint),
             date: dayjs(item.date).format('YYYY-MM-DD').toString()
           }))
         }
@@ -194,6 +195,18 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo })
     router.back();
   };
 
+  function chopSalaryPoints(input: string | number): number | null {
+    if (typeof input === 'string') {
+      const match = input.match(/(\d+) \((\d+) - (\d+)\)/);
+      if (match) {
+        return parseInt(match[1], 10);
+      }
+    } else if (typeof input === 'number') {
+      return input;
+    }
+    return null;
+  }
+
   // const resetStaff = useCallback(() => {
     // window.location.reload()
     // console.log(dayjs(Staff.joinDate).format(INPUT_DATE_FORMAT))

src/components/EditStaff/SalaryEffectiveModel.tsx

@@ -78,6 +78,7 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
     console.log(list)
     return list && list.length > 0 ? list : []
   });
+  const [_delRows, setDelRows] = useState<number[]>([]);
 
   const formValues = watch(); // This line of code is using the watch function from react-hook-form to get the current values of the form fields.
 
@@ -120,6 +121,11 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
     setValue('salaryEffectiveInfo', _rows)
   }, [_rows])
 
+  useEffect(()=> {
+    console.log(_delRows)
+    setValue('delSalaryEffectiveInfo', _delRows)
+  }, [_delRows])
+
   const handleSaveClick = useCallback(
     (id: any) => () => {
       setRowModesModel((prevRowModesModel) => ({
@@ -154,9 +160,10 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
   const handleDeleteClick = useCallback(
     (id: any) => () => {
       setRows((prevRows: any) => prevRows.filter((row: any) => row.id !== id));
-      setCount((prev: number) => prev - 1)
+      setCount((prev: number) => prev - 1);
+      setDelRows((prevRowsId: number[]) => [...prevRowsId, id])
     },
-    [setRows, setCount]
+    [setRows, setCount, setDelRows]
   );
 
   const defaultCol = useMemo(