263 lines
12 KiB
TypeScript
263 lines
12 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react'
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { Task, Comment, Project, ProjectMember, Milestone } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
import { useAuth } from '@/hooks/useAuth'
|
|
import CreateTaskModal from '@/components/CreateTaskModal'
|
|
|
|
export default function TaskDetailPage() {
|
|
const { id } = useParams()
|
|
const navigate = useNavigate()
|
|
const { user } = useAuth()
|
|
const [task, setTask] = useState<Task | null>(null)
|
|
const [milestone, setMilestone] = useState<Milestone | null>(null)
|
|
const [project, setProject] = useState<Project | null>(null)
|
|
const [members, setMembers] = useState<ProjectMember[]>([])
|
|
const [comments, setComments] = useState<Comment[]>([])
|
|
const [newComment, setNewComment] = useState('')
|
|
const [showEditTask, setShowEditTask] = useState(false)
|
|
const [actionLoading, setActionLoading] = useState<string | null>(null)
|
|
const [actionError, setActionError] = useState<string | null>(null)
|
|
const [showFinishModal, setShowFinishModal] = useState(false)
|
|
const [finishComment, setFinishComment] = useState('')
|
|
const [showCloseModal, setShowCloseModal] = useState(false)
|
|
const [closeReason, setCloseReason] = useState('')
|
|
|
|
const refreshTask = async () => {
|
|
const { data } = await api.get<Task>(`/tasks/${id}`)
|
|
setTask(data)
|
|
if (data.project_id) {
|
|
api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {})
|
|
api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
|
|
}
|
|
if (data.milestone_id) {
|
|
api.get<Milestone>(`/milestones/${data.milestone_id}`).then(({ data }) => setMilestone(data)).catch(() => {})
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
refreshTask().catch(console.error)
|
|
api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data))
|
|
}, [id])
|
|
|
|
const addComment = async () => {
|
|
if (!newComment.trim() || !task) return
|
|
await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
|
|
setNewComment('')
|
|
const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
|
|
setComments(data)
|
|
}
|
|
|
|
const doAction = async (actionName: string, newStatus: string, body?: Record<string, any>) => {
|
|
setActionLoading(actionName)
|
|
setActionError(null)
|
|
try {
|
|
await api.post(`/tasks/${id}/transition?new_status=${newStatus}`, body || {})
|
|
await refreshTask()
|
|
// refresh comments too (finish adds one via backend)
|
|
const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
|
|
setComments(data)
|
|
} catch (err: any) {
|
|
setActionError(err?.response?.data?.detail || err?.message || 'Action failed')
|
|
} finally {
|
|
setActionLoading(null)
|
|
}
|
|
}
|
|
|
|
const handleOpen = () => doAction('open', 'open')
|
|
const handleStart = () => doAction('start', 'undergoing')
|
|
const handleFinishConfirm = async () => {
|
|
if (!finishComment.trim()) return
|
|
await doAction('finish', 'completed', { comment: finishComment })
|
|
setShowFinishModal(false)
|
|
setFinishComment('')
|
|
}
|
|
const handleCloseConfirm = async () => {
|
|
const body: Record<string, any> = {}
|
|
if (closeReason.trim()) {
|
|
body.comment = `[Close reason] ${closeReason}`
|
|
}
|
|
await doAction('close', 'closed', body)
|
|
setShowCloseModal(false)
|
|
setCloseReason('')
|
|
}
|
|
const handleReopen = () => doAction('reopen', 'open')
|
|
|
|
const currentMemberRole = useMemo(
|
|
() => members.find((m) => m.user_id === user?.id)?.role,
|
|
[members, user?.id]
|
|
)
|
|
const canEditTask = Boolean(task && project && user && (
|
|
user.is_admin ||
|
|
user.id === project.owner_id ||
|
|
user.id === task.created_by_id ||
|
|
user.id === milestone?.created_by_id ||
|
|
currentMemberRole === 'admin'
|
|
))
|
|
|
|
if (!task) return <div className="loading">Loading...</div>
|
|
|
|
// Determine which action buttons to show based on status (P9.2 / P11.8)
|
|
const isTerminal = task.status === 'completed' || task.status === 'closed'
|
|
|
|
return (
|
|
<div className="task-detail">
|
|
<button className="btn-back" onClick={() => navigate('/tasks')}>← Back</button>
|
|
|
|
<div className="task-header">
|
|
<h2>#{task.id} {task.title}</h2>
|
|
<div className="task-meta">
|
|
<span className={`badge status-${task.status}`}>{task.status}</span>
|
|
<span className={`badge priority-${task.priority}`}>{task.priority}</span>
|
|
<span className="badge">{task.task_type}</span>{task.task_subtype && <span className="badge">{task.task_subtype}</span>}
|
|
{task.tags && <span className="tags">{task.tags}</span>}
|
|
</div>
|
|
{canEditTask && !isTerminal && task.status !== 'undergoing' && (
|
|
<button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditTask(true)}>Edit Task</button>
|
|
)}
|
|
</div>
|
|
|
|
<CreateTaskModal
|
|
isOpen={showEditTask}
|
|
onClose={() => setShowEditTask(false)}
|
|
task={task}
|
|
onSaved={(data) => setTask(data)}
|
|
/>
|
|
|
|
<div className="task-body">
|
|
<div className="section">
|
|
<h3>Description</h3>
|
|
<p>{task.description || 'No description'}</p>
|
|
</div>
|
|
|
|
<div className="section">
|
|
<h3>Details</h3>
|
|
<dl>
|
|
<dt>Created</dt><dd>{dayjs(task.created_at).format('YYYY-MM-DD HH:mm')}</dd>
|
|
{task.updated_at && <><dt>Updated</dt><dd>{dayjs(task.updated_at).format('YYYY-MM-DD HH:mm')}</dd></>}
|
|
{project && <><dt>Project</dt><dd>{project.name}</dd></>}
|
|
{milestone && <><dt>Milestone</dt><dd>{milestone.title}</dd></>}
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="section">
|
|
<h3>Actions</h3>
|
|
{actionError && <div className="error-message" style={{ color: '#dc2626', marginBottom: 8 }}>{actionError}</div>}
|
|
<div className="actions" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
|
{/* pending: Open + Close */}
|
|
{task.status === 'pending' && (
|
|
<>
|
|
<button className="btn-transition" disabled={!!actionLoading} onClick={handleOpen}>
|
|
{actionLoading === 'open' ? 'Opening…' : '▶ Open'}
|
|
</button>
|
|
<button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
|
|
{actionLoading === 'close' ? 'Closing…' : '✕ Close'}
|
|
</button>
|
|
</>
|
|
)}
|
|
{/* open: Start + Close */}
|
|
{task.status === 'open' && (
|
|
<>
|
|
<button className="btn-transition" style={{ background: '#f59e0b', color: '#fff' }} disabled={!!actionLoading} onClick={handleStart}>
|
|
{actionLoading === 'start' ? 'Starting…' : '⏵ Start'}
|
|
</button>
|
|
<button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
|
|
{actionLoading === 'close' ? 'Closing…' : '✕ Close'}
|
|
</button>
|
|
</>
|
|
)}
|
|
{/* undergoing: Finish + Close */}
|
|
{task.status === 'undergoing' && (
|
|
<>
|
|
<button className="btn-transition" style={{ background: '#16a34a', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowFinishModal(true)}>
|
|
{actionLoading === 'finish' ? 'Finishing…' : '✓ Finish'}
|
|
</button>
|
|
<button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
|
|
{actionLoading === 'close' ? 'Closing…' : '✕ Close'}
|
|
</button>
|
|
</>
|
|
)}
|
|
{/* completed / closed: Reopen */}
|
|
{(task.status === 'completed' || task.status === 'closed') && (
|
|
<button className="btn-transition" disabled={!!actionLoading} onClick={handleReopen}>
|
|
{actionLoading === 'reopen' ? 'Reopening…' : '↺ Reopen'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Finish modal — requires comment (P9.4) */}
|
|
{showFinishModal && (
|
|
<div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
|
|
<div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
|
|
<h3>Finish Task</h3>
|
|
<p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>Please leave a completion comment before finishing.</p>
|
|
<textarea
|
|
value={finishComment}
|
|
onChange={(e) => setFinishComment(e.target.value)}
|
|
placeholder="Describe what was done…"
|
|
rows={4}
|
|
style={{ width: '100%', marginBottom: 12 }}
|
|
/>
|
|
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
|
<button className="btn-transition" onClick={() => { setShowFinishModal(false); setFinishComment('') }}>Cancel</button>
|
|
<button
|
|
className="btn-transition"
|
|
style={{ background: '#16a34a', color: '#fff' }}
|
|
disabled={!finishComment.trim() || !!actionLoading}
|
|
onClick={handleFinishConfirm}
|
|
>
|
|
{actionLoading === 'finish' ? 'Finishing…' : 'Confirm Finish'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Close modal — optional reason */}
|
|
{showCloseModal && (
|
|
<div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
|
|
<div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
|
|
<h3>Close Task</h3>
|
|
<p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>This will cancel/abandon the task. Optionally provide a reason.</p>
|
|
<textarea
|
|
value={closeReason}
|
|
onChange={(e) => setCloseReason(e.target.value)}
|
|
placeholder="Reason for closing (optional)…"
|
|
rows={3}
|
|
style={{ width: '100%', marginBottom: 12 }}
|
|
/>
|
|
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
|
<button className="btn-transition" onClick={() => { setShowCloseModal(false); setCloseReason('') }}>Cancel</button>
|
|
<button
|
|
className="btn-transition"
|
|
style={{ background: '#dc2626', color: '#fff' }}
|
|
disabled={!!actionLoading}
|
|
onClick={handleCloseConfirm}
|
|
>
|
|
{actionLoading === 'close' ? 'Closing…' : 'Confirm Close'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="section">
|
|
<h3>Comments ({comments.length})</h3>
|
|
{comments.map((c) => (
|
|
<div className="comment" key={c.id}>
|
|
<div className="comment-meta">User #{c.author_id} · {dayjs(c.created_at).format('MM-DD HH:mm')}</div>
|
|
<p>{c.content}</p>
|
|
</div>
|
|
))}
|
|
<div className="comment-form">
|
|
<textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="Add a comment..." />
|
|
<button onClick={addComment} disabled={!newComment.trim()}>Submit comment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|