u

2026-10-08 19:08:39 +02:00
parent b165f86811
commit e93e61cfcf
5 changed files with 205 additions and 123 deletions
--- a/src/components/brand/ArtikelMarke.jsx
+++ b/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;