feat: unify task creation with shared modal

2026-03-16 16:32:09 +00:00
parent 0c5c78a45d
commit ef42231697
7 changed files with 300 additions and 42 deletions
--- a/7
+++ b/7
@@ -6,10 +6,11 @@ RUN npm install
 COPY . .
 RUN npm run build

-# Production stage — lightweight static server, no nginx
+# Runtime stage
 FROM node:20-alpine
 RUN npm install -g serve@14
 WORKDIR /app
-COPY --from=build /app/dist ./dist
+COPY --from=build /app ./
+ENV FRONTEND_DEV_MODE=0
 EXPOSE 3000
-CMD ["serve", "-s", "dist", "-l", "3000"]
+CMD ["sh", "-c", "if [ \"$FRONTEND_DEV_MODE\" = \"1\" ]; then npm run dev -- --host 0.0.0.0 --port 3000 --strictPort; else serve -s dist -l 3000; fi"]
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,6 @@ import SetupWizardPage from '@/pages/SetupWizardPage'
 import DashboardPage from '@/pages/DashboardPage'
 import TasksPage from '@/pages/TasksPage'
 import TaskDetailPage from '@/pages/TaskDetailPage'
-import CreateTaskPage from '@/pages/CreateTaskPage'
 import ProjectsPage from '@/pages/ProjectsPage'
 import ProjectDetailPage from '@/pages/ProjectDetailPage'
 import MilestonesPage from '@/pages/MilestonesPage'
