feat: add threaded comments, activity feeds, and task dependencies
This commit is contained in:
@@ -1,78 +1,691 @@
|
||||
import { useState } from "react";
|
||||
import { createRoute, useParams, useNavigate } from "@tanstack/react-router";
|
||||
import { Route as appRoute } from "../../_app";
|
||||
import { useApiQuery } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Calendar,
|
||||
Clock,
|
||||
Flag,
|
||||
FolderKanban,
|
||||
ListTodo,
|
||||
Plus,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { differenceInCalendarDays, format, parseISO } from "date-fns";
|
||||
import { api, useApiQuery } from "@/lib/api";
|
||||
import { useRealtime } from "@/hooks/use-realtime";
|
||||
import { useOptimisticPatch } from "@/hooks/use-optimistic-patch";
|
||||
import { EntityDetailPage } from "@/components/entities/detail-page";
|
||||
import {
|
||||
InlineDate,
|
||||
InlineEdit,
|
||||
InlineSelect,
|
||||
InlineText,
|
||||
InlineTextarea,
|
||||
type InlineSelectOption,
|
||||
} from "@/components/entities/inline-edit";
|
||||
import { EntityActivity } from "@/components/entities/entity-activity";
|
||||
import { EntityComments } from "@/components/entities/entity-comments";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { ArrowLeft, Calendar, Clock, ListTodo, Activity } from "lucide-react";
|
||||
import type { Project } from "@/lib/types";
|
||||
import { format, parseISO } from "date-fns";
|
||||
import { PROJECT_STATUS } from "@/lib/status-colors";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { LoadingState, ErrorState } from "@/components/state";
|
||||
import { PRIORITY, PROJECT_STATUS, TASK_STATUS } from "@/lib/status-colors";
|
||||
import type { Project, Section, Task } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const PROJECT_STATUS_OPTIONS: InlineSelectOption[] = [
|
||||
{ value: "active", label: "Active" },
|
||||
{ value: "paused", label: "Paused" },
|
||||
{ value: "completed", label: "Completed" },
|
||||
{ value: "archived", label: "Archived" },
|
||||
];
|
||||
|
||||
const SECTION_STATUS_OPTIONS: InlineSelectOption[] = [
|
||||
{ value: "planned", label: "Planned" },
|
||||
{ value: "in_progress", label: "In Progress" },
|
||||
{ value: "complete", label: "Complete" },
|
||||
];
|
||||
|
||||
/** Section lifecycle colors (no shared token exists for section statuses). */
|
||||
const SECTION_STATUS: Record<string, { label: string; badge: string; dot: string }> = {
|
||||
planned: { label: "Planned", badge: "bg-slate-500 text-white", dot: "bg-slate-400" },
|
||||
in_progress: { label: "In Progress", badge: "bg-blue-500 text-white", dot: "bg-blue-500" },
|
||||
complete: { label: "Complete", badge: "bg-green-500 text-white", dot: "bg-green-500" },
|
||||
};
|
||||
|
||||
/** Sentinel for the "No section" option in the task composer select. */
|
||||
const NO_SECTION = "__none__";
|
||||
|
||||
type PatchFn = (vars: { id: string; data: Record<string, unknown> }) => void;
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
return err instanceof Error ? err.message : "Something went wrong";
|
||||
}
|
||||
|
||||
function targetCountdown(
|
||||
targetDate: string | null
|
||||
): { text: string; className: string } | null {
|
||||
if (!targetDate) return null;
|
||||
const days = differenceInCalendarDays(parseISO(targetDate), new Date());
|
||||
if (days > 0) {
|
||||
return {
|
||||
text: `${days} ${days === 1 ? "day" : "days"} left`,
|
||||
className: "text-muted-foreground",
|
||||
};
|
||||
}
|
||||
if (days === 0) {
|
||||
return { text: "Due today", className: "text-muted-foreground" };
|
||||
}
|
||||
const overdue = Math.abs(days);
|
||||
return {
|
||||
text: `Overdue by ${overdue} ${overdue === 1 ? "day" : "days"}`,
|
||||
className: "text-destructive",
|
||||
};
|
||||
}
|
||||
|
||||
function ProjectDetail() {
|
||||
const { id } = useParams({ from: Route.id });
|
||||
const navigate = useNavigate();
|
||||
const { data: project, isLoading } = useApiQuery<Project>(["project", id], "/projects/" + id);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
if (isLoading) return <div className="p-8 text-center text-muted-foreground">Loading...</div>;
|
||||
if (!project) return <div className="p-8 text-center text-muted-foreground">Project not found</div>;
|
||||
useRealtime({ enabled: true });
|
||||
|
||||
const { data: project, isLoading, isError, error, refetch } = useApiQuery<Project>(
|
||||
["project", id],
|
||||
"/projects/" + id
|
||||
);
|
||||
|
||||
const { patch } = useOptimisticPatch<Project>({
|
||||
entityKey: ["project", id],
|
||||
listKeys: [["projects"], ["active-projects"], ["analytics-projects"]],
|
||||
patchUrl: (pid) => `/projects/${pid}`,
|
||||
applyPatch: (current, data) => ({ ...current, ...data }),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => api.delete(`/projects/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
||||
toast.success("Project deleted");
|
||||
navigate({ to: "/projects" });
|
||||
},
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
if (isLoading) return <LoadingState label="Loading project..." />;
|
||||
if (isError) {
|
||||
return <ErrorState message={errorMessage(error)} onRetry={() => refetch()} />;
|
||||
}
|
||||
if (!project) return <ErrorState message="Project not found" />;
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto p-6 space-y-6">
|
||||
<Button variant="ghost" onClick={() => navigate({ to: "/projects" })} className="w-fit">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" /> Back to Projects
|
||||
</Button>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: project.color || "#3b82f6" }} />
|
||||
<CardTitle className="text-2xl">{project.name}</CardTitle>
|
||||
<Badge className={PROJECT_STATUS[project.status]?.badge}>{PROJECT_STATUS[project.status]?.label ?? project.status}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1"><Clock className="h-3 w-3" /> Created {format(parseISO(project.createdAt), "MMM d, yyyy HH:mm")}</span>
|
||||
<span className="flex items-center gap-1"><Clock className="h-3 w-3" /> Updated {format(parseISO(project.updatedAt), "MMM d, yyyy HH:mm")}</span>
|
||||
</div>
|
||||
{project.description && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-1">Description</h3>
|
||||
<p className="text-sm whitespace-pre-wrap">{project.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<Separator />
|
||||
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ListTodo className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{project.taskCount} tasks ({project.completedCount} done)</span>
|
||||
</div>
|
||||
{project.targetDate && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<span>Target: {format(parseISO(project.targetDate), "MMM d, yyyy")}</span>
|
||||
</div>
|
||||
<EntityDetailPage
|
||||
backTo={{ to: "/projects", label: "Back to Projects" }}
|
||||
title={
|
||||
<InlineText
|
||||
value={project.name}
|
||||
onSave={(name) => patch({ id, data: { name } })}
|
||||
placeholder="Untitled project"
|
||||
/>
|
||||
}
|
||||
icon={<FolderKanban className="h-6 w-6" />}
|
||||
badges={
|
||||
<>
|
||||
<InlineSelect
|
||||
value={project.status}
|
||||
options={PROJECT_STATUS_OPTIONS}
|
||||
displayValue={(v) => (
|
||||
<Badge className={PROJECT_STATUS[v]?.badge}>
|
||||
{PROJECT_STATUS[v]?.label ?? v}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{project.progress}% complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" />
|
||||
{project.tags && project.tags.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Tags</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((t: any) => (
|
||||
<Badge key={t.id || t.name} variant="secondary">{t.name || t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
onSave={(status) => patch({ id, data: { status } })}
|
||||
/>
|
||||
<InlineEdit
|
||||
value={project.color ?? ""}
|
||||
onSave={(color) => patch({ id, data: { color: color || null } })}
|
||||
showEditIcon={false}
|
||||
title="Edit color"
|
||||
display={() => (
|
||||
<span
|
||||
className="h-4 w-4 rounded-full"
|
||||
style={{ backgroundColor: project.color || "#3b82f6" }}
|
||||
/>
|
||||
)}
|
||||
renderEdit={(v, onChange, commit) => (
|
||||
<Input
|
||||
type="color"
|
||||
autoFocus
|
||||
className="h-8 w-12"
|
||||
value={v || "#3b82f6"}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
commit(e.target.value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="h-4 w-4" /> Delete
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Project</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete "{project.name}"? This action cannot be
|
||||
undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground"
|
||||
onClick={() => deleteMutation.mutate()}
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
}
|
||||
tabs={[
|
||||
{
|
||||
value: "overview",
|
||||
label: "Overview",
|
||||
content: <Overview project={project} patch={patch} />,
|
||||
},
|
||||
{ value: "tasks", label: "Tasks", content: <ProjectTasks project={project} /> },
|
||||
{ value: "sections", label: "Sections", content: <Sections project={project} /> },
|
||||
{
|
||||
value: "activity",
|
||||
label: "Activity",
|
||||
content: <EntityActivity entityType="project" entityId={id} />,
|
||||
},
|
||||
{
|
||||
value: "comments",
|
||||
label: "Comments",
|
||||
content: <EntityComments entityType="project" entityId={id} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Overview({ project, patch }: { project: Project; patch: PatchFn }) {
|
||||
const countdown = targetCountdown(project.targetDate);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="mb-1 text-sm font-semibold text-muted-foreground">Description</p>
|
||||
<InlineTextarea
|
||||
value={project.description ?? ""}
|
||||
onSave={(description) =>
|
||||
patch({ id: project.id, data: { description: description || null } })
|
||||
}
|
||||
placeholder="Add a description…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/30 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ListTodo className="h-4 w-4 text-muted-foreground" />
|
||||
<p className="text-sm font-semibold">Progress</p>
|
||||
<span className="ml-auto text-sm font-medium">{project.progress}%</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="mt-3 h-2" />
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{project.completedCount} of {project.taskCount} tasks done · {project.progress}%
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<InlineDate
|
||||
value={project.targetDate}
|
||||
onSave={(targetDate) => patch({ id: project.id, data: { targetDate } })}
|
||||
/>
|
||||
{countdown && (
|
||||
<span className={cn("text-xs", countdown.className)}>{countdown.text}</span>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{project.tags && project.tags.length > 0 ? (
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-muted-foreground">Tags</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((t) => (
|
||||
<Badge key={t.id} variant="secondary">
|
||||
{t.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-4 border-t pt-4 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
Created {format(parseISO(project.createdAt), "MMM d, yyyy HH:mm")}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
Updated {format(parseISO(project.updatedAt), "MMM d, yyyy HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectTasks({ project }: { project: Project }) {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const [newTitle, setNewTitle] = useState("");
|
||||
const [sectionId, setSectionId] = useState("");
|
||||
const [pendingId, setPendingId] = useState<string | null>(null);
|
||||
|
||||
const sections = project.sections || [];
|
||||
const tasks = project.tasks || [];
|
||||
|
||||
const refresh = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["project", project.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["tasks"] });
|
||||
};
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: ({ title, sectionId }: { title: string; sectionId: string | null }) =>
|
||||
api.post<Task>("/tasks", {
|
||||
title,
|
||||
projectId: project.id,
|
||||
domain: project.domainId,
|
||||
sectionId,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
setNewTitle("");
|
||||
toast.success("Task added");
|
||||
refresh();
|
||||
},
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: ({ taskId, status }: { taskId: string; status: Task["status"] }) =>
|
||||
api.post<Task>(`/tasks/${taskId}/status`, { status }),
|
||||
onMutate: (vars) => setPendingId(vars.taskId),
|
||||
onSettled: () => setPendingId(null),
|
||||
onSuccess: refresh,
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const submitNewTask = () => {
|
||||
const title = newTitle.trim();
|
||||
if (!title || addMutation.isPending) return;
|
||||
addMutation.mutate({
|
||||
title,
|
||||
sectionId: sectionId && sectionId !== NO_SECTION ? sectionId : null,
|
||||
});
|
||||
};
|
||||
|
||||
// Group tasks by section, keeping sections in API sort order. Tasks whose
|
||||
// sectionId is null or points at a hard-deleted section land in Unassigned.
|
||||
const sectionIdSet = new Set(sections.map((s) => s.id));
|
||||
const tasksBySection = new Map<string, Task[]>();
|
||||
const unassigned: Task[] = [];
|
||||
for (const task of tasks) {
|
||||
if (task.sectionId && sectionIdSet.has(task.sectionId)) {
|
||||
const bucket = tasksBySection.get(task.sectionId) ?? [];
|
||||
bucket.push(task);
|
||||
tasksBySection.set(task.sectionId, bucket);
|
||||
} else {
|
||||
unassigned.push(task);
|
||||
}
|
||||
}
|
||||
|
||||
const openTask = (taskId: string) =>
|
||||
navigate({ to: "/tasks/$id", params: { id: taskId } });
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newTitle}
|
||||
onChange={(e) => setNewTitle(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
submitNewTask();
|
||||
}
|
||||
}}
|
||||
placeholder="New task title…"
|
||||
className="h-9"
|
||||
/>
|
||||
<Select value={sectionId} onValueChange={setSectionId}>
|
||||
<SelectTrigger className="h-9 w-44" aria-label="Section">
|
||||
<SelectValue placeholder="No section" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NO_SECTION}>No section</SelectItem>
|
||||
{sections.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={submitNewTask}
|
||||
disabled={!newTitle.trim() || addMutation.isPending}
|
||||
>
|
||||
<Plus className="h-4 w-4" /> Add
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{tasks.length === 0 ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">
|
||||
No tasks yet — add the first one above.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
{sections.map((section) => (
|
||||
<div key={section.id} className="space-y-0.5">
|
||||
<div className="flex items-center gap-2 px-2 pb-1">
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 shrink-0 rounded-full",
|
||||
SECTION_STATUS[section.status]?.dot ?? "bg-slate-400"
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm font-semibold">{section.name}</span>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{tasksBySection.get(section.id)?.length ?? 0}
|
||||
</Badge>
|
||||
</div>
|
||||
{(tasksBySection.get(section.id) ?? []).map((task) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
pending={pendingId === task.id}
|
||||
onToggle={(vars) => toggleMutation.mutate(vars)}
|
||||
onOpen={() => openTask(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{unassigned.length > 0 ? (
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-2 px-2 pb-1">
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-slate-300" />
|
||||
<span className="text-sm font-semibold text-muted-foreground">
|
||||
Unassigned
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{unassigned.length}
|
||||
</Badge>
|
||||
</div>
|
||||
{unassigned.map((task) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
pending={pendingId === task.id}
|
||||
onToggle={(vars) => toggleMutation.mutate(vars)}
|
||||
onOpen={() => openTask(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskRow({
|
||||
task,
|
||||
pending,
|
||||
onToggle,
|
||||
onOpen,
|
||||
}: {
|
||||
task: Task;
|
||||
pending: boolean;
|
||||
onToggle: (vars: { taskId: string; status: Task["status"] }) => void;
|
||||
onOpen: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50">
|
||||
<Checkbox
|
||||
checked={task.status === "done"}
|
||||
disabled={pending}
|
||||
onCheckedChange={() =>
|
||||
onToggle({
|
||||
taskId: task.id,
|
||||
status: task.status === "done" ? "todo" : "done",
|
||||
})
|
||||
}
|
||||
aria-label={
|
||||
"Mark " + task.title + " " + (task.status === "done" ? "as not done" : "as done")
|
||||
}
|
||||
/>
|
||||
<span className={cn("h-2 w-2 shrink-0 rounded-full", TASK_STATUS[task.status]?.dot)} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className={cn(
|
||||
"min-w-0 flex-1 truncate text-left text-sm hover:underline",
|
||||
task.status === "done" && "text-muted-foreground line-through"
|
||||
)}
|
||||
>
|
||||
{task.title}
|
||||
</button>
|
||||
<Badge variant="outline" className={cn("text-[10px]", PRIORITY[task.priority]?.badge)}>
|
||||
{PRIORITY[task.priority]?.label ?? task.priority}
|
||||
</Badge>
|
||||
{task.dueDate ? (
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{format(parseISO(task.dueDate), "MMM d")}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Sections({ project }: { project: Project }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [newName, setNewName] = useState("");
|
||||
const [kind, setKind] = useState<"section" | "milestone">("section");
|
||||
|
||||
const sections = project.sections || [];
|
||||
const tasks = project.tasks || [];
|
||||
|
||||
const refresh = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["project", project.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] });
|
||||
};
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: ({ name, kind }: { name: string; kind: "section" | "milestone" }) =>
|
||||
api.post<Section>(`/projects/${project.id}/sections`, { name, kind }),
|
||||
onSuccess: () => {
|
||||
setNewName("");
|
||||
toast.success("Section added");
|
||||
refresh();
|
||||
},
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const renameMutation = useMutation({
|
||||
mutationFn: ({ sid, name }: { sid: string; name: string }) =>
|
||||
api.patch<Section>(`/projects/${project.id}/sections/${sid}`, { name }),
|
||||
onSuccess: refresh,
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: ({ sid, status }: { sid: string; status: Section["status"] }) =>
|
||||
api.patch<Section>(`/projects/${project.id}/sections/${sid}`, { status }),
|
||||
onSuccess: refresh,
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const dateMutation = useMutation({
|
||||
mutationFn: ({ sid, targetDate }: { sid: string; targetDate: string | null }) =>
|
||||
api.patch<Section>(`/projects/${project.id}/sections/${sid}`, { targetDate }),
|
||||
onSuccess: refresh,
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (sid: string) => api.delete(`/projects/${project.id}/sections/${sid}`),
|
||||
onSuccess: () => {
|
||||
toast.success("Section deleted");
|
||||
refresh();
|
||||
},
|
||||
onError: (err) => toast.error(errorMessage(err)),
|
||||
});
|
||||
|
||||
const submitNewSection = () => {
|
||||
const name = newName.trim();
|
||||
if (!name || addMutation.isPending) return;
|
||||
addMutation.mutate({ name, kind });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Input
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
submitNewSection();
|
||||
}
|
||||
}}
|
||||
placeholder="New section name…"
|
||||
className="h-9"
|
||||
/>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
size="sm"
|
||||
value={kind}
|
||||
onValueChange={(v) => {
|
||||
if (v) setKind(v as "section" | "milestone");
|
||||
}}
|
||||
>
|
||||
<ToggleGroupItem value="section" aria-label="Section kind">
|
||||
Section
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="milestone" aria-label="Milestone kind">
|
||||
<Flag className="mr-1 h-3.5 w-3.5" />
|
||||
Milestone
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={submitNewSection}
|
||||
disabled={!newName.trim() || addMutation.isPending}
|
||||
>
|
||||
<Plus className="h-4 w-4" /> Add
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{sections.length === 0 ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">No sections yet.</p>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{sections.map((section) => {
|
||||
const taskCount = tasks.filter((t) => t.sectionId === section.id).length;
|
||||
return (
|
||||
<div
|
||||
key={section.id}
|
||||
className="flex flex-wrap items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
|
||||
>
|
||||
<Badge variant="outline" className="shrink-0 gap-1 text-[10px]">
|
||||
{section.kind === "milestone" ? (
|
||||
<>
|
||||
<Flag className="h-3 w-3" /> Milestone
|
||||
</>
|
||||
) : (
|
||||
"Section"
|
||||
)}
|
||||
</Badge>
|
||||
<InlineText
|
||||
value={section.name}
|
||||
onSave={(name) => renameMutation.mutate({ sid: section.id, name })}
|
||||
className="text-sm"
|
||||
/>
|
||||
<InlineSelect
|
||||
value={section.status}
|
||||
options={SECTION_STATUS_OPTIONS}
|
||||
displayValue={(v) => (
|
||||
<Badge className={SECTION_STATUS[v]?.badge}>
|
||||
{SECTION_STATUS[v]?.label ?? v}
|
||||
</Badge>
|
||||
)}
|
||||
onSave={(status) =>
|
||||
statusMutation.mutate({
|
||||
sid: section.id,
|
||||
status: status as Section["status"],
|
||||
})
|
||||
}
|
||||
/>
|
||||
<InlineDate
|
||||
value={section.targetDate}
|
||||
onSave={(targetDate) =>
|
||||
dateMutation.mutate({ sid: section.id, targetDate })
|
||||
}
|
||||
/>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{taskCount} {taskCount === 1 ? "task" : "tasks"}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto h-6 w-6 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => deleteMutation.mutate(section.id)}
|
||||
aria-label={"Delete section " + section.name}
|
||||
title="Delete section"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user