feat: add task fields UI support

This commit is contained in:
Zhi
2026-03-12 21:54:23 +00:00
parent 3055be860d
commit 0f525effb8

View File

@@ -16,6 +16,8 @@ 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')
useEffect(() => {
api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
@@ -25,18 +27,22 @@ export default function MilestoneDetailPage() {
const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
if (!newTitle.trim()) return
await api.post(`/milestones/${id}/${type}`, {
const payload: any = {
title: newTitle,
description: newDesc || null,
status: 'open',
priority: 'medium'
})
}
if (type === 'tasks') {
payload.estimated_effort = newEffort
payload.estimated_working_time = newTime
}
await api.post(`/milestones/${id}/${type}`, payload)
setNewTitle('')
setNewDesc('')
setShowCreateTask(false)
setShowCreateSupport(false)
setShowCreateMeeting(false)
// Refresh items
api.get<MilestoneItems>(`/milestones/${id}/items`).then(({ data }) => setItems(data))
}
@@ -48,6 +54,16 @@ export default function MilestoneDetailPage() {
const supports = items?.supports || []
const meetings = items?.meetings || []
const renderTaskRow = (t: any) => (
<tr key={t.id} className="clickable" onClick={() => navigate(`/issues/${t.id}`)}>
<td>{t.task_code || t.id}</td>
<td className="issue-title">{t.title}</td>
<td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
<td>{t.estimated_effort || '-'}</td>
<td>{t.estimated_working_time || '-'}</td>
</tr>
)
return (
<div className="milestone-detail">
<button className="btn-back" onClick={() => navigate('/milestones')}> Back to Milestones</button>
@@ -55,7 +71,7 @@ export default function MilestoneDetailPage() {
<div className="issue-header">
<h2>🏁 {milestone.title}</h2>
<div className="issue-meta">
<span className={`badge status-${milestone.status === 'open' ? 'open' : milestone.status === 'progressing' ? 'in_progress' : 'closed'}`}>{milestone.status}</span>
<span className={`badge status-${milestone.status === 'progressing' ? 'in_progress' : milestone.status}`}>{milestone.status}</span>
{milestone.due_date && <span className="text-dim">Due {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
{milestone.planned_release_date && <span className="text-dim">Planned Release: {dayjs(milestone.planned_release_date).format('YYYY-MM-DD')}</span>}
</div>
@@ -115,6 +131,16 @@ 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>
@@ -137,17 +163,10 @@ export default function MilestoneDetailPage() {
<div className="tab-content">
{activeTab === 'tasks' && (
<table>
<thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
<thead><tr><th>Task Code</th><th>Title</th><th>Status</th><th>Effort</th><th>Est. Time</th></tr></thead>
<tbody>
{tasks.map((i) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
<td>{i.id}</td>
<td className="issue-title">{i.title}</td>
<td><span className={`badge status-${i.status}`}>{i.status}</span></td>
<td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
</tr>
))}
{tasks.length === 0 && <tr><td colSpan={4} className="empty">No tasks</td></tr>}
{tasks.map(renderTaskRow)}
{tasks.length === 0 && <tr><td colSpan={5} className="empty">No tasks</td></tr>}
</tbody>
</table>
)}
@@ -156,7 +175,7 @@ export default function MilestoneDetailPage() {
<table>
<thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
<tbody>
{supports.map((i) => (
{supports.map((i: any) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
<td>{i.id}</td>
<td className="issue-title">{i.title}</td>
@@ -173,7 +192,7 @@ export default function MilestoneDetailPage() {
<table>
<thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
<tbody>
{meetings.map((i) => (
{meetings.map((i: any) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
<td>{i.id}</td>
<td className="issue-title">{i.title}</td>