station edit in the route edit page

2025-04-29 21:16:53 +03:00
parent a1a2264758
commit 03829aacc6
21 changed files with 1642 additions and 720 deletions
--- a/src/components/modals/StationEditModal/index.tsx
+++ b/src/components/modals/StationEditModal/index.tsx
@ -0,0 +1,164 @@
+import {
+  Modal,
+  Box,
+  Button,
+  TextField,
+  Typography,
+  Grid,
+  Paper,
+} from "@mui/material";
+
+import { observer } from "mobx-react-lite";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller } from "react-hook-form";
+import "easymde/dist/easymde.min.css";
+import { memo, useMemo, useEffect } from "react";
+import { MarkdownEditor } from "../../MarkdownEditor";
+import { Edit } from "@refinedev/mui";
+import { languageStore } from "../../../store/LanguageStore";
+import { LanguageSwitch } from "../../LanguageSwitch/index";
+
+import { useState } from "react";
+import { stationStore } from "../../../store/StationStore";
+const MemoizedSimpleMDE = memo(MarkdownEditor);
+
+const TRANSFER_FIELDS = [
+  { name: "bus", label: "Автобус" },
+  { name: "metro_blue", label: "Метро (синяя)" },
+  { name: "metro_green", label: "Метро (зеленая)" },
+  { name: "metro_orange", label: "Метро (оранжевая)" },
+  { name: "metro_purple", label: "Метро (фиолетовая)" },
+  { name: "metro_red", label: "Метро (красная)" },
+  { name: "train", label: "Электричка" },
+  { name: "tram", label: "Трамвай" },
+  { name: "trolleybus", label: "Троллейбус" },
+];
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "60%",
+  bgcolor: "background.paper",
+  border: "2px solid #000",
+  boxShadow: 24,
+  p: 4,
+};
+
+export const StationEditModal = observer(() => {
+  const { stationModalOpen, setStationModalOpenAction, selectedStationId } =
+    stationStore;
+  const { language } = languageStore;
+
+  useEffect(() => {
+    return () => {
+      setStationModalOpenAction(false);
+    };
+  }, []);
+
+  const {
+    register,
+    control,
+    formState: { errors },
+    saveButtonProps,
+    reset,
+    setValue,
+    watch,
+  } = useForm({
+    refineCoreProps: {
+      resource: "station",
+      id: selectedStationId ?? undefined,
+      action: "edit",
+      redirect: false,
+
+      onMutationSuccess: () => {
+        setStationModalOpenAction(false);
+        reset();
+        window.location.reload();
+      },
+      meta: {
+        headers: {
+          "Accept-Language": language,
+        },
+      },
+    },
+  });
+
+  return (
+    <Modal
+      open={stationModalOpen}
+      onClose={() => setStationModalOpenAction(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        <Edit
+          title={<Typography variant="h5">Редактирование станции</Typography>}
+          saveButtonProps={saveButtonProps}
+        >
+          <Box
+            component="form"
+            sx={{ display: "flex", flexDirection: "column" }}
+            autoComplete="off"
+          >
+            <TextField
+              {...register("offset_x", {
+                setValueAs: (value) => parseFloat(value),
+              })}
+              error={!!(errors as any)?.offset_x}
+              helperText={(errors as any)?.offset_x?.message}
+              margin="normal"
+              fullWidth
+              InputLabelProps={{ shrink: true }}
+              type="number"
+              label={"Смещение (X)"}
+              name="offset_x"
+            />
+
+            <TextField
+              {...register("offset_y", {
+                required: "Это поле является обязательным",
+                setValueAs: (value) => parseFloat(value),
+              })}
+              error={!!(errors as any)?.offset_y}
+              helperText={(errors as any)?.offset_y?.message}
+              margin="normal"
+              fullWidth
+              InputLabelProps={{ shrink: true }}
+              type="number"
+              label={"Смещение (Y)"}
+              name="offset_y"
+            />
+
+            {/* Группа полей пересадок */}
+            <Paper sx={{ p: 2, mt: 2 }}>
+              <Typography variant="h6" gutterBottom>
+                Пересадки
+              </Typography>
+              <Grid container spacing={2}>
+                {TRANSFER_FIELDS.map((field) => (
+                  <Grid item xs={12} sm={6} md={4} key={field.name}>
+                    <TextField
+                      {...register(`transfers.${field.name}`)}
+                      error={!!(errors as any)?.transfers?.[field.name]}
+                      helperText={
+                        (errors as any)?.transfers?.[field.name]?.message
+                      }
+                      margin="normal"
+                      fullWidth
+                      InputLabelProps={{ shrink: true }}
+                      type="text"
+                      label={field.label}
+                      name={`transfers.${field.name}`}
+                    />
+                  </Grid>
+                ))}
+              </Grid>
+            </Paper>
+          </Box>
+        </Edit>
+      </Box>
+    </Modal>
+  );
+});