u

src/components/brand/ArtikelMarke.jsx

@@ -0,0 +1,124 @@
+import { PureComponent } from 'react';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+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 BrandThumb from './BrandThumb';
+
+class ArtikelMarke extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      draft: props.brand?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.brand?.name !== this.props.brand?.name) {
+      this.setState({ draft: this.props.brand?.name ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== this.props.brand?.name) {
+        this.setState({ draft: this.props.brand?.name ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    this.props.onChange?.(next, this.props.brand);
+  };
+
+  handleBlur = () => {
+    const { onRename, brand } = this.props;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: brand?.name ?? '' });
+      return;
+    }
+    if (draft !== brand?.name) {
+      onRename?.(brand, draft);
+    }
+  };
+
+  handleKeyDown = (event) => {
+    const { brand } = this.props;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: brand?.name ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleSearchLogo = () => {
+    const { onSearchLogo, brand } = this.props;
+    onSearchLogo?.(brand);
+  };
+
+  handleDelete = () => {
+    const { onDelete, brand } = this.props;
+    onDelete?.(brand);
+  };
+
+  render() {
+    const { brand, disabled, sx } = this.props;
+    const { draft } = this.state;
+    const name = brand?.name ?? '';
+
+    return (
+      <ListItem
+        disableGutters
+        sx={{ gap: 1, py: 0.75, alignItems: 'center', ...sx }}
+      >
+        <BrandThumb
+          brand={brand}
+          size={22}
+          fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
+        />
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1 }}
+        />
+        <Tooltip title="Logo suchen">
+          <span>
+            <IconButton
+              size="small"
+              aria-label={`Logo für „${name}" suchen`}
+              disabled={disabled}
+              onClick={this.handleSearchLogo}
+            >
+              <ImageSearchIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title="Löschen">
+          <span>
+            <IconButton
+              edge="end"
+              size="small"
+              aria-label={`„${name}" löschen`}
+              disabled={disabled}
+              onClick={this.handleDelete}
+            >
+              <DeleteOutlinedIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </ListItem>
+    );
+  }
+}
+
+export default ArtikelMarke;

src/components/brand/ArtikelMarkenTable.jsx

@@ -0,0 +1,44 @@
+import { PureComponent } from 'react';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import ArtikelMarke from './ArtikelMarke';
+
+class ArtikelMarkenTable extends PureComponent {
+  render() {
+    const {
+      brands = [],
+      busyKey,
+      disabled,
+      onRename,
+      onSearchLogo,
+      onDelete,
+      emptyMessage = 'Noch keine Marken angelegt.',
+      sx,
+    } = this.props;
+
+    const isBusy = disabled || busyKey != null;
+
+    return (
+      <List dense disablePadding sx={sx}>
+        {brands.length === 0 ? (
+          <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+            {emptyMessage}
+          </Typography>
+        ) : (
+          brands.map((b) => (
+            <ArtikelMarke
+              key={b.id}
+              brand={b}
+              disabled={isBusy}
+              onRename={onRename}
+              onSearchLogo={onSearchLogo}
+              onDelete={onDelete}
+            />
+          ))
+        )}
+      </List>
+    );
+  }
+}
+
+export default ArtikelMarkenTable;

src/components/brand/index.js

@@ -1,3 +1,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 ArtikelMarkenTable } from './ArtikelMarkenTable';