reroute

src/routes/artikel/lager.jsx

@@ -0,0 +1,421 @@
+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 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 DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import WarehouseIcon from '@mui/icons-material/Warehouse';
+import Sortable from 'sortablejs';
+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';
+
+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 = 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.listRef = createRef();
+    this._sortable = null;
+
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleRetry = this.handleRetry.bind(this);
+    this.loadWarehouses = this.loadWarehouses.bind(this);
+    this._initSortable = this._initSortable.bind(this);
+    this._destroySortable = this._destroySortable.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, prevState) {
+    if (prevProps.location !== this.props.location) {
+      const { prefill } = getInitialParams(this.props);
+      if (prefill && prefill !== this.state.newName) {
+        this.setState({ newName: prefill });
+      }
+    }
+
+    // Re-initialise Sortable when warehouses change or list mounts
+    if (prevState.warehouses !== this.state.warehouses && this.listRef.current) {
+      this._initSortable();
+    }
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+    this._destroySortable();
+  }
+
+  _initSortable() {
+    this._destroySortable();
+    const el = this.listRef.current;
+    if (!el) return;
+
+    this._sortable = Sortable.create(el, {
+      handle: '.drag-handle',
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      chosenClass: 'sortable-chosen',
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+        if (oldIndex === newIndex) return;
+
+        this.setState((prev) => {
+          const next = [...prev.warehouses];
+          const [moved] = next.splice(oldIndex, 1);
+          next.splice(newIndex, 0, moved);
+          return { warehouses: next };
+        }, () => {
+          const ids = this.state.warehouses.map((w) => w.id);
+          void this._persistOrder(ids);
+        });
+      },
+    });
+  }
+
+  _destroySortable() {
+    this._sortable?.destroy();
+    this._sortable = null;
+  }
+
+  async _persistOrder(warehouseIds) {
+    try {
+      await warehouseAutomat.actions.reorder(warehouseIds);
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      // Roll back optimistic reorder
+      void this.refreshFromServer();
+    }
+  }
+
+  applyWarehouses(warehouses) {
+    // Preserve order returned by the server (already sorted by sort/name from backend)
+    this.setState((prev) => {
+      const currentDrafts = prev.drafts || {};
+      const nextDrafts = { ...draftsFrom(warehouses) };
+      // Preserve unsaved in-progress edits for still-existing items if not busy
+      for (const wh of warehouses) {
+        if (prev.busyKey !== wh.id && currentDrafts[wh.id] !== undefined) {
+          nextDrafts[wh.id] = currentDrafts[wh.id];
+        }
+      }
+      return {
+        status: 'ready',
+        error: null,
+        warehouses,
+        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 (
+      <>
+        {/* SortableJS ghost / chosen styling */}
+        <style>{`
+          .sortable-ghost { opacity: 0.35 !important; }
+          .sortable-chosen { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
+          .drag-handle { cursor: grab; touch-action: none; }
+          .drag-handle:active { cursor: grabbing; }
+        `}</style>
+
+        <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">
+                Reihenfolge per Drag &amp; Drop anpassen.
+              </Typography>
+
+              <List dense disablePadding ref={this.listRef}>
+                {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' }}
+                      data-id={wh.id}
+                    >
+                      <Box
+                        className="drag-handle"
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          color: 'text.disabled',
+                          flexShrink: 0,
+                          '&:hover': { color: 'text.secondary' },
+                          transition: 'color 0.15s',
+                        }}
+                      >
+                        <DragIndicatorIcon fontSize="small" />
+                      </Box>
+                      <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);