u

src/components/brand/ArtikelMarke.jsx

@@ -1,4 +1,5 @@
 import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
@@ -9,6 +10,7 @@ import brandAutomat from '../../automats/brandAutomat';
 import { notifyError } from '../../utils/notify';
 import BrandThumb from './BrandThumb';
 import BrandImageSearchDialog from './BrandImageSearchDialog';
+import BrandLogoPreviewDialog from './BrandLogoPreviewDialog';
 
 class ArtikelMarke extends PureComponent {
   constructor(props) {
@@ -16,6 +18,7 @@ class ArtikelMarke extends PureComponent {
     this.state = {
       draft: props.brand?.name ?? '',
       logoOpen: false,
+      previewOpen: false,
     };
   }
 
@@ -29,6 +32,8 @@ class ArtikelMarke extends PureComponent {
     }
   }
 
+  hasLogo = () => Boolean(this.props.brand?.pics?.[0]?.fullHash || this.props.brand?.pics?.[0]?.thumbHash);
+
   handleChange = (next) => {
     this.setState({ draft: next });
     this.props.onChange?.(next, this.props.brand);
@@ -70,13 +75,22 @@ class ArtikelMarke extends PureComponent {
   };
 
   handleSearchLogo = () => {
-    this.setState({ logoOpen: true });
+    this.setState({ logoOpen: true, previewOpen: false });
   };
 
   handleLogoClose = () => {
     this.setState({ logoOpen: false });
   };
 
+  handleThumbClick = () => {
+    if (this.props.disabled || !this.hasLogo()) return;
+    this.setState({ previewOpen: true });
+  };
+
+  handlePreviewClose = () => {
+    this.setState({ previewOpen: false });
+  };
+
   handleDelete = () => {
     const { brand } = this.props;
     if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
@@ -92,8 +106,9 @@ class ArtikelMarke extends PureComponent {
 
   render() {
     const { brand, disabled, sx } = this.props;
-    const { draft, logoOpen } = this.state;
+    const { draft, logoOpen, previewOpen } = this.state;
     const name = brand?.name ?? '';
+    const hasLogo = this.hasLogo();
 
     return (
       <>
@@ -101,20 +116,30 @@ class ArtikelMarke extends PureComponent {
           disableGutters
           sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
         >
-          <BrandThumb
-            brand={brand}
-            size={40}
-            fallback={
-              <IconButton
-                aria-label={`Logo für „${name}" suchen`}
-                disabled={disabled}
-                onClick={this.handleSearchLogo}
-                sx={{ width: 40, height: 40, flexShrink: 0 }}
-              >
-                <ImageSearchIcon sx={{ fontSize: 24 }} />
-              </IconButton>
-            }
-          />
+          {hasLogo ? (
+            <Box
+              component="span"
+              onClick={this.handleThumbClick}
+              sx={{
+                display: 'inline-flex',
+                flexShrink: 0,
+                borderRadius: 1,
+                cursor: disabled ? 'default' : 'pointer',
+                '&:hover': disabled ? undefined : { opacity: 0.8 },
+              }}
+            >
+              <BrandThumb brand={brand} size={40} />
+            </Box>
+          ) : (
+            <IconButton
+              aria-label={`Logo für „${name}" suchen`}
+              disabled={disabled}
+              onClick={this.handleSearchLogo}
+              sx={{ width: 40, height: 40, flexShrink: 0 }}
+            >
+              <ImageSearchIcon sx={{ fontSize: 24 }} />
+            </IconButton>
+          )}
 
           <SingleLineTextEdit
             size="small"
@@ -143,6 +168,15 @@ class ArtikelMarke extends PureComponent {
             onClose={this.handleLogoClose}
           />
         ) : null}
+        {previewOpen ? (
+          <BrandLogoPreviewDialog
+            open
+            brand={brand}
+            disabled={disabled}
+            onClose={this.handlePreviewClose}
+            onSearchNew={this.handleSearchLogo}
+          />
+        ) : null}
       </>
     );
   }