Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x | /**
* @file AppSettingsDialog.tsx
* @module app/settings/AppSettingsDialog
*
* @summary
* Thin dialog container for application settings.
* Manages dialog open/close state and delegates form rendering to AppSettingsForm.
*
* @enterprise
* - Thin container: dialog state and layout only
* - Delegates form orchestration to AppSettingsForm
* - Uses custom hook (useAppSettingsForm) for state management
* - Consistent MUI dialog styling and animations
* - Responsive design with mobile full-width support
* - Full TypeDoc coverage for dialog orchestration
*/
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useTranslation } from 'react-i18next';
import AppSettingsForm from './AppSettingsForm';
import { useAppSettingsForm } from './hooks';
interface AppSettingsDialogProps {
/** Whether dialog is open */
open: boolean;
/** Callback when dialog should close */
onClose: () => void;
}
/**
* Application settings dialog component.
*
* Thin container managing dialog open/close state. Delegates form orchestration
* and state management to AppSettingsForm and useAppSettingsForm hook.
*
* Integrates all settings sections through AppSettingsForm component.
*
* @param props - Component props
* @returns JSX element rendering settings dialog
*
* @example
* ```tsx
* const [settingsOpen, setSettingsOpen] = useState(false);
* <AppSettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
* ```
*/
export default function AppSettingsDialog({
open,
onClose,
}: AppSettingsDialogProps) {
const { t } = useTranslation(['common']);
const {
formState,
systemInfo,
isLoading,
handleDateFormatChange,
handleNumberFormatChange,
handleTableDensityChange,
handleResetDefaults,
} = useAppSettingsForm();
return (
<Dialog
open={open}
onClose={onClose}
maxWidth="sm"
fullWidth
slotProps={{
paper: {
sx: {
borderRadius: 2,
backgroundImage: 'none',
},
},
}}
>
{/* Dialog Title */}
<DialogTitle sx={{ fontWeight: 700, fontSize: '1.25rem', pb: 1 }}>
{t('settings.title', 'Settings')}
</DialogTitle>
{/* Dialog Content - Settings Form */}
<DialogContent dividers sx={{ py: 3 }}>
<AppSettingsForm
dateFormat={formState.dateFormat}
onDateFormatChange={handleDateFormatChange}
numberFormat={formState.numberFormat}
onNumberFormatChange={handleNumberFormatChange}
tableDensity={formState.tableDensity}
onTableDensityChange={handleTableDensityChange}
systemInfo={systemInfo}
isLoading={isLoading}
/>
</DialogContent>
{/* Dialog Actions */}
<DialogActions sx={{ p: 2, gap: 1 }}>
<Button
onClick={handleResetDefaults}
variant="outlined"
color="primary"
sx={{ textTransform: 'none', fontWeight: 600 }}
>
{t('settings.resetToDefaults', 'Reset to Defaults')}
</Button>
<Button
onClick={onClose}
variant="contained"
color="primary"
startIcon={<CloseIcon />}
sx={{ textTransform: 'none', fontWeight: 600 }}
>
{t('actions.close', 'Close')}
</Button>
</DialogActions>
</Dialog>
);
}
|