abort and search

src/components/manifest/ManifestFormLine.jsx

@@ -1,4 +1,5 @@
 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 Chip from '@mui/material/Chip';
@@ -13,9 +14,11 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutlineOutlined';
 import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
 import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import AddIcon from '@mui/icons-material/Add';
+import SearchIcon from '@mui/icons-material/Search';
 import { LINE_COLUMNS } from './manifestConfig';
 import ArticlePhoto from '../article/ArticlePhoto';
 import { formatPrice } from '../../utils/price';
+import { artikelDetailPath } from '../../pages/artikel/articleRoute';
 
 class ManifestFormLine extends PureComponent {
   constructor(props) {
@@ -23,6 +26,7 @@ class ManifestFormLine extends PureComponent {
     this.handleRemove = this.handleRemove.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleCreateArticle = this.handleCreateArticle.bind(this);
+    this.handleSearchArticle = this.handleSearchArticle.bind(this);
   }
 
   handleRemove() {
@@ -42,6 +46,13 @@ class ManifestFormLine extends PureComponent {
     }
   }
 
+  handleSearchArticle() {
+    const { line, onSearchArticle } = this.props;
+    if (onSearchArticle) {
+      onSearchArticle(line);
+    }
+  }
+
   renderField(column) {
     const { id, align, type } = column;
     const { line, saving, onChange } = this.props;
@@ -151,6 +162,9 @@ class ManifestFormLine extends PureComponent {
           {/* Internal Article SKU */}
           {article.sku && (
             <Chip
+              component={RouterLink}
+              to={artikelDetailPath(article)}
+              clickable
               size="small"
               label={`Art.-Nr.: ${article.sku}`}
               sx={{
@@ -161,6 +175,11 @@ class ManifestFormLine extends PureComponent {
                 color: 'primary.dark',
                 border: '1px solid',
                 borderColor: 'primary.200',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                '&:hover': {
+                  bgcolor: 'primary.100',
+                },
               }}
             />
           )}
@@ -196,24 +215,6 @@ class ManifestFormLine extends PureComponent {
             </Typography>
           )}
 
-          {/* Stock */}
-          <Chip
-            size="small"
-            variant="outlined"
-            label={`Bestand: ${supplierArticle.stock ?? 0}`}
-            sx={{ height: 19, fontSize: '0.66rem', color: 'text.secondary' }}
-          />
-
-          {/* Packaging Unit (PU) */}
-          {supplierArticle.pu != null && (
-            <Chip
-              size="small"
-              variant="outlined"
-              label={`VPE: ${supplierArticle.pu}`}
-              sx={{ height: 19, fontSize: '0.66rem', color: 'text.secondary' }}
-            />
-          )}
-
           {/* Stored Purchase Price (Netto) */}
           {priceNet != null && (
             <Typography
@@ -258,6 +259,28 @@ class ManifestFormLine extends PureComponent {
               Artikel anlegen
             </Button>
           )}
+          {this.props.onSearchArticle && (
+            <Button
+              size="small"
+              variant="text"
+              startIcon={<SearchIcon sx={{ fontSize: 14 }} />}
+              onClick={this.handleSearchArticle}
+              sx={{
+                fontSize: '0.7rem',
+                fontWeight: 600,
+                textTransform: 'none',
+                minWidth: 'auto',
+                py: 0.25,
+                px: 1,
+                color: 'primary.main',
+                '&:hover': {
+                  bgcolor: 'primary.50',
+                },
+              }}
+            >
+              Artikel suchen
+            </Button>
+          )}
         </Box>
       );
     }