u
This commit is contained in:
seb
195
src/components/CompanySettingsDialog.jsx
Normal file
195
src/components/CompanySettingsDialog.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import ToggleButton from '@mui/material/ToggleButton';
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { company } from '../api';
|
||||
import { useAuth } from '../auth/useAuth';
|
||||
import {
|
||||
ISO639_OPTIONS,
|
||||
companyLanguageToIso639,
|
||||
parseTaxRate,
|
||||
} from '../utils/companyForm';
|
||||
|
||||
export default function CompanySettingsDialog({ open, onClose }) {
|
||||
const { user } = useAuth();
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [name, setName] = useState('');
|
||||
const [iso639, setIso639] = useState('de');
|
||||
const [taxrate, setTaxrate] = useState('');
|
||||
const [reducedtaxrate, setReducedtaxrate] = useState('');
|
||||
|
||||
const companyId = user?.selectedCompanyId;
|
||||
const parsedTaxrate = parseTaxRate(taxrate);
|
||||
const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
|
||||
const canSave =
|
||||
name.trim() !== '' &&
|
||||
ISO639_OPTIONS.includes(iso639) &&
|
||||
parsedTaxrate != null &&
|
||||
parsedReducedtaxrate != null;
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !companyId) return;
|
||||
|
||||
let active = true;
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await company.getById(companyId);
|
||||
if (!active) return;
|
||||
const item = data.company;
|
||||
setName(item.name ?? '');
|
||||
setIso639(companyLanguageToIso639(item));
|
||||
setTaxrate(item.taxrate != null ? String(item.taxrate) : '');
|
||||
setReducedtaxrate(item.reducedtaxrate != null ? String(item.reducedtaxrate) : '');
|
||||
} catch (err) {
|
||||
if (!active) return;
|
||||
setError(err.message);
|
||||
} finally {
|
||||
if (active) setLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [open, companyId]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
if (!companyId || !canSave) {
|
||||
setError('Bitte alle Pflichtfelder ausfüllen.');
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await company.update(companyId, {
|
||||
name: name.trim(),
|
||||
iso639,
|
||||
taxrate: parsedTaxrate,
|
||||
reducedtaxrate: parsedReducedtaxrate,
|
||||
});
|
||||
enqueueSnackbar('Unternehmen gespeichert.', { variant: 'success' });
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Unternehmen bearbeiten</DialogTitle>
|
||||
<Box component="form" onSubmit={handleSubmit} noValidate>
|
||||
<DialogContent>
|
||||
{error ? (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
label="Name"
|
||||
value={name}
|
||||
disabled={busy}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
autoComplete="organization"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<FormControl required>
|
||||
<FormLabel sx={{ mb: 0.5 }}>Sprache</FormLabel>
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
required
|
||||
size="small"
|
||||
value={iso639}
|
||||
disabled={busy}
|
||||
onChange={(_event, value) => {
|
||||
if (value) setIso639(value);
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="de">Deutsch</ToggleButton>
|
||||
<ToggleButton value="en">English</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</FormControl>
|
||||
|
||||
<Stack direction="row" spacing={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
type="number"
|
||||
label="Normalsatz"
|
||||
value={taxrate}
|
||||
disabled={busy}
|
||||
onChange={(e) => setTaxrate(e.target.value)}
|
||||
error={taxrate !== '' && parsedTaxrate == null}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>,
|
||||
},
|
||||
htmlInput: { min: 0, max: 100, step: 0.01, required: true },
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
type="number"
|
||||
label="Ermäßigter Satz"
|
||||
value={reducedtaxrate}
|
||||
disabled={busy}
|
||||
onChange={(e) => setReducedtaxrate(e.target.value)}
|
||||
error={reducedtaxrate !== '' && parsedReducedtaxrate == null}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>,
|
||||
},
|
||||
htmlInput: { min: 0, max: 100, step: 0.01, required: true },
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={onClose} disabled={busy}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" variant="contained" disabled={busy || loading || !canSave}>
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
244
src/components/CompanySetupDialog.jsx
Normal file
244
src/components/CompanySetupDialog.jsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import ToggleButton from '@mui/material/ToggleButton';
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import BusinessIcon from '@mui/icons-material/Business';
|
||||
import { company } from '../api';
|
||||
import { useAuth } from '../auth/useAuth';
|
||||
import {
|
||||
defaultIso639,
|
||||
ISO639_OPTIONS,
|
||||
parseTaxRate,
|
||||
} from '../utils/companyForm';
|
||||
|
||||
export default function CompanySetupDialog() {
|
||||
const { createCompany, selectCompany, logout } = useAuth();
|
||||
const [companies, setCompanies] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [name, setName] = useState('');
|
||||
const [iso639, setIso639] = useState(defaultIso639);
|
||||
const [taxrate, setTaxrate] = useState('19');
|
||||
const [reducedtaxrate, setReducedtaxrate] = useState('7');
|
||||
|
||||
const hasCompanies = companies.length > 0;
|
||||
|
||||
const loadCompanies = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await company.list();
|
||||
setCompanies(data.companies ?? []);
|
||||
} catch {
|
||||
setCompanies([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadCompanies();
|
||||
}, [loadCompanies]);
|
||||
|
||||
const parsedTaxrate = parseTaxRate(taxrate);
|
||||
const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
|
||||
const canCreate =
|
||||
name.trim() !== '' &&
|
||||
ISO639_OPTIONS.includes(iso639) &&
|
||||
parsedTaxrate != null &&
|
||||
parsedReducedtaxrate != null;
|
||||
|
||||
const handleSelect = async (companyId) => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await selectCompany(companyId);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (event) => {
|
||||
event.preventDefault();
|
||||
if (!canCreate) {
|
||||
setError('Bitte alle Pflichtfelder ausfüllen.');
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await createCompany({
|
||||
name: name.trim(),
|
||||
iso639,
|
||||
taxrate: parsedTaxrate,
|
||||
reducedtaxrate: parsedReducedtaxrate,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open disableEscapeKeyDown maxWidth="sm" fullWidth>
|
||||
<DialogTitle>
|
||||
{loading
|
||||
? 'Unternehmen'
|
||||
: hasCompanies
|
||||
? 'Unternehmen auswählen'
|
||||
: 'Unternehmen anlegen'}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
{!loading ? (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{hasCompanies
|
||||
? 'Wählen Sie ein bestehendes Unternehmen oder legen Sie ein neues an.'
|
||||
: 'Legen Sie Ihr Unternehmen an, um fortzufahren.'}
|
||||
</Typography>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={3}>
|
||||
{hasCompanies ? (
|
||||
<Box>
|
||||
<List disablePadding sx={{ bgcolor: 'background.paper', borderRadius: 1 }}>
|
||||
{companies.map((item) => (
|
||||
<ListItemButton
|
||||
key={item.id}
|
||||
disabled={busy}
|
||||
onClick={() => handleSelect(item.id)}
|
||||
>
|
||||
<BusinessIcon sx={{ mr: 1.5, color: 'primary.main' }} />
|
||||
<ListItemText primary={item.name} />
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
{hasCompanies ? <Divider>oder</Divider> : null}
|
||||
|
||||
<Box component="form" onSubmit={handleCreate} noValidate>
|
||||
<Stack spacing={2}>
|
||||
{hasCompanies ? (
|
||||
<Typography variant="subtitle2">Neues Unternehmen anlegen</Typography>
|
||||
) : null}
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
label="Name"
|
||||
value={name}
|
||||
disabled={busy}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
autoComplete="organization"
|
||||
autoFocus={!hasCompanies}
|
||||
/>
|
||||
|
||||
<FormControl required>
|
||||
<FormLabel sx={{ mb: 0.5 }}>Sprache</FormLabel>
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
required
|
||||
size="small"
|
||||
value={iso639}
|
||||
disabled={busy}
|
||||
onChange={(_event, value) => {
|
||||
if (value) setIso639(value);
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="de">Deutsch</ToggleButton>
|
||||
<ToggleButton value="en">English</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</FormControl>
|
||||
|
||||
<Stack direction="row" spacing={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
type="number"
|
||||
label="Normalsatz"
|
||||
value={taxrate}
|
||||
disabled={busy}
|
||||
onChange={(e) => setTaxrate(e.target.value)}
|
||||
error={taxrate !== '' && parsedTaxrate == null}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>,
|
||||
},
|
||||
htmlInput: { min: 0, max: 100, step: 0.01, required: true },
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
required
|
||||
size="small"
|
||||
type="number"
|
||||
label="Ermäßigter Satz"
|
||||
value={reducedtaxrate}
|
||||
disabled={busy}
|
||||
onChange={(e) => setReducedtaxrate(e.target.value)}
|
||||
error={reducedtaxrate !== '' && parsedReducedtaxrate == null}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>,
|
||||
},
|
||||
htmlInput: { min: 0, max: 100, step: 0.01, required: true },
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Button type="submit" variant="contained" disabled={busy || !canCreate}>
|
||||
Anlegen
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
color="inherit"
|
||||
disabled={busy}
|
||||
onClick={() => logout()}
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
Abmelden
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -7,12 +7,15 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import LogoutIcon from '@mui/icons-material/Logout';
|
||||
import BusinessIcon from '@mui/icons-material/Business';
|
||||
import { useAuth } from '../auth/useAuth';
|
||||
import CompanySettingsDialog from './CompanySettingsDialog';
|
||||
|
||||
// Menu open/close state is local; toggling it only re-renders this component.
|
||||
export default function UserMenu() {
|
||||
const { user, logout } = useAuth();
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
return (
|
||||
@@ -36,6 +39,18 @@ export default function UserMenu() {
|
||||
transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
||||
>
|
||||
<MenuItem disabled>{user?.email}</MenuItem>
|
||||
<MenuItem
|
||||
disabled={!user?.selectedCompanyId}
|
||||
onClick={() => {
|
||||
setAnchorEl(null);
|
||||
setSettingsOpen(true);
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<BusinessIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Unternehmen</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorEl(null);
|
||||
@@ -48,6 +63,7 @@ export default function UserMenu() {
|
||||
<ListItemText>Sign out</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<CompanySettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user