hammer/todo-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add project rename/delete and section selector in task detail

Browse Source
This commit is contained in:
Hammer
2026-01-28 19:03:44 +00:00
parent 6cacfe33f9
commit f9145f6a46
3 changed files with 115 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Todo App - Task management made simple" /> <meta name="description" content="Todo App - Task management made simple" />
<title>Todo App</title> <title>Todo App</title>
<script type="module" crossorigin src="/assets/index-BF_dh0x-.js"></script> <script type="module" crossorigin src="/assets/index-DtVMUKEv.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CR9gBHOO.css"> <link rel="stylesheet" crossorigin href="/assets/index-Bq_EO_v_.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

54
src/components/TaskDetail.tsx
View File

@@ -1,9 +1,9 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { import {
X, Check, Trash2, Calendar, Flag, User, FolderOpen, X, Check, Trash2, Calendar, Flag, User, FolderOpen,
Tag, MessageSquare, ChevronRight, AlertCircle Tag, MessageSquare, ChevronRight, AlertCircle, Layers
} from 'lucide-react'; } from 'lucide-react';
import type { Task, Priority, Comment } from '@/types'; import type { Task, Priority, Comment, Section } from '@/types';
import { cn, formatDate, getPriorityColor, getPriorityLabel } from '@/lib/utils'; import { cn, formatDate, getPriorityColor, getPriorityLabel } from '@/lib/utils';
import { useTasksStore } from '@/stores/tasks'; import { useTasksStore } from '@/stores/tasks';
import { api } from '@/lib/api'; import { api } from '@/lib/api';
@@ -21,6 +21,8 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
const [priority, setPriority] = useState<Priority>(task.priority); const [priority, setPriority] = useState<Priority>(task.priority);
const [assigneeId, setAssigneeId] = useState(task.assigneeId || ''); const [assigneeId, setAssigneeId] = useState(task.assigneeId || '');
const [projectId, setProjectId] = useState(task.projectId || ''); const [projectId, setProjectId] = useState(task.projectId || '');
const [sectionId, setSectionId] = useState(task.sectionId || '');
const [availableSections, setAvailableSections] = useState<Section[]>([]);
const [comments, setComments] = useState<Comment[]>([]); const [comments, setComments] = useState<Comment[]>([]);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -34,6 +36,7 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
setPriority(task.priority); setPriority(task.priority);
setAssigneeId(task.assigneeId || ''); setAssigneeId(task.assigneeId || '');
setProjectId(task.projectId || ''); setProjectId(task.projectId || '');
setSectionId(task.sectionId || '');
}, [task]); }, [task]);
useEffect(() => { useEffect(() => {
@@ -42,6 +45,22 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
} }
}, []); }, []);
// Load sections for the current project
useEffect(() => {
if (projectId) {
const proj = projects.find(p => p.id === projectId);
if (proj?.sections) {
setAvailableSections(proj.sections);
} else {
api.getProject(projectId).then((p) => {
setAvailableSections(p.sections || []);
}).catch(() => setAvailableSections([]));
}
} else {
setAvailableSections([]);
}
}, [projectId, projects]);
useEffect(() => { useEffect(() => {
api.getComments(task.id).then(setComments).catch(() => setComments([])); api.getComments(task.id).then(setComments).catch(() => setComments([]));
}, [task.id]); }, [task.id]);
@@ -76,7 +95,13 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
const handleProjectChange = (value: string) => { const handleProjectChange = (value: string) => {
setProjectId(value); setProjectId(value);
updateTask(task.id, { projectId: value || undefined }); setSectionId('');
updateTask(task.id, { projectId: value || undefined, sectionId: undefined });
};
const handleSectionChange = (value: string) => {
setSectionId(value);
updateTask(task.id, { sectionId: value || undefined });
}; };
const handleDelete = async () => { const handleDelete = async () => {
@@ -210,6 +235,29 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
</div> </div>
</div> </div>
{/* Section */}
{projectId && availableSections.length > 0 && (
<div className="flex items-center gap-3">
<Layers className="w-4 h-4 text-gray-400 flex-shrink-0" />
<span className="text-sm text-gray-500 w-20">Section</span>
<select
value={sectionId}
onChange={(e) => handleSectionChange(e.target.value)}
className={cn(
'text-sm border border-gray-200 rounded px-2 py-1 outline-none focus:border-blue-400 bg-white cursor-pointer',
sectionId ? 'text-gray-900' : 'text-gray-400'
)}
>
<option value="">No section</option>
{availableSections.map((s) => (
<option key={s.id} value={s.id}>
{s.name}
</option>
))}
</select>
</div>
)}
{/* Due Date */} {/* Due Date */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" /> <Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" />

63
src/pages/Project.tsx
View File

@@ -104,7 +104,68 @@ export function ProjectPage() {
className="w-4 h-4 rounded" className="w-4 h-4 rounded"
style={{ backgroundColor: project.color }} style={{ backgroundColor: project.color }}
/> />
<h1 className="text-2xl font-bold text-gray-900">{project.name}</h1> {isEditing ? (
<input
ref={nameInputRef}
type="text"
value={editName}
onChange={(e) => setEditName(e.target.value)}
onBlur={handleSaveRename}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSaveRename();
if (e.key === 'Escape') setIsEditing(false);
}}
className="text-2xl font-bold text-gray-900 border-b-2 border-blue-400 outline-none bg-transparent"
/>
) : (
<h1
className="text-2xl font-bold text-gray-900 cursor-pointer hover:text-gray-700"
onClick={handleStartRename}
title="Click to rename"
>
{project.name}
</h1>
)}
{!isEditing && !project.isInbox && (
<div className="flex items-center gap-1">
<button
onClick={handleStartRename}
className="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
title="Rename project"
>
<Pencil className="w-4 h-4" />
</button>
{showDeleteConfirm ? (
<div className="flex items-center gap-1 ml-2">
<span className="text-xs text-red-600 flex items-center gap-1">
<AlertCircle className="w-3 h-3" />
Delete?
</span>
<button
onClick={() => setShowDeleteConfirm(false)}
className="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
>
Cancel
</button>
<button
onClick={handleDeleteProject}
disabled={isDeleting}
className="px-2 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded disabled:opacity-50"
>
{isDeleting ? 'Deleting...' : 'Delete'}
</button>
</div>
) : (
<button
onClick={() => setShowDeleteConfirm(true)}
className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
title="Delete project"
>
<Trash2 className="w-4 h-4" />
</button>
)}
</div>
)}
</div> </div>
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5"> <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
<button <button