EditableTable.js

import React, { useState } from 'react';
import {
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, TextField, Button, IconButton, CircularProgress, Container
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import axios from 'axios';

const EditableTable = ({ eventId, initialParticipants }) => {
  const [participants, setParticipants] = useState(initialParticipants);
  const [loading, setLoading] = useState(false);
  const [toDelete, setToDelete] = useState([]);

  const handleChange = (index, field, value) => {
    const newParticipants = [...participants];
    newParticipants[index][field] = value;
    setParticipants(newParticipants);
  };

  const handleMarkForDeletion = (participantId) => {
    if (toDelete.includes(participantId)) {
      setToDelete(toDelete.filter(id => id !== participantId));
    } else {
      setToDelete([...toDelete, participantId]);
    }
  };

  const handleSave = async () => {
    setLoading(true);
    try {
      // Update participants
      for (const participant of participants) {
        if (!toDelete.includes(participant.participantsId)) {
          await axios.put(`/api/events/${eventId}/participants`, participant);
        }
      }
      // Delete participants
      for (const participantId of toDelete) {
        await axios.delete(`/api/events/${eventId}/participants`, { data: { participantsId: participantId } });
      }
      setLoading(false);
      //alert('Daten erfolgreich gespeichert');
    } catch (error) {
      console.error('Fehler beim Speichern der Daten:', error);
      setLoading(false);
    }
  };

  return (
    <div>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Vorname</TableCell>
              <TableCell>Nachname</TableCell>
              <TableCell>E-Mail</TableCell>
              <TableCell>Startnummer</TableCell>
              <TableCell>Transponder</TableCell>
              <TableCell>Aktionen</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {participants.map((participant, index) => (
              <TableRow
                key={participant.participantsId}
                style={{ backgroundColor: toDelete.includes(participant.participantsId) ? 'lightgray' : 'white' }}
              >
                <TableCell>
                  <TextField
                    value={participant.first_name}
                    onChange={(e) => handleChange(index, 'first_name', e.target.value)}
                    disabled={toDelete.includes(participant.participantsId)}
                  />
                </TableCell>
                <TableCell>
                  <TextField
                    value={participant.last_name}
                    onChange={(e) => handleChange(index, 'last_name', e.target.value)}
                    disabled={toDelete.includes(participant.participantsId)}
                  />
                </TableCell>
                <TableCell>
                  <TextField
                    value={participant.email}
                    onChange={(e) => handleChange(index, 'email', e.target.value)}
                    disabled={toDelete.includes(participant.participantsId)}
                  />
                </TableCell>
                <TableCell>
                  <TextField
                    value={participant.startNumber}
                    onChange={(e) => handleChange(index, 'startNumber', e.target.value)}
                    disabled={toDelete.includes(participant.participantsId)}
                  />
                </TableCell>
                <TableCell>
                  <TextField
                    value={participant.transponder1}
                    onChange={(e) => handleChange(index, 'transponder1', e.target.value)}
                    disabled={toDelete.includes(participant.participantsId)}
                  />
                </TableCell>
                <TableCell>
                  <IconButton
                    onClick={() => handleMarkForDeletion(participant.participantsId)}
                    disabled={loading}
                  >
                    <DeleteIcon color={toDelete.includes(participant.participantsId) ? 'error' : 'inherit'} />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <Button
          variant="contained"
          color="primary"
          onClick={handleSave}
          disabled={loading}
          style={{ marginTop: 20 }}
        >
          {loading ? <CircularProgress size={24} /> : 'Speichern'}
      </Button>
    </div>
  );
};

export default EditableTable;