87acdd929e
Add number & setting API endpoints, StorageManager caches, and a Settings dialog (tabs for settings keys and number ranges) reachable from the user menu. Show Kundennummer and creation date in the Kunde list, and refactor Neuer Kunde to show an auto-generated number with group select.
76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import Tab from '@mui/material/Tab';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import NumbersIcon from '@mui/icons-material/Numbers';
|
|
import TuneIcon from '@mui/icons-material/Tune';
|
|
import NumberSettingsPanel from './NumberSettingsPanel';
|
|
import SettingsKeysPanel from './SettingsKeysPanel';
|
|
|
|
const TAB_KEYS = {
|
|
keys: 'keys',
|
|
numbers: 'numbers',
|
|
};
|
|
|
|
const TABS = [
|
|
{ id: TAB_KEYS.keys, label: 'Einstellungen', icon: <TuneIcon />, Panel: SettingsKeysPanel },
|
|
{ id: TAB_KEYS.numbers, label: 'Nummernkreise', icon: <NumbersIcon />, Panel: NumberSettingsPanel },
|
|
];
|
|
|
|
export default class SettingsDialog extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { tab: TAB_KEYS.keys };
|
|
this.handleTabChange = this.handleTabChange.bind(this);
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { open } = this.props;
|
|
if (!open && prevProps.open) {
|
|
this.setState({ tab: TAB_KEYS.keys });
|
|
}
|
|
}
|
|
|
|
handleTabChange(_event, value) {
|
|
this.setState({ tab: value });
|
|
}
|
|
|
|
render() {
|
|
const { open, onClose } = this.props;
|
|
const { tab } = this.state;
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
|
<DialogTitle>Einstellungen</DialogTitle>
|
|
<Tabs
|
|
value={tab}
|
|
onChange={this.handleTabChange}
|
|
variant="fullWidth"
|
|
sx={{ px: 3 }}
|
|
>
|
|
{TABS.map((t) => (
|
|
<Tab key={t.id} icon={t.icon} iconPosition="start" label={t.label} value={t.id} />
|
|
))}
|
|
</Tabs>
|
|
<DialogContent dividers>
|
|
<Box sx={{ display: 'grid' }}>
|
|
{TABS.map((t) => (
|
|
<Box
|
|
key={t.id}
|
|
sx={{
|
|
gridArea: '1 / 1',
|
|
visibility: t.id === tab ? undefined : 'hidden',
|
|
}}
|
|
>
|
|
<t.Panel />
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
} |