diff --git a/src/routes/artikel/marken.jsx b/src/routes/artikel/marken.jsx
index 14e08bb..67fdd3d 100644
--- a/src/routes/artikel/marken.jsx
+++ b/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 (
+
+ { }}
+ slotProps={{
+ htmlInput: {
+ autoCapitalize: 'off',
+ autoCorrect: 'off',
+ },
+ input: {
+ sx: { height: 40 },
+ startAdornment: (
+
+
+
+ ),
+ endAdornment: (
+
+ { }}
+ onMouseDown={(e) => e.preventDefault()}
+ aria-label="Suche löschen"
+ >
+
+
+
+ ),
+ },
+ }}
+ />
+
+ );
+ }
+}
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 (
-
-
-
+ <>
+
+
+
+
-
-
-
+
+
+
+ >
);
}
}
-export { ArtikelMarke, ArtikelMarkeNew };
+export { ArtikelMarke, ArtikelMarkeNew, ArtikelMarkenSearchField };
export default ArtikelMarkenPage;