change some files

ui/forms/course/InnerCourseForm.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import React from "react";
+import {
+  Box,
+  TextField,
+  IconButton,
+  Button,
+  Typography,
+} from "@mui/material";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import AddIcon from "@mui/icons-material/Add";
+import { FieldArray, Form, getIn, type FormikProps } from "formik";
+import { COURSE_EMPTY_ITEM, CourseFormProps, CourseFormValues, CourseItem } from "./CourseForm";
+
+
+type Props = FormikProps<CourseFormValues> & CourseFormProps;
+
+export default function InnerCourseForm(props: Props) {
+  const { values, errors, touched, handleChange, setFieldValue } = props;
+
+  const handleBack = () => {
+    props.update({ courses: props.values.courses });
+    props.setStep(props.step - 1);
+  };
+
+  return (
+    <Form>
+      <FieldArray name="courses">
+        {({ push, remove }) => (
+          <>
+            {values.courses.map((course: CourseItem, index: number) => {
+              const itemErrors = getIn(errors, `courses.${index}`) || {};
+              const itemTouched = getIn(touched, `courses.${index}`) || {};
+
+              return (
+                <Box
+                  key={index}
+                  sx={{
+                    mb: 3,
+                    position: "relative",
+                    border: "1px solid #e2e8f0",
+                    borderRadius: "16px",
+                    p: 2,
+                    backgroundColor: "#fff",
+                  }}
+                >
+                  {values.courses.length > 1 && (
+                    <IconButton
+                      onClick={() => remove(index)}
+                      color="error"
+                      sx={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}
+                      aria-label="remove-course"
+                    >
+                      <DeleteOutlineOutlinedIcon />
+                    </IconButton>
+                  )}
+
+                  <Typography
+                    sx={{
+                      fontWeight: 700,
+                      mb: 2,
+                      color: "#0f172a",
+                    }}
+                  >
+                    دوره {index + 1}
+                  </Typography>
+
+                  <Box
+                    sx={{
+                      display: "grid",
+                      gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+                      gap: 2,
+                    }}
+                  >
+                    <TextField
+                      fullWidth
+                      label="عنوان دوره"
+                      name={`courses.${index}.title`}
+                      value={course.title}
+                      onChange={handleChange}
+                      error={!!itemTouched.title && !!itemErrors.title}
+                      helperText={itemTouched.title ? itemErrors.title : ""}
+                    />
+
+                    <TextField
+                      fullWidth
+                      label="موسسه برگزار کننده"
+                      name={`courses.${index}.institution`}
+                      value={course.institution}
+                      onChange={handleChange}
+                      error={
+                        !!itemTouched.institution && !!itemErrors.institution
+                      }
+                      helperText={
+                        itemTouched.institution ? itemErrors.institution : ""
+                      }
+                    />
+
+                    <TextField
+                      fullWidth
+                      type="number"
+                      label="سال برگزاری"
+                      name={`courses.${index}.year`}
+                      value={course.year}
+                      onChange={(e) =>
+                        setFieldValue(
+                          `courses.${index}.year`,
+                          e.target.value === "" ? "" : Number(e.target.value),
+                        )
+                      }
+                      error={!!itemTouched.year && !!itemErrors.year}
+                      helperText={itemTouched.year ? itemErrors.year : ""}
+                    />
+
+                    <TextField
+                      fullWidth
+                      label="مدت دوره"
+                      name={`courses.${index}.duration`}
+                      value={course.duration}
+                      onChange={handleChange}
+                      placeholder="مثلاً 40 ساعت"
+                      error={!!itemTouched.duration && !!itemErrors.duration}
+                      helperText={itemTouched.duration ? itemErrors.duration : ""}
+                    />
+
+                    <TextField
+                      fullWidth
+                      multiline
+                      minRows={2}
+                      label="توضیحات"
+                      name={`courses.${index}.description`}
+                      value={course.description || ""}
+                      onChange={handleChange}
+                      error={
+                        !!itemTouched.description && !!itemErrors.description
+                      }
+                      helperText={
+                        itemTouched.description ? itemErrors.description : ""
+                      }
+                      sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+                    />
+                  </Box>
+                </Box>
+              );
+            })}
+
+            <Button
+              type="button"
+              variant="outlined"
+              startIcon={<AddIcon />}
+              onClick={() =>
+                push({
+                  ...COURSE_EMPTY_ITEM,
+                  id: Date.now(),
+                })
+              }
+              sx={{
+                borderRadius: "12px",
+                mb: 3,
+                fontWeight: 700,
+              }}
+            >
+              افزودن دوره
+            </Button>
+
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                mt: 5,
+                width: "100%",
+              }}
+            >
+              <Button
+                disabled={props.step === 1}
+                type="button"
+                onClick={handleBack}
+                sx={{
+                  borderRadius: "12px",
+                  color: "#64748b",
+                  fontWeight: 700,
+                }}
+              >
+                بازگشت
+              </Button>
+
+              <Button
+                variant="contained"
+                type="submit"
+                sx={{
+                  borderRadius: "12px",
+                  px: 4,
+                  py: 1.5,
+                  bgcolor: `${props.step === 12 ? "green" : "#2563eb"}`,
+                  fontWeight: 700,
+                }}
+              >
+                {props.step === 12 ? "اتمام و ثبت نهايي" : "گام بعدی"}
+              </Button>
+            </Box>
+          </>
+        )}
+      </FieldArray>
+    </Form>
+  );
+}