u

src/components/manifest/ManifestFormLine.jsx

@@ -2,6 +2,7 @@ import { Fragment, PureComponent } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
@@ -155,6 +156,7 @@ class ManifestFormLine extends PureComponent {
   }
 
   handleStartEdit(columnId) {
+    if (columnId === 'pos' || columnId === 'shippable') return;
     const { saving } = this.props;
     const isFullyLedgered = this.isFullyLedgered();
     const isDisabled = saving || isFullyLedgered || (columnId === 'sku' && Boolean(this.props.isOnShipment));
@@ -236,6 +238,79 @@ class ManifestFormLine extends PureComponent {
       );
     }
 
+    if (id === 'shippable') {
+      const isShippable = line.shippable !== false;
+      const isFullyLedgered = this.isFullyLedgered();
+      const isDisabled = saving || isFullyLedgered;
+
+      const hasPosCol = columns?.[0]?.id === 'pos';
+      const isFirstInput = hasPosCol ? colIdx === 1 : colIdx === 0;
+      const isLast = colIdx === totalCols - 1;
+
+      const topLeftRadius = isFirstInput && isFirstLine ? 4 : 0;
+      const topRightRadius = isLast && isFirstLine ? 4 : 0;
+      const bottomRightRadius = isLast && isLastLine ? 4 : 0;
+      const bottomLeftRadius = isFirstInput && isLastLine ? 4 : 0;
+      const borderRadius = `${topLeftRadius}px ${topRightRadius}px ${bottomRightRadius}px ${bottomLeftRadius}px`;
+
+      const { dirtyFields } = this.props;
+      const isFieldDirty = Boolean(dirtyFields && (dirtyFields.__all__ || dirtyFields[id]));
+
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: isFirstLine ? 40 : 41,
+            minHeight: isFirstLine ? 40 : 41,
+            maxHeight: isFirstLine ? 40 : 41,
+            boxSizing: 'border-box',
+            position: 'relative',
+            ml: isFirstInput ? 0 : '-1px',
+            width: isFirstInput ? '100%' : 'calc(100% + 1px)',
+            mt: isFirstLine ? 0 : '-1px',
+            borderRadius,
+            border: '1px solid',
+            borderColor: isFieldDirty
+              ? 'warning.main'
+              : isFullyLedgered
+                ? LOCKED_CELL_BORDER
+                : 'rgba(0, 0, 0, 0.23)',
+            zIndex: 1,
+            cursor: isDisabled ? 'default' : 'pointer',
+            ...(isFullyLedgered && !isFieldDirty && {
+              bgcolor: LOCKED_CELL_BG,
+            }),
+            ...(isFieldDirty && {
+              bgcolor: 'rgba(237, 108, 2, 0.08)',
+              zIndex: 2,
+            }),
+            '&:hover': isDisabled
+              ? undefined
+              : {
+                  borderColor: isFieldDirty ? 'warning.main' : 'rgba(0, 0, 0, 0.87)',
+                },
+          }}
+          onClick={isDisabled ? undefined : () => onChange(line.key, 'shippable', !isShippable)}
+        >
+          <Checkbox
+            size="small"
+            checked={isShippable}
+            disabled={isDisabled}
+            onChange={(e) => {
+              e.stopPropagation();
+              onChange(line.key, 'shippable', e.target.checked);
+            }}
+            slotProps={{
+              input: { 'aria-label': isShippable ? 'Lieferbar' : 'Nicht lieferbar' },
+            }}
+            sx={{ p: 0.5 }}
+          />
+        </Box>
+      );
+    }
+
     let val = line[id];
     if (val == null || val === '') {
       if (id === 'name' && this.state.cachedArticle?.name) {