u

src/components/kunde/Kunde.jsx

@@ -0,0 +1,223 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+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 EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import { router } from '../../appRouter';
+import entityAutomat from '../../automats/entityAutomat';
+import { notifyError } from '../../utils/notify';
+
+function getCustomerDisplayName(item) {
+  if (!item) return '';
+  return [item.firstName, item.name].filter(Boolean).join(' ') || item.name || '';
+}
+
+class Kunde extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.customer ?? props.item;
+    this.state = {
+      draft: getCustomerDisplayName(item),
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.customer ?? prevProps.item;
+    const item = this.props.customer ?? this.props.item;
+    const prevName = getCustomerDisplayName(prevItem);
+    const nextName = getCustomerDisplayName(item);
+
+    if (prevName !== nextName) {
+      this.setState({ draft: nextName });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== nextName) {
+        this.setState({ draft: nextName });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    const item = this.props.customer ?? this.props.item;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.customer ?? this.props.item;
+    if (!item) return;
+
+    const draft = this.state.draft.trim();
+    const currentDisplay = getCustomerDisplayName(item);
+    if (!draft) {
+      this.setState({ draft: currentDisplay });
+      return;
+    }
+    if (draft !== currentDisplay) {
+      void this.renameCustomer(item, draft);
+    }
+  };
+
+  async renameCustomer(item, rawText) {
+    const trimmed = rawText.trim();
+    if (!trimmed) return;
+    let name = trimmed;
+    let firstName = null;
+
+    if (trimmed.includes(',')) {
+      const parts = trimmed.split(',').map((p) => p.trim());
+      name = parts[0];
+      firstName = parts.slice(1).join(' ') || null;
+    } else if (trimmed.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(trimmed)) {
+      const parts = trimmed.split(' ');
+      firstName = parts[0];
+      name = parts.slice(1).join(' ');
+    }
+
+    try {
+      await entityAutomat.actions.update(item.id, { name, firstName });
+      enqueueSnackbar('Kunde gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: getCustomerDisplayName(item) });
+      notifyError(err);
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const item = this.props.customer ?? this.props.item;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: getCustomerDisplayName(item) });
+      event.target.blur();
+    }
+  };
+
+  handleDelete = () => {
+    const item = this.props.customer ?? this.props.item;
+    if (!item) return;
+    const displayName = getCustomerDisplayName(item) || String(item.number ?? item.id);
+
+    if (!window.confirm(`Kunde „${displayName}“ wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await entityAutomat.actions.remove(item.id);
+        enqueueSnackbar('Kunde gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx, groupName, onEdit } = this.props;
+    const item = this.props.customer ?? this.props.item;
+    const { draft } = this.state;
+    const displayName = getCustomerDisplayName(item) || String(item?.number ?? '');
+
+    const handleOpenEdit = () => {
+      if (!item) return;
+      if (onEdit) onEdit(item);
+      else void router.navigate(`/kunde/${item.id}`);
+    };
+
+    return (
+      <ListItem
+        disableGutters
+        data-id={item?.id}
+        sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
+      >
+        <Tooltip title="Kunde öffnen">
+          <IconButton
+            aria-label={`„${displayName}“ öffnen`}
+            disabled={disabled || !item}
+            onClick={handleOpenEdit}
+            sx={{ width: 40, height: 40, flexShrink: 0 }}
+          >
+            <PersonOutlinedIcon sx={{ fontSize: 24 }} />
+          </IconButton>
+        </Tooltip>
+
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled || !item}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1, minWidth: 0 }}
+        />
+
+        {item?.number ? (
+          <Chip
+            size="small"
+            label={item.number}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums',
+              bgcolor: 'action.hover',
+              color: 'text.primary',
+              flexShrink: 0,
+              '& .MuiChip-label': {
+                px: 0.75,
+                textAlign: 'center',
+              },
+            }}
+          />
+        ) : null}
+
+        {groupName ? (
+          <Chip
+            size="small"
+            label={groupName}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              bgcolor: 'action.hover',
+              color: 'text.secondary',
+              flexShrink: 0,
+              display: { xs: 'none', sm: 'inline-flex' },
+              '& .MuiChip-label': {
+                px: 0.75,
+              },
+            }}
+          />
+        ) : null}
+
+        <Tooltip title="Details bearbeiten">
+          <IconButton
+            aria-label={`„${displayName}“ bearbeiten`}
+            disabled={disabled || !item}
+            onClick={handleOpenEdit}
+            sx={{ width: 40, height: 40, flexShrink: 0 }}
+          >
+            <EditOutlinedIcon sx={{ fontSize: 22 }} />
+          </IconButton>
+        </Tooltip>
+
+        <IconButton
+          aria-label={`„${displayName}“ löschen`}
+          disabled={disabled || !item}
+          onClick={this.handleDelete}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItem>
+    );
+  }
+}
+
+export { getCustomerDisplayName };
+export default Kunde;