142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
import React from "react";
|
||
import {
|
||
Box,
|
||
Paper,
|
||
TextField,
|
||
Typography,
|
||
Grid,
|
||
Alert,
|
||
AlertTitle,
|
||
Divider,
|
||
} from "@mui/material";
|
||
|
||
export interface ReferenceFormData {
|
||
firstName: string;
|
||
lastName: string;
|
||
relationship: string;
|
||
jobTitle: string;
|
||
workplaceName: string;
|
||
phoneNumber: string;
|
||
}
|
||
|
||
type ValueType = [ReferenceFormData, ReferenceFormData];
|
||
|
||
const emptyRef = (): ReferenceFormData => ({
|
||
firstName: "",
|
||
lastName: "",
|
||
relationship: "",
|
||
jobTitle: "",
|
||
workplaceName: "",
|
||
phoneNumber: "",
|
||
});
|
||
|
||
interface Props {
|
||
value?: ValueType; // ✅ optional
|
||
onChange?: (next: ValueType) => void; // ✅ optional
|
||
}
|
||
|
||
export default function RelationForm({ value, onChange }: Props) {
|
||
// ✅ همیشه یک آرایه 2تایی معتبر داریم
|
||
const safeValue: ValueType = value ?? [emptyRef(), emptyRef()];
|
||
|
||
const safeOnChange = onChange ?? (() => {});
|
||
|
||
const updateField =
|
||
(index: 0 | 1, key: keyof ReferenceFormData) =>
|
||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const next: ValueType = [
|
||
{ ...safeValue[0] },
|
||
{ ...safeValue[1] },
|
||
];
|
||
|
||
next[index] = { ...next[index], [key]: e.target.value };
|
||
safeOnChange(next);
|
||
};
|
||
|
||
const renderPersonFields = (index: 0 | 1) => (
|
||
<Box sx={{ mt: 2 }}>
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 2 }}>
|
||
آشنای {index === 0 ? "اول" : "دوم"}
|
||
</Typography>
|
||
|
||
<Grid container spacing={2}>
|
||
<Grid>
|
||
<TextField
|
||
label="نام *"
|
||
fullWidth
|
||
required
|
||
value={safeValue[index].firstName}
|
||
onChange={updateField(index, "firstName")}
|
||
/>
|
||
</Grid>
|
||
|
||
<Grid>
|
||
<TextField
|
||
label="نام خانوادگی *"
|
||
fullWidth
|
||
required
|
||
value={safeValue[index].lastName}
|
||
onChange={updateField(index, "lastName")}
|
||
/>
|
||
</Grid>
|
||
|
||
<Grid>
|
||
<TextField
|
||
label="نسبت *"
|
||
fullWidth
|
||
required
|
||
value={safeValue[index].relationship}
|
||
onChange={updateField(index, "relationship")}
|
||
placeholder="مثلاً: همکار، دوست"
|
||
/>
|
||
</Grid>
|
||
|
||
<Grid>
|
||
<TextField
|
||
label="تلفن تماس *"
|
||
fullWidth
|
||
required
|
||
inputMode="tel"
|
||
value={safeValue[index].phoneNumber}
|
||
onChange={updateField(index, "phoneNumber")}
|
||
/>
|
||
</Grid>
|
||
|
||
<Grid >
|
||
<TextField
|
||
label="شغل *"
|
||
fullWidth
|
||
required
|
||
value={safeValue[index].jobTitle}
|
||
onChange={updateField(index, "jobTitle")}
|
||
/>
|
||
</Grid>
|
||
|
||
<Grid>
|
||
<TextField
|
||
label="نام محل کار *"
|
||
fullWidth
|
||
required
|
||
value={safeValue[index].workplaceName}
|
||
onChange={updateField(index, "workplaceName")}
|
||
/>
|
||
</Grid>
|
||
</Grid>
|
||
</Box>
|
||
);
|
||
|
||
return (
|
||
<Paper elevation={0} >
|
||
|
||
<Alert severity="warning" sx={{ mb: 3 }}>
|
||
<AlertTitle>توجه</AlertTitle>
|
||
مشخصات دو نفر از آشنایان را وارد کنید و از درج بستگان درجه یک (پدر، مادر، همسر، برادر و خواهر) خودداری نمایید.
|
||
</Alert>
|
||
|
||
{renderPersonFields(0)}
|
||
<Divider sx={{ my: 3 }} />
|
||
{renderPersonFields(1)}
|
||
</Paper>
|
||
);
|
||
}
|