u

src/components/merkmale/ArtikelMerkmalWert.jsx

@@ -0,0 +1,163 @@
+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';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import attributeAutomat from '../../automats/attributeAutomat';
+import { notifyError } from '../../utils/notify';
+
+class ArtikelMerkmalWert extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.item ?? props.value;
+    this.state = {
+      draft: item?.value ?? '',
+      busy: false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.item ?? prevProps.value;
+    const item = this.props.item ?? this.props.value;
+    if (prevItem?.value !== item?.value) {
+      this.setState({ draft: item?.value ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== item?.value) {
+        this.setState({ draft: item?.value ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    const item = this.props.item ?? this.props.value;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.item ?? this.props.value;
+    if (!item) return;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: item.value ?? '' });
+      return;
+    }
+    if (draft !== item.value) {
+      void this.renameValue(item, draft);
+    }
+  };
+
+  async renameValue(item, val) {
+    this.setState({ busy: true });
+    try {
+      await attributeAutomat.actions.updateValue(item.id, { value: val });
+      enqueueSnackbar('Wert gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: item.value ?? '' });
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const item = this.props.item ?? this.props.value;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: item?.value ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleDelete = () => {
+    const item = this.props.item ?? this.props.value;
+    if (!item || this.props.disabled || this.state.busy) return;
+
+    if (!window.confirm(`Wert „${item.value}“ wirklich löschen?`)) {
+      return;
+    }
+
+    this.setState({ busy: true });
+    void (async () => {
+      try {
+        await attributeAutomat.actions.deleteValue(item.id);
+        enqueueSnackbar('Wert gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+        this.setState({ busy: false });
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx } = this.props;
+    const item = this.props.item ?? this.props.value;
+    const { draft, busy } = this.state;
+    const valText = item?.value ?? '';
+    const isDisabled = disabled || busy;
+
+    return (
+      <ListItem
+        disableGutters
+        data-id={item?.id}
+        sx={{
+          gap: 1,
+          py: 0.75,
+          alignItems: 'center',
+          width: '100%',
+          minWidth: 0,
+          ...sx,
+        }}
+      >
+        <Box
+          className="drag-handle"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 40,
+            height: 40,
+            flexShrink: 0,
+            color: 'text.disabled',
+            cursor: isDisabled ? 'default' : 'grab',
+            userSelect: 'none',
+            touchAction: 'none',
+            '&:hover': isDisabled ? undefined : { color: 'text.secondary' },
+            transition: 'color 0.15s',
+          }}
+        >
+          <DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
+        </Box>
+
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={isDisabled || !item}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1, minWidth: 0 }}
+        />
+
+        <IconButton
+          aria-label={`„${valText}“ löschen`}
+          disabled={isDisabled || !item}
+          onClick={this.handleDelete}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItem>
+    );
+  }
+}
+
+export default ArtikelMerkmalWert;