update salary modal

src/components/CreateStaff/CreateStaff.tsx

@@ -4,25 +4,15 @@ import CustomInputForm from "../CustomInputForm";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import {
-  FieldErrors,
   FormProvider,
-  SubmitErrorHandler,
   SubmitHandler,
   useForm,
 } from "react-hook-form";
 import { CreateStaffInputs, saveStaff, testing } from "@/app/api/staff/actions";
 import { Button, Stack, Typography } from "@mui/material";
-// import CreateStaffForm from "../CreateStaffForm";
-import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions";
-import { fetchTeamCombo } from "@/app/api/team/actions";
-import { fetchDepartmentCombo } from "@/app/api/departments/actions";
-import { fetchPositionCombo } from "@/app/api/positions/actions";
-import { fetchGradeCombo } from "@/app/api/grades/actions";
-import { fetchSkillCombo } from "@/app/api/skill/actions";
-import { fetchSalaryCombo } from "@/app/api/salarys/actions";
+import { comboProp} from "@/app/api/companys/actions";
 import StaffInfo from "./StaffInfo";
 import { Check, Close } from "@mui/icons-material";
-import { ServerFetchError } from "@/app/utils/fetchUtil";
 
 interface Field {
   id: string;

src/components/EditStaff/SalaryEffectiveModel.tsx

@@ -13,6 +13,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit'; 
 import { GridActionsCellItem } from '@mui/x-data-grid';
+import waitForCondition from '../utils/waitFor';
 
 interface SalaryEffectiveModelProps {
   open: boolean;
@@ -58,7 +59,7 @@ const modalSx: SxProps = {
   
     return (
       <GridToolbarContainer>
-        <Button disabled={count>=1} color="primary" startIcon={<AddIcon />} onClick={handleClick}>
+        <Button color="primary" startIcon={<AddIcon />} onClick={handleClick}>
           {"addRecordBtn"}
         </Button>
         {/* <Button color="primary" startIcon={<AddIcon />} onClick={handleSave}>
@@ -69,13 +70,15 @@ const modalSx: SxProps = {
   }
 
 const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClose, modalSx: mSx, columns }) => {
-  const { t } = useTranslation();
+  const {
+    t,
+    // i18n: { language },
+  } = useTranslation();
   const { control, register, formState, trigger, watch, setValue, getValues } = useFormContext();
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
   const [count, setCount] = useState(0);
   const [_rows, setRows] = useState(() => {
     const list = getValues('salaryEffectiveInfo')
-    console.log(list)
     return list && list.length > 0 ? list : []
   });
   const [_delRows, setDelRows] = useState<number[]>([]);
@@ -85,7 +88,32 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
   const handleClose = () => {
     onClose();
   };
+  
+  const looping = async () => {
+    for (let i = 0; i < _rows.length; i++) {
+    const id = _rows[i].id
+    setRowModesModel((prevRowModesModel) => ({
+        ...prevRowModesModel,
+        [id]: { mode: GridRowModes.View }
+      }));
+    }
+    return true; 
+  }
+  const handleSaveAll = async () => {
+    // trigger save all
+    console.log(_rows)
+    await waitForCondition(async () => {
+      return looping()
+    })
+    console.log(rowModesModel)
+  };
 
+  const bigTesting = async () => {
+    await looping()
+    setTimeout(() => {
+      onClose()
+    }, 800)
+  }
   // const handleSave = async () => {
   //   const isValid = await trigger();
   //   // if (isValid) {
@@ -126,8 +154,7 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
     setValue('delSalaryEffectiveInfo', _delRows)
   }, [_delRows])
 
-  const handleSaveClick = useCallback(
-    (id: any) => () => {
+  const handleSaveClick = useCallback((id: any) => () => {
       setRowModesModel((prevRowModesModel) => ({
         ...prevRowModesModel,
         [id]: { mode: GridRowModes.View }
@@ -136,6 +163,15 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
     [setRowModesModel]
   );
   
+  const handleSaveClickAsync = useCallback(async(id: any) => () => {
+    setRowModesModel((prevRowModesModel) => ({
+      ...prevRowModesModel,
+      [id]: { mode: GridRowModes.View }
+    }));
+  },
+  [setRowModesModel]
+);
+  
   const handleCancelClick = useCallback(
     (id: any) => () => {
       setRowModesModel((prevRowModesModel) => ({
@@ -223,8 +259,8 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
   }
 
   useEffect(() => {
-    console.log(formValues)
-  }, [open])
+    console.log(_rows)
+  }, [_rows])
 
   return (
     <Modal open={open} onClose={handleClose}>
@@ -251,7 +287,8 @@ const SalaryEffectiveModel: React.FC<SalaryEffectiveModelProps> = ({ open, onClo
           <Button variant="text" onClick={handleClose}>
             {t('Cancel')}
           </Button>
-          <Button variant="contained" onClick={handleClose}>
+          <Button variant="contained" onClick={bigTesting}>
+          {/* <Button variant="contained" onClick={handleSaveAll}> */}
             {t("Save")}
           </Button>
         </Box>