Files
hounam-submit-form-frontend/ui/forms/JobInfoForm.tsx
2026-05-31 14:22:39 +03:30

173 lines
4.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React from "react";
import {
Box,
Paper,
TextField,
Typography,
Switch,
FormControlLabel,
MenuItem,
Grid,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { format } from "date-fns-jalali"; // برای تبدیل تاریخ به رشته استاندارد
// --- Types ---
export interface JobInfoFormData {
readyToWorkDate: string; // YYYY-MM-DD
isCurrentEmployee: boolean;
hasPastCooperation: boolean;
isCurrentlyEmployed: boolean;
dualJobInterest: boolean;
retirementStatus: "None" | "Retired" | "Redeemed";
isMilitary: boolean;
hasInsurance: boolean;
insuranceType: string;
totalInsuranceYears: string;
}
interface Props {
value: JobInfoFormData;
onChange: (next: JobInfoFormData) => void;
}
export default function JobInfoForm({ value, onChange }: Props) {
const setField = (key: keyof JobInfoFormData) => (e: any) => {
onChange({ ...value, [key]: e.target.value });
};
const setSwitch =
(key: keyof JobInfoFormData) =>
(e: React.ChangeEvent<HTMLInputElement>) => {
const checked = e.target.checked;
const next = { ...value, [key]: checked };
// پاکسازی فیلدهای وابسته بیمه در صورت غیرفعال شدن
if (key === "hasInsurance" && !checked) {
next.insuranceType = "";
next.totalInsuranceYears = "0";
}
onChange(next);
};
const handleDateChange = (date: Date | null) => {
if (date) {
// تبدیل تاریخ جاوا اسکریپت به فرمت YYYY-MM-DD برای دیتابیس
const formattedDate = format(date, "yyyy-MM-dd");
onChange({ ...value, readyToWorkDate: formattedDate });
}
};
return (
<Paper
elevation={0}
>
<Box
sx={{
display: "grid",
gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
gap: 3,
}}
>
<DatePicker
label="تاریخ آمادگی برای شروع کار"
value={value?.readyToWorkDate ? new Date(value?.readyToWorkDate) : null}
onChange={handleDateChange}
slotProps={{
textField: { fullWidth: true },
}}
/>
{/* وضعیت بازنشستگی */}
<TextField
select
label="وضعیت بازنشستگی"
value={value?.retirementStatus}
onChange={setField("retirementStatus")}
fullWidth
>
<MenuItem value="None">هیچکدام</MenuItem>
<MenuItem value="Retired">بازنشسته</MenuItem>
<MenuItem value="Redeemed">بازخرید</MenuItem>
</TextField>
{/* Switch Buttons */}
<FormControlLabel
control={
<Switch
checked={value?.isCurrentEmployee}
onChange={setSwitch("isCurrentEmployee")}
/>
}
label="از پرسنل حال حاضر هستم"
/>
<FormControlLabel
control={
<Switch
checked={value?.hasPastCooperation}
onChange={setSwitch("hasPastCooperation")}
/>
}
label="سابقه همکاری در گذشته دارم"
/>
<FormControlLabel
control={
<Switch
checked={value?.isCurrentlyEmployed}
onChange={setSwitch("isCurrentlyEmployed")}
/>
}
label="در حال حاضر مشغول به کار هستم"
/>
<FormControlLabel
control={
<Switch
checked={value?.dualJobInterest}
onChange={setSwitch("dualJobInterest")}
/>
}
label="تمایل به شغل دوم دارم"
/>
<FormControlLabel
control={
<Switch
checked={value?.isMilitary}
onChange={setSwitch("isMilitary")}
/>
}
label="نظامی هستم"
/>
<FormControlLabel
control={
<Switch
checked={value?.hasInsurance}
onChange={setSwitch("hasInsurance")}
/>
}
label="دارای سابقه بیمه هستم"
/>
{/* Conditional Insurance Fields */}
{value?.hasInsurance && (
<>
<TextField
label="نوع بیمه"
value={value?.insuranceType}
onChange={setField("insuranceType")}
fullWidth
/>
<TextField
type="number"
label="جمع سال‌های سابقه بیمه"
value={value?.totalInsuranceYears}
onChange={setField("totalInsuranceYears")}
fullWidth
/>
</>
)}
</Box>
</Paper>
);
}