266 lines
8.9 KiB
TypeScript
266 lines
8.9 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
|
||
import api from '@/services/api'
|
||
import type { Propose, Milestone } from '@/types'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default function ProposeDetailPage() {
|
||
const { id } = useParams()
|
||
const [searchParams] = useSearchParams()
|
||
const projectId = searchParams.get('project_id')
|
||
const navigate = useNavigate()
|
||
|
||
const [propose, setPropose] = useState<Propose | null>(null)
|
||
const [milestones, setMilestones] = useState<Milestone[]>([])
|
||
const [showAccept, setShowAccept] = useState(false)
|
||
const [selectedMilestone, setSelectedMilestone] = useState<number | ''>('')
|
||
const [actionLoading, setActionLoading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
|
||
// Edit state (P10.7)
|
||
const [showEdit, setShowEdit] = useState(false)
|
||
const [editTitle, setEditTitle] = useState('')
|
||
const [editDescription, setEditDescription] = useState('')
|
||
const [editLoading, setEditLoading] = useState(false)
|
||
|
||
const fetchPropose = () => {
|
||
if (!projectId) return
|
||
api.get<Propose>(`/projects/${projectId}/proposes/${id}`).then(({ data }) => setPropose(data))
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchPropose()
|
||
}, [id, projectId])
|
||
|
||
const loadMilestones = () => {
|
||
if (!projectId) return
|
||
api.get<Milestone[]>(`/milestones?project_id=${projectId}`)
|
||
.then(({ data }) => setMilestones(data.filter((m) => m.status === 'open')))
|
||
}
|
||
|
||
const handleAccept = async () => {
|
||
if (!selectedMilestone || !projectId) return
|
||
setActionLoading(true)
|
||
setError('')
|
||
try {
|
||
await api.post(`/projects/${projectId}/proposes/${id}/accept`, { milestone_id: selectedMilestone })
|
||
setShowAccept(false)
|
||
fetchPropose()
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Accept failed')
|
||
} finally {
|
||
setActionLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleReject = async () => {
|
||
if (!projectId) return
|
||
const reason = prompt('Reject reason (optional):')
|
||
setActionLoading(true)
|
||
setError('')
|
||
try {
|
||
await api.post(`/projects/${projectId}/proposes/${id}/reject`, { reason: reason || undefined })
|
||
fetchPropose()
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Reject failed')
|
||
} finally {
|
||
setActionLoading(false)
|
||
}
|
||
}
|
||
|
||
const openEditModal = () => {
|
||
if (!propose) return
|
||
setEditTitle(propose.title)
|
||
setEditDescription(propose.description || '')
|
||
setError('')
|
||
setShowEdit(true)
|
||
}
|
||
|
||
const handleEdit = async () => {
|
||
if (!projectId) return
|
||
setEditLoading(true)
|
||
setError('')
|
||
try {
|
||
await api.patch(`/projects/${projectId}/proposes/${id}`, {
|
||
title: editTitle,
|
||
description: editDescription,
|
||
})
|
||
setShowEdit(false)
|
||
fetchPropose()
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Update failed')
|
||
} finally {
|
||
setEditLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleReopen = async () => {
|
||
if (!projectId) return
|
||
setActionLoading(true)
|
||
setError('')
|
||
try {
|
||
await api.post(`/projects/${projectId}/proposes/${id}/reopen`)
|
||
fetchPropose()
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Reopen failed')
|
||
} finally {
|
||
setActionLoading(false)
|
||
}
|
||
}
|
||
|
||
if (!propose) return <div className="loading">Loading...</div>
|
||
|
||
const statusBadgeClass = (s: string) => {
|
||
if (s === 'open') return 'status-open'
|
||
if (s === 'accepted') return 'status-completed'
|
||
if (s === 'rejected') return 'status-closed'
|
||
return ''
|
||
}
|
||
|
||
return (
|
||
<div className="task-detail">
|
||
<button className="btn-back" onClick={() => navigate(-1)}>← Back</button>
|
||
|
||
<div className="task-header">
|
||
<h2>
|
||
💡 {propose.title}
|
||
{propose.propose_code && <span className="badge" style={{ marginLeft: 8 }}>{propose.propose_code}</span>}
|
||
</h2>
|
||
<span className={`badge ${statusBadgeClass(propose.status)}`} style={{ fontSize: '1rem' }}>
|
||
{propose.status}
|
||
</span>
|
||
</div>
|
||
|
||
{error && <div className="error-message" style={{ color: 'var(--danger)', marginBottom: 12 }}>{error}</div>}
|
||
|
||
<div className="section">
|
||
<h3>Details</h3>
|
||
<div className="detail-grid">
|
||
<div><strong>Propose Code:</strong> {propose.propose_code || '—'}</div>
|
||
<div><strong>Status:</strong> {propose.status}</div>
|
||
<div><strong>Created By:</strong> User #{propose.created_by_id || '—'}</div>
|
||
<div><strong>Created:</strong> {dayjs(propose.created_at).format('YYYY-MM-DD HH:mm')}</div>
|
||
<div><strong>Updated:</strong> {propose.updated_at ? dayjs(propose.updated_at).format('YYYY-MM-DD HH:mm') : '—'}</div>
|
||
<div><strong>Feature Task:</strong> {propose.feat_task_id || '—'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3>Description</h3>
|
||
<p style={{ whiteSpace: 'pre-wrap' }}>{propose.description || 'No description'}</p>
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div className="section" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||
{propose.status === 'open' && (
|
||
<>
|
||
<button
|
||
className="btn-transition"
|
||
onClick={openEditModal}
|
||
>
|
||
✏️ Edit
|
||
</button>
|
||
<button
|
||
className="btn-primary"
|
||
disabled={actionLoading}
|
||
onClick={() => { loadMilestones(); setShowAccept(true) }}
|
||
>
|
||
✅ Accept
|
||
</button>
|
||
<button
|
||
className="btn-danger"
|
||
disabled={actionLoading}
|
||
onClick={handleReject}
|
||
>
|
||
❌ Reject
|
||
</button>
|
||
</>
|
||
)}
|
||
{propose.status === 'accepted' && propose.feat_task_id && (
|
||
<button className="btn-transition" onClick={() => navigate(`/tasks/${propose.feat_task_id}`)}>
|
||
📋 View Generated Task
|
||
</button>
|
||
)}
|
||
{propose.status === 'rejected' && (
|
||
<button
|
||
className="btn-transition"
|
||
disabled={actionLoading}
|
||
onClick={handleReopen}
|
||
>
|
||
🔄 Reopen
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Edit modal (P10.7 — only reachable when open) */}
|
||
{showEdit && (
|
||
<div className="modal-overlay" onClick={() => setShowEdit(false)}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>Edit Propose</h3>
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Title</strong>
|
||
<input
|
||
type="text"
|
||
value={editTitle}
|
||
onChange={(e) => setEditTitle(e.target.value)}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Description</strong>
|
||
<textarea
|
||
value={editDescription}
|
||
onChange={(e) => setEditDescription(e.target.value)}
|
||
rows={6}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
||
<button
|
||
className="btn-primary"
|
||
onClick={handleEdit}
|
||
disabled={!editTitle.trim() || editLoading}
|
||
>
|
||
{editLoading ? 'Saving...' : 'Save'}
|
||
</button>
|
||
<button className="btn-back" onClick={() => setShowEdit(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Accept modal with milestone selector */}
|
||
{showAccept && (
|
||
<div className="modal-overlay" onClick={() => setShowAccept(false)}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>Accept Propose</h3>
|
||
<p>Select an <strong>open</strong> milestone to create a feature story task in:</p>
|
||
<select
|
||
value={selectedMilestone}
|
||
onChange={(e) => setSelectedMilestone(Number(e.target.value))}
|
||
>
|
||
<option value="">— Select milestone —</option>
|
||
{milestones.map((ms) => (
|
||
<option key={ms.id} value={ms.id}>{ms.title}</option>
|
||
))}
|
||
</select>
|
||
{milestones.length === 0 && (
|
||
<p style={{ color: 'var(--danger)', marginTop: 8 }}>No open milestones available.</p>
|
||
)}
|
||
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
||
<button
|
||
className="btn-primary"
|
||
onClick={handleAccept}
|
||
disabled={!selectedMilestone || actionLoading}
|
||
>
|
||
{actionLoading ? 'Accepting...' : 'Confirm Accept'}
|
||
</button>
|
||
<button className="btn-back" onClick={() => setShowAccept(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|