@@ -86,7 +85,6 @@ export default function App() {
          <Routes>
            <Route path="/" element={<DashboardPage />} />
            <Route path="/tasks" element={<TasksPage />} />
-            <Route path="/tasks/new" element={<CreateTaskPage />} />
            <Route path="/tasks/:id" element={<TaskDetailPage />} />
            <Route path="/projects" element={<ProjectsPage />} />
            <Route path="/projects/:id" element={<ProjectDetailPage />} />
--- a/src/components/CreateTaskModal.tsx
+++ b/src/components/CreateTaskModal.tsx
@@ -0,0 +1,237 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import type { Milestone, Project, Task } from '@/types'
+
+const TASK_TYPES = [
+  { value: 'story', label: 'Story', subtypes: ['feature', 'improvement', 'refactor'] },
+  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience', 'defect'] },
+  { value: 'task', label: 'Task', subtypes: ['defect'] },
+  { value: 'test', label: 'Test', subtypes: ['regression', 'security', 'smoke', 'stress'] },
+  { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy', 'release'] },
+  { value: 'research', label: 'Research', subtypes: [] },
+  { value: 'review', label: 'Review', subtypes: ['code_review', 'decision_review', 'function_review'] },
+  { value: 'resolution', label: 'Resolution', subtypes: [] },
+]
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onCreated?: (task: Task) => void | Promise<void>
+  initialProjectId?: number
+  initialMilestoneId?: number
+  lockProject?: boolean
+  lockMilestone?: boolean
+}
+
+const makeInitialForm = (projectId = 0, milestoneId = 0) => ({
+  title: '',
+  description: '',
+  project_id: projectId,
+  milestone_id: milestoneId,
+  task_type: 'task',
+  task_subtype: '',
+  priority: 'medium',
+  tags: '',
+  reporter_id: 1,
+})
+
+export default function CreateTaskModal({
+  isOpen,
+  onClose,
+  onCreated,
+  initialProjectId,
+  initialMilestoneId,
+  lockProject = false,
+  lockMilestone = false,
+}: Props) {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState(makeInitialForm(initialProjectId, initialMilestoneId))
+
+  const currentType = useMemo(
+    () => TASK_TYPES.find((t) => t.value === form.task_type) || TASK_TYPES[2],
+    [form.task_type]
+  )
+  const subtypes = currentType.subtypes || []
+
+  const loadMilestones = async (projectId: number, preferredMilestoneId?: number) => {
+    if (!projectId) {
+      setMilestones([])
+      setForm((f) => ({ ...f, milestone_id: 0 }))
+      return
+    }
+
+    const { data } = await api.get<Milestone[]>(`/milestones?project_id=${projectId}`)
+    setMilestones(data)
+    const hasPreferred = preferredMilestoneId && data.some((m) => m.id === preferredMilestoneId)
+    const nextMilestoneId = hasPreferred ? preferredMilestoneId! : (data[0]?.id || 0)
+    setForm((f) => ({ ...f, milestone_id: nextMilestoneId }))
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const { data } = await api.get<Project[]>('/projects')
+      setProjects(data)
+
+      const chosenProjectId = initialProjectId || data[0]?.id || 0
+      setForm(makeInitialForm(chosenProjectId, initialMilestoneId || 0))
+      await loadMilestones(chosenProjectId, initialMilestoneId)
+    }
+
+    init().catch(console.error)
+  }, [isOpen, initialProjectId, initialMilestoneId])
+
+  const handleProjectChange = async (projectId: number) => {
+    setForm((f) => ({ ...f, project_id: projectId, milestone_id: 0 }))
+    await loadMilestones(projectId)
+  }
+
+  const handleTypeChange = (taskType: string) => {
+    setForm((f) => ({ ...f, task_type: taskType, task_subtype: '' }))
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.milestone_id) {
+      alert('Please select a milestone')
+      return
+    }
+
+    const payload: any = { ...form, tags: form.tags || null }
+    if (!form.task_subtype) delete payload.task_subtype
+
+    setSaving(true)
+    try {
+      const { data } = await api.post<Task>('/tasks', payload)
+      await onCreated?.(data)
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal task-create-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Create Task</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <label>
+            Title
+            <input
+              data-testid="task-title-input"
+              required
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+            />
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="task-description-input"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+            />
+          </label>
+
+          <div className="task-create-grid">
+            <label>
+              Project
+              <select
+                data-testid="project-select"
+                value={form.project_id}
+                onChange={(e) => handleProjectChange(Number(e.target.value))}
+                disabled={lockProject}
+              >
+                {projects.map((p) => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Milestone
+              <select
+                data-testid="milestone-select"
+                value={form.milestone_id}
+                onChange={(e) => setForm({ ...form, milestone_id: Number(e.target.value) })}
+                disabled={lockMilestone}
+              >
+                {milestones.length === 0 && <option value={0}>No milestones available</option>}
+                {milestones.map((m) => (
+                  <option key={m.id} value={m.id}>{m.title}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Type
+              <select
+                data-testid="task-type-select"
+                value={form.task_type}
+                onChange={(e) => handleTypeChange(e.target.value)}
+              >
+                {TASK_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Priority
+              <select
+                value={form.priority}
+                onChange={(e) => setForm({ ...form, priority: e.target.value })}
+              >
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="critical">Critical</option>
+              </select>
+            </label>
+          </div>
+
+          {subtypes.length > 0 && (
+            <label>
+              Subtype
+              <select
+                value={form.task_subtype}
+                onChange={(e) => setForm({ ...form, task_subtype: e.target.value })}
+              >
+                <option value="">Select subtype</option>
+                {subtypes.map((s) => (
+                  <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          <label>
+            Tags
+            <input
+              value={form.tags}
+              onChange={(e) => setForm({ ...form, tags: e.target.value })}
+              placeholder="Comma separated"
+            />
+          </label>
+
+          <div className="modal-actions">
+            <button data-testid="create-task-button" type="submit" className="btn-primary" disabled={saving}>
+              {saving ? 'Creating...' : 'Create'}
+            </button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
--- a/src/index.css
+++ b/src/index.css
@@ -113,11 +113,23 @@ dd { font-size: .9rem; }
 .comment-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); resize: vertical; margin-bottom: 8px; }
 .comment-form button { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; }

-/* Create Task form */
-.create-task form { max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
-.create-task label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
-.create-task input, .create-task textarea, .create-task select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
-.create-task textarea { min-height: 100px; resize: vertical; }
+/* Create Task form / modal */
+.create-task form, .task-create-form { max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
+.create-task label, .task-create-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
+.create-task input, .create-task textarea, .create-task select,
+.task-create-form input, .task-create-form textarea, .task-create-form select {
+  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem;
+}
+.create-task textarea, .task-create-form textarea { min-height: 100px; resize: vertical; }
+.task-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
+}
+.modal {
+  width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
+}
+.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

 /* Project grid */
 .project-grid, .milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
--- a/src/pages/MilestoneDetailPage.tsx
+++ b/src/pages/MilestoneDetailPage.tsx
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Milestone, MilestoneProgress, Task } from '@/types'
 import dayjs from 'dayjs'
+import CreateTaskModal from '@/components/CreateTaskModal'

 interface MilestoneTask {
  id: number
@@ -33,8 +34,6 @@ export default function MilestoneDetailPage() {
  const [showCreateMeeting, setShowCreateMeeting] = useState(false)
  const [newTitle, setNewTitle] = useState('')
  const [newDesc, setNewDesc] = useState('')
-  const [newEffort, setNewEffort] = useState(5)
-  const [newTime, setNewTime] = useState('09:00')
  const [projectCode, setProjectCode] = useState('')

  useEffect(() => {
@@ -50,33 +49,29 @@ export default function MilestoneDetailPage() {
    api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
  }, [id])

-  useEffect(() => {
+  const refreshMilestoneItems = () => {
    if (!projectCode || !id) return
    api.get<MilestoneTask[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data)).catch(() => {})
    api.get<Task[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data)).catch(() => {})
    api.get<Task[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data)).catch(() => {})
+  }
+
+  useEffect(() => {
+    refreshMilestoneItems()
  }, [projectCode, id])

-  const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
+  const createItem = async (type: 'supports' | 'meetings') => {
    if (!newTitle.trim() || !projectCode) return
-    const payload: any = {
+    const payload = {
      title: newTitle,
      description: newDesc || null,
    }
-    if (type === 'tasks') {
-      payload.estimated_effort = newEffort
-      payload.estimated_working_time = newTime
-    }
    await api.post(`/${type}/${projectCode}/${id}`, payload)
    setNewTitle('')
    setNewDesc('')
-    setShowCreateTask(false)
    setShowCreateSupport(false)
    setShowCreateMeeting(false)
-    // Refresh
-    api.get<MilestoneTask[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data))
-    api.get<Task[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data))
-    api.get<Task[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data))
+    refreshMilestoneItems()
  }

  const isProgressing = milestone?.status === 'progressing'
@@ -84,7 +79,7 @@ export default function MilestoneDetailPage() {
  if (!milestone) return <div className="loading">Loading...</div>

  const renderTaskRow = (t: MilestoneTask) => (
-    <tr key={t.id} className="clickable" onClick={() => navigate(`/milestones/${id}`)}>
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.id}`)}>
      <td>{t.task_code || t.id}</td>
      <td className="task-title">{t.title}</td>
      <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
@@ -138,15 +133,28 @@ export default function MilestoneDetailPage() {
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {!isProgressing && (
            <>
-              <button className="btn-primary" onClick={() => { setActiveTab("tasks"); setShowCreateTask(true) }}>+ Create Task</button>
-              <button className="btn-primary" onClick={() => { setActiveTab("supports"); setShowCreateSupport(true) }}>+ Create Support</button>
-              <button className="btn-primary" onClick={() => { setActiveTab("meetings"); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('tasks'); setShowCreateTask(true) }}>+ Create Task</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('supports'); setShowCreateSupport(true) }}>+ Create Support</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('meetings'); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
            </>
          )}
          {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
        </div>

-        {(showCreateTask || showCreateSupport || showCreateMeeting) && (
+        <CreateTaskModal
+          isOpen={showCreateTask}
+          onClose={() => setShowCreateTask(false)}
+          initialProjectId={milestone.project_id}
+          initialMilestoneId={milestone.id}
+          lockProject
+          lockMilestone
+          onCreated={() => {
+            setActiveTab('tasks')
+            refreshMilestoneItems()
+          }}
+        />
+
+        {(showCreateSupport || showCreateMeeting) && (
          <div className="card" style={{ marginBottom: 16 }}>
            <input 
              placeholder="Title" 
@@ -160,19 +168,9 @@ export default function MilestoneDetailPage() {
              onChange={(e) => setNewDesc(e.target.value)}
              style={{ marginBottom: 8, width: '100%' }}
            />
-            {showCreateTask && (
-              <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-                <label>Effort (1-10):
-                  <input type="number" min="1" max="10" value={newEffort} onChange={(e) => setNewEffort(Number(e.target.value))} style={{ width: 60 }} />
-                </label>
-                <label>Est. Time:
-                  <input type="time" value={newTime} onChange={(e) => setNewTime(e.target.value)} />
-                </label>
-              </div>
-            )}
            <div style={{ display: 'flex', gap: 8 }}>
-              <button className="btn-primary" onClick={() => createItem(activeTab)}>Create</button>
-              <button className="btn-back" onClick={() => { setShowCreateTask(false); setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
+              <button className="btn-primary" onClick={() => createItem(activeTab as 'supports' | 'meetings')}>Create</button>
+              <button className="btn-back" onClick={() => { setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
            </div>
          </div>
        )}
--- a/src/pages/TasksPage.tsx
+++ b/src/pages/TasksPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Task, PaginatedResponse } from '@/types'
+import CreateTaskModal from '@/components/CreateTaskModal'

 export default function TasksPage() {
  const [tasks, setTasks] = useState<Task[]>([])
@@ -10,6 +11,7 @@ export default function TasksPage() {
  const [totalPages, setTotalPages] = useState(1)
  const [statusFilter, setStatusFilter] = useState('')
  const [priorityFilter, setPriorityFilter] = useState('')
+  const [showCreateTask, setShowCreateTask] = useState(false)
  const navigate = useNavigate()

  const fetchTasks = () => {
@@ -33,9 +35,18 @@ export default function TasksPage() {
    <div className="tasks-page">
      <div className="page-header">
        <h2>📋 Tasks ({total})</h2>
-        <button className="btn-primary" onClick={() => navigate('/tasks/new')}>+ Create Task</button>
+        <button className="btn-primary" onClick={() => setShowCreateTask(true)}>+ Create Task</button>
      </div>

+      <CreateTaskModal
+        isOpen={showCreateTask}
+        onClose={() => setShowCreateTask(false)}
+        onCreated={() => {
+          setPage(1)
+          fetchTasks()
+        }}
+      />
+
      <div className="filters">
        <select value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}>
          <option value="">All statuses</option>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
+    allowedHosts: ['frontend', '127.0.0.1', 'localhost'],
    proxy: {
      '/api': {
        target: 'http://backend:8000',