update

src/components/EditStaff/EditStaff.tsx

@@ -122,216 +122,216 @@ const EditStaff: React.FC = async () => {
   }, [searchParams]);
 
   useEffect(() => {
-    // let id = 0;
+    let id = 0;
     if (idString) {
-      const id = parseInt(idString);
+      id = parseInt(idString);
       console.log(id)
-      setId(id);
-    }
-    fetchStaffEdit(id).then((staff) => {
-      console.log(staff.data);
-      const data = staff.data;
-      ///////////////////// list 1 /////////////////////
-      const list1 = keyOrder1
-        .map((key) => {
-          switch (key) {
-            case "staffId":
-              return {
-                id: `${key}`,
-                label: t(`Staff ID`),
-                type: "text",
-                value: data[key] ?? "",
-                required: true,
-              };
-            case "name":
-              return {
-                id: `${key}`,
-                label: t(`Staff Name`),
-                type: "text",
-                value: data[key] ?? "",
-                required: true,
-              };
-            case "company":
-              return {
-                id: `${key}Id`,
-                label: t(`Company`),
-                type: "combo-Obj",
-                options: companyCombo,
-                value: data[key].id ?? "",
-                required: true,
-              };
-            case "team":
-              return {
-                id: `${key}Id`,
-                label: t(`Team`),
-                type: "combo-Obj",
-                options: teamCombo,
-                value: data[key]?.id ?? "",
-              };
-            case "department":
-              return {
-                id: `${key}Id`,
-                label: t(`Department`),
-                type: "combo-Obj",
-                options: departmentCombo,
-                value: data[key]?.id ?? "",
-                required: true,
-                // later check
-              };
-            case "grade":
-              return {
-                id: `${key}Id`,
-                label: t(`Grade`),
-                type: "combo-Obj",
-                options: gradeCombo,
-                value: data[key] !== null ? data[key].id ?? "" : "",
-              };
-            case "skill":
-              return {
-                id: `${key}SetId`,
-                label: t(`Skillset`),
-                type: "combo-Obj",
-                options: skillCombo,
-                value: data[key] !== null ? data[key].id ?? "" : "",
-              };
-            case "currentPosition":
-              return {
-                id: `${key}Id`,
-                label: t(`Current Position`),
-                type: "combo-Obj",
-                options: positionCombo,
-                value: data[key].id ?? "",
-                required: true,
-              };
-            case "salary":
-              return {
-                id: `salaryId`,
-                label: t(`Salary Point`),
-                type: "combo-Obj",
-                options: salaryCombo,
-                value: data[key] !== null ? data[key].id ?? "" : "",
-                required: true,
-              };
-            // case "hourlyRate":
-            //   return {
-            //     id: `${key}`,
-            //     label: t(`hourlyRate`),
-            //     type: "text",
-            //     value: "",
-            //     // value: data[key],
-            //     readOnly: true,
-            //   };
-            case "employType":
-              return {
-                id: `${key}`,
-                label: t(`Employ Type`),
-                type: "combo-Obj",
-                options: employTypeCombo,
-                value: data[key] ?? "",
-                required: true,
-              };
-            case "email":
-              return {
-                id: `${key}`,
-                label: t(`Email`),
-                type: "text",
-                value: data[key] ?? "",
-                pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
-                message: t("input matching format"),
-                required: true,
-              };
-            case "phone1":
-              return {
-                id: `${key}`,
-                label: t(`Phone1`),
-                type: "text",
-                // pattern: "^\\d{8}$",
-                message: t("input correct phone no."),
-                value: data[key] ?? "",
-                required: true,
-              };
-            case "phone2":
-              return {
-                id: `${key}`,
-                label: t(`Phone2`),
-                type: "text",
-                // pattern: "^\\d{8}$",
-                message: t("input correct phone no."),
-                value: data[key] ?? "",
-              } as Field;
-            default:
-              return null;
-          }
-        }).filter((item): item is Field => item !== null);
-        ///////////////////// list 2 /////////////////////
-      const list2 = keyOrder2
-        .map((key) => {
-          switch (key) {
-            case "emergContactName":
-              return {
-                id: `${key}`,
-                label: t(`Emergency Contact Name`),
-                type: "text",
-                value: data[key] ?? "",
-                required: true,
-              } as Field;
-            case "emergContactPhone":
+      fetchStaffEdit(id).then((staff) => {
+        console.log(staff.data);
+        const data = staff.data;
+        ///////////////////// list 1 /////////////////////
+        const list1 = keyOrder1
+          .map((key) => {
+            switch (key) {
+              case "staffId":
                 return {
                   id: `${key}`,
-                  label: t(`Emergency Contact Phone`),
+                  label: t(`Staff ID`),
+                  type: "text",
+                  value: data[key] ?? "",
+                  required: true,
+                };
+              case "name":
+                return {
+                  id: `${key}`,
+                  label: t(`Staff Name`),
+                  type: "text",
+                  value: data[key] ?? "",
+                  required: true,
+                };
+              case "company":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Company`),
+                  type: "combo-Obj",
+                  options: companyCombo,
+                  value: data[key].id ?? "",
+                  required: true,
+                };
+              case "team":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Team`),
+                  type: "combo-Obj",
+                  options: teamCombo,
+                  value: data[key]?.id ?? "",
+                };
+              case "department":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Department`),
+                  type: "combo-Obj",
+                  options: departmentCombo,
+                  value: data[key]?.id ?? "",
+                  required: true,
+                  // later check
+                };
+              case "grade":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Grade`),
+                  type: "combo-Obj",
+                  options: gradeCombo,
+                  value: data[key] !== null ? data[key].id ?? "" : "",
+                };
+              case "skill":
+                return {
+                  id: `${key}SetId`,
+                  label: t(`Skillset`),
+                  type: "combo-Obj",
+                  options: skillCombo,
+                  value: data[key] !== null ? data[key].id ?? "" : "",
+                };
+              case "currentPosition":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Current Position`),
+                  type: "combo-Obj",
+                  options: positionCombo,
+                  value: data[key].id ?? "",
+                  required: true,
+                };
+              case "salary":
+                return {
+                  id: `salaryId`,
+                  label: t(`Salary Point`),
+                  type: "combo-Obj",
+                  options: salaryCombo,
+                  value: data[key] !== null ? data[key].id ?? "" : "",
+                  required: true,
+                };
+              // case "hourlyRate":
+              //   return {
+              //     id: `${key}`,
+              //     label: t(`hourlyRate`),
+              //     type: "text",
+              //     value: "",
+              //     // value: data[key],
+              //     readOnly: true,
+              //   };
+              case "employType":
+                return {
+                  id: `${key}`,
+                  label: t(`Employ Type`),
+                  type: "combo-Obj",
+                  options: employTypeCombo,
+                  value: data[key] ?? "",
+                  required: true,
+                };
+              case "email":
+                return {
+                  id: `${key}`,
+                  label: t(`Email`),
+                  type: "text",
+                  value: data[key] ?? "",
+                  pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
+                  message: t("input matching format"),
+                  required: true,
+                };
+              case "phone1":
+                return {
+                  id: `${key}`,
+                  label: t(`Phone1`),
                   type: "text",
                   // pattern: "^\\d{8}$",
                   message: t("input correct phone no."),
                   value: data[key] ?? "",
                   required: true,
+                };
+              case "phone2":
+                return {
+                  id: `${key}`,
+                  label: t(`Phone2`),
+                  type: "text",
+                  // pattern: "^\\d{8}$",
+                  message: t("input correct phone no."),
+                  value: data[key] ?? "",
                 } as Field;
-            case "joinDate":
-              return {
-                id: `${key}`,
-                label: t(`Join Date`),
-                type: "multiDate",
-                value: data[key] ?? "",
-                required: true,
-              } as Field;
-            case "joinPosition":
-              return {
-                id: `${key}Id`,
-                label: t(`Join Position`),
-                type: "combo-Obj",
-                options: positionCombo,
-                value: data[key].id ?? "",
-                required: true,
-              } as Field;
-            case "departDate":
-              return {
-                id: `${key}`,
-                label: t(`Depart Date`),
-                type: "multiDate",
-                value: data[key] ?? "",
-              } as Field;
-            case "departReason":
-              return {
-                id: `${key}`,
-                label: t(`Depart Reason`),
-                type: "text",
-                value: data[key] ?? "",
-              } as Field;
-            case "remark":
-              return {
-                id: `remark`,
-                label: t(`Remark`),
-                type: "remarks",
-                value: data[key] ?? "",
-              } as Field;
-            default:
-              return null;
-          }
-        }).filter((item): item is Field => item !== null);
-      console.log(list2);
-      console.log([list1]);
-      setFieldLists([list1,list2]);
-    });
-  }, [companyCombo]);
+              default:
+                return null;
+            }
+          }).filter((item): item is Field => item !== null);
+          ///////////////////// list 2 /////////////////////
+        const list2 = keyOrder2
+          .map((key) => {
+            switch (key) {
+              case "emergContactName":
+                return {
+                  id: `${key}`,
+                  label: t(`Emergency Contact Name`),
+                  type: "text",
+                  value: data[key] ?? "",
+                  required: true,
+                } as Field;
+              case "emergContactPhone":
+                  return {
+                    id: `${key}`,
+                    label: t(`Emergency Contact Phone`),
+                    type: "text",
+                    // pattern: "^\\d{8}$",
+                    message: t("input correct phone no."),
+                    value: data[key] ?? "",
+                    required: true,
+                  } as Field;
+              case "joinDate":
+                return {
+                  id: `${key}`,
+                  label: t(`Join Date`),
+                  type: "multiDate",
+                  value: data[key] ?? "",
+                  required: true,
+                } as Field;
+              case "joinPosition":
+                return {
+                  id: `${key}Id`,
+                  label: t(`Join Position`),
+                  type: "combo-Obj",
+                  options: positionCombo,
+                  value: data[key].id ?? "",
+                  required: true,
+                } as Field;
+              case "departDate":
+                return {
+                  id: `${key}`,
+                  label: t(`Depart Date`),
+                  type: "multiDate",
+                  value: data[key] ?? "",
+                } as Field;
+              case "departReason":
+                return {
+                  id: `${key}`,
+                  label: t(`Depart Reason`),
+                  type: "text",
+                  value: data[key] ?? "",
+                } as Field;
+              case "remark":
+                return {
+                  id: `remark`,
+                  label: t(`Remark`),
+                  type: "remarks",
+                  value: data[key] ?? "",
+                } as Field;
+              default:
+                return null;
+            }
+          }).filter((item): item is Field => item !== null);
+        console.log(list2);
+        console.log([list1]);
+        setFieldLists([list1,list2]);
+      });
+    }
+    
+  }, [companyCombo, idString]);
 
   return (
     <>