| @@ -122,216 +122,216 @@ const EditStaff: React.FC = async () => { | |||||
| }, [searchParams]); | }, [searchParams]); | ||||
| useEffect(() => { | useEffect(() => { | ||||
| // let id = 0; | |||||
| let id = 0; | |||||
| if (idString) { | if (idString) { | ||||
| const id = parseInt(idString); | |||||
| id = parseInt(idString); | |||||
| console.log(id) | 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 { | return { | ||||
| id: `${key}`, | 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", | type: "text", | ||||
| // pattern: "^\\d{8}$", | // pattern: "^\\d{8}$", | ||||
| message: t("input correct phone no."), | message: t("input correct phone no."), | ||||
| value: data[key] ?? "", | value: data[key] ?? "", | ||||
| required: true, | 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; | } 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 ( | return ( | ||||
| <> | <> | ||||