M2-T10: build records management UI (paginated lists + single-record CRUD)
- reusable src/records/ module: useUpdate/useDelete Poo+Location hooks (encodeURIComponent PK, prefix-based query invalidation), EditPooModal, EditLocationModal, ConfirmDeleteModal — exported for the map (T09) to reuse - RecordsPage (/records): paginated poo + location tables (page size 100), edit + delete-with-confirm, refresh on success - query keys ['poo']/['locations'] so map and list invalidations cross-cut - typed client only; vitest tests
This commit is contained in:
@@ -0,0 +1,375 @@
|
||||
/**
|
||||
* RecordsPage — paginated lists + edit/delete for poo and location records (M2-T10).
|
||||
*
|
||||
* - Poo list: GET /api/poo, query key ['poo', {limit, offset}], page size 100.
|
||||
* - Location list: GET /api/locations, query key ['locations', {limit, offset}], page size 100.
|
||||
* - Edit and delete use reusable components from src/records/.
|
||||
* - Delete has a二次确认 modal before calling DELETE.
|
||||
* - Pagination with Mantine Pagination; next/prev fetches per-page (no full-table pull).
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
Container,
|
||||
Title,
|
||||
Table,
|
||||
Pagination,
|
||||
Button,
|
||||
Group,
|
||||
Tabs,
|
||||
Text,
|
||||
Loader,
|
||||
Center,
|
||||
Alert,
|
||||
Stack,
|
||||
Badge,
|
||||
ScrollArea,
|
||||
} from '@mantine/core'
|
||||
import apiClient from '../api/client'
|
||||
import { EditPooModal, EditLocationModal, ConfirmDeleteModal } from '../records'
|
||||
import { useDeletePoo, useDeleteLocation } from '../records'
|
||||
import type { PooRecord, LocationRecord } from '../records'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Constants
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const PAGE_SIZE = 100
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Poo list section
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function PooList() {
|
||||
const [page, setPage] = useState(1)
|
||||
const offset = (page - 1) * PAGE_SIZE
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['poo', { limit: PAGE_SIZE, offset }],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.GET('/api/poo', {
|
||||
params: { query: { limit: PAGE_SIZE, offset } },
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const [editRecord, setEditRecord] = useState<PooRecord | null>(null)
|
||||
const [deleteRecord, setDeleteRecord] = useState<PooRecord | null>(null)
|
||||
|
||||
const deleteMutation = useDeletePoo()
|
||||
|
||||
async function handleDeleteConfirm() {
|
||||
if (!deleteRecord) return
|
||||
try {
|
||||
await deleteMutation.mutateAsync(deleteRecord.timestamp)
|
||||
setDeleteRecord(null)
|
||||
} catch {
|
||||
// Leave the modal open so the user can retry; error display is in the modal loading state.
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Center pt="xl" data-testid="poo-loading">
|
||||
<Loader />
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
if (isError || !data) {
|
||||
return (
|
||||
<Alert color="red" data-testid="poo-load-error">
|
||||
Failed to load poo records. Please refresh.
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
const totalPages = data.items.length === PAGE_SIZE ? page + 1 : page
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" c="dimmed" data-testid="poo-count">
|
||||
Page {page} · {data.items.length} record{data.items.length !== 1 ? 's' : ''} shown
|
||||
</Text>
|
||||
<Badge variant="outline" color="orange">
|
||||
offset {offset}
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<ScrollArea>
|
||||
<Table striped highlightOnHover withTableBorder data-testid="poo-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Timestamp</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th>Latitude</Table.Th>
|
||||
<Table.Th>Longitude</Table.Th>
|
||||
<Table.Th style={{ textAlign: 'right' }}>Actions</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{data.items.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5}>
|
||||
<Text c="dimmed" ta="center" size="sm">
|
||||
No records.
|
||||
</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : (
|
||||
data.items.map((row) => (
|
||||
<Table.Tr key={row.timestamp} data-testid={`poo-row-${row.timestamp}`}>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>{row.timestamp}</Table.Td>
|
||||
<Table.Td>{row.status}</Table.Td>
|
||||
<Table.Td>{row.latitude}</Table.Td>
|
||||
<Table.Td>{row.longitude}</Table.Td>
|
||||
<Table.Td>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
onClick={() => setEditRecord(row)}
|
||||
data-testid={`poo-edit-${row.timestamp}`}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="red"
|
||||
onClick={() => setDeleteRecord(row)}
|
||||
data-testid={`poo-delete-${row.timestamp}`}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
total={totalPages}
|
||||
data-testid="poo-pagination"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Edit modal */}
|
||||
{editRecord && (
|
||||
<EditPooModal
|
||||
record={editRecord}
|
||||
onClose={() => setEditRecord(null)}
|
||||
onSaved={() => setEditRecord(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation modal */}
|
||||
{deleteRecord && (
|
||||
<ConfirmDeleteModal
|
||||
message={`Delete poo record at ${deleteRecord.timestamp}?`}
|
||||
loading={deleteMutation.isPending}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => setDeleteRecord(null)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Location list section
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function LocationList() {
|
||||
const [page, setPage] = useState(1)
|
||||
const offset = (page - 1) * PAGE_SIZE
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['locations', { limit: PAGE_SIZE, offset }],
|
||||
queryFn: async () => {
|
||||
const res = await apiClient.GET('/api/locations', {
|
||||
params: { query: { limit: PAGE_SIZE, offset } },
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const [editRecord, setEditRecord] = useState<LocationRecord | null>(null)
|
||||
const [deleteRecord, setDeleteRecord] = useState<LocationRecord | null>(null)
|
||||
|
||||
const deleteMutation = useDeleteLocation()
|
||||
|
||||
async function handleDeleteConfirm() {
|
||||
if (!deleteRecord) return
|
||||
try {
|
||||
await deleteMutation.mutateAsync({
|
||||
person: deleteRecord.person,
|
||||
datetime: deleteRecord.datetime,
|
||||
})
|
||||
setDeleteRecord(null)
|
||||
} catch {
|
||||
// Leave modal open.
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Center pt="xl" data-testid="location-loading">
|
||||
<Loader />
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
if (isError || !data) {
|
||||
return (
|
||||
<Alert color="red" data-testid="location-load-error">
|
||||
Failed to load location records. Please refresh.
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
const totalPages = data.items.length === PAGE_SIZE ? page + 1 : page
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" c="dimmed" data-testid="location-count">
|
||||
Page {page} · {data.items.length} record{data.items.length !== 1 ? 's' : ''} shown
|
||||
</Text>
|
||||
<Badge variant="outline" color="blue">
|
||||
offset {offset}
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<ScrollArea>
|
||||
<Table striped highlightOnHover withTableBorder data-testid="location-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Person</Table.Th>
|
||||
<Table.Th>Datetime</Table.Th>
|
||||
<Table.Th>Latitude</Table.Th>
|
||||
<Table.Th>Longitude</Table.Th>
|
||||
<Table.Th>Altitude</Table.Th>
|
||||
<Table.Th style={{ textAlign: 'right' }}>Actions</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{data.items.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={6}>
|
||||
<Text c="dimmed" ta="center" size="sm">
|
||||
No records.
|
||||
</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : (
|
||||
data.items.map((row) => {
|
||||
const rowKey = `${row.person}__${row.datetime}`
|
||||
return (
|
||||
<Table.Tr key={rowKey} data-testid={`location-row-${rowKey}`}>
|
||||
<Table.Td>{row.person}</Table.Td>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>{row.datetime}</Table.Td>
|
||||
<Table.Td>{row.latitude}</Table.Td>
|
||||
<Table.Td>{row.longitude}</Table.Td>
|
||||
<Table.Td>{row.altitude ?? '—'}</Table.Td>
|
||||
<Table.Td>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
onClick={() => setEditRecord(row)}
|
||||
data-testid={`location-edit-${rowKey}`}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="red"
|
||||
onClick={() => setDeleteRecord(row)}
|
||||
data-testid={`location-delete-${rowKey}`}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
total={totalPages}
|
||||
data-testid="location-pagination"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Edit modal */}
|
||||
{editRecord && (
|
||||
<EditLocationModal
|
||||
record={editRecord}
|
||||
onClose={() => setEditRecord(null)}
|
||||
onSaved={() => setEditRecord(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation modal */}
|
||||
{deleteRecord && (
|
||||
<ConfirmDeleteModal
|
||||
message={`Delete location record for ${deleteRecord.person} at ${deleteRecord.datetime}?`}
|
||||
loading={deleteMutation.isPending}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => setDeleteRecord(null)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// RecordsPage — top-level
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function RecordsPage() {
|
||||
return (
|
||||
<Container size="xl" pt="xl" pb="xl" data-testid="records-page">
|
||||
<Title order={2} mb="lg">
|
||||
Records
|
||||
</Title>
|
||||
|
||||
<Tabs defaultValue="poo">
|
||||
<Tabs.List mb="md">
|
||||
<Tabs.Tab value="poo" data-testid="tab-poo">
|
||||
Poo
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab value="locations" data-testid="tab-locations">
|
||||
Locations
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="poo">
|
||||
<PooList />
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="locations">
|
||||
<LocationList />
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user