u

src/components/brand/ArtikelMarke.jsx

@@ -6,13 +6,18 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import CopyrightIcon from '@mui/icons-material/Copyright';
 import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import brandAutomat from '../../automats/brandAutomat';
+import { notifyError } from '../../utils/notify';
 import BrandThumb from './BrandThumb';
+import BrandImageSearchDialog from './BrandImageSearchDialog';
 
 class ArtikelMarke extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       draft: props.brand?.name ?? '',
+      logoOpen: false,
     };
   }
 
@@ -32,17 +37,27 @@ class ArtikelMarke extends PureComponent {
   };
 
   handleBlur = () => {
-    const { onRename, brand } = this.props;
+    const { brand } = this.props;
     const draft = this.state.draft.trim();
     if (!draft) {
       this.setState({ draft: brand?.name ?? '' });
       return;
     }
     if (draft !== brand?.name) {
-      onRename?.(brand, draft);
+      void this.renameBrand(brand, draft);
     }
   };
 
+  async renameBrand(brand, name) {
+    try {
+      await brandAutomat.actions.rename(brand.id, { name });
+      enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: brand?.name ?? '' });
+      notifyError(err);
+    }
+  }
+
   handleKeyDown = (event) => {
     const { brand } = this.props;
     if (event.key === 'Enter') {
@@ -57,21 +72,33 @@ class ArtikelMarke extends PureComponent {
   };
 
   handleSearchLogo = () => {
-    const { onSearchLogo, brand } = this.props;
-    onSearchLogo?.(brand);
+    this.setState({ logoOpen: true });
+  };
+
+  handleLogoClose = () => {
+    this.setState({ logoOpen: false });
   };
 
   handleDelete = () => {
-    const { onDelete, brand } = this.props;
-    onDelete?.(brand);
+    const { brand } = this.props;
+    if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await brandAutomat.actions.remove(brand.id);
+        enqueueSnackbar('Marke gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
   };
 
   render() {
     const { brand, disabled, sx } = this.props;
-    const { draft } = this.state;
+    const { draft, logoOpen } = this.state;
     const name = brand?.name ?? '';
 
     return (
+      <>
       <ListItem
         disableGutters
         sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
@@ -117,6 +144,14 @@ class ArtikelMarke extends PureComponent {
           </span>
         </Tooltip>
       </ListItem>
+      {logoOpen ? (
+        <BrandImageSearchDialog
+          open
+          brand={brand}
+          onClose={this.handleLogoClose}
+        />
+      ) : null}
+      </>
     );
   }
 }

src/components/brand/ArtikelMarkeNew.jsx

@@ -0,0 +1,61 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import brandAutomat from '../../automats/brandAutomat';
+import { notifyError } from '../../utils/notify';
+
+// Own component so typing a new brand name never rerenders ArtikelMarkenPage
+// (and its FillSpace measurement). Holds the draft locally and performs the
+// automat mutation itself — no callbacks.
+class ArtikelMarkeNew extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { newName: '' };
+  }
+
+  async submit() {
+    const name = this.state.newName.trim();
+    if (!name) return;
+    try {
+      const row = await brandAutomat.actions.create({ name });
+      enqueueSnackbar(`Marke „${row.name || name}" angelegt.`, { variant: 'success' });
+      this.setState({ newName: '' });
+    } catch (err) {
+      notifyError(err);
+    }
+  }
+
+  render() {
+    const { rowRef } = this.props;
+    const { newName } = this.state;
+    return (
+      <Box ref={rowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}>
+        <SingleLineTextEdit
+          size="small"
+          label="Neue Marke"
+          value={newName}
+          onChange={(next) => this.setState({ newName: next })}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              void this.submit();
+            }
+          }}
+          sx={{ flex: 1 }}
+        />
+        <Button
+          variant="contained"
+          size="small"
+          disabled={!newName.trim()}
+          onClick={() => void this.submit()}
+        >
+          Hinzufügen
+        </Button>
+      </Box>
+    );
+  }
+}
+
+export default ArtikelMarkeNew;

src/components/brand/index.js

@@ -2,4 +2,5 @@ export { default as BrandThumb, extractBrandThumbInfo } from './BrandThumb';
 export { default as BrandLabel } from './BrandLabel';
 export { default as BrandImageSearchDialog } from './BrandImageSearchDialog';
 export { default as ArtikelMarke } from './ArtikelMarke';
+export { default as ArtikelMarkeNew } from './ArtikelMarkeNew';
 export { default as ArtikelMarkenTable } from './ArtikelMarkenTable';