wayne.lee
/
tsms
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 2 Wiki Activity
Browse Source

update create staff

tags/Baseline_30082024_FRONTEND_UAT
MSI\derek 1 year ago
parent
e2293ecf35
commit
fbf161c83f
5 changed files with 763 additions and 285 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +13
    -13
      src/app/api/staff/actions.ts
  2. +2
    -2
      src/components/ChangePassword/ChangePassword.tsx
  3. +122
    -158
      src/components/CreateStaff/CreateStaff.tsx
  4. +514
    -0
      src/components/CreateStaff/StaffInfo.tsx
  5. +112
    -112
      src/components/CreateStaffForm/CreateStaffForm.tsx

+ 13
- 13
src/app/api/staff/actions.ts View File

@@ -15,25 +15,25 @@ export interface CreateCustomInputs {

export interface CreateStaffInputs {
name: string;
currentPositionId: number;
joinPositionId: number;
staffId: string;
companyId: number;
gradeId: number;
teamId: number;
salaryId: number;
email: string;
skillSetId?: number[];
joinDate: string;
currentPositionId: number;
joinPositionId: number;
gradeId?: number;
teamId?: number
departmentId: number;
phone1: string;
phone2: string;
hourlyRate: string | number;
phone2?: string;
email: string;
emergContactName: string;
emergContactPhone: string;
employType: string;
joinDate: string | null;
departDate?: string | null;
departReason?: string | null;
remark?: string | null;
staffId: string | null;
skillSetId?: number[] | number | null | undefined
departDate?: string;
departReason?: string;
remark?: string;
}
export interface records {


+ 2
- 2
src/components/ChangePassword/ChangePassword.tsx View File

@@ -53,8 +53,8 @@ const ChangePassword: React.FC = () => {
password: data.password,
newPassword: data.newPassword
}
// await changePassword(postData)
// router.replace("/home")
await changePassword(postData)
router.replace("/home")
} catch (e) {
console.log(e)
setServerError(t("An error has occurred. Please try again later."));


+ 122
- 158
src/components/CreateStaff/CreateStaff.tsx View File

@@ -11,7 +11,7 @@ import {
useForm,
} from "react-hook-form";
import { CreateStaffInputs, saveStaff, testing } from "@/app/api/staff/actions";
import { Typography } from "@mui/material";
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";
@@ -20,6 +20,8 @@ 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 StaffInfo from "./StaffInfo";
import { Check, Close } from "@mui/icons-material";

interface Field {
id: string;
@@ -43,171 +45,133 @@ export interface comboItem {
}

interface formProps {
Title?: string[];
// Title?: string[];
combos: comboItem;
}


const CreateStaff: React.FC<formProps> = ({ Title, combos }) => {
const CreateStaff: React.FC<formProps> = ({ combos }) => {
const { t } = useTranslation();
const formProps = useForm<CreateStaffInputs>();
const [serverError, setServerError] = useState("");
const router = useRouter();
const [tabIndex, setTabIndex] = useState(0);

const errors = formProps.formState.errors;

const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
async (data) => {
try {
console.log(data);
let haveError = false;
let regex_email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
let regex_phone = /^\d{8}$/

if (!regex_email.test(data.email)) {
haveError = true
formProps.setError("email", { message: t("Please Enter Correct Email."), type: "required" })
}
if(!regex_phone.test(data.phone1)) {
haveError = true
formProps.setError("phone1", { message: t("Please Enter Correct Phone No.."), type: "required" })
}
if(!regex_phone.test(data.emergContactPhone)) {
haveError = true
formProps.setError("emergContactPhone", { message: t("Please Enter Correct Phone No.."), type: "required" })
}
if (data.phone2 && data.phone2?.length > 0) {
if(!regex_phone.test(data.phone2)) {
haveError = true
formProps.setError("phone2", { message: t("Please Enter Correct Phone No.."), type: "required" })
}
}
if (!regex_email.test(data.email)) {
haveError = true
formProps.setError("email", { message: t("Please Enter Correct Email."), type: "required" })
}
if (!data.companyId) {
haveError = true
formProps.setError("companyId", { message: t("Please Enter Company."), type: "required" })
}
if (!data.gradeId) {
haveError = true
formProps.setError("gradeId", { message: t("Please Enter grade."), type: "required" })
}
if (!data.employType) {
haveError = true
formProps.setError("employType", { message: t("Please Enter Employ Type."), type: "required" })
}
if (!data.departmentId) {
haveError = true
formProps.setError("departmentId", { message: t("Please Enter Department."), type: "required" })
}
if (!data.salaryId) {
haveError = true
formProps.setError("salaryId", { message: t("Please Enter Salary."), type: "required" })
}
if (!data.joinDate) {
haveError = true
formProps.setError("joinDate", { message: t("Please Enter Join Date."), type: "required" })
}
if (data.departDate && new Date(data.departDate) <= new Date(data.joinDate)) {
haveError = true
formProps.setError("departDate", { message: t("Depart Date cannot be earlier than Join Date."), type: "required" })
}
// if (!data.joinPositionId) {
// haveError = true
// formProps.setError("joinPositionId", { message: t("Depart Date cannot be earlier than Join Date."), type: "required" })
// }
if (haveError) {
return
}
console.log("passed")
await saveStaff(data)
router.replace("/settings/staff")
} catch (e) {
console.log(e);
setServerError(t("An error has occurred. Please try again later."));
}
},
[router]
);
const handleCancel = () => {
router.back();
};

const fieldLists: Field[][] = [
[
{
id: "staffId",
label: t("Staff ID"),
type: "text",
required: true,
},
{
id: "name",
label: t("Staff Name"),
type: "text",
required: true,
},
{
id: "companyId",
label: t("Company"),
type: "combo-Obj",
options: combos.company || [],
required: true,
},
{
id: "teamId",
label: t("Team"),
type: "combo-Obj",
options: combos.team || [],
required: false,
},
{
id: "departmentId",
label: t("Department"),
type: "combo-Obj",
options: combos.department || [],
required: true,
},
{
id: "gradeId",
label: t("Grade"),
type: "combo-Obj",
options: combos.grade || [],
required: false,
},
{
id: "skillSetId",
label: t("Skillset"),
type: "multiSelect-Obj",
options: combos.skill || [],
required: false,
},
{
id: "currentPositionId",
label: t("Current Position"),
type: "combo-Obj",
options: combos.position || [],
required: true,
},
{
id: "salaryId",
label: t("Salary Point"),
type: "combo-Obj",
options: combos.salary || [],
required: true,
},
// {
// id: "hourlyRate",
// label: t("Hourly Rate"),
// type: "numeric-testing",
// value: "",
// required: false,
// },
// {
// id: "hourlyRate",
// label: t("Hourly Rate"),
// type: "numeric-testing",
// required: true,
// },
{
id: "employType",
label: t("Employ Type"),
type: "combo-Obj",
options: [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}],
value: "",
required: true,
},
{
id: "email",
label: t("Email"),
type: "text",
pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
message: t("input matching format"),
required: true,
},
{
id: "phone1",
label: t("Phone1"),
type: "text",
pattern: "^\\d{8}$",
message: t("input correct phone no."),
required: true,
},
{
id: "phone2",
label: t("Phone2"),
type: "text",
pattern: "^\\d{8}$",
message: t("input correct phone no."),
required: false,
},
],
[
{
id: "emergContactName",
label: t("Emergency Contact Name"),
type: "text",
required: true,
},
{
id: "emergContactPhone",
label: t("Emergency Contact Phone"),
type: "text",
pattern: "^\\d{8}$",
message: t("input correct phone no."),
required: true,
},
{
id: "joinDate",
label: t("Join Date"),
type: "multiDate",
required: true,
},
{
id: "joinPositionId",
label: t("Join Position"),
type: "combo-Obj",
options: combos.position || [],
required: true,
},
{
id: "departDate",
label: t("Depart Date"),
type: "multiDate",
},
{
id: "departReason",
label: t("Depart Reason"),
type: "text",
},
{
id: "remark",
label: t("Remark"),
type: "remarks",
},
]
];
return (
<>
<CreateStaffForm Title={Title} fieldLists={fieldLists}/>
<FormProvider {...formProps}>
<Stack
spacing={2}
component="form"
onSubmit={formProps.handleSubmit(onSubmit)}
>
{serverError && (
<Typography variant="body2" color="error" alignSelf="flex-end">
{serverError}
</Typography>
)}
<StaffInfo combos={combos}/>
<Stack direction="row" justifyContent="flex-end" gap={1}>
<Button
variant="outlined"
startIcon={<Close />}
onClick={handleCancel}
>
{t("Cancel")}
</Button>
<Button
variant="contained"
startIcon={<Check />}
type="submit"
// disabled={Boolean(formProps.watch("isGridEditing"))}
>
{t("Confirm")}
</Button>
</Stack>
</Stack>
</FormProvider>
</>
);
};


+ 514
- 0
src/components/CreateStaff/StaffInfo.tsx View File

@@ -0,0 +1,514 @@
"use client";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { CreateGroupInputs } from "@/app/api/group/actions";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useCallback, useEffect } from "react";
import { CreateStaffInputs } from "@/app/api/staff/actions";
import {
Checkbox,
FormControl,
InputLabel,
ListItemText,
MenuItem,
Select,
} from "@mui/material";
import { comboItem } from "./CreateStaff";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DemoItem } from "@mui/x-date-pickers/internals/demo";
import dayjs from "dayjs";
import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";

