188 lines
8.9 KiB
TypeScript
188 lines
8.9 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { useParams, useNavigate } from 'react-router-dom'
|
||
import api from '@/services/api'
|
||
import type { Project, ProjectMember, Milestone } from '@/types'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default function ProjectDetailPage() {
|
||
const { id } = useParams()
|
||
const navigate = useNavigate()
|
||
const [project, setProject] = useState<Project | null>(null)
|
||
const [members, setMembers] = useState<ProjectMember[]>([])
|
||
const [milestones, setMilestones] = useState<Milestone[]>([])
|
||
const [allProjects, setAllProjects] = useState<Project[]>([])
|
||
const [showAddMember, setShowAddMember] = useState(false)
|
||
const [showAddMilestone, setShowAddMilestone] = useState(false)
|
||
const [newMemberUserId, setNewMemberUserId] = useState(1)
|
||
const [newMemberRole, setNewMemberRole] = useState('developer')
|
||
const [newMilestoneTitle, setNewMilestoneTitle] = useState('')
|
||
const [users, setUsers] = useState<any[]>([])
|
||
const [roles, setRoles] = useState<any[]>([])
|
||
const [editing, setEditing] = useState(false)
|
||
const [editForm, setEditForm] = useState({ owner: '', repo: '', description: '', sub_projects: [] as string[], related_projects: [] as string[] })
|
||
|
||
useEffect(() => {
|
||
api.get<Project>(`/projects/${id}`).then(({ data }) => {
|
||
setProject(data)
|
||
setEditForm({
|
||
owner: data.owner_name || data.owner || '',
|
||
repo: data.repo || '',
|
||
description: data.description || '',
|
||
sub_projects: data.sub_projects || [],
|
||
related_projects: data.related_projects || [],
|
||
})
|
||
})
|
||
api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
|
||
api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
|
||
api.get<Project[]>('/projects').then(({ data }) => setAllProjects(data))
|
||
api.get('/users').then(r => setUsers(r.data)).catch(() => {})
|
||
api.get('/roles').then(r => setRoles(r.data)).catch(() => {})
|
||
api.get('/users').then(r => setUsers(r.data)).catch(() => {})
|
||
}, [id])
|
||
|
||
const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
|
||
const values = Array.from(e.target.selectedOptions).map((o) => o.value)
|
||
setEditForm({ ...editForm, [field]: values })
|
||
}
|
||
|
||
const updateProject = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
const { data } = await api.patch<Project>(`/projects/${id}`, editForm)
|
||
setProject(data)
|
||
setEditing(false)
|
||
}
|
||
|
||
const addMember = async () => {
|
||
if (!newMemberUserId) return
|
||
await api.post(`/projects/${id}/members`, { user_id: newMemberUserId, role: newMemberRole })
|
||
setShowAddMember(false)
|
||
api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
|
||
}
|
||
|
||
const removeMember = async (userId: number) => {
|
||
if (!confirm('Remove this member?')) return
|
||
await api.delete(`/projects/${id}/members/${userId}`)
|
||
api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
|
||
}
|
||
|
||
const addMilestone = async () => {
|
||
if (!newMilestoneTitle.trim()) return
|
||
await api.post(`/projects/${id}/milestones`, { title: newMilestoneTitle, status: 'open' })
|
||
setShowAddMilestone(false)
|
||
setNewMilestoneTitle('')
|
||
api.get<Milestone[]>(`/projects/${id}/milestones`).then(({ data }) => setMilestones(data)).catch(() => {})
|
||
}
|
||
|
||
const deleteProject = async () => {
|
||
if (!confirm('Delete this project?')) return
|
||
await api.delete(`/projects/${id}`)
|
||
navigate('/projects')
|
||
}
|
||
|
||
if (!project) return <div className="loading">Loading...</div>
|
||
|
||
const selectableProjects = allProjects.filter((p) => p.id !== project.id && p.project_code)
|
||
|
||
return (
|
||
<div className="project-detail">
|
||
<button className="btn-back" onClick={() => navigate('/projects')}>← Back to projects</button>
|
||
|
||
<div className="issue-header">
|
||
{editing ? (
|
||
<form className="inline-form" onSubmit={updateProject}>
|
||
<div style={{ fontWeight: 600 }}>{project.name}</div>
|
||
{project.project_code && <span className="badge">{project.project_code}</span>}
|
||
<select value={editForm.owner} onChange={(e) => setEditForm({ ...editForm, owner: e.target.value })}>
|
||
{users.map((u: any) => <option key={u.id} value={u.username}>{u.username} ({u.full_name})</option>)}
|
||
</select>
|
||
<input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="Description" />
|
||
<label>Sub-projects
|
||
<select multiple value={editForm.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')}>
|
||
{selectableProjects.map((p) => (
|
||
<option key={p.id} value={p.project_code || ''}>{p.project_code || p.name}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>Related projects
|
||
<select multiple value={editForm.related_projects} onChange={(e) => handleMulti(e, 'related_projects')}>
|
||
{selectableProjects.map((p) => (
|
||
<option key={p.id} value={p.project_code || ''}>{p.project_code || p.name}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<button type="submit" className="btn-primary">Save</button>
|
||
<button type="button" className="btn-back" onClick={() => setEditing(false)}>Cancel</button>
|
||
</form>
|
||
) : (
|
||
<>
|
||
<h2>📁 {project.name} {project.project_code && <span className="badge">{project.project_code}</span>}</h2>
|
||
<p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || 'No description'}</p>
|
||
<div className="text-dim">Owner: {project.owner_name || project.owner || "Unknown"}</div>
|
||
<button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>Edit</button>
|
||
<button className="btn-danger" style={{ marginLeft: 8 }} onClick={deleteProject}>Delete</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3>Members ({members.length}) <button className="btn-sm" onClick={() => setShowAddMember(true)}>+ Add</button></h3>
|
||
{members.length > 0 ? (
|
||
<div className="member-list">
|
||
{members.map((m) => (
|
||
<span key={m.id} className="badge" style={{marginRight: 8}}>
|
||
{`User #${m.user_id} (${m.role})`}
|
||
<button onClick={(e) => { e.stopPropagation(); removeMember(m.user_id) }} style={{marginLeft: 8, background: 'none', border: 'none', color: 'red', cursor: 'pointer'}}>×</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="empty">No members</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3>Milestones ({milestones.length}) <button className="btn-sm" onClick={() => setShowAddMilestone(true)}>+ New</button></h3>
|
||
{milestones.map((ms) => (
|
||
<div key={ms.id} className="milestone-item" onClick={() => navigate(`/milestones/${ms.id}`)}>
|
||
<span className={`badge status-${ms.status === 'active' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
|
||
<span className="milestone-title">{ms.title}</span>
|
||
{ms.due_date && <span className="text-dim"> · Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
|
||
</div>
|
||
))}
|
||
{milestones.length === 0 && <p className="empty">No milestones</p>}
|
||
</div>
|
||
|
||
{showAddMember && (
|
||
<div className="modal-overlay" onClick={() => setShowAddMember(false)}>
|
||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||
<h3>Add Member</h3>
|
||
<select value={newMemberUserId} onChange={e => setNewMemberUserId(Number(e.target.value))}>
|
||
{users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.full_name})</option>)}
|
||
</select>
|
||
<select value={newMemberRole} onChange={e => setNewMemberRole(e.target.value)}>
|
||
{roles.map(r => <option key={r.id} value={r.name}>{r.name}</option>)}
|
||
</select>
|
||
<div style={{marginTop: 10}}>
|
||
<button className="btn-primary" onClick={addMember}>Add</button>
|
||
<button className="btn-back" onClick={() => setShowAddMember(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showAddMilestone && (
|
||
<div className="modal-overlay" onClick={() => setShowAddMilestone(false)}>
|
||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||
<h3>New Milestone</h3>
|
||
<input value={newMilestoneTitle} onChange={e => setNewMilestoneTitle(e.target.value)} placeholder="Milestone title" />
|
||
<div style={{marginTop: 10}}>
|
||
<button className="btn-primary" onClick={addMilestone}>Create</button>
|
||
<button className="btn-back" onClick={() => setShowAddMilestone(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|