b71e2cff3c
Implemented comprehensive document editing capabilities:
1. Created EditDocumentDialog component:
- Responsive MUI Dialog with fullScreen on mobile
- Wraps DocumentForm in edit mode
- Proper close handlers with refetch
2. Enhanced DocumentForm to support edit mode:
- Added mode prop ('create' | 'edit')
- Pre-populate all fields from initialValues
- Use useUpdateDocument hook when in edit mode
- Multi-select for shared vehicles (insurance only)
- Vehicle and document type disabled in edit mode
- Optional file upload in edit mode
- Dynamic button text (Create/Save Changes)
3. Updated DocumentDetailPage:
- Added Edit button with proper touch targets
- Integrated EditDocumentDialog
- Refetch document on successful edit
Mobile-first implementation:
- All touch targets >= 44px
- Dialog goes fullScreen on mobile
- Form fields stack on mobile
- Shared vehicle checkboxes have min-h-[44px]
- Buttons use flex-wrap for mobile overflow
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
IconButton,
|
|
useMediaQuery,
|
|
useTheme,
|
|
} from '@mui/material';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { DocumentForm } from './DocumentForm';
|
|
import type { DocumentRecord } from '../types/documents.types';
|
|
|
|
interface EditDocumentDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
document: DocumentRecord;
|
|
}
|
|
|
|
export const EditDocumentDialog: React.FC<EditDocumentDialogProps> = ({
|
|
open,
|
|
onClose,
|
|
document,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
fullScreen={isSmall}
|
|
maxWidth="md"
|
|
fullWidth
|
|
PaperProps={{
|
|
sx: {
|
|
maxHeight: isSmall ? '100%' : '90vh',
|
|
m: isSmall ? 0 : 2,
|
|
},
|
|
}}
|
|
>
|
|
{isSmall && (
|
|
<IconButton
|
|
aria-label="close"
|
|
onClick={onClose}
|
|
sx={{
|
|
position: 'absolute',
|
|
right: 8,
|
|
top: 8,
|
|
color: (theme) => theme.palette.grey[500],
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
)}
|
|
|
|
<DialogTitle sx={{ pb: 1 }}>Edit Document</DialogTitle>
|
|
|
|
<DialogContent sx={{ pt: 2 }}>
|
|
<DocumentForm
|
|
mode="edit"
|
|
documentId={document.id}
|
|
initialValues={document}
|
|
onSuccess={() => {
|
|
onClose();
|
|
}}
|
|
onCancel={onClose}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default EditDocumentDialog;
|