u

src/routes/kunde.jsx

@@ -1,156 +1,289 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../components/BackendError';
-import { RecordList } from 'dashgui/lists';
-import { entity as entityApi } from '../api';
-import entityAutomat from '../automats/entityAutomat';
-import customergroupAutomat from '../automats/customergroupAutomat';
-import { router } from '../appRouter';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import withNavigate from '../components/withNavigate';
 import { backendErrorFrom } from '../utils/backendError';
 import { notifyError } from '../utils/notify';
-import {
-  BLUE_PANEL,
-} from '../colors';
+import entityAutomat from '../automats/entityAutomat';
+import customergroupAutomat from '../automats/customergroupAutomat';
+import { Kunde } from '../components/kunde';
+import { BLUE_PANEL } from '../colors';
 
-function sortEntities(entities) {
-  return [...entities].sort((a, b) => {
-    const byName = String(a.name).localeCompare(String(b.name), 'de');
-    if (byName !== 0) return byName;
-    return String(a.firstName ?? '').localeCompare(String(b.firstName ?? ''), 'de');
-  });
+function getInitialParams(props) {
+  const searchParams =
+    typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+  const prefill =
+    props.location?.state?.name ??
+    props.location?.state?.newName ??
+    searchParams?.get('name') ??
+    searchParams?.get('newName') ??
+    '';
+  const returnTo =
+    props.location?.state?.returnTo ??
+    searchParams?.get('returnTo') ??
+    null;
+  return { prefill: prefill.trim(), returnTo };
 }
 
-function formatDate(value) {
-  if (!value) return '';
-  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium' }).format(new Date(value));
+class KundeSearchField extends PureComponent {
+  constructor(props) {
+    super(props);
+    const initial = entityAutomat.state.filter || props.prefill || '';
+    this.state = {
+      input: initial,
+      submitting: false,
+    };
+    if (props.prefill && !entityAutomat.state.filter) {
+      entityAutomat.actions.filter(props.prefill);
+    }
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    this.unsub = entityAutomat.subscribe(this, (state) => ({
+      input: state.filter,
+    }));
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
+  onInputChange(input) {
+    this.setState({ input });
+    entityAutomat.actions.filter(input);
+  }
+
+  async handleSubmit() {
+    const raw = this.state.input.trim();
+    if (!raw || this.state.submitting) return;
+
+    this.setState({ submitting: true });
+    try {
+      await customergroupAutomat.actions.ensureLoaded();
+      const groups = customergroupAutomat.state.items ?? [];
+      const defaultGroup = groups.find((g) => g.editable !== false) ?? groups[0];
+      if (!defaultGroup) {
+        throw new Error('Keine Kundengruppe vorhanden.');
+      }
+
+      let name = raw;
+      let firstName = null;
+
+      if (raw.includes(',')) {
+        const parts = raw.split(',').map((p) => p.trim());
+        name = parts[0];
+        firstName = parts.slice(1).join(' ') || null;
+      } else if (raw.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(raw)) {
+        const parts = raw.split(' ');
+        firstName = parts[0];
+        name = parts.slice(1).join(' ');
+      }
+
+      const body = {
+        customergroupId: defaultGroup.id,
+        name,
+      };
+      if (firstName) body.firstName = firstName;
+
+      const row = await entityAutomat.actions.create(body);
+      const displayName = [row.firstName, row.name].filter(Boolean).join(' ') || row.name || raw;
+      enqueueSnackbar(`Kunde „${displayName}“ angelegt.`, { variant: 'success' });
+      this.setState({ input: '', submitting: false });
+      entityAutomat.actions.filter('');
+      if (this.props.returnTo && this.props.navigate) {
+        this.props.navigate(this.props.returnTo);
+      }
+    } catch (err) {
+      this.setState({ submitting: false });
+      notifyError(err);
+    }
+  }
+
+  render() {
+    const { inputRef, returnTo, navigate } = this.props;
+    const { input, submitting } = this.state;
+    const canSubmit = Boolean(input.trim()) && !submitting;
+
+    return (
+      <PanelTileGrid>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: {
+              xs: '1 / -1',
+              sm: 'span 2',
+              md: 'span 2',
+            },
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            pb: 2,
+          }}
+        >
+          {returnTo ? (
+            <Alert
+              severity="info"
+              sx={{ py: 0.5, alignItems: 'center' }}
+              action={
+                <Button
+                  color="inherit"
+                  size="small"
+                  onClick={() => navigate?.(returnTo)}
+                >
+                  Zurück
+                </Button>
+              }
+            >
+              {input
+                ? `Kundenname „${input}“ übernommen.`
+                : 'Neuen Kunden anlegen.'}
+            </Alert>
+          ) : null}
+
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <SingleLineTextEdit
+              sx={{ flex: 1 }}
+              size="small"
+              search
+              clear
+              placeholder="Kunde suchen oder anlegen…"
+              value={input}
+              disabled={submitting}
+              onChange={(next) => this.onInputChange(next)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  void this.handleSubmit();
+                }
+              }}
+            />
+            <Button
+              variant="contained"
+              disabled={!canSubmit}
+              onClick={() => void this.handleSubmit()}
+            >
+              Hinzufügen
+            </Button>
+          </Box>
+        </Box>
+      </PanelTileGrid>
+    );
+  }
 }
 
 class KundeListePage extends PureComponent {
   constructor(props) {
     super(props);
+    const initialEntities =
+      entityAutomat.state.filteredItems ?? entityAutomat.state.items ?? [];
     this.state = {
-      status: 'loading',
-      error: null,
-      entities: [],
-      groupsById: {},
-      busyId: null,
+      status: entityAutomat.state.status === 'ready' ? 'ready' : 'loading',
+      error: entityAutomat.state.error ? backendErrorFrom(entityAutomat.state.error) : null,
+      entities: initialEntities,
+      groups: customergroupAutomat.state.items ?? [],
+      filter: entityAutomat.state.filter ?? '',
     };
-    this._cancelled = false;
+    this.searchRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
-    this.handleCreate = this.handleCreate.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
   }
 
   componentDidMount() {
-    this._cancelled = false;
-    void this.load();
+    this.unsub = entityAutomat.subscribe(this, (state) => ({
+      entities: state.filteredItems ?? state.items,
+      filter: state.filter ?? '',
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
+
+    this.unsubGroups = customergroupAutomat.subscribe(this, (state) => ({
+      groups: state.items,
+    }));
+
+    if (entityAutomat.state.status !== 'ready') {
+      void entityAutomat.actions.load().catch((err) => notifyError(err));
+    }
+    if (customergroupAutomat.state.status !== 'ready') {
+      void customergroupAutomat.actions.load().catch(() => {});
+    }
   }
 
   componentWillUnmount() {
-    this._cancelled = true;
-  }
-
-  async load() {
-    this.setState({ status: 'loading', error: null });
-    try {
-      const [entities, groups] = await Promise.all([
-        entityAutomat.actions.ensureLoaded(),
-        customergroupAutomat.actions.ensureLoaded(),
-      ]);
-      if (this._cancelled) return;
-      const groupsById = Object.fromEntries(groups.map((row) => [row.id, row]));
-      this.setState({
-        status: 'ready',
-        entities: sortEntities(entities),
-        groupsById,
-      });
-    } catch (err) {
-      if (this._cancelled) return;
-      this.setState({ status: 'failed', error: backendErrorFrom(err) });
-    }
+    this.unsub?.();
+    this.unsubGroups?.();
   }
 
   handleRetry() {
-    void this.load();
-  }
-
-  handleCreate() {
-    void router.navigate('/kunde/neu');
+    void entityAutomat.actions.load().catch((err) => notifyError(err));
   }
 
   handleEdit(entity) {
-    void router.navigate(`/kunde/${entity.id}`);
-  }
-
-  groupName(customergroupId) {
-    return this.state.groupsById[customergroupId]?.name;
-  }
-
-  async handleDelete(entity) {
-    if (this.state.busyId != null) return;
-    const label = [entity.firstName, entity.name].filter(Boolean).join(' ');
-    if (!window.confirm(`Kunde „${label}“ wirklich löschen?`)) return;
-
-    this.setState({ busyId: entity.id });
-    try {
-      await entityApi.delete(entity.id);
-      const list = await entityAutomat.actions.reload();
-      if (this._cancelled) return;
-      this.setState({
-        entities: sortEntities(list),
-        busyId: null,
-      });
-      enqueueSnackbar('Kunde gelöscht.', { variant: 'success' });
-    } catch (err) {
-      if (this._cancelled) return;
-      notifyError(err);
-      this.setState({ busyId: null });
-    }
+    if (!entity?.id) return;
+    this.props.navigate?.(`/kunde/${entity.id}`);
   }
 
   render() {
-    const { status, error, entities, busyId } = this.state;
+    const { status, error, entities, groups, filter } = this.state;
+    const { prefill, returnTo } = getInitialParams(this.props);
+
+    if (status === 'loading' || status === 'idle') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
 
     if (status === 'failed') {
       return <BackendError error={error} onRetry={this.handleRetry} />;
     }
 
-    const columns = [
-      { key: 'number', label: 'Kundennummer' },
-      { key: 'name', label: 'Name' },
-      { key: 'firstName', label: 'Vorname' },
-      {
-        key: 'customergroupId',
-        label: 'Gruppe',
-        render: (row) => this.groupName(row.customergroupId),
-      },
-      {
-        key: 'createdAt',
-        label: 'Erstellt am',
-        render: (row) => formatDate(row.createdAt),
-      },
-    ];
-
-    const label = (row) =>
-      [row.firstName, row.name].filter(Boolean).join(' ') || String(row.number);
+    const trimmedFilter = filter?.trim() ?? '';
+    const groupsById = Object.fromEntries(groups.map((g) => [g.id, g]));
 
     return (
-      <RecordList
-        status={status}
-        error={<BackendError error={error} onRetry={this.handleRetry} />}
-        rows={entities}
-        columns={columns}
-        createLabel="Neuer Kunde"
-        onCreate={this.handleCreate}
-        onEdit={this.handleEdit}
-        onDelete={this.handleDelete}
-        deleteDisabled={busyId != null}
-        emptyMessage="Noch keine Kunden."
-        color={BLUE_PANEL}
-        getEditLabel={(row) => `„${label(row)}“ bearbeiten`}
-        getDeleteLabel={(row) => `„${label(row)}“ löschen`}
-      />
+      <>
+        <KundeSearchField
+          inputRef={this.searchRef}
+          prefill={prefill}
+          returnTo={returnTo}
+          navigate={this.props.navigate}
+        />
+        <PanelTileGrid>
+          <PanelTile wide={2} minHeight={0} color={BLUE_PANEL}>
+            <List dense disablePadding sx={{ width: '100%' }}>
+              {entities.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                  {trimmedFilter
+                    ? `Keine Treffer für „${trimmedFilter}“.`
+                    : 'Noch keine Kunden angelegt.'}
+                </Typography>
+              ) : (
+                entities.map((entity) => (
+                  <Kunde
+                    key={entity.id}
+                    customer={entity}
+                    groupName={groupsById[entity.customergroupId]?.name}
+                    onEdit={this.handleEdit}
+                  />
+                ))
+              )}
+            </List>
+          </PanelTile>
+        </PanelTileGrid>
+      </>
     );
   }
 }
 
-export default KundeListePage;
+export { Kunde, KundeSearchField };
+export default withNavigate(KundeListePage);