board TaskModal.tsx

0% Statements 0/66
0% Branches 0/1
0% Functions 0/1
0% Lines 0/66
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect, type FormEvent } from "react";
import type { BoardStage, ModelProfileView } from "../../types";
 
export type EditableTask = {
  taskId?: string;
  title: string;
  prompt: string;
  stage: string;
  projectDir: string;
  sessionId: string;
  profileId: string;
};
 
export function TaskModal({
  task,
  boardStages,
  profiles,
  isSaving,
  onChange,
  onSave,
  onClose,
}: {
  task: EditableTask;
  boardStages: BoardStage[];
  profiles: ModelProfileView[];
  isSaving: boolean;
  onChange: (updates: Partial<EditableTask>) => void;
  onSave: (event: FormEvent<HTMLFormElement>) => void;
  onClose: () => void;
}) {
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [onClose]);
 
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-card__header">
          <h2 className="modal-card__title">
            {task.taskId ? "Edit Task" : "New Task"}
          </h2>
          <button type="button" className="modal-card__close" onClick={onClose}>
            &times;
          </button>
        </div>
 
        <form className="task-form" onSubmit={onSave}>
          <div className="task-form__field">
            <label className="task-form__label">Title</label>
            <input
              className="task-form__input"
              value={task.title}
              onChange={(e) => onChange({ title: e.target.value })}
              required
              autoFocus
            />
          </div>
 
          <div className="task-form__field">
            <label className="task-form__label">Prompt</label>
            <textarea
              className="task-form__textarea"
              value={task.prompt}
              onChange={(e) => onChange({ prompt: e.target.value })}
              required
            />
          </div>
 
          <div className="task-form__field">
            <label className="task-form__label">Stage</label>
            <select
              className="task-form__select"
              value={task.stage}
              onChange={(e) => onChange({ stage: e.target.value })}
              required
            >
              {boardStages.map((stage) => (
                <option key={stage.id} value={stage.id}>
                  {stage.name}
                </option>
              ))}
            </select>
          </div>
 
          <div className="task-form__field">
            <label className="task-form__label">Profile Override</label>
            <select
              className="task-form__select"
              value={task.profileId}
              onChange={(e) => onChange({ profileId: e.target.value })}
            >
              <option value="">Use stage/default runtime</option>
              {profiles.map((profile) => (
                <option key={profile.id} value={profile.id}>
                  {profile.name}
                </option>
              ))}
            </select>
          </div>
 
          <button
            type="submit"
            className="task-form__submit"
            disabled={isSaving}
          >
            {isSaving ? "Saving..." : "Save Task"}
          </button>
        </form>
      </div>
    </div>
  );
}