u

src/components/manifest/ManifestLines.jsx

@@ -9,8 +9,9 @@ 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 DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
 import { PanelTile } from 'dashgui/panels';
-import { LINE_COLUMNS } from './manifestConfig';
+import { LINE_COLUMNS, hasArticleLines } from './manifestConfig';
 import ManifestFormLine from './ManifestFormLine';
 
 class ManifestLines extends PureComponent {
@@ -22,6 +23,7 @@ class ManifestLines extends PureComponent {
       onLineChange,
       onAddLine,
       onRemoveLine,
+      onRemoveAllLines,
       onSave,
       columns = LINE_COLUMNS,
       supplierArticlesMap = {},
@@ -33,11 +35,29 @@ class ManifestLines extends PureComponent {
       onSearchArticle,
       onRemoveSupplierArticle,
       busySupplierArticleLineKeys = {},
-      wide = 3,
+      wide = 4,
+      ledgerLinesById = {},
+      onBookLine,
     } = this.props;
 
+    const hasArticles = hasArticleLines(lines);
+
     return (
-      <PanelTile wide={wide} minHeight={280} color={linesColor} title="Artikel">
+      <PanelTile
+        wide={wide}
+        minHeight={280}
+        color={linesColor}
+        title="Artikel"
+        sx={{
+          ...(wide >= 4 ? { gridColumn: { xs: '1 / -1', sm: '1 / -1', md: 'span 4' } } : {}),
+          ...(!hasArticles
+            ? {
+                border: '1.5px solid',
+                borderColor: 'error.main',
+              }
+            : {}),
+        }}
+      >
         <Stack spacing={1.5}>
           <TableContainer>
             <Table size="small" stickyHeader>
@@ -52,47 +72,53 @@ class ManifestLines extends PureComponent {
                         whiteSpace: 'nowrap',
                         bgcolor: linesColor,
                         fontWeight: 700,
+                        px: 1,
+                        py: 0.75,
                       }}
                     >
                       {col.label}
                     </TableCell>
                   ))}
-                  <TableCell padding="checkbox" sx={{ bgcolor: linesColor, borderBottom: 'none' }} />
+                  <TableCell padding="none" sx={{ bgcolor: linesColor, borderBottom: 'none', width: 40 }} />
                 </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);
+                {Array.isArray(lines) &&
+                  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);
+                    const ledgerLine = line.id != null ? ledgerLinesById[line.id] : null;
 
-                  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}
-                    />
-                  );
-                })}
+                    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}
+                        ledgerLine={ledgerLine}
+                        onBookLine={onBookLine}
+                      />
+                    );
+                  })}
               </TableBody>
             </Table>
           </TableContainer>
-          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
             <Button
               size="small"
               startIcon={<AddIcon />}
@@ -101,6 +127,15 @@ class ManifestLines extends PureComponent {
             >
               Zeile hinzufügen
             </Button>
+            <Button
+              size="small"
+              color="error"
+              startIcon={<DeleteSweepOutlinedIcon />}
+              disabled={saving || !lines || lines.length === 0}
+              onClick={onRemoveAllLines}
+            >
+              Alle Zeilen entfernen
+            </Button>
           </Box>
         </Stack>
       </PanelTile>