feat: Phase 2 - Tasks CRUD API, kanban/list UI, dialogs, activity feed, keyboard shortcuts
- Tasks REST API under /api/domains/[domainId]/tasks/ with full CRUD, filtering, pagination - Complete/uncomplete endpoints - Bulk update endpoint for drag-to-reorder - Dependencies API with cycle detection - Tags API for task tagging - Activity feed API scoped to workspace - Updated kanban board view with 4 columns (todo/in_progress/done/cancelled) - Updated list view with status column and workspace-scoped API calls - Task create dialog with title, description, status, priority, due date, estimate - Task detail panel (sheet) with full edit capabilities - Task activity feed widget - Keyboard shortcuts: c t (new task), e (edit), d (delete), Space (open), Esc (close), 1-4 (filter) - All routes follow AGENTS.md contract: Drizzle writes + activity feed + pg_notify
This commit is contained in:
@@ -6,7 +6,7 @@ import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -27,63 +27,108 @@ import {
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Calendar, Loader2 } from 'lucide-react';
|
||||
|
||||
interface Task {
|
||||
interface TaskDetail {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'todo' | 'in_progress' | 'done';
|
||||
description?: string | null;
|
||||
status: 'todo' | 'in_progress' | 'done' | 'cancelled';
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent';
|
||||
domain: string;
|
||||
due_date?: string;
|
||||
project_id?: string;
|
||||
tags: string[];
|
||||
domainId: string;
|
||||
projectId?: string | null;
|
||||
sectionId?: string | null;
|
||||
parentId?: string | null;
|
||||
dueDate?: string | null;
|
||||
completedAt?: string | null;
|
||||
estimatedMinutes?: number | null;
|
||||
trackedMinutes?: number | null;
|
||||
order: number;
|
||||
customFields?: Record<string, unknown> | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
subtasks: any[];
|
||||
tags: { id: string; name: string; color: string | null }[];
|
||||
dependencies: { id: string; title: string; status: string }[];
|
||||
dependents: { id: string; title: string; status: string }[];
|
||||
}
|
||||
|
||||
interface TaskDetailPanelProps {
|
||||
task: Task;
|
||||
taskId: string;
|
||||
domainId: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export function TaskDetailPanel({
|
||||
task,
|
||||
taskId,
|
||||
domainId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onUpdate
|
||||
onUpdate,
|
||||
}: TaskDetailPanelProps) {
|
||||
const [title, setTitle] = useState(task.title);
|
||||
const [description, setDescription] = useState(task.description || '');
|
||||
const [status, setStatus] = useState(task.status);
|
||||
const [priority, setPriority] = useState(task.priority);
|
||||
const [domain, setDomain] = useState(task.domain);
|
||||
const [domains, setDomains] = useState<{id: string; name: string}[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/domains?sort=sort_order').then(r => r.json()).then(data => setDomains(data.items || [])).catch(() => {});
|
||||
}, []);
|
||||
const [dueDate, setDueDate] = useState(task.due_date || '');
|
||||
const [task, setTask] = useState<TaskDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [status, setStatus] = useState<'todo' | 'in_progress' | 'done' | 'cancelled'>('todo');
|
||||
const [priority, setPriority] = useState<'low' | 'medium' | 'high' | 'urgent'>('medium');
|
||||
const [dueDate, setDueDate] = useState('');
|
||||
const [estimatedMinutes, setEstimatedMinutes] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
// Fetch task details when panel opens
|
||||
useEffect(() => {
|
||||
if (!open || !taskId || !domainId) return;
|
||||
setLoading(true);
|
||||
fetch(`/api/domains/${domainId}/tasks/${taskId}`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error('Unable to load task');
|
||||
return res.json();
|
||||
})
|
||||
.then((data: TaskDetail) => {
|
||||
setTask(data);
|
||||
setTitle(data.title);
|
||||
setDescription(data.description || '');
|
||||
setStatus(data.status);
|
||||
setPriority(data.priority);
|
||||
setDueDate(data.dueDate ? data.dueDate.split('T')[0] : '');
|
||||
setEstimatedMinutes(data.estimatedMinutes?.toString() || '');
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed to load task:', err);
|
||||
toast.error('Unable to load task details');
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [open, taskId, domainId]);
|
||||
|
||||
async function handleSave() {
|
||||
if (!task || !domainId) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${task.id}`, {
|
||||
const body: Record<string, unknown> = {
|
||||
title,
|
||||
status,
|
||||
priority,
|
||||
};
|
||||
if (description !== (task.description || '')) body.description = description || null;
|
||||
if (dueDate !== (task.dueDate ? task.dueDate.split('T')[0] : '')) {
|
||||
body.dueDate = dueDate ? new Date(dueDate).toISOString() : null;
|
||||
}
|
||||
if (estimatedMinutes !== (task.estimatedMinutes?.toString() || '')) {
|
||||
body.estimatedMinutes = estimatedMinutes ? parseInt(estimatedMinutes, 10) : null;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
priority,
|
||||
domain,
|
||||
due_date: dueDate || undefined
|
||||
})
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save task');
|
||||
onUpdate();
|
||||
@@ -98,10 +143,11 @@ export function TaskDetailPanel({
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!task || !domainId) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'DELETE'
|
||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to delete task');
|
||||
onUpdate();
|
||||
@@ -123,114 +169,183 @@ export function TaskDetailPanel({
|
||||
<SheetTitle>Task Details</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="mt-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Title</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Task title"
|
||||
/>
|
||||
{loading ? (
|
||||
<div className="mt-12 flex justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
rows={4}
|
||||
/>
|
||||
) : !task ? (
|
||||
<div className="mt-12 text-center text-muted-foreground">
|
||||
<p>Task not found</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
) : (
|
||||
<div className="mt-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-status">Status</Label>
|
||||
<Select
|
||||
value={status}
|
||||
onValueChange={(v) => setStatus(v as Task['status'])}
|
||||
>
|
||||
<SelectTrigger id="task-status">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todo">To Do</SelectItem>
|
||||
<SelectItem value="in_progress">In Progress</SelectItem>
|
||||
<SelectItem value="done">Done</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-priority">Priority</Label>
|
||||
<Select
|
||||
value={priority}
|
||||
onValueChange={(v) => setPriority(v as Task['priority'])}
|
||||
>
|
||||
<SelectTrigger id="task-priority">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="low">Low</SelectItem>
|
||||
<SelectItem value="medium">Medium</SelectItem>
|
||||
<SelectItem value="high">High</SelectItem>
|
||||
<SelectItem value="urgent">Urgent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-domain">Domain</Label>
|
||||
<Select value={domain} onValueChange={setDomain}>
|
||||
<SelectTrigger id="task-domain">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{domains.map((d) => (
|
||||
<SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-due-date">Due Date</Label>
|
||||
<Label htmlFor="title">Title</Label>
|
||||
<Input
|
||||
id="task-due-date"
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(e) => setDueDate(e.target.value)}
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Task title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="ml-auto"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-status">Status</Label>
|
||||
<Select
|
||||
value={status}
|
||||
onValueChange={(v) => setStatus(v as any)}
|
||||
>
|
||||
<SelectTrigger id="task-status">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todo">To Do</SelectItem>
|
||||
<SelectItem value="in_progress">In Progress</SelectItem>
|
||||
<SelectItem value="done">Done</SelectItem>
|
||||
<SelectItem value="cancelled">Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-priority">Priority</Label>
|
||||
<Select
|
||||
value={priority}
|
||||
onValueChange={(v) => setPriority(v as any)}
|
||||
>
|
||||
<SelectTrigger id="task-priority">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="low">Low</SelectItem>
|
||||
<SelectItem value="medium">Medium</SelectItem>
|
||||
<SelectItem value="high">High</SelectItem>
|
||||
<SelectItem value="urgent">Urgent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-due-date">Due Date</Label>
|
||||
<Input
|
||||
id="task-due-date"
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(e) => setDueDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-estimate">Est. Minutes</Label>
|
||||
<Input
|
||||
id="task-estimate"
|
||||
type="number"
|
||||
min={1}
|
||||
value={estimatedMinutes}
|
||||
onChange={(e) => setEstimatedMinutes(e.target.value)}
|
||||
placeholder="e.g. 30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Tags</Label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{task.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag.id}
|
||||
variant="outline"
|
||||
style={tag.color ? { borderColor: tag.color, color: tag.color } : {}}
|
||||
>
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dependencies */}
|
||||
{task.dependencies && task.dependencies.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Depends on</Label>
|
||||
<div className="space-y-1">
|
||||
{task.dependencies.map((dep) => (
|
||||
<div key={dep.id} className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span>{dep.title}</span>
|
||||
<Badge variant="outline" className="text-xs capitalize">{dep.status}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subtasks */}
|
||||
{task.subtasks && task.subtasks.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Subtasks ({task.subtasks.length})</Label>
|
||||
<div className="space-y-1">
|
||||
{task.subtasks.map((sub: any) => (
|
||||
<div key={sub.id} className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className={sub.status === 'done' ? 'line-through text-muted-foreground' : ''}>
|
||||
{sub.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
<p>Created: {new Date(task.createdAt).toLocaleString()}</p>
|
||||
<p>Updated: {new Date(task.updatedAt).toLocaleString()}</p>
|
||||
{task.completedAt && (
|
||||
<p>Completed: {new Date(task.completedAt).toLocaleString()}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="ml-auto"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete task?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This permanently deletes "{task.title}".
|
||||
This permanently deletes "{task?.title}".
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user