u

src/components/warehouse/ArtikelLager.jsx

@@ -0,0 +1,145 @@
+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 warehouseAutomat from '../../automats/warehouseAutomat';
+import { notifyError } from '../../utils/notify';
+
+class ArtikelLager extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.warehouse ?? props.item;
+    this.state = {
+      draft: item?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.warehouse ?? prevProps.item;
+    const item = this.props.warehouse ?? this.props.item;
+    if (prevItem?.name !== item?.name) {
+      this.setState({ draft: item?.name ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== item?.name) {
+        this.setState({ draft: item?.name ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    const item = this.props.warehouse ?? this.props.item;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.warehouse ?? this.props.item;
+    if (!item) return;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: item.name ?? '' });
+      return;
+    }
+    if (draft !== item.name) {
+      void this.renameWarehouse(item, draft);
+    }
+  };
+
+  async renameWarehouse(item, name) {
+    try {
+      await warehouseAutomat.actions.update(item.id, { name });
+      enqueueSnackbar('Lager gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: item.name ?? '' });
+      notifyError(err);
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const item = this.props.warehouse ?? this.props.item;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: item?.name ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleDelete = () => {
+    const item = this.props.warehouse ?? this.props.item;
+    if (!item) return;
+    if (!window.confirm(`Lager „${item.name}" wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await warehouseAutomat.actions.remove(item.id);
+        enqueueSnackbar('Lager gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx } = this.props;
+    const item = this.props.warehouse ?? this.props.item;
+    const { draft } = this.state;
+    const name = item?.name ?? '';
+
+    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: disabled ? 'default' : 'grab',
+            userSelect: 'none',
+            touchAction: 'none',
+            '&:hover': disabled ? undefined : { color: 'text.secondary' },
+            transition: 'color 0.15s',
+          }}
+        >
+          <DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
+        </Box>
+
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled || !item}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1, minWidth: 0 }}
+        />
+
+        <IconButton
+          aria-label={`„${name}" löschen`}
+          disabled={disabled || !item}
+          onClick={this.handleDelete}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItem>
+    );
+  }
+}
+
+export default ArtikelLager;

src/components/warehouse/index.js

@@ -0,0 +1 @@
+export { default as ArtikelLager } from './ArtikelLager';