reroute

src/routes/kunde.jsx

@@ -0,0 +1,153 @@
+import { PureComponent } from 'react';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+import { RecordList } from 'dashgui/lists';
+import { StorageManagerContext } from '../../api/storageManagerContext';
+import { router } from '../../appRouter';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+
+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 formatDate(value) {
+  if (!value) return '';
+  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium' }).format(new Date(value));
+}
+
+class KundeListePage extends PureComponent {
+  static contextType = StorageManagerContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'loading',
+      error: null,
+      entities: [],
+      groupsById: {},
+      busyId: null,
+    };
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    void this.load();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+  }
+
+  async load() {
+    this.setState({ status: 'loading', error: null });
+    try {
+      const [entities, groups] = await Promise.all([
+        this.context.entities ?? this.context.entityPromise,
+        this.context.customergroups ?? this.context.customergroupPromise,
+      ]);
+      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) });
+    }
+  }
+
+  handleRetry() {
+    void this.load();
+  }
+
+  handleCreate() {
+    void router.navigate('/kunde/neu');
+  }
+
+  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 this.context.entity.delete(entity.id);
+      const list = await this.context.updateEntity();
+      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 });
+    }
+  }
+
+  render() {
+    const { status, error, entities, groupsById, busyId } = this.state;
+
+    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);
+
+    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="#bfdbfe"
+        getEditLabel={(row) => `„${label(row)}“ bearbeiten`}
+        getDeleteLabel={(row) => `„${label(row)}“ löschen`}
+      />
+    );
+  }
+}
+
+export default KundeListePage;