u

src/routes/artikel/marken.jsx

@@ -1,8 +1,12 @@
 import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
-import List from '@mui/material/List';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
 import CircularProgress from '@mui/material/CircularProgress';
 import BackendError from '../../components/BackendError';
+import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
+import ClearIcon from '@mui/icons-material/Clear';
 import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -17,6 +21,58 @@ import {
   PURPLE_PANEL,
 } from '../../colors';
 
+class ArtikelMarkenSearchField extends PureComponent {
+  render() {
+    const { inputRef } = this.props;
+
+    return (
+      <Box
+        ref={inputRef}
+        sx={{
+          mb: 2,
+          display: 'flex',
+          gap: 1.5,
+          alignItems: 'center',
+          minHeight: 40,
+        }}
+      >
+        <TextField
+          sx={{ maxWidth: 520, flexGrow: 1 }}
+          autoFocus
+          autoComplete="off"
+          value={''}
+          onChange={() => { }}
+          slotProps={{
+            htmlInput: {
+              autoCapitalize: 'off',
+              autoCorrect: 'off',
+            },
+            input: {
+              sx: { height: 40 },
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon color="action" />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    onClick={() => { }}
+                    onMouseDown={(e) => e.preventDefault()}
+                    aria-label="Suche löschen"
+                  >
+                    <ClearIcon fontSize="small" />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            },
+          }}
+        />
+      </Box>
+    );
+  }
+}
 
 class ArtikelMarkenPage extends PureComponent {
   constructor(props) {
@@ -26,6 +82,7 @@ class ArtikelMarkenPage extends PureComponent {
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
       brands: brandAutomat.state.brands,
     };
+    this.searchRef = createRef();
     this.createRowRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
   }
@@ -65,24 +122,27 @@ class ArtikelMarkenPage extends PureComponent {
     }
 
     return (
-      <PanelTileGrid>
-        <PanelTile wide={2} minHeight={0} color={PURPLE_PANEL} sx={{ pb: 0 }}>
-          <FillSpace
-            aboveRef={[]}
-            belowRef={this.createRowRef}
-            reserveBottom={32}
-            minPageSize={8}
-            minHeight={0}
-            items={brands}
-            renderItem={ArtikelMarke}
-          />
+      <>
+        <ArtikelMarkenSearchField inputRef={this.searchRef} />
+        <PanelTileGrid>
+          <PanelTile wide={2} minHeight={0} color={PURPLE_PANEL} sx={{ pb: 0 }}>
+            <FillSpace
+              aboveRef={[this.searchRef]}
+              belowRef={this.createRowRef}
+              reserveBottom={32}
+              minPageSize={8}
+              minHeight={0}
+              items={brands}
+              renderItem={ArtikelMarke}
+            />
 
-          <ArtikelMarkeNew rowRef={this.createRowRef} />
-        </PanelTile>
-      </PanelTileGrid>
+            <ArtikelMarkeNew rowRef={this.createRowRef} />
+          </PanelTile>
+        </PanelTileGrid>
+      </>
     );
   }
 }
 
-export { ArtikelMarke, ArtikelMarkeNew };
+export { ArtikelMarke, ArtikelMarkeNew, ArtikelMarkenSearchField };
 export default ArtikelMarkenPage;