src/components/AddTaskModal/AddTaskModal.jsx - master - drndsv/TODO-React

src/components/AddTaskModal/AddTaskModal.jsx
155 строк4 KB
dashk
добавлена работа с пользователями, соединенная с бэком
02 июн 2025, 18:22
02 июн 2025, 18:22dedaba6
import React, { useEffect, useState } from "react";
import styles from "./AddTaskModal.module.css";

export default function AddTaskModal({
  onClose,
  onSave,
  executors,
  categories,
  statuses,
  initialData,
}) {
  const [form, setForm] = useState({
    title: "",
    executorId: "",
    categoryId: "",
    dueDate: "",
    statusId: "",
    comment: "",
  });

  useEffect(() => {
    if (initialData) {
      setForm({
        title: initialData.title || "",
        executorId: initialData.user?.id || "",
        categoryId: initialData.category?.id || "",
        dueDate: initialData.deadline || "",
        statusId: initialData.status?.id || "",
        comment: initialData.comment || "",
      });
    } else {
      setForm({
        title: "",
        executorId: "",
        categoryId: "",
        dueDate: "",
        statusId: "",
        comment: "",
      });
    }
  }, [initialData]);

  const isFormValid = () => {
    return (
      form.title &&
      form.executorId &&
      form.categoryId &&
      form.dueDate &&
      form.statusId
    );
  };

  function handleChange(e) {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!isFormValid()) {
      alert("Пожалуйста, заполните все обязательные поля.");
      return;
    }
    onSave(form);
    onClose();
  }

  return (
    <div className={styles.modalBackground}>
      <div className={styles.modalContent}>
        <h2>{initialData ? "Редактировать задачу" : "Добавить задачу"}</h2>
        <form onSubmit={handleSubmit}>
          <label>Название:</label>
          <input
            type="text"
            name="title"
            value={form.title}
            onChange={handleChange}
            required
          />

          <label>Исполнитель:</label>
          <select
            name="executorId"
            value={form.executorId}
            onChange={handleChange}
            required
          >
            <option value="">Выберите исполнителя</option>
            {executors.map((e) => (
              <option key={e.id} value={e.id}>
                {e.full_name}
              </option>
            ))}
          </select>

          <label>Категория:</label>
          <select
            name="categoryId"
            value={form.categoryId}
            onChange={handleChange}
            required
          >
            <option value="">Выберите категорию</option>
            {categories.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>

          <label>Дата:</label>
          <input
            type="date"
            name="dueDate"
            value={form.dueDate}
            onChange={handleChange}
            required
          />

          <label>Статус:</label>
          <select
            name="statusId"
            value={form.statusId}
            onChange={handleChange}
            required
          >
            <option value="">Выберите статус</option>
            {statuses.map((s) => (
              <option key={s.id} value={s.id}>
                {s.name}
              </option>
            ))}
          </select>

          <label>Комментарий:</label>
          <textarea
            name="comment"
            value={form.comment}
            onChange={handleChange}
          />

          <div className={styles.buttons}>
            <button type="submit">Сохранить</button>
            <button type="button" onClick={onClose}>
              Отмена
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}