From bfaf9469e1f6e7edcef1134044c6ea0d5c687b28 Mon Sep 17 00:00:00 2001
From: Zhi <zhi@dev.hangman-lab.top>
Date: Thu, 12 Mar 2026 10:52:54 +0000
Subject: [PATCH] fix: project form - owner dropdown, sub/related projects
 multi-select

---
 src/pages/CreateIssuePage.tsx   |  4 +-
 src/pages/ProjectDetailPage.tsx | 72 ++++++++++++++++++++-------------
 src/pages/ProjectsPage.tsx      | 42 ++++++++++++++++---
 src/types/index.ts              |  3 ++
 4 files changed, 84 insertions(+), 37 deletions(-)

diff --git a/src/pages/CreateIssuePage.tsx b/src/pages/CreateIssuePage.tsx
index 283be00..160395f 100644
--- a/src/pages/CreateIssuePage.tsx
+++ b/src/pages/CreateIssuePage.tsx
@@ -5,8 +5,8 @@ import type { Project } from '@/types'
 
 const ISSUE_TYPES = [
   { value: 'story', label: 'Story', subtypes: ['feature', 'improvement', 'refactor'] },
-  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience'] },
-  { value: 'task', label: 'Task', subtypes: [] },
+  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience', 'defect'] },
+  { value: 'task', label: 'Task', subtypes: ['defect'] },
   { value: 'test', label: 'Test', subtypes: ['regression', 'security', 'smoke', 'stress'] },
   { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy', 'release'] },
   { value: 'research', label: 'Research', subtypes: [] },
diff --git a/src/pages/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage.tsx
index 2d56e81..b0522ce 100644
--- a/src/pages/ProjectDetailPage.tsx
+++ b/src/pages/ProjectDetailPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
-import type { Project, ProjectMember, Issue, Milestone, PaginatedResponse } from '@/types'
+import type { Project, ProjectMember, Milestone } from '@/types'
 import dayjs from 'dayjs'
 
 export default function ProjectDetailPage() {
@@ -9,21 +9,31 @@ export default function ProjectDetailPage() {
   const navigate = useNavigate()
   const [project, setProject] = useState<Project | null>(null)
   const [members, setMembers] = useState<ProjectMember[]>([])
-  const [issues, setIssues] = useState<Issue[]>([])
   const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [allProjects, setAllProjects] = useState<Project[]>([])
   const [editing, setEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ name: '', description: '' })
+  const [editForm, setEditForm] = useState({ owner: '', description: '', sub_projects: [] as string[], related_projects: [] as string[] })
 
   useEffect(() => {
     api.get<Project>(`/projects/${id}`).then(({ data }) => {
       setProject(data)
-      setEditForm({ name: data.name, description: data.description || '' })
+      setEditForm({
+        owner: data.owner || '',
+        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<PaginatedResponse<Issue>>(`/issues?project_id=${id}&page_size=10`).then(({ data }) => setIssues(data.items))
     api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
+    api.get<Project[]>('/projects').then(({ data }) => setAllProjects(data))
   }, [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)
@@ -31,8 +41,16 @@ export default function ProjectDetailPage() {
     setEditing(false)
   }
 
+  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>
@@ -40,16 +58,34 @@ export default function ProjectDetailPage() {
       <div className="issue-header">
         {editing ? (
           <form className="inline-form" onSubmit={updateProject}>
-            <input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required />
+            <div style={{ fontWeight: 600 }}>{project.name}</div>
+            {project.project_code && <span className="badge">{project.project_code}</span>}
+            <input value={editForm.owner} onChange={(e) => setEditForm({ ...editForm, owner: e.target.value })} placeholder="Owner" required />
             <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}</h2>
+            <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}</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>
@@ -78,28 +114,6 @@ export default function ProjectDetailPage() {
         ))}
         {milestones.length === 0 && <p className="empty">No milestones</p>}
       </div>
-
-      <div className="section">
-        <div className="page-header">
-          <h3>Recent Issues</h3>
-          <button className="btn-primary" onClick={() => navigate('/issues/new')}>+ New</button>
-        </div>
-        <table>
-          <thead>
-            <tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr>
-          </thead>
-          <tbody>
-            {issues.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>
-            ))}
-          </tbody>
-        </table>
-      </div>
     </div>
   )
 }
diff --git a/src/pages/ProjectsPage.tsx b/src/pages/ProjectsPage.tsx
index 6139645..20f8e3b 100644
--- a/src/pages/ProjectsPage.tsx
+++ b/src/pages/ProjectsPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Project } from '@/types'
@@ -6,8 +6,9 @@ import dayjs from 'dayjs'
 
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([])
+  const [users, setUsers] = useState<any[]>([])
   const [showCreate, setShowCreate] = useState(false)
-  const [form, setForm] = useState({ name: '', description: '', owner_id: 1 })
+  const [form, setForm] = useState({ name: '', description: '', owner_id: 1, sub_projects: [] as string[], related_projects: [] as string[] })
   const navigate = useNavigate()
 
   const fetchProjects = () => {
@@ -15,11 +16,21 @@ export default function ProjectsPage() {
   }
 
   useEffect(() => { fetchProjects() }, [])
+  useEffect(() => {
+    api.get('/users').then(({ data }) => setUsers(data)).catch(console.error)
+  }, [])
+
+  const projectOptions = useMemo(() => projects.filter(p => p.project_code), [projects])
+
+  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
+    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
+    setForm({ ...form, [field]: values })
+  }
 
   const createProject = async (e: React.FormEvent) => {
     e.preventDefault()
     await api.post('/projects', form)
-    setForm({ name: '', description: '', owner_id: 1 })
+    setForm({ name: '', description: '', owner_id: 1, sub_projects: [], related_projects: [] })
     setShowCreate(false)
     fetchProjects()
   }
@@ -29,7 +40,7 @@ export default function ProjectsPage() {
       <div className="page-header">
         <h2>📁 Projects ({projects.length})</h2>
         <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
-          {showCreate ? 'Cancel' : '+ NewProjects'}
+          {showCreate ? 'Cancel' : '+ New'}
         </button>
       </div>
 
@@ -39,10 +50,29 @@ export default function ProjectsPage() {
             required placeholder="Project name" value={form.name}
             onChange={(e) => setForm({ ...form, name: e.target.value })}
           />
+          <select
+            value={form.owner_id}
+            onChange={(e) => setForm({ ...form, owner_id: Number(e.target.value) })}
+            style={{width:'100%',padding:'8px',marginBottom:'8px'}}
+          >
+            {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.full_name})</option>)}
+          </select>
           <input
-            placeholder="ProjectsDescription (optional)" value={form.description}
+            placeholder="Description (optional)" value={form.description}
             onChange={(e) => setForm({ ...form, description: e.target.value })}
           />
+          <label>Sub-projects (Ctrl+Click to select multiple)</label>
+          <select multiple value={form.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')} style={{height:80}}>
+            {projectOptions.map((p) => (
+              <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+            ))}
+          </select>
+          <label>Related Projects (Ctrl+Click to select multiple)</label>
+          <select multiple value={form.related_projects} onChange={(e) => handleMulti(e, 'related_projects')} style={{height:80}}>
+            {projectOptions.map((p) => (
+              <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+            ))}
+          </select>
           <button type="submit" className="btn-primary">Create</button>
         </form>
       )}
@@ -50,7 +80,7 @@ export default function ProjectsPage() {
       <div className="project-grid">
         {projects.map((p) => (
           <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.id}`)}>
-            <h3>{p.name}</h3>{p.project_code && <span className=badge style={{ marginLeft: 8 }}>{p.project_code}</span>}
+            <h3>{p.name}</h3>{p.project_code && <span className="badge" style={{ marginLeft: 8 }}>{p.project_code}</span>}
             <p className="project-desc">{p.description || 'No description'}</p>
             <div className="project-meta">
               <span>Created {dayjs(p.created_at).format('YYYY-MM-DD')}</span>
diff --git a/src/types/index.ts b/src/types/index.ts
index 9995807..a753af1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -11,9 +11,12 @@ export interface User {
 export interface Project {
   id: number
   name: string
+  owner: string
   description: string | null
   owner_id: number
   project_code: string | null
+  sub_projects: string[] | null
+  related_projects: string[] | null
   created_at: string
 }