src/features/EditTaskModal/EditTaskModal.tsx - master - Vadimir29/test_ai

src/features/EditTaskModal/EditTaskModal.tsx
86 строк3 KB
Zhdanov Vadim
test-ai: chore: Add ui logic
02 авг 2026, 23:27
02 авг 2026, 23:272780791
import { useState, useEffect } from 'react';
import { UiModal } from '@shared/ui/ui-kit/UiModal/UiModal';
import { UiButton, UiButtonTheme } from '@shared/ui/ui-kit/UiButton/UiButton';
import { UiInput } from '@shared/ui/ui-kit/UiInput/UiInput';
import { useTodoStore } from '@shared/api/todo-store';
import type { Task } from '@shared/models/task';
import { TaskPriority } from '@shared/models/task';
import './EditTaskModal.scss';

interface EditTaskModalProps {
  isOpen: boolean;
  onClose: () => void;
  task: Task | null;
}

export const EditTaskModal: React.FC<EditTaskModalProps> = ({ isOpen, onClose, task }) => {
  const editTask = useTodoStore((s) => s.editTask);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [priority, setPriority] = useState<TaskPriority>(TaskPriority.MEDIUM);
  const [error, setError] = useState('');

  // Sync state when task changes
  useEffect(() => {
    if (task) {
      setTitle(task.title);
      setDescription(task.description);
      setPriority(task.priority);
      setError('');
    }
  }, [task]);

  const handleSave = () => {
    if (!task) return;
    if (!title.trim()) {
      setError('Введите название задачи');
      return;
    }
    editTask(task.id, { title: title.trim(), description: description.trim(), priority });
    onClose();
  };

  return (
    <UiModal isOpen={isOpen} onClose={onClose} title="Редактировать задачу">
      <div className="edit-task-form">
        <UiInput
          placeholder="Название задачи *"
          value={title}
          onChange={setTitle}
          error={error}
        />
        <div className="edit-task-form__textarea-wrapper">
          <label className="edit-task-form__label">Описание</label>
          <textarea
            className="edit-task-form__textarea"
            placeholder="Подробное описание..."
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows={3}
          />
        </div>
        <div className="edit-task-form__priority">
          <label className="edit-task-form__label">Приоритет</label>
          <select
            className="edit-task-form__select"
            value={priority}
            onChange={(e) => setPriority(e.target.value as TaskPriority)}
          >
            <option value={TaskPriority.LOW}>Низкий</option>
            <option value={TaskPriority.MEDIUM}>Средний</option>
            <option value={TaskPriority.HIGH}>Высокий</option>
            <option value={TaskPriority.CRITICAL}>Критический</option>
          </select>
        </div>
        <div className="edit-task-form__actions">
          <UiButton theme={UiButtonTheme.PRIMARY} onClick={handleSave}>
            Сохранить
          </UiButton>
          <UiButton theme={UiButtonTheme.OUTLINE} onClick={onClose}>
            Отмена
          </UiButton>
        </div>
      </div>
    </UiModal>
  );
};