first commit

ui/forms/WorkExperienceForm.tsx

@@ -0,0 +1,68 @@
+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>
+  );
+}