69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import { Box, FormControlLabel, IconButton, Paper, Switch, TextField, Typography } from "@mui/material";
|
|
import { DeleteOutlineOutlined } from "@mui/icons-material";
|
|
|
|
export interface WorkExperienceFormItem {
|
|
id?: string;
|
|
hasNoExperience: boolean;
|
|
companyName: string;
|
|
lastPosition: string;
|
|
startYear: string;
|
|
endYear: string;
|
|
leavingReason: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Props {
|
|
value: WorkExperienceFormItem;
|
|
index: number;
|
|
onChange: (next: WorkExperienceFormItem) => void;
|
|
onRemove: () => void;
|
|
disableRemove: boolean;
|
|
}
|
|
|
|
export function WorkExperienceItemForm({ value, index, onChange, onRemove, disableRemove }: Props) {
|
|
const setField = (key: keyof WorkExperienceFormItem) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onChange({ ...value, [key]: e.target.value });
|
|
};
|
|
|
|
const setHasNoExperience = (checked: boolean) => {
|
|
if (checked) {
|
|
// پاکسازی کامل سایر فیلدها در صورت انتخاب "فاقد سابقه"
|
|
onChange({
|
|
hasNoExperience: true,
|
|
companyName: "",
|
|
lastPosition: "",
|
|
startYear: "",
|
|
endYear: "",
|
|
leavingReason: "",
|
|
description: "",
|
|
});
|
|
} else {
|
|
onChange({ ...value, hasNoExperience: false });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Paper elevation={0} >
|
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }}>
|
|
<IconButton onClick={onRemove} disabled={disableRemove} size="small"><DeleteOutlineOutlined /></IconButton>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" }, gap: 2 }}>
|
|
<FormControlLabel
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
control={<Switch checked={value.hasNoExperience} onChange={(e) => setHasNoExperience(e.target.checked)} />}
|
|
label="فاقد سابقه کاری هستم"
|
|
/>
|
|
|
|
<TextField label="نام شرکت" value={value.companyName} onChange={setField("companyName")} fullWidth disabled={value.hasNoExperience} />
|
|
<TextField label="آخرین سمت" value={value.lastPosition} onChange={setField("lastPosition")} fullWidth disabled={value.hasNoExperience} />
|
|
<TextField label="سال شروع" value={value.startYear} onChange={(e) => onChange({ ...value, startYear: e.target.value.replace(/[^\d]/g, "") })} fullWidth disabled={value.hasNoExperience} inputMode="numeric" />
|
|
<TextField label="سال پایان" value={value.endYear} onChange={(e) => onChange({ ...value, endYear: e.target.value.replace(/[^\d]/g, "") })} fullWidth disabled={value.hasNoExperience} inputMode="numeric" />
|
|
<TextField label="علت ترک کار" value={value.leavingReason} onChange={setField("leavingReason")} fullWidth disabled={value.hasNoExperience} sx={{ gridColumn: { md: "1 / -1" } }} />
|
|
<TextField label="توضیحات" value={value.description} onChange={setField("description")} fullWidth disabled={value.hasNoExperience} multiline minRows={3} sx={{ gridColumn: { md: "1 / -1" } }} />
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|