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;