u
This commit is contained in:
seb
@@ -3,14 +3,8 @@ 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';
|
||||
@@ -21,13 +15,8 @@ import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
import { setLastArticleSku } from '../../automats';
|
||||
import warehouseAutomat from '../../automats/warehouseAutomat';
|
||||
import {
|
||||
GREEN_PANEL,
|
||||
} from '../../colors';
|
||||
|
||||
function draftsFrom(warehouses) {
|
||||
return Object.fromEntries(warehouses.map((row) => [row.id, row.name]));
|
||||
}
|
||||
import { ArtikelLager } from '../../components/warehouse';
|
||||
import { GREEN_PANEL } from '../../colors';
|
||||
|
||||
function getInitialParams(props) {
|
||||
const searchParams =
|
||||
@@ -45,62 +34,176 @@ function getInitialParams(props) {
|
||||
return { prefill: prefill.trim(), returnTo };
|
||||
}
|
||||
|
||||
class ArtikelLagerSearchField extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const initial = warehouseAutomat.state.filter || props.prefill || '';
|
||||
this.state = {
|
||||
input: initial,
|
||||
submitting: false,
|
||||
};
|
||||
if (props.prefill && !warehouseAutomat.state.filter) {
|
||||
warehouseAutomat.actions.filter(props.prefill);
|
||||
}
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = warehouseAutomat.subscribe(this, (state) => ({
|
||||
input: state.filter,
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsub?.();
|
||||
}
|
||||
|
||||
onInputChange(input) {
|
||||
this.setState({ input });
|
||||
warehouseAutomat.actions.filter(input);
|
||||
}
|
||||
|
||||
async handleSubmit() {
|
||||
const name = this.state.input.trim();
|
||||
if (!name || this.state.submitting) return;
|
||||
|
||||
this.setState({ submitting: true });
|
||||
try {
|
||||
const row = await warehouseAutomat.actions.create({ name });
|
||||
enqueueSnackbar(`Lager „${row.name || name}“ angelegt.`, { variant: 'success' });
|
||||
this.setState({ input: '', submitting: false });
|
||||
warehouseAutomat.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
|
||||
? `Lagername „${input}“ übernommen.`
|
||||
: 'Neues Lager anlegen.'}
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SingleLineTextEdit
|
||||
sx={{ flex: 1 }}
|
||||
size="small"
|
||||
search
|
||||
clear
|
||||
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 ArtikelLagerPage extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { prefill } = getInitialParams(props);
|
||||
const initialWarehouses = warehouseAutomat.state.warehouses || [];
|
||||
const initialWarehouses =
|
||||
warehouseAutomat.state.filteredWarehouses ?? 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,
|
||||
filter: warehouseAutomat.state.filter ?? '',
|
||||
};
|
||||
this._cancelled = false;
|
||||
this.searchRef = createRef();
|
||||
this.listRef = createRef();
|
||||
this._sortable = null;
|
||||
|
||||
this.handleCreate = this.handleCreate.bind(this);
|
||||
this._cancelled = false;
|
||||
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) => {
|
||||
this.unsub = warehouseAutomat.subscribe(this, (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) });
|
||||
}
|
||||
return {
|
||||
warehouses: state.filteredWarehouses,
|
||||
filter: state.filter,
|
||||
status: state.status,
|
||||
error: state.error ? backendErrorFrom(state.error) : null,
|
||||
};
|
||||
});
|
||||
|
||||
void this.loadWarehouses();
|
||||
if (warehouseAutomat.state.status !== 'ready') {
|
||||
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
|
||||
} else {
|
||||
this._initSortable();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevProps.location !== this.props.location) {
|
||||
const { prefill } = getInitialParams(this.props);
|
||||
if (prefill && prefill !== this.state.newName) {
|
||||
this.setState({ newName: prefill });
|
||||
if (
|
||||
prevState.status !== this.state.status ||
|
||||
prevState.warehouses !== this.state.warehouses ||
|
||||
prevState.filter !== this.state.filter
|
||||
) {
|
||||
if (this.state.status === 'ready') {
|
||||
this._initSortable();
|
||||
}
|
||||
}
|
||||
|
||||
// Re-initialise Sortable when warehouses change or list mounts
|
||||
if (prevState.warehouses !== this.state.warehouses && this.listRef.current) {
|
||||
this._initSortable();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@@ -114,24 +217,30 @@ class ArtikelLagerPage extends PureComponent {
|
||||
const el = this.listRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const isFiltered = Boolean(this.state.filter?.trim());
|
||||
|
||||
this._sortable = Sortable.create(el, {
|
||||
handle: '.drag-handle',
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
disabled: isFiltered,
|
||||
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);
|
||||
});
|
||||
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);
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -147,133 +256,19 @@ class ArtikelLagerPage extends PureComponent {
|
||||
} 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) });
|
||||
void warehouseAutomat.actions.reload();
|
||||
}
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { status, error, warehouses, drafts, newName, busyKey } = this.state;
|
||||
const busy = busyKey != null;
|
||||
const { status, error, warehouses } = this.state;
|
||||
const { prefill, returnTo } = getInitialParams(this.props);
|
||||
|
||||
const { returnTo } = getInitialParams(this.props);
|
||||
|
||||
if (status === 'loading') {
|
||||
if (status === 'loading' || status === 'idle') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||||
<CircularProgress />
|
||||
@@ -287,127 +282,28 @@ class ArtikelLagerPage extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* SortableJS ghost / chosen styling */}
|
||||
|
||||
<ArtikelLagerSearchField
|
||||
inputRef={this.searchRef}
|
||||
prefill={prefill}
|
||||
returnTo={returnTo}
|
||||
navigate={this.props.navigate}
|
||||
/>
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={2} minHeight={280} color={GREEN_PANEL}>
|
||||
<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 & 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 wide={2} minHeight={0} color={GREEN_PANEL}>
|
||||
<List dense disablePadding ref={this.listRef} sx={{ width: '100%' }}>
|
||||
{warehouses.length === 0 ? (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
||||
Noch keine Lager angelegt.
|
||||
</Typography>
|
||||
) : (
|
||||
warehouses.map((wh) => (
|
||||
<ArtikelLager
|
||||
key={wh.id}
|
||||
warehouse={wh}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</List>
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
</>
|
||||
@@ -415,4 +311,5 @@ class ArtikelLagerPage extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export { ArtikelLager, ArtikelLagerSearchField };
|
||||
export default withNavigate(ArtikelLagerPage);
|
||||
|
||||
Reference in New Issue
Block a user