diff --git a/web/src/components/finding-case-list.tsx b/web/src/components/finding-case-list.tsx index c0b6cea..a747083 100644 --- a/web/src/components/finding-case-list.tsx +++ b/web/src/components/finding-case-list.tsx @@ -122,6 +122,7 @@ export function FindingCaseMembers({ renderRecords?: (items: Finding[]) => React.ReactNode; }) { const [page, setPage] = React.useState(1); + const [pageSize, setPageSize] = React.useState(20); const [data, setData] = React.useState<{ items: Finding[]; total: number } | null>(null); const [error, setError] = React.useState(""); const [retry, setRetry] = React.useState(0); @@ -130,7 +131,7 @@ export function FindingCaseMembers({ let active = true; setError(""); api - .findingCaseMembers(caseId, page, contextTask) + .findingCaseMembers(caseId, page, contextTask, pageSize) .then((v) => { if (active) setData(v); }) @@ -140,7 +141,7 @@ export function FindingCaseMembers({ return () => { active = false; }; - }, [caseId, page, version, contextTask, retry]); + }, [caseId, page, pageSize, version, contextTask, retry]); if (error) return ( @@ -173,14 +174,17 @@ export function FindingCaseMembers({ matched={!matchedIds || matchedIds.includes(Number(f.finding_id))} /> ))} - {data.total > 20 ? ( + {data.total > 10 ? ( setPage(1)} - pageSizeOptions={[20]} + onPageSizeChange={(size) => { + setPageSize(size); + setPage(1); + }} + pageSizeOptions={[10, 20, 50, 100]} /> ) : null} @@ -406,6 +410,7 @@ export function FindingCaseList({ onTotal?: (total: number) => void; }) { const [page, setPage] = React.useState(1); + const [pageSize, setPageSize] = React.useState(20); const [data, setData] = React.useState(null); const [error, setError] = React.useState(""); const [refresh, setRefresh] = React.useState(0); @@ -420,7 +425,7 @@ export function FindingCaseList({ let timer: ReturnType; async function load() { try { - const v = await api.findingCases({ ...JSON.parse(key), page, pageSize: 20 }); + const v = await api.findingCases({ ...JSON.parse(key), page, pageSize }); if (active) { setData(v); setError(""); @@ -436,7 +441,7 @@ export function FindingCaseList({ active = false; clearTimeout(timer); }; - }, [key, page, refresh]); + }, [key, page, pageSize, refresh]); React.useEffect(() => { if (data) onTotal?.(data.total); }, [data, onTotal]); @@ -500,11 +505,14 @@ export function FindingCaseList({ {data ? ( setPage(1)} - pageSizeOptions={[20]} + onPageSizeChange={(size) => { + setPageSize(size); + setPage(1); + }} + pageSizeOptions={[10, 20, 50, 100]} /> ) : null} diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts index bc84b21..78d240c 100644 --- a/web/src/lib/api.ts +++ b/web/src/lib/api.ts @@ -640,9 +640,9 @@ export const api = { get( `/exploration/finding-cases/${id}${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`, ), - findingCaseMembers: (id: string, page = 1, contextTask?: string) => + findingCaseMembers: (id: string, page = 1, contextTask?: string, pageSize = 20) => get( - `/exploration/finding-cases/${id}/members?page=${page}&limit=20${contextTask ? `&context_task=${encodeURIComponent(contextTask)}` : ""}`, + `/exploration/finding-cases/${id}/members?page=${page}&limit=${pageSize}${contextTask ? `&context_task=${encodeURIComponent(contextTask)}` : ""}`, ), removeFindingCaseMember: (id: string, fid: string, reason: string) => http<{ ok: boolean }>(`/exploration/finding-cases/${id}/members/${fid}`, {