interface Props {
combos: comboItem;
}

const StaffInfo: React.FC<Props> = ({ combos }) => {
const {
t,
i18n: { language },
} = useTranslation();
const {
register,
formState: { errors, defaultValues },
control,
reset,
resetField,
setValue,
getValues,
clearErrors
} = useFormContext<CreateStaffInputs>();

const employType = [
{ id: 1, label: "FT" },
{ id: 2, label: "PT" },
];

const skillIdNameMap = combos.skill.reduce<{ [id: number]: string }>(
(acc, skill) => ({ ...acc, [skill.id]: skill.label }),
{}
);

const resetStaff = useCallback(() => {
console.log(defaultValues);
if (defaultValues !== undefined) {
// resetField("description");
}
}, [defaultValues]);

const joinDate = getValues("joinDate");
const departDate = getValues("departDate");

useEffect(() => {
if(joinDate)
clearErrors("joinDate")
if(departDate)
clearErrors("departDate")
}, [joinDate, departDate])

return (
<Card sx={{ display: "block" }}>
<CardContent component={Stack} spacing={4}>
<Box>
<Typography variant="overline" display="block" marginBlockEnd={1}>
{t("Staff")}
</Typography>
<Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
<Grid item xs={6}>
<TextField
label={t("Staff ID")}
fullWidth
required
{...register("staffId", {
required: "Staff Id required!",
})}
error={Boolean(errors.name)}
helperText={
Boolean(errors.name) &&
(errors.name?.message
? t(errors.name.message)
: t("Please input correct staffId"))
}
/>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Staff Name")}
fullWidth
required
{...register("name", {
required: "Staff Name required!",
})}
error={Boolean(errors.name)}
helperText={
Boolean(errors.name) &&
(errors.name?.message
? t(errors.name.message)
: t("Please input correct name"))
}
/>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel required>{t("Company")}</InputLabel>
<Controller
control={control}
name="companyId"
render={({ field }) => (
<Select
label={t("Company")}
{...field}
error={Boolean(errors.companyId)}
>
{combos.company.map((company, index) => (
<MenuItem
key={`${company.id}-${index}`}
value={company.id}
>
{t(company.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Team")}</InputLabel>
<Controller
control={control}
name="teamId"
render={({ field }) => (
<Select
label={t("Team")}
{...field}
// error={Boolean(errors.teamId)}
>
{combos.team.map((team, index) => (
<MenuItem key={`${team.id}-${index}`} value={team.id}>
{t(team.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Department")}</InputLabel>
<Controller
control={control}
name="departmentId"
render={({ field }) => (
<Select
label={t("Department")}
{...field}
error={Boolean(errors.departmentId)}
>
{combos.department.map((department, index) => (
<MenuItem
key={`${department.id}-${index}`}
value={department.id}
>
{t(department.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel required>{t("Grade")}</InputLabel>
<Controller
control={control}
name="gradeId"
render={({ field }) => (
<Select
label={t("Grade")}
{...field}
error={Boolean(errors.gradeId)}
>
{combos.grade.map((grade, index) => (
<MenuItem key={`${grade.id}-${index}`} value={grade.id}>
{t(grade.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Skillset")}</InputLabel>
<Controller
defaultValue={[]}
control={control}
name="skillSetId"
render={({ field }) => (
<Select
// error={Boolean(errors.skillSetId)}
renderValue={(types) =>
types.map((type) => skillIdNameMap[type]).join(", ")
}
multiple
label={t("Skillset")}
{...field}
>
{combos.skill.map((skill, index) => {
// console.log(field)
return (
<MenuItem
key={`${skill.id}-${index}`}
value={skill.id}
>
<Checkbox
checked={field.value!.indexOf(skill.id) > -1}
/>
<ListItemText primary={skill.label} />
</MenuItem>
);
})}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel required>{t("Current Position")}</InputLabel>
<Controller
control={control}
name="currentPositionId"
render={({ field }) => (
<Select
label={t("Current Position")}
{...field}
error={Boolean(errors.currentPositionId)}
>
{combos.position.map((position, index) => (
<MenuItem
key={`${position.id}-${index}`}
value={position.id}
>
{t(position.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Salary Point")}</InputLabel>
<Controller
control={control}
name="salaryId"
render={({ field }) => (
<Select
label={t("Salary Point")}
{...field}
error={Boolean(errors.salaryId)}
>
{combos.salary.map((salary, index) => (
<MenuItem
key={`${salary.id}-${index}`}
value={salary.id}
>
{t(salary.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Employ Type")}</InputLabel>
<Controller
control={control}
name="employType"
render={({ field }) => (
<Select
label={t("Employ Type")}
{...field}
error={Boolean(errors.employType)}
>
{employType.map((type, index) => (
<MenuItem
key={`${type.id}-${index}`}
value={type.label}
>
{t(type.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Email")}
fullWidth
required
{...register("email", {
required: "Email required!",
})}
error={Boolean(errors.email)}
helperText={
Boolean(errors.email) &&
(errors.email?.message
? t(errors.email.message)
: t("Please input correct email"))
}
/>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Phone1")}
fullWidth
required
{...register("phone1", {
required: "phone1 required!",
})}
error={Boolean(errors.phone1)}
helperText={
Boolean(errors.phone1) &&
(errors.phone1?.message
? t(errors.phone1.message)
: t("Please input correct phone1"))
}
/>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Phone2")}
fullWidth
{...register("phone2")}
error={Boolean(errors.phone2)}
helperText={
Boolean(errors.phone2) &&
(errors.phone2?.message
? t(errors.phone2.message)
: t("Please input correct phone2"))
}
/>
</Grid>
</Grid>
<Grid container spacing={2} columns={{ xs: 6, sm: 12 }} marginTop={3}>
<Grid item xs={6}>
<TextField
label={t("Emergency Contact Name")}
fullWidth
required
{...register("emergContactName", {
required: "Emergency Contact Name required!",
})}
error={Boolean(errors.emergContactName)}
helperText={
Boolean(errors.emergContactName) &&
(errors.emergContactName?.message
? t(errors.emergContactName.message)
: t("Please input correct Emergency Contact Name"))
}
/>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Emergency Contact Phone")}
fullWidth
required
{...register("emergContactPhone", {
required: "Emergency Contact Phone required!",
})}
error={Boolean(errors.emergContactPhone)}
helperText={
Boolean(errors.emergContactPhone) &&
(errors.emergContactPhone?.message
? t(errors.emergContactPhone.message)
: t("Please input correct Emergency Contact Phone"))
}
/>
</Grid>
<Grid item xs={6}>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={`${language}-hk`}
>
<DatePicker
sx={{ width: "100%" }}
label={t("Join Date")}
value={joinDate ? dayjs(joinDate) : null}
onChange={(date) => {
if (!date) return;
setValue("joinDate", date.format(INPUT_DATE_FORMAT));
}}
slotProps={{
textField: {
error:
joinDate === "Invalid Date" || Boolean(errors.joinDate),
// value: errors.joinDate?.message,
},
}}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth>
<InputLabel>{t("Join Position")}</InputLabel>
<Controller
control={control}
name="joinPositionId"
render={({ field }) => (
<Select
label={t("Join Position")}
{...field}
error={Boolean(errors.joinPositionId)}
>
{combos.position.map((position, index) => (
<MenuItem
key={`${position.id}-${index}`}
value={position.label}
>
{t(position.label)}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={6}>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={`${language}-hk`}
>
<DatePicker
sx={{ width: "100%" }}
label={t("Depart Date")}
value={departDate ? dayjs(departDate) : null}
onChange={(date) => {
if (!date) return;
setValue("departDate", date.format(INPUT_DATE_FORMAT));
}}
slotProps={{
textField: {
error: departDate === "Invalid Date",
// value: errors.departDate?.message,
},
}}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={6}>
<TextField
label={t("Depart Reason")}
fullWidth
{...register("departReason")}
error={Boolean(errors.departReason)}
helperText={
Boolean(errors.departReason) &&
(errors.departReason?.message
? t(errors.departReason.message)
: t("Please input correct departReason"))
}
/>
</Grid>
<Grid item xs={12}>
<TextField
label={t("Remark")}
fullWidth
multiline
rows={4}
{...register("remark")}
error={Boolean(errors.remark)}
helperText={
Boolean(errors.remark) &&
(errors.remark?.message
? t(errors.remark.message)
: t("Please input correct remark"))
}
/>
</Grid>
</Grid>
</Box>
</CardContent>
</Card>
);
};

export default StaffInfo;

+ 112
- 112
src/components/CreateStaffForm/CreateStaffForm.tsx View File

@@ -1,120 +1,120 @@
import { useCallback, useState } from "react";
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 { Typography } from "@mui/material";
// import { useCallback, useState } from "react";
// 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 { Typography } from "@mui/material";

interface Field {
// subtitle: string;
id: string;
label: string;
type: string;
value?: any;
required?: boolean;
options?: any[];
readOnly?: boolean;
}
// interface Field {
// // subtitle: string;
// id: string;
// label: string;
// type: string;
// value?: any;
// required?: boolean;
// options?: any[];
// readOnly?: boolean;
// }

interface formProps {
Title?: string[];
fieldLists: Field[][];
}
// interface formProps {
// Title?: string[];
// fieldLists: Field[][];
// }

const CreateStaffForm: React.FC<formProps> = ({ Title, fieldLists }) => {
const router = useRouter();
const { t } = useTranslation();
const [serverError, setServerError] = useState("");
// const CreateStaffForm: React.FC<formProps> = ({ Title, fieldLists }) => {
// const router = useRouter();
// const { t } = useTranslation();
// const [serverError, setServerError] = useState("");

const handleCancel = () => {
router.back();
};
const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
async (data) => {
try {
console.log(data);
let haveError = false;
//check if joinDate exist
if (data.joinDate == null && data.joinDate == "Invalid Date") {
haveError = true;
return haveError;
}
//check if joinDate > departDate
if (data.departDate != null && data.departDate != "Invalid Date" && data.departDate.length != 0) {
if (data.joinDate != null) {
const joinDate = new Date(data.joinDate);
const departDate = new Date(data.departDate);
if (joinDate.getTime() > departDate.getTime()) {
haveError = true;
return haveError;
}
}
if (data.departReason == null || data.departReason.length == 0) {
haveError = true;
return haveError;
}
}
// const handleCancel = () => {
// router.back();
// };
// const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
// async (data) => {
// try {
// console.log(data);
// let haveError = false;
// //check if joinDate exist
// if (data.joinDate == null && data.joinDate == "Invalid Date") {
// haveError = true;
// return haveError;
// }
// //check if joinDate > departDate
// if (data.departDate != null && data.departDate != "Invalid Date" && data.departDate.length != 0) {
// if (data.joinDate != null) {
// const joinDate = new Date(data.joinDate);
// const departDate = new Date(data.departDate);
// if (joinDate.getTime() > departDate.getTime()) {
// haveError = true;
// return haveError;
// }
// }
// if (data.departReason == null || data.departReason.length == 0) {
// haveError = true;
// return haveError;
// }
// }

if (haveError) {
return
}
const postData = {
...data,
skillSetId: typeof data.skillSetId === "number" ? [data.skillSetId] : data.skillSetId,
emergContactPhone: data.emergContactPhone.toString(),
phone1: data.phone1.toString(),
phone2: data.phone2.toString(),
hourlyRate: typeof data.hourlyRate === 'string' ? parseInt(data.hourlyRate.replace("$", "").replace(",", "")) : 0
};
if (postData.departDate?.length === 0 && postData.departReason?.length === 0) {
delete postData.departDate;
delete postData.departReason;
}
if (postData.remark?.length === 0) {
delete postData.remark;
}
console.log(postData);
setServerError("");
await saveStaff(postData);
router.replace("/settings/staff");
} catch (e) {
setServerError(t("An error has occurred. Please try again later."));
}
},
[router, t]
);
// if (haveError) {
// return
// }
// const postData = {
// ...data,
// skillSetId: typeof data.skillSetId === "number" ? [data.skillSetId] : data.skillSetId,
// emergContactPhone: data.emergContactPhone.toString(),
// phone1: data.phone1.toString(),
// phone2: data.phone2.toString(),
// hourlyRate: typeof data.hourlyRate === 'string' ? parseInt(data.hourlyRate.replace("$", "").replace(",", "")) : 0
// };
// if (postData.departDate?.length === 0 && postData.departReason?.length === 0) {
// delete postData.departDate;
// delete postData.departReason;
// }
// if (postData.remark?.length === 0) {
// delete postData.remark;
// }
// console.log(postData);
// setServerError("");
// await saveStaff(postData);
// router.replace("/settings/staff");
// } catch (e) {
// setServerError(t("An error has occurred. Please try again later."));
// }
// },
// [router, t]
// );

const onSubmitError = useCallback<SubmitErrorHandler<CreateStaffInputs>>(
(errors) => {
console.log(errors);
},
[]
);
// const onSubmitError = useCallback<SubmitErrorHandler<CreateStaffInputs>>(
// (errors) => {
// console.log(errors);
// },
// []
// );

return (
<>
{serverError && (
<Typography variant="body2" color="error" alignSelf="flex-end">
{serverError}
</Typography>
)}
<CustomInputForm
Title={Title}
fieldLists={fieldLists}
isActive={true}
onSubmit={onSubmit}
onSubmitError={onSubmitError}
onCancel={handleCancel}
/>
</>
);
};
// return (
// <>
// {serverError && (
// <Typography variant="body2" color="error" alignSelf="flex-end">
// {serverError}
// </Typography>
// )}
// <CustomInputForm
// Title={Title}
// fieldLists={fieldLists}
// isActive={true}
// onSubmit={onSubmit}
// onSubmitError={onSubmitError}
// onCancel={handleCancel}
// />
// </>
// );
// };

export default CreateStaffForm;
// export default CreateStaffForm;

Write Preview
Loading…
Cancel
Save