src/framework/components/map/ModalAddPoint/ModalAddPoint.tsx - master - denis.dorogov/test-task

src/framework/components/map/ModalAddPoint/ModalAddPoint.tsx

68 строк2 KB

denis-dorogov

Добавлены возможности редактирования точек на карте

08 ноя 2025, 16:42

08 ноя 2025, 16:425324610

import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';

import { MapPointModel } from 'core/map/types';

const ModalAddPoint = ({
  coordinates,
  clear,
  addPoint,
}: {
  coordinates: { x: number; y: number } | null;
  clear: () => void;
  addPoint: (point: MapPointModel) => void;
}) => {
  const handleClose = () => {
    clear();
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const formJson = Object.fromEntries((formData as any).entries());
    const name = formJson.name;
    const amount = formJson.amount;
    if (coordinates !== null) addPoint({ name, amount, x: coordinates.x, y: coordinates.y });
    clear();
  };

  return (
    <Dialog open={!!coordinates} onClose={handleClose}>
      <DialogTitle> Добавить точку</DialogTitle>
      <DialogContent>
        <DialogContentText>Добавьте новый точку на карту</DialogContentText>
        <form onSubmit={handleSubmit} id="subscription-form">
          <TextField
            autoFocus
            required
            margin="dense"
            id="name"
            name="name"
            label="Название"
            type="text"
            fullWidth
            variant="standard"
          />
          <TextField
            autoFocus
            required
            margin="dense"
            id="amount"
            name="amount"
            label="Количество"
            type="number"
            fullWidth
            variant="standard"
          />
        </form>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Отмена</Button>
        <Button type="submit" form="subscription-form">
          Добавить
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ModalAddPoint;