u

src/routes/artikel/marken.jsx

@@ -1,12 +1,8 @@
 import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import InputAdornment from '@mui/material/InputAdornment';
+import Button from '@mui/material/Button';
 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 SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
@@ -14,6 +10,7 @@ import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
+import { enqueueSnackbar } from 'notistack';
 import {
   ArtikelMarke,
   ArtikelMarkeNew,
@@ -25,19 +22,44 @@ import {
 class ArtikelMarkenSearchField extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = { input: '' };
+    this.state = {
+      input: props.value ?? '',
+      submitting: false,
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value && this.props.value !== this.state.input) {
+      this.setState({ input: this.props.value ?? '' });
+    }
   }
 
   onInputChange(input) {
     this.setState({ input });
+    this.props.onChange?.(input);
   }
 
-  clearInput() {
-    this.setState({ input: '' });
+  async handleSubmit() {
+    const name = this.state.input.trim();
+    if (!name || this.state.submitting) return;
+
+    this.setState({ submitting: true });
+    try {
+      const row = await brandAutomat.actions.create({ name });
+      enqueueSnackbar(`Marke „${row.name || name}“ angelegt.`, { variant: 'success' });
+      this.setState({ input: '', submitting: false });
+      this.props.onChange?.('');
+    } catch (err) {
+      this.setState({ submitting: false });
+      notifyError(err);
+    }
   }
 
   render() {
     const { inputRef } = this.props;
+    const { input, submitting } = this.state;
+    const canSubmit = Boolean(input.trim()) && !submitting;
 
     return (
       <PanelTileGrid>
@@ -50,16 +72,27 @@ class ArtikelMarkenSearchField extends PureComponent {
               md: 'span 2',
             },
             display: 'flex',
-            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+            pb: 2,
           }}
         >
           <SingleLineTextEdit
-            sx={{ width: '100%' }}
+            sx={{ flex: 1 }}
             size="small"
-            value={this.state.input}
+            search
+            clear
+            value={input}
+            disabled={submitting}
             onChange={(next) => this.onInputChange(next)}
           />
-          <ArtikelMarkeNew />
+          <Button
+            variant="contained"
+            disabled={!canSubmit}
+            onClick={() => void this.handleSubmit()}
+          >
+            Hinzufügen
+          </Button>
         </Box>
       </PanelTileGrid>
     );
@@ -72,7 +105,7 @@ class ArtikelMarkenPage extends PureComponent {
     this.state = {
       status: brandAutomat.state.status,
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
-      brands: brandAutomat.state.brands,
+      brands: brandAutomat.state.brands
     };
     this.searchRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
@@ -93,7 +126,6 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   handleRetry() {
-    // The automat owns fetching; just ask it to load again.
     void brandAutomat.actions.load().catch((err) => notifyError(err));
   }