u

src/components/carrier/CarrierItem.jsx

@@ -0,0 +1,213 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import carrierAutomat from '../../automats/carrierAutomat';
+import { notifyError } from '../../utils/notify';
+
+class CarrierItem extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.carrier ?? props.item;
+    this.state = {
+      draft: item?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.carrier ?? prevProps.item;
+    const item = this.props.carrier ?? 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.carrier ?? this.props.item;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.carrier ?? 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.updateCarrier(item, { name: draft });
+    }
+  };
+
+  async updateCarrier(item, patch) {
+    try {
+      await carrierAutomat.actions.update(item.id, patch);
+      enqueueSnackbar('Lieferart gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: item.name ?? '' });
+      notifyError(err);
+    }
+  }
+
+  handleToggleHasPackages = (e) => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    const nextVal = e.target.checked;
+    void this.updateCarrier(item, { hasPackages: nextVal });
+  };
+
+  handleToggleIsReverse = (e) => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    const nextVal = e.target.checked;
+    void this.updateCarrier(item, { isReverse: nextVal });
+  };
+
+  handleKeyDown = (event) => {
+    const item = this.props.carrier ?? 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.carrier ?? this.props.item;
+    if (!item) return;
+    if (!window.confirm(`Lieferart „${item.name}“ wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await carrierAutomat.actions.remove(item.id);
+        enqueueSnackbar('Lieferart gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx } = this.props;
+    const item = this.props.carrier ?? this.props.item;
+    const { draft } = this.state;
+    const name = item?.name ?? '';
+    const hasPackages = Boolean(item?.hasPackages);
+    const isReverse = Boolean(item?.isReverse);
+
+    return (
+      <ListItem
+        disableGutters
+        data-id={item?.id}
+        sx={{
+          gap: 1,
+          py: 0.75,
+          alignItems: 'center',
+          width: '100%',
+          minWidth: 0,
+          flexWrap: { xs: 'wrap', sm: 'nowrap' },
+          ...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: 140 }}
+        />
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexShrink: 0 }}>
+          <Tooltip title="Paketverfolgung / Tracking für Sendungen aktivieren">
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  checked={hasPackages}
+                  disabled={disabled || !item}
+                  onChange={this.handleToggleHasPackages}
+                />
+              }
+              label={
+                <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
+                  Pakete
+                </Typography>
+              }
+              sx={{ m: 0, gap: 0.5 }}
+            />
+          </Tooltip>
+
+          <Tooltip title="Für Retouren / Rücksendungen verwenden">
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  checked={isReverse}
+                  disabled={disabled || !item}
+                  onChange={this.handleToggleIsReverse}
+                />
+              }
+              label={
+                <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
+                  Retoure
+                </Typography>
+              }
+              sx={{ m: 0, gap: 0.5 }}
+            />
+          </Tooltip>
+        </Box>
+
+        <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 CarrierItem;

src/components/carrier/index.js

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