fibdash/client/src/components/admin/KontoTable.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 KontoTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      konten: [],
      loading: true,
      error: null,
      dialogOpen: false,
      editingKonto: null,
      confirmDialogOpen: false,
      itemToDelete: null,
      formData: {
        konto: '',
        name: '',
      },
    };
    this.authService = new AuthService();
    
    // Focus management refs
    this.triggerRef = React.createRef();
    this.dialogRef = React.createRef();
    this.confirmDialogRef = React.createRef();
  }

  componentDidMount() {
    this.loadKonten();
  }

  loadKonten = async () => {
    try {
      const response = await this.authService.apiCall('/admin/konten');
      if (response && response.ok) {
        const data = await response.json();
        this.setState({ konten: data.konten, loading: false });
      } else {
        this.setState({ error: 'Fehler beim Laden der Konten', loading: false });
      }
    } catch (error) {
      console.error('Error loading konten:', error);
      this.setState({ error: 'Fehler beim Laden der Konten', loading: false });
    }
  };

  handleOpenDialog = (konto = null) => {
    // Store reference to the trigger element for focus restoration
    this.triggerRef.current = document.activeElement;
    
    this.setState({
      dialogOpen: true,
      editingKonto: konto,
      formData: konto ? {
        konto: konto.konto,
        name: konto.name,
      } : {
        konto: '',
        name: '',
      },
    });
  };

  handleCloseDialog = () => {
    this.setState({
      dialogOpen: false,
      editingKonto: null,
      formData: {
        konto: '',
        name: '',
      },
    });
    
    // 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.konto.trim() !== '' && 
           formData.name.trim() !== '';
  };

  handleSave = async () => {
    const { editingKonto, formData } = this.state;
    
    try {
      const url = editingKonto 
        ? `/admin/konten/${editingKonto.id}`
        : '/admin/konten';
      
      const method = editingKonto ? '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.loadKonten();
      } else {
        const errorData = await response.json();
        this.setState({ error: errorData.error || 'Fehler beim Speichern' });
      }
    } catch (error) {
      console.error('Error saving konto:', error);
      this.setState({ error: 'Fehler beim Speichern des Kontos' });
    }
  };

  handleDeleteClick = (konto) => {
    // Store reference to the trigger element for focus restoration
    this.triggerRef.current = document.activeElement;
    
    this.setState({
      confirmDialogOpen: true,
      itemToDelete: konto,
    });
  };

  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/konten/${konto.id}`, {
        method: 'DELETE',
      });

      if (response && response.ok) {
        this.loadKonten();
      } else {
        const errorData = await response.json();
        this.setState({ error: errorData.error || 'Fehler beim Löschen' });
      }
    } catch (error) {
      console.error('Error deleting konto:', error);
      this.setState({ error: 'Fehler beim Löschen des Kontos' });
    }
  };

  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 { konten, loading, error, dialogOpen, editingKonto, 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">Konten</Typography>
          <Button
            variant="contained"
            startIcon={<AddIcon />}
            onClick={() => this.handleOpenDialog()}
          >
            Neues Konto
          </Button>
        </Box>

        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Konto</TableCell>
                <TableCell>Name</TableCell>
                <TableCell align="right">Aktionen</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {konten.map((konto) => (
                <TableRow key={konto.id}>
                  <TableCell>{konto.konto}</TableCell>
                  <TableCell>{konto.name}</TableCell>
                  <TableCell align="right">
                    <IconButton
                      size="small"
                      onClick={() => this.handleOpenDialog(konto)}
                    >
                      <EditIcon />
                    </IconButton>
                    <IconButton
                      size="small"
                                              onClick={() => this.handleDeleteClick(konto)}
                      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="konto-dialog-title"
          aria-describedby="konto-dialog-content"
        >
          <DialogTitle id="konto-dialog-title">
            {editingKonto ? 'Konto bearbeiten' : 'Neues Konto'}
          </DialogTitle>
          <DialogContent id="konto-dialog-content">
            <TextField
              autoFocus
              margin="dense"
              label="Konto"
              fullWidth
              variant="outlined"
              value={formData.konto}
              onChange={this.handleInputChange('konto')}
              sx={{ mb: 2 }}
              helperText="z.B. 5400"
            />
            <TextField
              margin="dense"
              label="Name"
              fullWidth
              variant="outlined"
              value={formData.name}
              onChange={this.handleInputChange('name')}
              helperText="z.B. Wareneingang 19%"
            />
          </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="konto-confirm-dialog-title"
          aria-describedby="konto-confirm-dialog-content"
        >
          <DialogTitle id="konto-confirm-dialog-title">Löschen bestätigen</DialogTitle>
          <DialogContent id="konto-confirm-dialog-content">
            <Typography>
              {this.state.itemToDelete && 
                `Konto "${this.state.itemToDelete.konto} - ${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 KontoTable;