dasdasd
This commit is contained in:
310
ui/forms/identity/InnerIdentityForm.tsx
Normal file
310
ui/forms/identity/InnerIdentityForm.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
MenuItem,
|
||||
Paper,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { ErrorMessage, Form, FormikProps } from "formik";
|
||||
import { IdentityFormValues } from "@/core/types";
|
||||
import { IdentityFormProps } from "./IdentityForm";
|
||||
import { UploadFile } from "@mui/icons-material";
|
||||
import { genderOptions, religionOptions } from "@/core/constant";
|
||||
import { useState } from "react";
|
||||
export default function InnerIdentityForm(
|
||||
props: FormikProps<IdentityFormValues> & IdentityFormProps,
|
||||
) {
|
||||
console.log(props.data)
|
||||
const handleBack = () => {
|
||||
// قبل از رفتن به عقب، مقادیر فعلی فرم را در استیت والد ذخیره کن
|
||||
props.update({ identity: props.values });
|
||||
props.setStep(props.step - 1);
|
||||
};
|
||||
const [profilePhoto, setProfilePhoto] = useState<File | null>(null);
|
||||
const [profilePhotoError, setProfilePhotoError] = useState<string>("");
|
||||
|
||||
const handleProfilePhotoChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (!file.type.startsWith("image/")) {
|
||||
setProfilePhoto(null);
|
||||
setProfilePhotoError("فقط فایل تصویری مجاز است");
|
||||
return;
|
||||
}
|
||||
|
||||
const maxSize = 500 * 1024; // 500KB
|
||||
if (file.size > maxSize) {
|
||||
setProfilePhoto(null);
|
||||
setProfilePhotoError("حجم عکس باید حداکثر ۵۰۰ کیلوبایت باشد");
|
||||
return;
|
||||
}
|
||||
|
||||
setProfilePhoto(file);
|
||||
setProfilePhotoError("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
width: "100%",
|
||||
background: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<Form>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(340px, 1fr))",
|
||||
gap: "18px",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<TextField
|
||||
label="نام"
|
||||
value={props.values.firstName}
|
||||
onChange={(e) =>
|
||||
props.setFieldValue("firstName", e.target.value)
|
||||
}
|
||||
error={!!props.errors.firstName}
|
||||
helperText={props.errors.firstName}
|
||||
fullWidth
|
||||
required
|
||||
/>
|
||||
<ErrorMessage component={"div"} name="firstName" />
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
label="نام خانوادگی"
|
||||
value={props.values.lastName}
|
||||
onChange={(e) => props.setFieldValue("lastName", e.target.value)}
|
||||
error={!!props.errors.lastName}
|
||||
helperText={props.errors.lastName}
|
||||
fullWidth
|
||||
required
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="نام پدر"
|
||||
value={props.values.fatherName}
|
||||
onChange={(e) =>
|
||||
props.setFieldValue("fatherName", e.target.value)
|
||||
}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="کد ملی"
|
||||
value={props.values.nationalCode}
|
||||
onChange={(e) =>
|
||||
props.setFieldValue("nationalCode", e.target.value)
|
||||
}
|
||||
error={!!props.errors.nationalCode}
|
||||
helperText={props.errors.nationalCode}
|
||||
fullWidth
|
||||
required
|
||||
/>
|
||||
|
||||
{/* <DatePicker
|
||||
label="تاریخ تولد"
|
||||
value={props.values.birthDate}
|
||||
onChange={(newValue) =>
|
||||
props.setFieldValue("birthDate", newValue)
|
||||
}
|
||||
slotProps={{
|
||||
textField: {
|
||||
fullWidth: true,
|
||||
error: !!props.errors.birthDate,
|
||||
helperText: props.errors.birthDate,
|
||||
},
|
||||
}}
|
||||
/> */}
|
||||
|
||||
<TextField
|
||||
label="محل تولد"
|
||||
value={props.values.birthPlace}
|
||||
onChange={(e) =>
|
||||
props.setFieldValue("birthPlace", e.target.value)
|
||||
}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="جنسیت"
|
||||
value={props.values.gender}
|
||||
onChange={(e) => props.setFieldValue("gender", e.target.value)}
|
||||
error={!!props.errors.gender}
|
||||
helperText={props.errors.gender}
|
||||
fullWidth
|
||||
required
|
||||
>
|
||||
{genderOptions.map((item) => (
|
||||
<MenuItem key={item.id} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="دین"
|
||||
value={props.values.religion}
|
||||
onChange={(e) => props.setFieldValue("religion", e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
{religionOptions.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
label="ملیت"
|
||||
value={props.values.nationality}
|
||||
onChange={(e) =>
|
||||
props.setFieldValue("nationality", e.target.value)
|
||||
}
|
||||
error={!!props.errors.nationality}
|
||||
helperText={props.errors.nationality}
|
||||
fullWidth
|
||||
required
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: profilePhotoError
|
||||
? "1px solid #ef4444"
|
||||
: "1px dashed #cbd5e1",
|
||||
borderRadius: "18px",
|
||||
backgroundColor: "#f8fafc",
|
||||
p: 2,
|
||||
minHeight: "100%",
|
||||
transition: "all 0.2s ease",
|
||||
"&:hover": {
|
||||
borderColor: profilePhotoError ? "#ef4444" : "#2563eb",
|
||||
backgroundColor: "#f8fbff",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: "#0f172a",
|
||||
mb: 1.5,
|
||||
fontSize: "0.95rem",
|
||||
}}
|
||||
>
|
||||
عکس پرسنلی
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#64748b",
|
||||
fontSize: "0.82rem",
|
||||
mb: 2,
|
||||
lineHeight: 1.8,
|
||||
}}
|
||||
>
|
||||
فقط فایل تصویری مجاز است و حجم آن باید حداکثر ۵۰۰ کیلوبایت باشد.
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
component="label"
|
||||
variant="outlined"
|
||||
startIcon={<UploadFile />}
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
borderColor: "#cbd5e1",
|
||||
color: "#2563eb",
|
||||
fontWeight: 700,
|
||||
px: 2.5,
|
||||
"&:hover": {
|
||||
borderColor: "#2563eb",
|
||||
backgroundColor: "#eff6ff",
|
||||
},
|
||||
}}
|
||||
>
|
||||
انتخاب عکس
|
||||
<input
|
||||
hidden
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleProfilePhotoChange}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{profilePhoto && (
|
||||
<Typography
|
||||
sx={{
|
||||
mt: 1.5,
|
||||
fontSize: "0.82rem",
|
||||
color: "#475569",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
فایل انتخابشده: {profilePhoto.name}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{profilePhotoError && (
|
||||
<Typography
|
||||
sx={{
|
||||
mt: 1.5,
|
||||
color: "#dc2626",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{profilePhotoError}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</div>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: 5,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
disabled={props.step === 1}
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
color: "#64748b",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
بازگشت
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="submit"
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
bgcolor: `${props.step === 12 ? "green" : "#2563eb"}`,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{props.step === 12 ? "اتمام و ثبت نهايي" : "گام بعدی"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Form>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user