119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
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,
|
|
supplierArticlesMap = {},
|
|
supplierArticlesByLineKey = {},
|
|
supplierArticlesLoading = false,
|
|
loadingLineKeys = {},
|
|
onSkuBlur,
|
|
onCreateArticle,
|
|
onSearchArticle,
|
|
onRemoveSupplierArticle,
|
|
busySupplierArticleLineKeys = {},
|
|
} = 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, index) => {
|
|
const lineKey = line.key ?? index;
|
|
const rawSku = line.sku != null ? String(line.sku).trim() : '';
|
|
const matched =
|
|
supplierArticlesByLineKey[lineKey] ||
|
|
(rawSku ? supplierArticlesMap[rawSku.toLowerCase()] || supplierArticlesMap[rawSku] : null);
|
|
const isLineLoading =
|
|
loadingLineKeys[lineKey] ||
|
|
(supplierArticlesLoading && !matched);
|
|
|
|
return (
|
|
<ManifestFormLine
|
|
key={lineKey}
|
|
line={line.key != null ? line : { ...line, key: index }}
|
|
columns={columns}
|
|
saving={saving}
|
|
supplierArticle={matched}
|
|
loading={Boolean(isLineLoading)}
|
|
supplierArticleBusy={Boolean(busySupplierArticleLineKeys[lineKey])}
|
|
onChange={onLineChange}
|
|
onRemove={onRemoveLine}
|
|
onSkuBlur={onSkuBlur}
|
|
onCreateArticle={onCreateArticle}
|
|
onSearchArticle={onSearchArticle}
|
|
onRemoveSupplierArticle={onRemoveSupplierArticle}
|
|
/>
|
|
);
|
|
})}
|
|
</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;
|