feat: add project rename/delete and section selector in task detail
This commit is contained in:
4
dist/index.html
vendored
4
dist/index.html
vendored
@@ -6,8 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Todo App - Task management made simple" />
|
||||
<title>Todo App</title>
|
||||
<script type="module" crossorigin src="/assets/index-BF_dh0x-.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CR9gBHOO.css">
|
||||
<script type="module" crossorigin src="/assets/index-DtVMUKEv.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Bq_EO_v_.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
X, Check, Trash2, Calendar, Flag, User, FolderOpen,
|
||||
Tag, MessageSquare, ChevronRight, AlertCircle
|
||||
Tag, MessageSquare, ChevronRight, AlertCircle, Layers
|
||||
} 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 { useTasksStore } from '@/stores/tasks';
|
||||
import { api } from '@/lib/api';
|
||||
@@ -21,6 +21,8 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
|
||||
const [priority, setPriority] = useState<Priority>(task.priority);
|
||||
const [assigneeId, setAssigneeId] = useState(task.assigneeId || '');
|
||||
const [projectId, setProjectId] = useState(task.projectId || '');
|
||||
const [sectionId, setSectionId] = useState(task.sectionId || '');
|
||||
const [availableSections, setAvailableSections] = useState<Section[]>([]);
|
||||
const [comments, setComments] = useState<Comment[]>([]);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
@@ -34,6 +36,7 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
|
||||
setPriority(task.priority);
|
||||
setAssigneeId(task.assigneeId || '');
|
||||
setProjectId(task.projectId || '');
|
||||
setSectionId(task.sectionId || '');
|
||||
}, [task]);
|
||||
|
||||
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(() => {
|
||||
api.getComments(task.id).then(setComments).catch(() => setComments([]));
|
||||
}, [task.id]);
|
||||
@@ -76,7 +95,13 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
|
||||
|
||||
const handleProjectChange = (value: string) => {
|
||||
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 () => {
|
||||
@@ -210,6 +235,29 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
|
||||
</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 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
|
||||
@@ -104,7 +104,68 @@ export function ProjectPage() {
|
||||
className="w-4 h-4 rounded"
|
||||
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 className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user