u

src/components/manifest/ManifestFormLine.jsx

@@ -11,6 +11,8 @@ import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutlineOutlined';
 import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
@@ -40,6 +42,8 @@ class ManifestFormLine extends PureComponent {
       fallbackSuppliers: [],
     };
     this.handleRemove = this.handleRemove.bind(this);
+    this.handleMoveUp = this.handleMoveUp.bind(this);
+    this.handleMoveDown = this.handleMoveDown.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleCreateArticle = this.handleCreateArticle.bind(this);
     this.handleSearchArticle = this.handleSearchArticle.bind(this);
@@ -121,6 +125,14 @@ class ManifestFormLine extends PureComponent {
     this.props.onRemove(this.props.line.key);
   }
 
+  handleMoveUp() {
+    this.props.onMove?.(this.props.line.key, -1);
+  }
+
+  handleMoveDown() {
+    this.props.onMove?.(this.props.line.key, 1);
+  }
+
   handleBlur(e, columnId) {
     if (columnId === 'sku' && this.props.onSkuBlur) {
       this.props.onSkuBlur(this.props.line.key, e.target.value);
@@ -971,15 +983,62 @@ class ManifestFormLine extends PureComponent {
               {this.renderField(col, colIdx, columns.length)}
             </TableCell>
           ))}
-          <TableCell padding="none" sx={{ py: 0.25, pl: 0.75, pr: 0, verticalAlign: 'middle', width: 40 }}>
-            <IconButton
-              size="small"
-              aria-label="Zeile entfernen"
-              disabled={saving}
-              onClick={this.handleRemove}
-            >
-              <DeleteOutlinedIcon fontSize="small" />
-            </IconButton>
+          <TableCell
+            padding="none"
+            sx={{
+              py: 0.25,
+              pl: 0.5,
+              pr: 0.5,
+              verticalAlign: 'middle',
+              width: this.props.onMove ? 92 : 40,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
+              {this.props.onMove && (
+                <>
+                  <Tooltip title="Nach oben">
+                    <span>
+                      <IconButton
+                        size="small"
+                        aria-label="Nach oben verschieben"
+                        disabled={saving || this.props.isFirstLine}
+                        onClick={this.handleMoveUp}
+                        sx={{ p: 0.35 }}
+                      >
+                        <ArrowUpwardIcon sx={{ fontSize: 16 }} />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                  <Tooltip title="Nach unten">
+                    <span>
+                      <IconButton
+                        size="small"
+                        aria-label="Nach unten verschieben"
+                        disabled={saving || this.props.isLastLine}
+                        onClick={this.handleMoveDown}
+                        sx={{ p: 0.35 }}
+                      >
+                        <ArrowDownwardIcon sx={{ fontSize: 16 }} />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                </>
+              )}
+              <Tooltip title="Zeile entfernen">
+                <span>
+                  <IconButton
+                    size="small"
+                    aria-label="Zeile entfernen"
+                    disabled={saving}
+                    onClick={this.handleRemove}
+                    sx={{ p: 0.35 }}
+                  >
+                    <DeleteOutlinedIcon sx={{ fontSize: 18 }} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
           </TableCell>
         </TableRow>