fibdash/client/src/components/admin/KreditorTable.js

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();
    
    // 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,
      } : {
        iban: '',
        name: '',
        kreditorId: '',
      },
    });
  };

  handleCloseDialog = () => {
    this.setState({
      dialogOpen: false,
      editingKreditor: null,
      formData: {
        iban: '',
        name: '',
        kreditorId: '',
      },
    });
    
    // 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,
      },
    });
  };

  isFormValid = () => {
    const { formData } = this.state;
    return formData.iban.trim() !== '' && 
           formData.name.trim() !== '' && 
           formData.kreditorId.trim() !== '';
  };

  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 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
          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')}
            />
          </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;