feat: add task fields UI support
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user