u

src/pages/artikel/index.jsx

@@ -30,6 +30,7 @@ import { preserveSearchFocus } from './searchFocus';
 import { artikelDetailPath } from './articleRoute';
 import withSearchParams from './withSearchParams';
 import { setLastArticleSku } from '../../automats';
+import { BrandLabel } from '../../components/brand';
 
 const resultRowSx = {
   alignItems: 'center',
@@ -429,7 +430,24 @@ class ArtikelSearchPage extends Component {
                                 variant="body2"
                                 color="text.secondary"
                                 noWrap
+                                sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, maxWidth: '100%' }}
                               >
+                                {(row.brand?.name || row.brandName) && (
+                                  <>
+                                    <BrandLabel
+                                      brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
+                                      name={row.brand?.name || row.brandName}
+                                      size={14}
+                                      spacing={0.5}
+                                      typographyProps={{
+                                        variant: 'body2',
+                                        color: 'text.secondary',
+                                        noWrap: true,
+                                      }}
+                                    />
+                                    {' · '}
+                                  </>
+                                )}
                                 {row.sku}
                                 {' · '}
                                 Bestand {formatStock(row.stock)}

src/pages/artikel/marken.jsx

@@ -5,9 +5,11 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import CopyrightIcon from '@mui/icons-material/Copyright';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
@@ -16,6 +18,7 @@ import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
 import { enqueueSnackbar } from 'notistack';
+import { BrandThumb, BrandImageSearchDialog } from '../../components/brand';
 
 function draftsFrom(brands) {
   return Object.fromEntries(brands.map((b) => [b.id, b.name]));
@@ -32,6 +35,7 @@ class ArtikelMarkenPage extends PureComponent {
       drafts: draftsFrom(initialBrands),
       newName: '',
       busyKey: null,
+      searchBrand: null,
     };
     this._cancelled = false;
     this.handleCreate = this.handleCreate.bind(this);
@@ -193,7 +197,11 @@ class ArtikelMarkenPage extends PureComponent {
                   disableGutters
                   sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
                 >
-                  <CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
+                  <BrandThumb
+                    brand={b}
+                    size={22}
+                    fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
+                  />
                   <SingleLineTextEdit
                     size="small"
                     label=""
@@ -220,15 +228,31 @@ class ArtikelMarkenPage extends PureComponent {
                     }}
                     sx={{ flex: 1 }}
                   />
-                  <IconButton
-                    edge="end"
-                    size="small"
-                    aria-label={`„${b.name}" löschen`}
-                    disabled={busy}
-                    onClick={() => void this.handleDelete(b)}
-                  >
-                    <DeleteOutlinedIcon fontSize="small" />
-                  </IconButton>
+                  <Tooltip title="Logo suchen">
+                    <span>
+                      <IconButton
+                        size="small"
+                        aria-label={`Logo für „${b.name}" suchen`}
+                        disabled={busy}
+                        onClick={() => this.setState({ searchBrand: b })}
+                      >
+                        <ImageSearchIcon fontSize="small" />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                  <Tooltip title="Löschen">
+                    <span>
+                      <IconButton
+                        edge="end"
+                        size="small"
+                        aria-label={`„${b.name}" löschen`}
+                        disabled={busy}
+                        onClick={() => void this.handleDelete(b)}
+                      >
+                        <DeleteOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
                 </ListItem>
               ))
             )}
@@ -259,6 +283,12 @@ class ArtikelMarkenPage extends PureComponent {
             </Button>
           </Box>
         </PanelTile>
+
+        <BrandImageSearchDialog
+          open={Boolean(this.state.searchBrand)}
+          brand={this.state.searchBrand}
+          onClose={() => this.setState({ searchBrand: null })}
+        />
       </PanelTileGrid>
     );
   }