u

src/pages/artikel/lager.jsx

@@ -1,13 +1,347 @@
-import { useEffect } from 'react';
+import { PureComponent } 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 IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import WarehouseIcon from '@mui/icons-material/Warehouse';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+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 { setLastArticleSku } from '../../automats';
+import warehouseAutomat from '../../automats/warehouseAutomat';
 
-export default function ArtikelLagerPage() {
-  useEffect(() => {
-    setLastArticleSku(null);
-  }, []);
-
-  return (
-    <Typography color="text.secondary">Lager — Inhalt folgt.</Typography>
+function sortWarehouses(warehouses) {
+  return [...warehouses].sort((a, b) =>
+    String(a.name).localeCompare(String(b.name), 'de'),
   );
 }
+
+function draftsFrom(warehouses) {
+  return Object.fromEntries(warehouses.map((row) => [row.id, row.name]));
+}
+
+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 };
+}
+
+class ArtikelLagerPage extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { prefill } = getInitialParams(props);
+    const initialWarehouses = sortWarehouses(warehouseAutomat.state.warehouses || []);
+    this.state = {
+      status: warehouseAutomat.state.status === 'ready' ? 'ready' : 'loading',
+      error: warehouseAutomat.state.error ? backendErrorFrom(warehouseAutomat.state.error) : null,
+      warehouses: initialWarehouses,
+      drafts: draftsFrom(initialWarehouses),
+      newName: prefill,
+      busyKey: null,
+    };
+    this._cancelled = false;
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleRetry = this.handleRetry.bind(this);
+    this.loadWarehouses = this.loadWarehouses.bind(this);
+  }
+
+  componentDidMount() {
+    setLastArticleSku(null);
+    const { prefill } = getInitialParams(this.props);
+    if (prefill && !this.state.newName) {
+      this.setState({ newName: prefill });
+    }
+    this._cancelled = false;
+
+    this.unsub = warehouseAutomat.subscribe((state) => {
+      if (this._cancelled) return;
+      if (state.status === 'ready') {
+        this.applyWarehouses(state.warehouses);
+      } else if (state.status === 'failed') {
+        this.setState({ status: 'failed', error: backendErrorFrom(state.error) });
+      }
+    });
+
+    void this.loadWarehouses();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.location !== this.props.location) {
+      const { prefill } = getInitialParams(this.props);
+      if (prefill && prefill !== this.state.newName) {
+        this.setState({ newName: prefill });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+  }
+
+  applyWarehouses(warehouses) {
+    const sorted = sortWarehouses(warehouses);
+    this.setState((prev) => {
+      const currentDrafts = prev.drafts || {};
+      const nextDrafts = { ...draftsFrom(sorted) };
+      // Preserve unsaved in-progress edits for still-existing items if not busy
+      for (const wh of sorted) {
+        if (prev.busyKey !== wh.id && currentDrafts[wh.id] !== undefined) {
+          nextDrafts[wh.id] = currentDrafts[wh.id];
+        }
+      }
+      return {
+        status: 'ready',
+        error: null,
+        warehouses: sorted,
+        drafts: nextDrafts,
+      };
+    });
+  }
+
+  async loadWarehouses() {
+    if (warehouseAutomat.state.status !== 'ready') {
+      this.setState({ status: 'loading', error: null });
+    }
+    try {
+      const list = await warehouseAutomat.actions.load();
+      if (this._cancelled) return;
+      this.applyWarehouses(list);
+    } catch (err) {
+      if (this._cancelled) return;
+      this.setState({ status: 'failed', error: backendErrorFrom(err) });
+    }
+  }
+
+  handleRetry() {
+    void this.loadWarehouses();
+  }
+
+  async refreshFromServer() {
+    const list = await warehouseAutomat.actions.reload();
+    if (this._cancelled) return;
+    this.applyWarehouses(list);
+  }
+
+  async handleCreate() {
+    const name = this.state.newName.trim();
+    if (!name || this.state.busyKey != null) return;
+
+    const { returnTo } = getInitialParams(this.props);
+
+    this.setState({ busyKey: 'new' });
+    try {
+      const newWarehouse = await warehouseAutomat.actions.create({ name });
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ newName: '', busyKey: null });
+      enqueueSnackbar(`Lager „${newWarehouse.name || name}“ angelegt.`, { variant: 'success' });
+
+      if (returnTo && this.props.navigate) {
+        this.props.navigate(returnTo);
+      }
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ busyKey: null });
+    }
+  }
+
+  async handleRename(wh) {
+    const draft = String(this.state.drafts[wh.id] ?? '').trim();
+    if (!draft) {
+      this.setState((prev) => ({
+        drafts: { ...prev.drafts, [wh.id]: wh.name },
+      }));
+      return;
+    }
+    if (draft === wh.name || this.state.busyKey != null) return;
+
+    this.setState({ busyKey: wh.id });
+    try {
+      await warehouseAutomat.actions.update(wh.id, { name: draft });
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+      enqueueSnackbar('Lager gespeichert.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState((prev) => ({
+        busyKey: null,
+        drafts: { ...prev.drafts, [wh.id]: wh.name },
+      }));
+    }
+  }
+
+  async handleDelete(wh) {
+    if (this.state.busyKey != null) return;
+    if (!window.confirm(`Lager „${wh.name}“ wirklich löschen?`)) {
+      return;
+    }
+
+    this.setState({ busyKey: wh.id });
+    try {
+      await warehouseAutomat.actions.remove(wh.id);
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+      enqueueSnackbar('Lager gelöscht.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ busyKey: null });
+    }
+  }
+
+  render() {
+    const { status, error, warehouses, drafts, newName, busyKey } = this.state;
+    const busy = busyKey != null;
+
+    const { returnTo } = getInitialParams(this.props);
+
+    if (status === 'loading') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status === 'failed') {
+      return <BackendError error={error} onRetry={this.handleRetry} />;
+    }
+
+    return (
+      <PanelTileGrid>
+        <PanelTile wide={2} minHeight={280} color="#bbf7d0">
+          <Stack spacing={2}>
+            {returnTo ? (
+              <Alert
+                severity="info"
+                sx={{ py: 0.5, alignItems: 'center' }}
+                action={
+                  <Button
+                    color="inherit"
+                    size="small"
+                    onClick={() => this.props.navigate?.(returnTo)}
+                  >
+                    Zurück
+                  </Button>
+                }
+              >
+                {newName
+                  ? `Lagername „${newName}“ übernommen.`
+                  : 'Neues Lager anlegen.'}
+              </Alert>
+            ) : null}
+
+            <Typography variant="body2" color="text.secondary">
+              Lager der ausgewählten Firma.
+            </Typography>
+
+            <List dense disablePadding>
+              {warehouses.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                  Noch keine Lager angelegt.
+                </Typography>
+              ) : (
+                warehouses.map((wh) => (
+                  <ListItem
+                    key={wh.id}
+                    disableGutters
+                    sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
+                  >
+                    <WarehouseIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
+                    <SingleLineTextEdit
+                      size="small"
+                      label=""
+                      value={drafts[wh.id] ?? ''}
+                      disabled={busy}
+                      onChange={(next) =>
+                        this.setState((prev) => ({
+                          drafts: { ...prev.drafts, [wh.id]: next },
+                        }))
+                      }
+                      onBlur={() => void this.handleRename(wh)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault();
+                          event.target.blur();
+                        }
+                        if (event.key === 'Escape') {
+                          event.preventDefault();
+                          this.setState((prev) => ({
+                            drafts: { ...prev.drafts, [wh.id]: wh.name },
+                          }));
+                          event.target.blur();
+                        }
+                      }}
+                      sx={{ flex: 1 }}
+                    />
+                    <IconButton
+                      edge="end"
+                      size="small"
+                      aria-label={`„${wh.name}“ löschen`}
+                      disabled={busy}
+                      onClick={() => void this.handleDelete(wh)}
+                    >
+                      <DeleteOutlinedIcon fontSize="small" />
+                    </IconButton>
+                  </ListItem>
+                ))
+              )}
+            </List>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <SingleLineTextEdit
+                size="small"
+                label="Neues Lager"
+                value={newName}
+                disabled={busy}
+                onChange={(next) => this.setState({ newName: next })}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    void this.handleCreate();
+                  }
+                }}
+                sx={{ flex: 1 }}
+              />
+              <Button
+                variant="contained"
+                size="small"
+                disabled={busy || !newName.trim()}
+                onClick={() => void this.handleCreate()}
+              >
+                {busyKey === 'new' ? '…' : 'Hinzufügen'}
+              </Button>
+            </Box>
+          </Stack>
+        </PanelTile>
+      </PanelTileGrid>
+    );
+  }
+}
+
+export default withNavigate(ArtikelLagerPage);