411 lines
12 KiB
JavaScript
411 lines
12 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
TextField,
|
|
IconButton,
|
|
Typography,
|
|
Alert,
|
|
CircularProgress,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
} from '@mui/material';
|
|
import {
|
|
Add as AddIcon,
|
|
Edit as EditIcon,
|
|
Delete as DeleteIcon,
|
|
} from '@mui/icons-material';
|
|
import AuthService from '../../services/AuthService';
|
|
|
|
class KreditorTable extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
kreditoren: [],
|
|
loading: true,
|
|
error: null,
|
|
dialogOpen: false,
|
|
editingKreditor: null,
|
|
confirmDialogOpen: false,
|
|
itemToDelete: null,
|
|
formData: {
|
|
iban: '',
|
|
name: '',
|
|
kreditorId: '',
|
|
is_banking: false,
|
|
},
|
|
};
|
|
this.authService = new AuthService();
|
|
|
|
// Focus management refs
|
|
this.triggerRef = React.createRef();
|
|
this.dialogRef = React.createRef();
|
|
this.confirmDialogRef = React.createRef();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadKreditoren();
|
|
}
|
|
|
|
loadKreditoren = async () => {
|
|
try {
|
|
const response = await this.authService.apiCall('/admin/kreditoren');
|
|
if (response && response.ok) {
|
|
const data = await response.json();
|
|
this.setState({ kreditoren: data.kreditoren, loading: false });
|
|
} else {
|
|
this.setState({ error: 'Fehler beim Laden der Kreditoren', loading: false });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading kreditoren:', error);
|
|
this.setState({ error: 'Fehler beim Laden der Kreditoren', loading: false });
|
|
}
|
|
};
|
|
|
|
handleOpenDialog = (kreditor = null) => {
|
|
// Store reference to the trigger element for focus restoration
|
|
this.triggerRef.current = document.activeElement;
|
|
|
|
this.setState({
|
|
dialogOpen: true,
|
|
editingKreditor: kreditor,
|
|
formData: kreditor ? {
|
|
iban: kreditor.iban || '',
|
|
name: kreditor.name,
|
|
kreditorId: kreditor.kreditorId,
|
|
is_banking: Boolean(kreditor.is_banking),
|
|
} : {
|
|
iban: '',
|
|
name: '',
|
|
kreditorId: '',
|
|
is_banking: false,
|
|
},
|
|
});
|
|
};
|
|
|
|
handleCloseDialog = () => {
|
|
this.setState({
|
|
dialogOpen: false,
|
|
editingKreditor: null,
|
|
formData: {
|
|
iban: '',
|
|
name: '',
|
|
kreditorId: '',
|
|
is_banking: false,
|
|
},
|
|
});
|
|
|
|
// Restore focus to the trigger element after dialog closes
|
|
setTimeout(() => {
|
|
if (this.triggerRef.current && this.triggerRef.current.focus) {
|
|
this.triggerRef.current.focus();
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
handleInputChange = (field) => (event) => {
|
|
this.setState({
|
|
formData: {
|
|
...this.state.formData,
|
|
[field]: event.target.value,
|
|
},
|
|
});
|
|
};
|
|
|
|
handleCheckboxChange = (field) => (event) => {
|
|
this.setState({
|
|
formData: {
|
|
...this.state.formData,
|
|
[field]: event.target.checked,
|
|
},
|
|
});
|
|
};
|
|
|
|
isFormValid = () => {
|
|
const { formData } = this.state;
|
|
// Name and kreditorId are always required
|
|
const basicFieldsValid = formData.name.trim() !== '' && formData.kreditorId.trim() !== '';
|
|
|
|
// IBAN is optional for banking accounts, required for regular kreditors
|
|
const ibanValid = formData.is_banking || formData.iban.trim() !== '';
|
|
|
|
return basicFieldsValid && ibanValid;
|
|
};
|
|
|
|
handleSave = async () => {
|
|
const { editingKreditor, formData } = this.state;
|
|
|
|
try {
|
|
const url = editingKreditor
|
|
? `/admin/kreditoren/${editingKreditor.id}`
|
|
: '/admin/kreditoren';
|
|
|
|
const method = editingKreditor ? 'PUT' : 'POST';
|
|
|
|
const response = await this.authService.apiCall(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (response && response.ok) {
|
|
this.handleCloseDialog();
|
|
this.loadKreditoren();
|
|
} else {
|
|
const errorData = await response.json();
|
|
this.setState({ error: errorData.error || 'Fehler beim Speichern' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving kreditor:', error);
|
|
this.setState({ error: 'Fehler beim Speichern des Kreditors' });
|
|
}
|
|
};
|
|
|
|
handleDeleteClick = (kreditor) => {
|
|
// Store reference to the trigger element for focus restoration
|
|
this.triggerRef.current = document.activeElement;
|
|
|
|
this.setState({
|
|
confirmDialogOpen: true,
|
|
itemToDelete: kreditor,
|
|
});
|
|
};
|
|
|
|
handleDeleteConfirm = async () => {
|
|
const { itemToDelete } = this.state;
|
|
if (!itemToDelete) return;
|
|
|
|
this.setState({ confirmDialogOpen: false, itemToDelete: null });
|
|
|
|
// Restore focus to the trigger element after dialog closes
|
|
setTimeout(() => {
|
|
if (this.triggerRef.current && this.triggerRef.current.focus) {
|
|
this.triggerRef.current.focus();
|
|
}
|
|
}, 100);
|
|
|
|
try {
|
|
const response = await this.authService.apiCall(`/admin/kreditoren/${kreditor.id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response && response.ok) {
|
|
this.loadKreditoren();
|
|
} else {
|
|
const errorData = await response.json();
|
|
this.setState({ error: errorData.error || 'Fehler beim Löschen' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting kreditor:', error);
|
|
this.setState({ error: 'Fehler beim Löschen des Kreditors' });
|
|
}
|
|
};
|
|
|
|
handleDeleteCancel = () => {
|
|
this.setState({
|
|
confirmDialogOpen: false,
|
|
itemToDelete: null,
|
|
});
|
|
|
|
// Restore focus to the trigger element after dialog closes
|
|
setTimeout(() => {
|
|
if (this.triggerRef.current && this.triggerRef.current.focus) {
|
|
this.triggerRef.current.focus();
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
render() {
|
|
const { kreditoren, loading, error, dialogOpen, editingKreditor, formData } = this.state;
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
|
|
<Typography variant="h6">Kreditoren</Typography>
|
|
<Button
|
|
variant="contained"
|
|
startIcon={<AddIcon />}
|
|
onClick={() => this.handleOpenDialog()}
|
|
>
|
|
Neuer Kreditor
|
|
</Button>
|
|
</Box>
|
|
|
|
{error && (
|
|
<Alert severity="error" sx={{ mb: 2 }}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Kreditor ID</TableCell>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>IBAN</TableCell>
|
|
<TableCell>Typ</TableCell>
|
|
<TableCell align="right">Aktionen</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{kreditoren.map((kreditor) => (
|
|
<TableRow key={kreditor.id}>
|
|
<TableCell>{kreditor.kreditorId}</TableCell>
|
|
<TableCell>{kreditor.name}</TableCell>
|
|
<TableCell style={{
|
|
color: kreditor.is_banking ? '#ff5722' : 'inherit',
|
|
fontWeight: kreditor.is_banking ? 'bold' : 'normal'
|
|
}}>
|
|
{kreditor.iban || 'Keine IBAN'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{kreditor.is_banking ?
|
|
<span style={{ color: '#ff5722', fontWeight: 'bold' }}>Banking</span> :
|
|
'Kreditor'
|
|
}
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => this.handleOpenDialog(kreditor)}
|
|
>
|
|
<EditIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => this.handleDeleteClick(kreditor)}
|
|
color="error"
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
|
|
<Dialog
|
|
open={dialogOpen}
|
|
onClose={this.handleCloseDialog}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
ref={this.dialogRef}
|
|
disableAutoFocus={false}
|
|
disableEnforceFocus={false}
|
|
disableRestoreFocus={true}
|
|
aria-labelledby="kreditor-dialog-title"
|
|
aria-describedby="kreditor-dialog-content"
|
|
>
|
|
<DialogTitle id="kreditor-dialog-title">
|
|
{editingKreditor ? 'Kreditor bearbeiten' : 'Neuer Kreditor'}
|
|
</DialogTitle>
|
|
<DialogContent id="kreditor-dialog-content">
|
|
<TextField
|
|
autoFocus
|
|
margin="dense"
|
|
label="Kreditor ID"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={formData.kreditorId}
|
|
onChange={this.handleInputChange('kreditorId')}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
<TextField
|
|
margin="dense"
|
|
label="Name"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={formData.name}
|
|
onChange={this.handleInputChange('name')}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
<TextField
|
|
margin="dense"
|
|
label="IBAN"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={formData.iban}
|
|
onChange={this.handleInputChange('iban')}
|
|
helperText={formData.is_banking ? "IBAN ist optional für Banking-Konten" : ""}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={formData.is_banking}
|
|
onChange={this.handleCheckboxChange('is_banking')}
|
|
color="primary"
|
|
/>
|
|
}
|
|
label="Banking-Konto (z.B. PayPal) - benötigt manuelle Kreditor-Zuordnung"
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={this.handleCloseDialog}>Abbrechen</Button>
|
|
<Button
|
|
onClick={this.handleSave}
|
|
variant="contained"
|
|
disabled={!this.isFormValid()}
|
|
>
|
|
Speichern
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{/* Confirmation Dialog */}
|
|
<Dialog
|
|
open={this.state.confirmDialogOpen}
|
|
onClose={this.handleDeleteCancel}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
ref={this.confirmDialogRef}
|
|
disableAutoFocus={false}
|
|
disableEnforceFocus={false}
|
|
disableRestoreFocus={true}
|
|
aria-labelledby="kreditor-confirm-dialog-title"
|
|
aria-describedby="kreditor-confirm-dialog-content"
|
|
>
|
|
<DialogTitle id="kreditor-confirm-dialog-title">Löschen bestätigen</DialogTitle>
|
|
<DialogContent id="kreditor-confirm-dialog-content">
|
|
<Typography>
|
|
{this.state.itemToDelete &&
|
|
`Kreditor "${this.state.itemToDelete.name}" wirklich löschen?`
|
|
}
|
|
</Typography>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={this.handleDeleteCancel}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button onClick={this.handleDeleteConfirm} color="error" variant="contained">
|
|
Löschen
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default KreditorTable; |