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}
+      </>
     );
   }
 }