213 行
9.8 KiB
TypeScript
213 行
9.8 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { cancelTodo, completeTodo, createTodo, fetchTodos } from "../api/todos";
|
|
import { fetchProjects } from "../api/projects";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
|
|
import { MetricCard } from "../components/patterns/MetricCard";
|
|
import { SectionPanel } from "../components/patterns/SectionPanel";
|
|
import { Button } from "../components/ui/button";
|
|
import { Input } from "../components/ui/input";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
|
import { toast } from "sonner";
|
|
import { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { TEST_IDS } from "../lib/testIds";
|
|
|
|
function errorMessage(error: unknown, fallback: string) {
|
|
if (isApiError(error)) {
|
|
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
|
}
|
|
return error instanceof Error ? error.message : fallback;
|
|
}
|
|
|
|
export function TodosPage() {
|
|
const queryClient = useQueryClient();
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [projectId, setProjectId] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<"todo" | "doing" | "done" | "cancelled" | "">("");
|
|
const todosQuery = useQuery({
|
|
queryKey: ["todos", statusFilter],
|
|
queryFn: () => fetchTodos({ status: statusFilter || undefined }),
|
|
});
|
|
const projectsQuery = useQuery({
|
|
queryKey: ["projects", "todo-options"],
|
|
queryFn: () => fetchProjects({}),
|
|
});
|
|
|
|
const todoItems = todosQuery.data?.items ?? [];
|
|
const todoStats = useMemo(() => {
|
|
return todoItems.reduce(
|
|
(acc, item) => {
|
|
acc.total += 1;
|
|
if (item.status === "todo") acc.todo += 1;
|
|
if (item.status === "doing") acc.doing += 1;
|
|
if (item.status === "done") acc.done += 1;
|
|
return acc;
|
|
},
|
|
{ total: 0, todo: 0, doing: 0, done: 0 },
|
|
);
|
|
}, [todoItems]);
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: () => createTodo({ title, description: description || undefined, projectId: projectId || null }),
|
|
onSuccess: async () => {
|
|
setTitle("");
|
|
setDescription("");
|
|
setProjectId("");
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["todos"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
|
]);
|
|
toast.success("待办已创建");
|
|
},
|
|
onError: (error) => toast.error(errorMessage(error, "创建待办失败")),
|
|
});
|
|
|
|
const completeMutation = useMutation({
|
|
mutationFn: (id: string) => completeTodo(id),
|
|
onSuccess: async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["todos"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
|
]);
|
|
toast.success("待办已完成");
|
|
},
|
|
onError: (error) => toast.error(errorMessage(error, "完成待办失败")),
|
|
});
|
|
|
|
const cancelMutation = useMutation({
|
|
mutationFn: (id: string) => cancelTodo(id),
|
|
onSuccess: async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["todos"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
|
]);
|
|
toast.success("待办已取消");
|
|
},
|
|
onError: (error) => toast.error(errorMessage(error, "取消待办失败")),
|
|
});
|
|
|
|
return (
|
|
<ListWorkspace>
|
|
<PageHeader title="待办" subtitle="员工维护个人待办，老板看高优先级和未完成项。支持直接挂到项目。" />
|
|
|
|
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<MetricCard title="全部待办" value={todoStats.total} note="当前筛选结果" />
|
|
<MetricCard title="待处理" value={todoStats.todo} note="建议优先清空新增事项" tone={todoStats.todo > 0 ? "warning" : "neutral"} />
|
|
<MetricCard title="进行中" value={todoStats.doing} note="重点跟进阻塞项" />
|
|
<MetricCard title="已完成" value={todoStats.done} note="已完成项会持续留痕" />
|
|
</section>
|
|
|
|
<div className="page-shell-grid">
|
|
<div className="space-y-6">
|
|
<FilterBar className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="text-sm text-zinc-500">按状态筛选后，列表只保留当前关注的工作项。</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<select className="select-std w-[180px]" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as typeof statusFilter)}>
|
|
<option value="">全部状态</option>
|
|
<option value="todo">todo</option>
|
|
<option value="doing">doing</option>
|
|
<option value="done">done</option>
|
|
<option value="cancelled">cancelled</option>
|
|
</select>
|
|
<Button type="button" variant="secondary" onClick={() => queryClient.invalidateQueries({ queryKey: ["todos"] })}>
|
|
刷新列表
|
|
</Button>
|
|
</div>
|
|
</FilterBar>
|
|
|
|
<SectionPanel title="待办列表" description={todoItems.length ? `当前共 ${todoItems.length} 条待办` : "暂无待办，建议从当前周计划或项目动作拆出任务。"}>
|
|
{todosQuery.isError ? <div className="mb-4 text-sm text-red-600">{errorMessage(todosQuery.error, "加载待办失败")}</div> : null}
|
|
<PrimaryTable>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>标题</TableHead>
|
|
<TableHead>项目</TableHead>
|
|
<TableHead>负责人</TableHead>
|
|
<TableHead>优先级</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{todosQuery.isLoading ? (
|
|
<TableRow>
|
|
<TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
|
|
待办加载中...
|
|
</TableCell>
|
|
</TableRow>
|
|
) : todoItems.length ? (
|
|
todoItems.map((item) => (
|
|
<TableRow data-testid={TEST_IDS.todo.row} key={item.id}>
|
|
<TableCell>
|
|
<div className="font-medium text-zinc-900">{item.title}</div>
|
|
<div className="text-xs text-zinc-500">{item.description ?? "-"}</div>
|
|
</TableCell>
|
|
<TableCell>{item.project ? `${item.project.projectNo} · ${item.project.name}` : "-"}</TableCell>
|
|
<TableCell>{item.assignee?.name ?? "-"}</TableCell>
|
|
<TableCell>{item.priority}</TableCell>
|
|
<TableCell>{item.status}</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
data-testid={TEST_IDS.todo.complete}
|
|
size="sm"
|
|
type="button"
|
|
disabled={completeMutation.isPending || item.status === "done"}
|
|
onClick={() => completeMutation.mutate(item.id)}
|
|
>
|
|
完成
|
|
</Button>
|
|
<Button size="sm" variant="secondary" type="button" disabled={cancelMutation.isPending || item.status === "cancelled"} onClick={() => cancelMutation.mutate(item.id)}>
|
|
取消
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
|
|
当前没有符合条件的待办。
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</PrimaryTable>
|
|
</SectionPanel>
|
|
</div>
|
|
|
|
<SectionPanel title="新增待办" description="建议把周报计划、项目跟进或临时事项都拆成清晰动作。">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Input data-testid={TEST_IDS.todo.createTitle} placeholder="待办标题" value={title} onChange={(event) => setTitle(event.target.value)} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Input placeholder="补充说明（可选）" value={description} onChange={(event) => setDescription(event.target.value)} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<select className="select-std" value={projectId} onChange={(event) => setProjectId(event.target.value)}>
|
|
<option value="">不关联项目</option>
|
|
{(projectsQuery.data?.items ?? []).map((item) => (
|
|
<option key={item.id} value={item.id}>
|
|
{item.projectNo} · {item.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<Button data-testid={TEST_IDS.todo.createSubmit} type="button" onClick={() => createMutation.mutate()} disabled={createMutation.isPending || !title.trim()}>
|
|
{createMutation.isPending ? "新建中..." : "新建待办"}
|
|
</Button>
|
|
</div>
|
|
</SectionPanel>
|
|
</div>
|
|
</ListWorkspace>
|
|
);
|
|
}
|
|
|
|
export default TodosPage;
|