219 lines
12 KiB
TypeScript
219 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useEffect } from 'react';
|
|
import { Plus, Code2, Trash2 } from 'lucide-react';
|
|
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
|
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
|
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
|
|
import { useRequirementStore } from '@/stores/useRequirementStore';
|
|
import { useMemberStore } from '@/stores/useMemberStore';
|
|
import { useAuthStore } from '@/stores/useAuthStore';
|
|
import { DevTaskRow } from './DevTaskRow';
|
|
import { DevTaskCreateModal } from './DevTaskCreateModal';
|
|
import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
|
|
import { calcGroupProgress, DEV_TASK_STATUS_LABEL, aggregateDevTaskHours, devTaskIntervals } from '@/lib/dev-task';
|
|
import { calcTwoMetrics } from '@/lib/work-hours';
|
|
import { Pagination, usePagination } from '@/components/Pagination';
|
|
import { SearchInput, matchTitleOrNo } from '@/components/SearchInput';
|
|
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
|
import { orderByRequirementForGrouping } from '@/lib/requirement-grouping';
|
|
import { buildEffortSummaryMetrics, sumPositiveHours } from '@/lib/effort-summary';
|
|
import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
|
|
|
|
interface Props {
|
|
versionId: string;
|
|
requirementIds: string[];
|
|
versionDeadline?: string;
|
|
}
|
|
|
|
export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props) {
|
|
const { tasks, fetchTasks, deleteTask } = useDevTaskStore();
|
|
const { categories, fetchCategories } = useTaskCategoryStore();
|
|
const { fetchWorklogs } = useTaskWorklogStore();
|
|
const { requirements } = useRequirementStore();
|
|
const { members } = useMemberStore();
|
|
const user = useAuthStore((s) => s.user);
|
|
|
|
useEffect(() => { fetchTasks(); }, [fetchTasks]);
|
|
useEffect(() => { fetchCategories(); }, [fetchCategories]);
|
|
useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
|
|
|
|
const reqIdSet = useMemo(() => new Set(requirementIds), [requirementIds]);
|
|
const versionTasks = useMemo(
|
|
() => tasks.filter((t) => reqIdSet.has(t.requirementId)),
|
|
[tasks, reqIdSet],
|
|
);
|
|
|
|
const [filterAssignee, setFilterAssignee] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('');
|
|
const [filterBlocked, setFilterBlocked] = useState('');
|
|
const [filterCategory, setFilterCategory] = useState('');
|
|
const [keyword, setKeyword] = useState('');
|
|
const debouncedKeyword = useDebouncedValue(keyword, 300);
|
|
|
|
const filteredTasks = useMemo(() => {
|
|
let result = versionTasks;
|
|
if (filterAssignee) result = result.filter((t) => t.assigneeId === filterAssignee);
|
|
if (filterStatus) result = result.filter((t) => t.status === filterStatus);
|
|
if (filterBlocked === 'yes') result = result.filter((t) => t.isBlocked);
|
|
if (filterBlocked === 'no') result = result.filter((t) => !t.isBlocked);
|
|
if (filterCategory) result = result.filter((t) => t.categoryId === filterCategory);
|
|
if (debouncedKeyword) result = result.filter((t) => matchTitleOrNo({ title: t.title, no: t.taskNo }, debouncedKeyword));
|
|
return result;
|
|
}, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory, debouncedKeyword]);
|
|
|
|
const orderedTasks = useMemo(
|
|
() => orderByRequirementForGrouping(filteredTasks, requirementIds, (task) => task.requirementId),
|
|
[filteredTasks, requirementIds],
|
|
);
|
|
|
|
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(orderedTasks, 20);
|
|
|
|
const progress = calcGroupProgress(versionTasks);
|
|
const { actual: actualHours } = aggregateDevTaskHours(versionTasks);
|
|
const { manhours } = useMemo(() => calcTwoMetrics(devTaskIntervals(versionTasks)), [versionTasks]);
|
|
const effortMetrics = useMemo(
|
|
() => buildEffortSummaryMetrics({
|
|
aiEstimateHours: sumPositiveHours(versionTasks, (task) => task.aiEstimateHours),
|
|
estimateHours: sumPositiveHours(versionTasks, (task) => task.estimateHours),
|
|
actualHours,
|
|
manhours,
|
|
}),
|
|
[versionTasks, actualHours, manhours],
|
|
);
|
|
const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
|
|
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
|
|
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
|
|
|
const toggleSelect = (id: string) => {
|
|
const next = new Set(selectedIds);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
setSelectedIds(next);
|
|
};
|
|
const handleBatchDelete = () => {
|
|
if (selectedIds.size === 0) return;
|
|
if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
|
|
selectedIds.forEach((id) => deleteTask(id));
|
|
setSelectedIds(new Set());
|
|
};
|
|
|
|
const groupedByReq = useMemo(() => {
|
|
const map = new Map<string, DevTask[]>();
|
|
for (const t of paged) {
|
|
const list = map.get(t.requirementId) || [];
|
|
list.push(t);
|
|
map.set(t.requirementId, list);
|
|
}
|
|
return map;
|
|
}, [paged]);
|
|
|
|
const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
|
|
const categoryLabelWidthEm = useMemo(
|
|
() => Math.max(4, ...categories.map((category) => category.name.length)) + 1,
|
|
[categories],
|
|
);
|
|
const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
|
|
const allTaskIds = useMemo(() => versionTasks.map((t) => t.id), [versionTasks]);
|
|
|
|
const assignees = useMemo(() => Array.from(new Set(versionTasks.map((t) => t.assigneeId))), [versionTasks]);
|
|
const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory || debouncedKeyword);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
|
|
<Code2 className="h-3.5 w-3.5 text-[var(--accent)] shrink-0" />
|
|
<span className="text-[12px] font-medium text-[var(--ink)] shrink-0">{progress}%</span>
|
|
<div className="h-1.5 w-20 rounded-full bg-[var(--bg)] overflow-hidden shrink-0">
|
|
<div className="h-full rounded-full bg-[var(--accent)]" style={{ width: `${progress}%` }} />
|
|
</div>
|
|
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务</span>
|
|
{effortMetrics.map((metric) => (
|
|
<span key={metric.label} className="text-[11px] text-[var(--ink-muted)] shrink-0">
|
|
{metric.label} <span className="tabular-nums text-[var(--ink)]">{metric.value}</span>
|
|
</span>
|
|
))}
|
|
{blockedCount > 0 && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{blockedCount}阻塞</span>}
|
|
|
|
<span className="w-px h-4 bg-[var(--line)] mx-1 shrink-0" />
|
|
|
|
<SearchInput value={keyword} onChange={(v) => { setKeyword(v); setPage(1); }} placeholder="搜索标题/编号" />
|
|
<select value={filterAssignee} onChange={(e) => { setFilterAssignee(e.target.value); setPage(1); }} className="h-6 rounded border border-[var(--line)] bg-[var(--bg-card)] px-1.5 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
|
|
<option value="">负责人</option>
|
|
{user?.name && <option value={user.name}>我的</option>}
|
|
{assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
|
|
</select>
|
|
<select value={filterStatus} onChange={(e) => { setFilterStatus(e.target.value); setPage(1); }} className="h-6 rounded border border-[var(--line)] bg-[var(--bg-card)] px-1.5 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
|
|
<option value="">状态</option>
|
|
{(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
|
</select>
|
|
<select value={filterBlocked} onChange={(e) => { setFilterBlocked(e.target.value); setPage(1); }} className="h-6 rounded border border-[var(--line)] bg-[var(--bg-card)] px-1.5 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
|
|
<option value="">阻塞</option>
|
|
<option value="yes">阻塞中</option>
|
|
<option value="no">正常</option>
|
|
</select>
|
|
<select value={filterCategory} onChange={(e) => { setFilterCategory(e.target.value); setPage(1); }} className="h-6 rounded border border-[var(--line)] bg-[var(--bg-card)] px-1.5 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
|
|
<option value="">类型</option>
|
|
{categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
{hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setKeyword(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</button>}
|
|
|
|
<div className="ml-auto flex items-center gap-2 shrink-0">
|
|
{selectedIds.size > 0 && (
|
|
<button onClick={handleBatchDelete} className="flex items-center gap-1 h-6 px-2 rounded text-[11px] font-medium bg-red-500 text-white hover:bg-red-600">
|
|
<Trash2 className="h-3 w-3" />删除{selectedIds.size}项
|
|
</button>
|
|
)}
|
|
<button onClick={() => setShowCreate(true)} className="flex items-center gap-1 h-6 px-2.5 rounded text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
|
|
<Plus className="h-3 w-3" />新建
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{filteredTasks.length === 0 ? (
|
|
<div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
|
|
<p className="text-[13px] text-[var(--ink-muted)]">{hasFilter ? '没有匹配的任务' : '暂无开发任务'}</p>
|
|
{!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
|
|
</div>
|
|
) : (
|
|
Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
|
|
const req = requirementMap.get(reqId);
|
|
const reqProgress = calcGroupProgress(reqTasks);
|
|
return (
|
|
<div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
|
|
<div className="flex items-center bg-[var(--bg-subtle)] border-b border-[var(--line)]">
|
|
<div className="pl-4 flex items-center">
|
|
<input type="checkbox" checked={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) ids.forEach((id) => next.delete(id)); else ids.forEach((id) => next.add(id)); setSelectedIds(next); }} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
|
|
</div>
|
|
<div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-2">
|
|
<span className="h-2 w-2 shrink-0" />
|
|
<span className="w-16 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={req?.code}>{req?.code}</span>
|
|
<span className="min-w-0 flex-1 truncate text-[12px] font-medium text-[var(--ink)]">{req?.title}</span>
|
|
<span className="shrink-0 text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
|
|
</div>
|
|
</div>
|
|
{reqTasks.map((t) => (
|
|
<div key={t.id} className="flex items-center">
|
|
<div className="pl-4 flex items-center">
|
|
<input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<DevTaskRow task={t} category={categoryMap.get(t.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} onClick={() => setSelectedTaskId(t.id)} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
|
|
{total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}
|
|
|
|
{showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} versionDeadline={versionDeadline} onClose={() => setShowCreate(false)} />}
|
|
{selectedTaskId && <DevTaskDetailDrawer taskId={selectedTaskId} allTaskIds={allTaskIds} onClose={() => setSelectedTaskId(null)} />}
|
|
</div>
|
|
);
|
|
}
|