158 lines
3.9 KiB
TypeScript
158 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
TextField,
|
|
MenuItem,
|
|
Box,
|
|
Alert,
|
|
} from '@mui/material';
|
|
import { Child, CreateChildData } from '@/lib/api/children';
|
|
|
|
interface ChildDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: CreateChildData) => Promise<void>;
|
|
child?: Child | null;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false }: ChildDialogProps) {
|
|
const [formData, setFormData] = useState<CreateChildData>({
|
|
name: '',
|
|
birthDate: '',
|
|
gender: 'male',
|
|
photoUrl: '',
|
|
});
|
|
const [error, setError] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
if (child) {
|
|
setFormData({
|
|
name: child.name,
|
|
birthDate: child.birthDate.split('T')[0], // Convert to YYYY-MM-DD format
|
|
gender: child.gender,
|
|
photoUrl: child.photoUrl || '',
|
|
});
|
|
} else {
|
|
setFormData({
|
|
name: '',
|
|
birthDate: '',
|
|
gender: 'male',
|
|
photoUrl: '',
|
|
});
|
|
}
|
|
setError('');
|
|
}, [child, open]);
|
|
|
|
const handleChange = (field: keyof CreateChildData) => (
|
|
e: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
setFormData({ ...formData, [field]: e.target.value });
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
setError('');
|
|
|
|
// Validation
|
|
if (!formData.name.trim()) {
|
|
setError('Please enter a name');
|
|
return;
|
|
}
|
|
if (!formData.birthDate) {
|
|
setError('Please select a birth date');
|
|
return;
|
|
}
|
|
|
|
// Check if birth date is in the future
|
|
const selectedDate = new Date(formData.birthDate);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
if (selectedDate > today) {
|
|
setError('Birth date cannot be in the future');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await onSubmit(formData);
|
|
onClose();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to save child');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
|
<DialogTitle>{child ? 'Edit Child' : 'Add Child'}</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
{error && (
|
|
<Alert severity="error" onClose={() => setError('')}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<TextField
|
|
label="Name"
|
|
value={formData.name}
|
|
onChange={handleChange('name')}
|
|
fullWidth
|
|
required
|
|
autoFocus
|
|
disabled={isLoading}
|
|
/>
|
|
|
|
<TextField
|
|
label="Birth Date"
|
|
type="date"
|
|
value={formData.birthDate}
|
|
onChange={handleChange('birthDate')}
|
|
fullWidth
|
|
required
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
disabled={isLoading}
|
|
/>
|
|
|
|
<TextField
|
|
label="Gender"
|
|
value={formData.gender}
|
|
onChange={handleChange('gender')}
|
|
fullWidth
|
|
required
|
|
select
|
|
disabled={isLoading}
|
|
>
|
|
<MenuItem value="male">Male</MenuItem>
|
|
<MenuItem value="female">Female</MenuItem>
|
|
<MenuItem value="other">Other</MenuItem>
|
|
</TextField>
|
|
|
|
<TextField
|
|
label="Photo URL (Optional)"
|
|
value={formData.photoUrl}
|
|
onChange={handleChange('photoUrl')}
|
|
fullWidth
|
|
placeholder="https://example.com/photo.jpg"
|
|
disabled={isLoading}
|
|
/>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose} disabled={isLoading}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
|
|
{isLoading ? 'Saving...' : child ? 'Update' : 'Add'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|