tliu93
ef7ea6b971
- 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
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
/**
|
|
* ConfirmDeleteModal — generic二次确认 (confirm-before-delete) dialog.
|
|
* Used by both poo and location delete flows (M2-T10, reused by T09).
|
|
*/
|
|
|
|
import { Modal, Stack, Text, Button, Group } from '@mantine/core'
|
|
|
|
export interface ConfirmDeleteModalProps {
|
|
/** Message shown to the user, e.g. "Delete this poo record?" */
|
|
message: string
|
|
/** Whether the delete action is in flight. */
|
|
loading?: boolean
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export function ConfirmDeleteModal({
|
|
message,
|
|
loading = false,
|
|
onConfirm,
|
|
onCancel,
|
|
}: ConfirmDeleteModalProps) {
|
|
return (
|
|
<Modal opened onClose={onCancel} title="Confirm Delete" size="sm" data-testid="confirm-delete-modal">
|
|
<Stack gap="md">
|
|
<Text data-testid="confirm-delete-message">{message}</Text>
|
|
<Group justify="flex-end" gap="sm">
|
|
<Button
|
|
variant="default"
|
|
onClick={onCancel}
|
|
data-testid="confirm-delete-cancel"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
color="red"
|
|
loading={loading}
|
|
onClick={onConfirm}
|
|
data-testid="confirm-delete-confirm"
|
|
>
|
|
Delete
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Modal>
|
|
)
|
|
}
|