461 lines
17 KiB
JavaScript
461 lines
17 KiB
JavaScript
import { PureComponent } from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import Button from '@mui/material/Button';
|
||
import Checkbox from '@mui/material/Checkbox';
|
||
import Chip from '@mui/material/Chip';
|
||
import CircularProgress from '@mui/material/CircularProgress';
|
||
import DialogActions from '@mui/material/DialogActions';
|
||
import DialogContent from '@mui/material/DialogContent';
|
||
import DialogTitle from '@mui/material/DialogTitle';
|
||
import IconButton from '@mui/material/IconButton';
|
||
import Stack from '@mui/material/Stack';
|
||
import Table from '@mui/material/Table';
|
||
import TableBody from '@mui/material/TableBody';
|
||
import TableCell from '@mui/material/TableCell';
|
||
import TableContainer from '@mui/material/TableContainer';
|
||
import TableHead from '@mui/material/TableHead';
|
||
import TableRow from '@mui/material/TableRow';
|
||
import TextField from '@mui/material/TextField';
|
||
import Typography from '@mui/material/Typography';
|
||
import Alert from '@mui/material/Alert';
|
||
import CloseIcon from '@mui/icons-material/Close';
|
||
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
|
||
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
|
||
import { enqueueSnackbar } from 'notistack';
|
||
import AppDialog from '../AppDialog';
|
||
import { order as orderApi } from '../../api';
|
||
import { notifyError } from '../../utils/notify';
|
||
import { todayInputValue } from './manifestConfig';
|
||
|
||
// MARK: helper to sum already shipped quantities per SKU across order shipments
|
||
function computeShippedBySku(shipments) {
|
||
const map = {};
|
||
for (const sh of shipments || []) {
|
||
for (const sl of sh.lines || []) {
|
||
if (sl.sku) {
|
||
map[sl.sku] = (map[sl.sku] || 0) + (Number(sl.amount) || 0);
|
||
}
|
||
}
|
||
}
|
||
return map;
|
||
}
|
||
|
||
// MARK: helper to determine next shipment number preview
|
||
export function getNextShipmentNumber(orderNumber, shipments = []) {
|
||
if (!orderNumber) return '–';
|
||
let maxIdx = 0;
|
||
for (const s of shipments || []) {
|
||
const num = String(s.number ?? '').trim();
|
||
const match = num.match(/-L-(\d+)$/i) || num.match(/-(\d+)$/);
|
||
if (match) {
|
||
const parsed = parseInt(match[1], 10);
|
||
if (!Number.isNaN(parsed) && parsed > maxIdx) {
|
||
maxIdx = parsed;
|
||
}
|
||
}
|
||
}
|
||
const nextIdx = maxIdx > 0 ? maxIdx + 1 : ((shipments?.length || 0) + 1);
|
||
return `${orderNumber}-L-${nextIdx}`;
|
||
}
|
||
|
||
/**
|
||
* Dialog for selecting items and quantities to create a shipment from a sales order.
|
||
* Calls POST /api/order/:id/shipment.
|
||
*/
|
||
export default class OrderShipmentDialog extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
const { initialAmounts, initialSelected } = this.calculateInitialState(props);
|
||
this.state = {
|
||
date: todayInputValue(),
|
||
externalNumber: '',
|
||
lineAmounts: initialAmounts,
|
||
selectedSkus: initialSelected,
|
||
saving: false,
|
||
error: null,
|
||
};
|
||
|
||
this.handleAmountChange = this.handleAmountChange.bind(this);
|
||
this.handleToggleSku = this.handleToggleSku.bind(this);
|
||
this.handleToggleAll = this.handleToggleAll.bind(this);
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
this.handleShipAll = this.handleShipAll.bind(this);
|
||
}
|
||
|
||
componentDidUpdate(prevProps) {
|
||
if (!prevProps.open && this.props.open) {
|
||
const { initialAmounts, initialSelected } = this.calculateInitialState(this.props);
|
||
this.setState({
|
||
date: todayInputValue(),
|
||
externalNumber: '',
|
||
lineAmounts: initialAmounts,
|
||
selectedSkus: initialSelected,
|
||
saving: false,
|
||
error: null,
|
||
});
|
||
}
|
||
}
|
||
|
||
calculateInitialState(props) {
|
||
const shippedBySku = computeShippedBySku(props.shipments);
|
||
const initialAmounts = {};
|
||
const initialSelected = new Set();
|
||
|
||
for (const l of props.lines || []) {
|
||
if (!l.sku) continue;
|
||
const ordered = Number(l.amount) || 0;
|
||
const shipped = shippedBySku[l.sku] || 0;
|
||
const rem = Math.max(0, ordered - shipped);
|
||
if (rem > 0) {
|
||
initialAmounts[l.sku] = String(rem);
|
||
initialSelected.add(l.sku);
|
||
} else {
|
||
initialAmounts[l.sku] = '0';
|
||
}
|
||
}
|
||
return { initialAmounts, initialSelected };
|
||
}
|
||
|
||
handleToggleSku(sku, remaining) {
|
||
this.setState((prev) => {
|
||
const nextSelected = new Set(prev.selectedSkus);
|
||
const nextAmounts = { ...prev.lineAmounts };
|
||
if (nextSelected.has(sku)) {
|
||
nextSelected.delete(sku);
|
||
} else {
|
||
nextSelected.add(sku);
|
||
if (!Number(nextAmounts[sku]) || Number(nextAmounts[sku]) <= 0) {
|
||
nextAmounts[sku] = String(remaining);
|
||
}
|
||
}
|
||
return { selectedSkus: nextSelected, lineAmounts: nextAmounts };
|
||
});
|
||
}
|
||
|
||
handleToggleAll(openItems) {
|
||
this.setState((prev) => {
|
||
const allSelected = openItems.length > 0 && openItems.every((it) => prev.selectedSkus.has(it.sku));
|
||
const nextSelected = new Set();
|
||
const nextAmounts = { ...prev.lineAmounts };
|
||
|
||
if (!allSelected) {
|
||
for (const it of openItems) {
|
||
nextSelected.add(it.sku);
|
||
if (!Number(nextAmounts[it.sku]) || Number(nextAmounts[it.sku]) <= 0) {
|
||
nextAmounts[it.sku] = String(it.remaining);
|
||
}
|
||
}
|
||
}
|
||
return { selectedSkus: nextSelected, lineAmounts: nextAmounts };
|
||
});
|
||
}
|
||
|
||
handleAmountChange(sku, val) {
|
||
this.setState((prev) => {
|
||
const nextAmounts = { ...prev.lineAmounts, [sku]: val };
|
||
const nextSelected = new Set(prev.selectedSkus);
|
||
const num = Number(val);
|
||
if (num > 0) {
|
||
nextSelected.add(sku);
|
||
} else {
|
||
nextSelected.delete(sku);
|
||
}
|
||
return { lineAmounts: nextAmounts, selectedSkus: nextSelected };
|
||
});
|
||
}
|
||
|
||
// MARK: calls orderApi.createShipment from ./api/index.js
|
||
// #region POST /api/order/:id/shipment — submit selected lines
|
||
async handleSubmit(e) {
|
||
e?.preventDefault?.();
|
||
const { orderId, onClose, onSuccess } = this.props;
|
||
const { date, externalNumber, lineAmounts, selectedSkus, saving } = this.state;
|
||
if (saving || !orderId) return;
|
||
|
||
const linesToShip = [];
|
||
for (const sku of selectedSkus) {
|
||
const amount = Number(lineAmounts[sku]);
|
||
if (amount > 0) {
|
||
linesToShip.push({ sku, amount });
|
||
}
|
||
}
|
||
|
||
if (linesToShip.length === 0) {
|
||
enqueueSnackbar('Bitte wählen Sie mindestens einen Artikel mit Liefermenge > 0 aus.', { variant: 'warning' });
|
||
return;
|
||
}
|
||
|
||
this.setState({ saving: true, error: null });
|
||
try {
|
||
const payload = {
|
||
date: date || undefined,
|
||
externalNumber: externalNumber.trim() || undefined,
|
||
lines: linesToShip,
|
||
};
|
||
|
||
const res = await orderApi.createShipment(orderId, payload);
|
||
const shipment = res?.shipment;
|
||
const shNum = shipment?.number || '';
|
||
|
||
enqueueSnackbar(
|
||
shNum ? `Lieferschein ${shNum} erfolgreich angelegt!` : 'Lieferschein erfolgreich angelegt!',
|
||
{ variant: 'success' },
|
||
);
|
||
|
||
onSuccess?.(shipment);
|
||
onClose();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
this.setState({ saving: false, error: err?.message || String(err) });
|
||
}
|
||
}
|
||
// #endregion
|
||
|
||
// MARK: calls orderApi.createShipment to ship all remaining lines
|
||
// #region POST /api/order/:id/shipment — ship all remaining
|
||
async handleShipAll() {
|
||
const { orderId, onClose, onSuccess } = this.props;
|
||
const { date, externalNumber, saving } = this.state;
|
||
if (saving || !orderId) return;
|
||
|
||
this.setState({ saving: true, error: null });
|
||
try {
|
||
const payload = {
|
||
date: date || undefined,
|
||
externalNumber: externalNumber.trim() || undefined,
|
||
};
|
||
|
||
const res = await orderApi.createShipment(orderId, payload);
|
||
const shipment = res?.shipment;
|
||
const shNum = shipment?.number || '';
|
||
|
||
enqueueSnackbar(
|
||
shNum ? `Lieferschein ${shNum} erfolgreich angelegt!` : 'Lieferschein erfolgreich angelegt!',
|
||
{ variant: 'success' },
|
||
);
|
||
|
||
onSuccess?.(shipment);
|
||
onClose();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
this.setState({ saving: false, error: err?.message || String(err) });
|
||
}
|
||
}
|
||
// #endregion
|
||
|
||
render() {
|
||
const { open, onClose, orderNumber, lines = [], shipments = [] } = this.props;
|
||
const { date, externalNumber, lineAmounts, selectedSkus, saving, error } = this.state;
|
||
const nextShipmentNumber = getNextShipmentNumber(orderNumber, shipments);
|
||
|
||
const shippedBySku = computeShippedBySku(shipments);
|
||
const activeLines = lines.filter((l) => Boolean(l.sku));
|
||
|
||
const items = activeLines.map((line) => {
|
||
const ordered = Number(line.amount) || 0;
|
||
const shipped = shippedBySku[line.sku] || 0;
|
||
const remaining = Math.max(0, ordered - shipped);
|
||
const isSelected = selectedSkus.has(line.sku);
|
||
const shipAmount = lineAmounts[line.sku] ?? (remaining > 0 ? String(remaining) : '0');
|
||
return {
|
||
...line,
|
||
ordered,
|
||
shipped,
|
||
remaining,
|
||
isSelected,
|
||
shipAmount,
|
||
};
|
||
});
|
||
|
||
const openItems = items.filter((it) => it.remaining > 0);
|
||
const allShipped = activeLines.length > 0 && openItems.length === 0;
|
||
const isAllSelected = openItems.length > 0 && openItems.every((it) => it.isSelected);
|
||
const selectedCount = openItems.filter((it) => it.isSelected).length;
|
||
|
||
return (
|
||
<AppDialog open={open} onClose={saving ? undefined : onClose} maxWidth="md" fullWidth>
|
||
<DialogTitle sx={{ m: 0, p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
|
||
<LocalShippingOutlinedIcon color="primary" />
|
||
<Box>
|
||
<Typography variant="h6" component="div" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
|
||
Lieferschein erstellen
|
||
</Typography>
|
||
{orderNumber ? (
|
||
<Typography variant="caption" color="text.secondary">
|
||
Zu: <strong>{orderNumber}</strong>
|
||
</Typography>
|
||
) : null}
|
||
</Box>
|
||
</Stack>
|
||
<IconButton
|
||
aria-label="close"
|
||
onClick={onClose}
|
||
disabled={saving}
|
||
size="small"
|
||
sx={{ color: (theme) => theme.palette.grey[500] }}
|
||
>
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</DialogTitle>
|
||
|
||
<DialogContent dividers sx={{ p: 2.5 }}>
|
||
{error && (
|
||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => this.setState({ error: null })}>
|
||
{error}
|
||
</Alert>
|
||
)}
|
||
|
||
{allShipped && (
|
||
<Alert severity="success" icon={<CheckCircleOutlineOutlinedIcon />} sx={{ mb: 2 }}>
|
||
Alle Artikel dieses Auftrags wurden bereits vollständig geliefert.
|
||
</Alert>
|
||
)}
|
||
|
||
{/* Header controls: date, preview shipment number, and external reference */}
|
||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mb: 2.5 }}>
|
||
<TextField
|
||
size="small"
|
||
type="date"
|
||
label="Lieferdatum"
|
||
value={date}
|
||
disabled={saving}
|
||
onChange={(e) => this.setState({ date: e.target.value })}
|
||
slotProps={{ inputLabel: { shrink: true } }}
|
||
sx={{ minWidth: 160 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Lieferschein-Nr."
|
||
value={nextShipmentNumber}
|
||
disabled
|
||
slotProps={{
|
||
input: {
|
||
readOnly: true,
|
||
},
|
||
}}
|
||
sx={{ minWidth: 190 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Referenz"
|
||
value={externalNumber}
|
||
disabled={saving}
|
||
onChange={(e) => this.setState({ externalNumber: e.target.value })}
|
||
fullWidth
|
||
/>
|
||
</Stack>
|
||
|
||
<TableContainer sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
|
||
<Table size="small">
|
||
<TableHead sx={{ bgcolor: 'action.hover' }}>
|
||
<TableRow>
|
||
<TableCell padding="checkbox" sx={{ width: 44 }}>
|
||
<Checkbox
|
||
size="small"
|
||
checked={isAllSelected}
|
||
indeterminate={selectedCount > 0 && !isAllSelected}
|
||
disabled={saving || openItems.length === 0}
|
||
onChange={() => this.handleToggleAll(openItems)}
|
||
/>
|
||
</TableCell>
|
||
<TableCell sx={{ fontWeight: 600 }}>SKU</TableCell>
|
||
<TableCell sx={{ fontWeight: 600 }}>Artikel</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Bestellt</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Geliefert</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Offen</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600, width: 130 }}>Liefermenge</TableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{items.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={7} align="center" sx={{ py: 3, color: 'text.secondary' }}>
|
||
Keine Artikel im Auftrag vorhanden.
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
items.map((item) => {
|
||
const isClosed = item.remaining <= 0;
|
||
return (
|
||
<TableRow
|
||
key={item.sku}
|
||
hover={!isClosed}
|
||
sx={{
|
||
opacity: isClosed ? 0.55 : 1,
|
||
bgcolor: isClosed ? 'action.hover' : undefined,
|
||
}}
|
||
>
|
||
<TableCell padding="checkbox">
|
||
<Checkbox
|
||
size="small"
|
||
checked={item.isSelected && !isClosed}
|
||
disabled={saving || isClosed}
|
||
onChange={() => this.handleToggleSku(item.sku, item.remaining)}
|
||
/>
|
||
</TableCell>
|
||
<TableCell sx={{ fontWeight: 600 }}>{item.sku}</TableCell>
|
||
<TableCell>
|
||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||
{item.name || '–'}
|
||
</Typography>
|
||
</TableCell>
|
||
<TableCell align="right">{item.ordered}</TableCell>
|
||
<TableCell align="right">{item.shipped}</TableCell>
|
||
<TableCell
|
||
align="right"
|
||
sx={{
|
||
fontWeight: 700,
|
||
color: item.remaining > 0 ? 'primary.main' : 'text.disabled',
|
||
}}
|
||
>
|
||
{item.remaining}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
{isClosed ? (
|
||
<Chip size="small" label="Geliefert" color="success" variant="outlined" sx={{ height: 22, fontSize: '0.7rem' }} />
|
||
) : (
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
disabled={saving || !item.isSelected}
|
||
value={item.shipAmount}
|
||
onChange={(e) => this.handleAmountChange(item.sku, e.target.value)}
|
||
slotProps={{
|
||
htmlInput: {
|
||
min: 0,
|
||
max: item.remaining,
|
||
step: 'any',
|
||
style: { textAlign: 'right', fontWeight: 600 },
|
||
},
|
||
}}
|
||
sx={{ width: 100 }}
|
||
/>
|
||
)}
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
})
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</DialogContent>
|
||
|
||
<DialogActions sx={{ p: 2, justifyContent: 'flex-end' }}>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
disabled={saving || allShipped || selectedCount === 0}
|
||
startIcon={saving ? <CircularProgress size={16} color="inherit" /> : <LocalShippingOutlinedIcon />}
|
||
onClick={this.handleSubmit}
|
||
sx={{ textTransform: 'none', fontWeight: 700 }}
|
||
>
|
||
{saving ? 'Wird erstellt…' : 'Lieferschein erstellen'}
|
||
</Button>
|
||
</DialogActions>
|
||
</AppDialog>
|
||
);
|
||
}
|
||
}
|