u

src/components/manifest/ManifestForm.jsx

@@ -96,6 +96,7 @@ class ManifestForm extends PureComponent {
     this.handleCloseArticleSearch = this.handleCloseArticleSearch.bind(this);
     this.handleAssignArticleForLine = this.handleAssignArticleForLine.bind(this);
     this.handleRemoveLine = this.handleRemoveLine.bind(this);
+    this.handleMoveLine = this.handleMoveLine.bind(this);
     this.handleRemoveAllLines = this.handleRemoveAllLines.bind(this);
     this.handleSave = this.handleSave.bind(this);
     this.handlePdfUpload = this.handlePdfUpload.bind(this);
@@ -701,6 +702,19 @@ class ManifestForm extends PureComponent {
     });
   }
 
+  handleMoveLine(key, delta) {
+    this.setState((prev) => {
+      const fromIndex = prev.lines.findIndex((l) => l.key === key);
+      if (fromIndex < 0) return null;
+      const toIndex = fromIndex + delta;
+      if (toIndex < 0 || toIndex >= prev.lines.length) return null;
+      const next = [...prev.lines];
+      const [item] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, item);
+      return { lines: next, isDirty: true };
+    });
+  }
+
   handleRemoveAllLines() {
     this.setState({ lines: [] });
   }
@@ -998,6 +1012,7 @@ class ManifestForm extends PureComponent {
         onAddArticleLine={this.handleAddArticleLine}
         onSearchArticle={this.handleOpenArticleSearchForLine}
         onRemoveLine={this.handleRemoveLine}
+        onMoveLine={this.handleMoveLine}
         onRemoveAllLines={this.handleRemoveAllLines}
         onSave={() => void this.handleSave()}
       />

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>
 

src/components/manifest/ManifestLines.jsx

@@ -28,6 +28,7 @@ class ManifestLines extends PureComponent {
       onLineChange,
       onAddLine,
       onRemoveLine,
+      onMoveLine,
       onRemoveAllLines,
       columns = LINE_COLUMNS,
       supplierArticlesMap = {},
@@ -98,7 +99,7 @@ class ManifestLines extends PureComponent {
                       {col.label}
                     </TableCell>
                   ))}
-                  <TableCell padding="none" sx={{ bgcolor: linesColor, borderBottom: 'none', width: 40 }} />
+                  <TableCell padding="none" sx={{ bgcolor: linesColor, borderBottom: 'none', width: onMoveLine ? 92 : 40 }} />
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -138,6 +139,9 @@ class ManifestLines extends PureComponent {
                         supplierArticleBusy={Boolean(busySupplierArticleLineKeys[lineKey])}
                         onChange={onLineChange}
                         onRemove={onRemoveLine}
+                        onMove={onMoveLine}
+                        isFirstLine={index === 0}
+                        isLastLine={index === lines.length - 1}
                         onSkuBlur={onSkuBlur}
                         onCreateArticle={onCreateArticle}
                         onSearchArticle={onSearchArticle}