83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Box, Button, Divider, Typography, Paper, IconButton } from "@mui/material";
|
||
import { Add, Delete } from "@mui/icons-material";
|
||
import EducationForm, { EducationFormState, educationInitialValues } from "./EducationForm";
|
||
|
||
export default function EducationSection({
|
||
applicantId,
|
||
onChange
|
||
}: {
|
||
applicantId: string,
|
||
onChange: (educations: EducationFormState[]) => void
|
||
}) {
|
||
const [educations, setEducations] = useState<EducationFormState[]>([
|
||
{ ...educationInitialValues, applicantId }
|
||
]);
|
||
|
||
// افزودن یک فرم جدید
|
||
const addEducation = () => {
|
||
setEducations((prev) => [...prev, { ...educationInitialValues, applicantId }]);
|
||
};
|
||
|
||
// حذف یک فرم از لیست
|
||
const removeEducation = (index: number) => {
|
||
setEducations((prev) => prev.filter((_, i) => i !== index));
|
||
};
|
||
|
||
// بهروزرسانی محتوای یک فرم خاص
|
||
const updateEducation = (index: number, data: EducationFormState) => {
|
||
const nextList = [...educations];
|
||
nextList[index] = data;
|
||
setEducations(nextList);
|
||
onChange(nextList); // ارسال لیست نهایی به کامپوننت اصلی
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||
<Typography variant="h6" sx={{ color: "#1e293b", fontWeight: 700 }}>
|
||
سوابق تحصیلی
|
||
</Typography>
|
||
|
||
{educations.map((ed, index) => (
|
||
<Paper key={index} sx={{ p: 3, borderRadius: "16px", border: "1px solid #e2e8f0", position: "relative" }}>
|
||
|
||
{/* دکمه حذف برای هر آیتم */}
|
||
{educations.length > 1 && (
|
||
<IconButton
|
||
onClick={() => removeEducation(index)}
|
||
sx={{ position: "absolute", top: 8, right: 8, color: "#ef4444" }}
|
||
>
|
||
<Delete />
|
||
</IconButton>
|
||
)}
|
||
|
||
<Typography variant="subtitle2" sx={{ mb: 2, color: "#64748b" }}>
|
||
مدرک تحصیلی {index + 1}
|
||
</Typography>
|
||
|
||
<EducationForm
|
||
value={ed}
|
||
onChange={(newData) => updateEducation(index, newData)}
|
||
applicantId={applicantId}
|
||
/>
|
||
</Paper>
|
||
))}
|
||
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<Add />}
|
||
onClick={addEducation}
|
||
sx={{
|
||
borderRadius: "12px",
|
||
backgroundColor: "#2563eb",
|
||
py: 1.5,
|
||
textTransform: "none",
|
||
fontWeight: 600
|
||
}}
|
||
>
|
||
افزودن مدرک تحصیلی جدید
|
||
</Button>
|
||
</Box>
|
||
);
|
||
}
|