change some files
This commit is contained in:
293
ui/forms/workExperience/InnerWorkExperienceForm.tsx
Normal file
293
ui/forms/workExperience/InnerWorkExperienceForm.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Paper,
|
||||
Switch,
|
||||
TextField,
|
||||
Typography,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import { DeleteOutlineOutlined, Add } from "@mui/icons-material";
|
||||
import { FieldArray, Form, getIn, type FormikProps } from "formik";
|
||||
|
||||
import type {
|
||||
WorkExperienceFormProps,
|
||||
WorkExperienceFormValues,
|
||||
WorkExperienceFormItem,
|
||||
} from "./types";
|
||||
import {
|
||||
WORK_EXPERIENCE_EMPTY_ITEM,
|
||||
WORK_EXPERIENCE_NO_EXPERIENCE_ITEM,
|
||||
} from "./constant";
|
||||
|
||||
type Props = FormikProps<WorkExperienceFormValues> & WorkExperienceFormProps;
|
||||
|
||||
export default function InnerWorkExperienceForm(props: Props) {
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
setFieldValue,
|
||||
handleChange,
|
||||
isSubmitting,
|
||||
} = props;
|
||||
|
||||
const workExperiences = values.workExperiences || [];
|
||||
const hasNoExperienceMode =
|
||||
workExperiences.length === 1 && workExperiences[0]?.hasNoExperience;
|
||||
|
||||
const handleBack = () => {
|
||||
props.update({
|
||||
workExperiences: values.workExperiences,
|
||||
});
|
||||
props.setStep(props.step - 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FieldArray name="workExperiences">
|
||||
{({ push, remove, replace }) => (
|
||||
<>
|
||||
{workExperiences.map((item: WorkExperienceFormItem, index: number) => {
|
||||
const itemErrors = getIn(errors, `workExperiences.${index}`) || {};
|
||||
const itemTouched = getIn(touched, `workExperiences.${index}`) || {};
|
||||
|
||||
const setHasNoExperience = (checked: boolean) => {
|
||||
if (checked) {
|
||||
replace(0, {
|
||||
...WORK_EXPERIENCE_NO_EXPERIENCE_ITEM,
|
||||
id: Date.now(),
|
||||
});
|
||||
|
||||
for (let i = workExperiences.length - 1; i >= 1; i--) {
|
||||
remove(i);
|
||||
}
|
||||
} else {
|
||||
setFieldValue(`workExperiences.${index}.hasNoExperience`, false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper
|
||||
key={item.id || index}
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: { xs: 2, md: 3 },
|
||||
borderRadius: "24px",
|
||||
border: "1px solid #e2e8f0",
|
||||
backgroundColor: "#fff",
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 700 }}>
|
||||
سابقه کاری {index + 1}
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
onClick={() => remove(index)}
|
||||
disabled={workExperiences.length === 1 || hasNoExperienceMode}
|
||||
size="small"
|
||||
color="error"
|
||||
>
|
||||
<DeleteOutlineOutlined />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "repeat(2, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
sx={{ gridColumn: "1 / -1" }}
|
||||
control={
|
||||
<Switch
|
||||
checked={item.hasNoExperience}
|
||||
onChange={(e) => setHasNoExperience(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="فاقد سابقه کاری هستم"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="نام شرکت"
|
||||
name={`workExperiences.${index}.companyName`}
|
||||
value={item.companyName}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
error={!!itemTouched.companyName && !!itemErrors.companyName}
|
||||
helperText={
|
||||
itemTouched.companyName ? itemErrors.companyName : ""
|
||||
}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="آخرین سمت"
|
||||
name={`workExperiences.${index}.lastPosition`}
|
||||
value={item.lastPosition}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
error={!!itemTouched.lastPosition && !!itemErrors.lastPosition}
|
||||
helperText={
|
||||
itemTouched.lastPosition ? itemErrors.lastPosition : ""
|
||||
}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="سال شروع"
|
||||
name={`workExperiences.${index}.startYear`}
|
||||
value={item.startYear}
|
||||
onChange={(e) => {
|
||||
const onlyDigits = e.target.value.replace(/[^\d]/g, "");
|
||||
setFieldValue(
|
||||
`workExperiences.${index}.startYear`,
|
||||
onlyDigits,
|
||||
);
|
||||
}}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
inputMode="numeric"
|
||||
error={!!itemTouched.startYear && !!itemErrors.startYear}
|
||||
helperText={itemTouched.startYear ? itemErrors.startYear : ""}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="سال پایان"
|
||||
name={`workExperiences.${index}.endYear`}
|
||||
value={item.endYear}
|
||||
onChange={(e) => {
|
||||
const onlyDigits = e.target.value.replace(/[^\d]/g, "");
|
||||
setFieldValue(
|
||||
`workExperiences.${index}.endYear`,
|
||||
onlyDigits,
|
||||
);
|
||||
}}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
inputMode="numeric"
|
||||
error={!!itemTouched.endYear && !!itemErrors.endYear}
|
||||
helperText={itemTouched.endYear ? itemErrors.endYear : ""}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="علت ترک کار"
|
||||
name={`workExperiences.${index}.leavingReason`}
|
||||
value={item.leavingReason}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
error={!!itemTouched.leavingReason && !!itemErrors.leavingReason}
|
||||
helperText={
|
||||
itemTouched.leavingReason ? itemErrors.leavingReason : ""
|
||||
}
|
||||
sx={{ gridColumn: { md: "1 / -1" } }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="توضیحات"
|
||||
name={`workExperiences.${index}.description`}
|
||||
value={item.description}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
disabled={item.hasNoExperience}
|
||||
multiline
|
||||
minRows={3}
|
||||
error={!!itemTouched.description && !!itemErrors.description}
|
||||
helperText={
|
||||
itemTouched.description ? itemErrors.description : ""
|
||||
}
|
||||
sx={{ gridColumn: { md: "1 / -1" } }}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
|
||||
{!hasNoExperienceMode && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outlined"
|
||||
startIcon={<Add />}
|
||||
onClick={() =>
|
||||
push({
|
||||
...WORK_EXPERIENCE_EMPTY_ITEM,
|
||||
id: Date.now(),
|
||||
})
|
||||
}
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
mb: 3,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
افزودن سابقه کاری
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{typeof errors.workExperiences === "string" && (
|
||||
<Typography color="error" sx={{ mb: 2 }}>
|
||||
{errors.workExperiences}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: 4,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
disabled={props.step === 1 || isSubmitting}
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
color: "#64748b",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
بازگشت
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
bgcolor: props.step === 12 ? "green" : "#2563eb",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{props.step === 12 ? "اتمام و ثبت نهایی" : "گام بعدی"}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</FieldArray>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user