Implement navigation and view management in DataViewer, adding Dashboard and TableManagement components. Update export data handling based on current view. Create new components for managing Kreditor, Konto, and BU tables with CRUD functionality. Refactor admin routes to remove admin access checks and streamline data handling for various entities.
This commit is contained in:
sebseb7
308
client/src/components/admin/KreditorTable.js
Normal file
308
client/src/components/admin/KreditorTable.js
Normal file
@@ -0,0 +1,308 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
IconButton,
|
||||
Typography,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
} 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: '',
|
||||
},
|
||||
};
|
||||
this.authService = new AuthService();
|
||||
}
|
||||
|
||||
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) => {
|
||||
this.setState({
|
||||
dialogOpen: true,
|
||||
editingKreditor: kreditor,
|
||||
formData: kreditor ? {
|
||||
iban: kreditor.iban,
|
||||
name: kreditor.name,
|
||||
kreditorId: kreditor.kreditorId,
|
||||
} : {
|
||||
iban: '',
|
||||
name: '',
|
||||
kreditorId: '',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
handleCloseDialog = () => {
|
||||
this.setState({
|
||||
dialogOpen: false,
|
||||
editingKreditor: null,
|
||||
formData: {
|
||||
iban: '',
|
||||
name: '',
|
||||
kreditorId: '',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
handleInputChange = (field) => (event) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[field]: event.target.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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) => {
|
||||
this.setState({
|
||||
confirmDialogOpen: true,
|
||||
itemToDelete: kreditor,
|
||||
});
|
||||
};
|
||||
|
||||
handleDeleteConfirm = async () => {
|
||||
const { itemToDelete } = this.state;
|
||||
if (!itemToDelete) return;
|
||||
|
||||
this.setState({ confirmDialogOpen: false, itemToDelete: null });
|
||||
|
||||
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,
|
||||
});
|
||||
};
|
||||
|
||||
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 align="right">Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{kreditoren.map((kreditor) => (
|
||||
<TableRow key={kreditor.id}>
|
||||
<TableCell>{kreditor.kreditorId}</TableCell>
|
||||
<TableCell>{kreditor.name}</TableCell>
|
||||
<TableCell>{kreditor.iban}</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>
|
||||
<DialogTitle>
|
||||
{editingKreditor ? 'Kreditor bearbeiten' : 'Neuer Kreditor'}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<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')}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={this.handleCloseDialog}>Abbrechen</Button>
|
||||
<Button onClick={this.handleSave} variant="contained">
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={this.state.confirmDialogOpen}
|
||||
onClose={this.handleDeleteCancel}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle>Löschen bestätigen</DialogTitle>
|
||||
<DialogContent>
|
||||
<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;
|
||||
Reference in New Issue
Block a user