dashfront/src/components/manifest/ManifestLines.jsx

import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import AddIcon from '@mui/icons-material/Add';
import { PanelTile } from 'dashgui/panels';
import { LINE_COLUMNS } from './manifestConfig';
import ManifestFormLine from './ManifestFormLine';

class ManifestLines extends PureComponent {
  render() {
    const {
      lines,
      saving,
      linesColor,
      onLineChange,
      onAddLine,
      onRemoveLine,
      onSave,
      columns = LINE_COLUMNS,
    } = this.props;

    return (
      <PanelTile wide={3} minHeight={280} color={linesColor} title="Artikel">
        <Stack spacing={1.5}>
          <TableContainer>
            <Table size="small" stickyHeader>
              <TableHead>
                <TableRow>
                  {columns.map((col) => (
                    <TableCell
                      key={col.id}
                      align={col.align}
                      sx={{
                        width: col.width,
                        whiteSpace: 'nowrap',
                        bgcolor: linesColor,
                      }}
                    >
                      {col.label}
                    </TableCell>
                  ))}
                  <TableCell padding="checkbox" sx={{ bgcolor: linesColor }} />
                </TableRow>
              </TableHead>
              <TableBody>
                {lines.map((line) => (
                  <ManifestFormLine
                    key={line.key}
                    line={line}
                    columns={columns}
                    saving={saving}
                    onChange={onLineChange}
                    onRemove={onRemoveLine}
                  />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
            <Button
              size="small"
              startIcon={<AddIcon />}
              disabled={saving}
              onClick={onAddLine}
            >
              Zeile hinzufügen
            </Button>
            <Box sx={{ flex: 1 }} />
            <Button
              variant="contained"
              size="small"
              disabled={saving}
              onClick={onSave}
            >
              {saving ? 'Speichern…' : 'Speichern'}
            </Button>
          </Box>
        </Stack>
      </PanelTile>
    );
  }
}

export default ManifestLines;