622 lines
20 KiB
JavaScript
622 lines
20 KiB
JavaScript
import { PureComponent, createRef } from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import Button from '@mui/material/Button';
|
||
import Chip from '@mui/material/Chip';
|
||
import CircularProgress from '@mui/material/CircularProgress';
|
||
import Divider from '@mui/material/Divider';
|
||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||
import IconButton from '@mui/material/IconButton';
|
||
import ListItemButton from '@mui/material/ListItemButton';
|
||
import Typography from '@mui/material/Typography';
|
||
import Checkbox from '@mui/material/Checkbox';
|
||
import Switch from '@mui/material/Switch';
|
||
import Skeleton from '@mui/material/Skeleton';
|
||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||
import { enqueueSnackbar } from 'notistack';
|
||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||
import FillSpace from 'dashgui/FillSpace';
|
||
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
||
import BackendError from '../BackendError';
|
||
import orderAutomat, {
|
||
CHUNK_SIZE,
|
||
isOrderPaid,
|
||
isOrderDelivered,
|
||
} from '../../automats/orderAutomat';
|
||
import { order as orderApi } from '../../api';
|
||
import { backendErrorFrom } from '../../utils/backendError';
|
||
import { notifyError } from '../../utils/notify';
|
||
import { formatPrice } from '../../utils/price';
|
||
import withNavigate from '../withNavigate';
|
||
import {
|
||
formatDate,
|
||
loadParties,
|
||
manifestConfig,
|
||
numberDisplay,
|
||
partyDisplayName,
|
||
} from './manifestConfig';
|
||
|
||
// MARK: pure helpers
|
||
function orderGrossTotal(lines) {
|
||
if (!Array.isArray(lines)) return 0;
|
||
return lines.reduce((acc, line) => {
|
||
const net = (Number(line.amount) || 0) * (Number(line.net) || 0) * (1 - (Number(line.rebate) || 0) / 100);
|
||
return acc + net * (1 + (Number(line.taxrate) || 0) / 100);
|
||
}, 0);
|
||
}
|
||
|
||
const cfg = manifestConfig('order');
|
||
|
||
const rowSx = {
|
||
alignItems: 'center',
|
||
height: 64,
|
||
minHeight: 64,
|
||
maxHeight: 64,
|
||
boxSizing: 'border-box',
|
||
py: 0,
|
||
gap: 1.5,
|
||
};
|
||
|
||
const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
|
||
|
||
/**
|
||
* Ambient context for `OrderRow`: FillSpace renders rows as bare elements
|
||
* (`<Row item index />`), so the list publishes callbacks and the party map
|
||
* here on every render.
|
||
*/
|
||
const rowContext = {
|
||
partiesById: {},
|
||
busyId: null,
|
||
onOpen: null,
|
||
onDelete: null,
|
||
onTogglePaid: null,
|
||
onToggleDelivered: null,
|
||
};
|
||
|
||
// MARK: <OrderRow/>
|
||
class OrderRow extends PureComponent {
|
||
partyName(partyId) {
|
||
if (partyId == null) return '–';
|
||
const party = rowContext.partiesById[partyId];
|
||
return partyDisplayName('order', party) || `Kunde #${partyId}`;
|
||
}
|
||
|
||
render() {
|
||
const { item: order, disabled } = this.props;
|
||
|
||
// Data-free probe (FillSpace measures the row height with `item` undefined).
|
||
if (!order) {
|
||
if (disabled) {
|
||
return (
|
||
<ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
|
||
<Typography variant="body2"> </Typography>
|
||
</ListItemButton>
|
||
);
|
||
}
|
||
return (
|
||
<ListItemButton disabled divider sx={rowSx}>
|
||
<Box sx={{ width: 120, flexShrink: 0 }}>
|
||
<Skeleton variant="text" width={80} height={20} />
|
||
<Skeleton variant="text" width={50} height={16} />
|
||
</Box>
|
||
<Box sx={{ width: 100, flexShrink: 0 }}>
|
||
<Skeleton variant="text" width={70} height={20} />
|
||
</Box>
|
||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||
<Skeleton variant="text" width="60%" height={20} />
|
||
</Box>
|
||
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
|
||
<Skeleton variant="circular" width={20} height={20} />
|
||
</Box>
|
||
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
|
||
<Skeleton variant="circular" width={20} height={20} />
|
||
</Box>
|
||
<Box sx={{ width: 40, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
|
||
<Skeleton variant="rounded" width={28} height={20} />
|
||
</Box>
|
||
<Box sx={{ width: 96, flexShrink: 0, display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Skeleton variant="text" width={60} height={20} />
|
||
</Box>
|
||
<Box sx={{ width: 40, flexShrink: 0 }} />
|
||
</ListItemButton>
|
||
);
|
||
}
|
||
|
||
const { busyId, onOpen, onDelete, onTogglePaid, onToggleDelivered } = rowContext;
|
||
const lines = order.lines ?? [];
|
||
const gross = orderGrossTotal(lines);
|
||
const paid = isOrderPaid(order);
|
||
const delivered = isOrderDelivered(order);
|
||
|
||
return (
|
||
<ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}>
|
||
<Box sx={{ width: 120, flexShrink: 0, minWidth: 0 }}>
|
||
<Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
|
||
{order.number}
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||
{numberDisplay(order.externalNumber)}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}>
|
||
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||
{order.date ? formatDate(order.date) : '–'}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||
<Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
|
||
{this.partyName(order.entityId)}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
|
||
<Checkbox
|
||
size="small"
|
||
checked={paid}
|
||
color="success"
|
||
onClick={(e) => e.stopPropagation()}
|
||
onChange={(e) => onTogglePaid?.(order, e.target.checked)}
|
||
inputProps={{ 'aria-label': `Auftrag ${order.number} bezahlt` }}
|
||
sx={{ p: 0.5 }}
|
||
/>
|
||
</Box>
|
||
|
||
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
|
||
<Checkbox
|
||
size="small"
|
||
checked={delivered}
|
||
color="primary"
|
||
onClick={(e) => e.stopPropagation()}
|
||
onChange={(e) => onToggleDelivered?.(order, e.target.checked)}
|
||
inputProps={{ 'aria-label': `Auftrag ${order.number} geliefert` }}
|
||
sx={{ p: 0.5 }}
|
||
/>
|
||
</Box>
|
||
|
||
<Chip
|
||
size="small"
|
||
label={lines.length}
|
||
title={`${lines.length} Positionen`}
|
||
sx={{
|
||
width: 40,
|
||
flexShrink: 0,
|
||
height: 24,
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
fontVariantNumeric: 'tabular-nums',
|
||
bgcolor: 'action.hover',
|
||
color: lines.length > 0 ? 'text.primary' : 'text.disabled',
|
||
'& .MuiChip-label': { px: 0.5 },
|
||
}}
|
||
/>
|
||
|
||
<Typography
|
||
variant="body2"
|
||
sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
|
||
>
|
||
{gross > 0 ? formatPrice(gross) : '—'}
|
||
</Typography>
|
||
|
||
<IconButton
|
||
aria-label={`„${order.number}“ löschen`}
|
||
disabled={busyId != null}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDelete?.(order);
|
||
}}
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
sx={{ width: 40, height: 40, flexShrink: 0 }}
|
||
>
|
||
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
|
||
</IconButton>
|
||
</ListItemButton>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <OrderSearchField/>
|
||
class OrderSearchField extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
const s = orderAutomat.state;
|
||
this.state = {
|
||
input: s.filter ?? '',
|
||
onlyUnpaid: s.onlyUnpaid ?? false,
|
||
onlyUndelivered: s.onlyUndelivered ?? false,
|
||
seekMonths: s.seekMonths ?? 0,
|
||
seekYears: s.seekYears ?? 0,
|
||
negativeSeekMonths: s.negativeSeekMonths ?? 0,
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.unsub = orderAutomat.subscribe(this, (state) => ({
|
||
input: state.filter ?? '',
|
||
onlyUnpaid: state.onlyUnpaid ?? false,
|
||
onlyUndelivered: state.onlyUndelivered ?? false,
|
||
seekMonths: state.seekMonths ?? 0,
|
||
seekYears: state.seekYears ?? 0,
|
||
negativeSeekMonths: state.negativeSeekMonths ?? 0,
|
||
}));
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.unsub?.();
|
||
}
|
||
|
||
render() {
|
||
const { inputRef, onCreate } = this.props;
|
||
const { input, onlyUnpaid, onlyUndelivered, seekMonths, seekYears } = this.state;
|
||
const monthActive = seekMonths > 0;
|
||
const monthLabel = !monthActive ? '-1 Month' : `-${seekMonths} Month${seekMonths > 1 ? 's' : ''}`;
|
||
const yearActive = seekYears > 0;
|
||
const yearLabel = !yearActive ? '-1 Year' : `-${seekYears} Year${seekYears > 1 ? 's' : ''}`;
|
||
|
||
return (
|
||
<PanelTileGrid>
|
||
<Box
|
||
ref={inputRef}
|
||
sx={{
|
||
gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 1.25,
|
||
pb: 2,
|
||
}}
|
||
>
|
||
{/* Top row: search field & create button */}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 1,
|
||
}}
|
||
>
|
||
<SingleLineTextEdit
|
||
sx={{ flex: 1 }}
|
||
size="small"
|
||
search
|
||
clear
|
||
value={input}
|
||
onChange={(next) => orderAutomat.actions.filter(next)}
|
||
/>
|
||
<Button variant="contained" onClick={onCreate}>
|
||
{cfg.createButton}
|
||
</Button>
|
||
</Box>
|
||
|
||
{/* Filter Bar: "Nur ungezahlte", "Nur ungelieferte", Negativeseek (-1 Month, -1 Year, Reset) */}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
flexWrap: 'wrap',
|
||
gap: 1.5,
|
||
}}
|
||
>
|
||
{/* Left: Unpaid & Undelivered toggles */}
|
||
<Box
|
||
sx={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 1.5,
|
||
px: 1.5,
|
||
py: 0.25,
|
||
borderRadius: 2,
|
||
bgcolor: 'background.paper',
|
||
boxShadow: 1,
|
||
}}
|
||
>
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
size="small"
|
||
color="warning"
|
||
checked={onlyUnpaid}
|
||
onChange={(e) => orderAutomat.actions.setOnlyUnpaid(e.target.checked)}
|
||
/>
|
||
}
|
||
label={
|
||
<Typography variant="body2" sx={{ fontWeight: onlyUnpaid ? 600 : 400, userSelect: 'none' }}>
|
||
Nur ungezahlte
|
||
</Typography>
|
||
}
|
||
sx={{ m: 0 }}
|
||
/>
|
||
|
||
<Divider orientation="vertical" flexItem sx={{ my: 0.5 }} />
|
||
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
size="small"
|
||
color="primary"
|
||
checked={onlyUndelivered}
|
||
onChange={(e) => orderAutomat.actions.setOnlyUndelivered(e.target.checked)}
|
||
/>
|
||
}
|
||
label={
|
||
<Typography variant="body2" sx={{ fontWeight: onlyUndelivered ? 600 : 400, userSelect: 'none' }}>
|
||
Nur ungelieferte
|
||
</Typography>
|
||
}
|
||
sx={{ m: 0 }}
|
||
/>
|
||
</Box>
|
||
|
||
{/* Right: Negativeseek controls (-1 Month, -1 Year, Reset) */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
||
<Box
|
||
sx={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 0.75,
|
||
px: 1.25,
|
||
py: 0.25,
|
||
borderRadius: 2,
|
||
bgcolor: 'background.paper',
|
||
boxShadow: 1,
|
||
}}
|
||
>
|
||
<Button
|
||
size="small"
|
||
variant={monthActive ? 'contained' : 'outlined'}
|
||
color={monthActive ? 'primary' : 'inherit'}
|
||
onClick={() => orderAutomat.actions.addSeekMonth()}
|
||
sx={{
|
||
minWidth: 88,
|
||
px: 1.25,
|
||
py: 0.25,
|
||
height: 28,
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
textTransform: 'none',
|
||
boxSizing: 'border-box',
|
||
border: '1px solid',
|
||
borderColor: monthActive ? 'primary.main' : 'divider',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{monthLabel}
|
||
</Button>
|
||
|
||
<Button
|
||
size="small"
|
||
variant={yearActive ? 'contained' : 'outlined'}
|
||
color={yearActive ? 'primary' : 'inherit'}
|
||
onClick={() => orderAutomat.actions.addSeekYear()}
|
||
sx={{
|
||
minWidth: 78,
|
||
px: 1.25,
|
||
py: 0.25,
|
||
height: 28,
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
textTransform: 'none',
|
||
boxSizing: 'border-box',
|
||
border: '1px solid',
|
||
borderColor: yearActive ? 'primary.main' : 'divider',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{yearLabel}
|
||
</Button>
|
||
|
||
<Button
|
||
size="small"
|
||
variant="text"
|
||
color="inherit"
|
||
disabled={!monthActive && !yearActive}
|
||
onClick={() => orderAutomat.actions.resetNegativeSeek()}
|
||
sx={{
|
||
minWidth: 'auto',
|
||
px: 1,
|
||
py: 0.25,
|
||
height: 28,
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
textTransform: 'none',
|
||
}}
|
||
>
|
||
Reset
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</PanelTileGrid>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <OrderList/>
|
||
export class OrderList extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
// getItems() returns current items or null and triggers loading of the first chunk
|
||
this.state = {
|
||
items: orderAutomat.getItems(),
|
||
partiesById: {},
|
||
busyId: null,
|
||
};
|
||
this.searchRef = createRef();
|
||
this._cancelled = false;
|
||
this.handleRetry = this.handleRetry.bind(this);
|
||
this.handleCreate = this.handleCreate.bind(this);
|
||
this.handleOpen = this.handleOpen.bind(this);
|
||
this.handleDelete = this.handleDelete.bind(this);
|
||
this.handleTogglePaid = this.handleTogglePaid.bind(this);
|
||
this.handleToggleDelivered = this.handleToggleDelivered.bind(this);
|
||
this.handlePageChange = this.handlePageChange.bind(this);
|
||
}
|
||
|
||
componentDidMount() {
|
||
this._cancelled = false;
|
||
// Subscribe to items only
|
||
this.unsub = orderAutomat.subscribe(this, (state) => ({
|
||
items: state.items,
|
||
}));
|
||
void this.loadParties();
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this._cancelled = true;
|
||
this.unsub?.();
|
||
}
|
||
|
||
async loadParties() {
|
||
try {
|
||
const parties = await loadParties('order');
|
||
if (!this._cancelled) {
|
||
this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
|
||
}
|
||
} catch {
|
||
// Non-fatal: names fall back to ids.
|
||
}
|
||
}
|
||
|
||
handlePageChange(page, meta) {
|
||
const pageSize = meta?.pageSize ?? 10;
|
||
const startIndex = (page - 1) * pageSize;
|
||
const items = this.state.items;
|
||
const maxIndex = items ? items.length - 1 : startIndex;
|
||
const endIndex = Math.min(maxIndex, startIndex + pageSize - 1);
|
||
|
||
const startChunk = Math.floor(startIndex / CHUNK_SIZE);
|
||
const endChunk = Math.floor(endIndex / CHUNK_SIZE);
|
||
|
||
orderAutomat.requireChunk(startChunk, endChunk);
|
||
}
|
||
|
||
handleRetry() {
|
||
void orderAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
|
||
}
|
||
|
||
handleCreate() {
|
||
this.props.navigate(cfg.createPath);
|
||
}
|
||
|
||
handleOpen(order) {
|
||
this.props.navigate(cfg.editPath(order.id));
|
||
}
|
||
|
||
async handleDelete(order) {
|
||
if (this.state.busyId != null) return;
|
||
if (!window.confirm(cfg.confirmDelete(order.number))) return;
|
||
this.setState({ busyId: order.id });
|
||
try {
|
||
await orderApi.delete(order.id);
|
||
await orderAutomat.actions.reload();
|
||
enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
|
||
} catch (err) {
|
||
notifyError(err);
|
||
} finally {
|
||
if (!this._cancelled) this.setState({ busyId: null });
|
||
}
|
||
}
|
||
|
||
async handleTogglePaid(order, checked) {
|
||
if (this.state.busyId != null) return;
|
||
const patch = { paid: checked, payed: checked, isPaid: checked };
|
||
orderAutomat.actions.patchOrder(order.id, patch);
|
||
try {
|
||
await orderApi.update(order.id, { paid: checked });
|
||
enqueueSnackbar(checked ? 'Auftrag als bezahlt markiert' : 'Auftrag als unbezahlt markiert', {
|
||
variant: 'info',
|
||
});
|
||
} catch (err) {
|
||
console.warn('[OrderList] update paid on backend failed:', err);
|
||
}
|
||
}
|
||
|
||
async handleToggleDelivered(order, checked) {
|
||
if (this.state.busyId != null) return;
|
||
const patch = { delivered: checked, isDelivered: checked };
|
||
orderAutomat.actions.patchOrder(order.id, patch);
|
||
try {
|
||
await orderApi.update(order.id, { delivered: checked });
|
||
enqueueSnackbar(checked ? 'Auftrag als geliefert markiert' : 'Auftrag als ungeliefert markiert', {
|
||
variant: 'info',
|
||
});
|
||
} catch (err) {
|
||
console.warn('[OrderList] update delivered on backend failed:', err);
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { items, partiesById, busyId } = this.state;
|
||
|
||
if (items === null) {
|
||
if (orderAutomat.state.status === 'failed') {
|
||
return <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />;
|
||
}
|
||
return (
|
||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||
<CircularProgress />
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
rowContext.partiesById = partiesById;
|
||
rowContext.busyId = busyId;
|
||
rowContext.onOpen = this.handleOpen;
|
||
rowContext.onDelete = this.handleDelete;
|
||
rowContext.onTogglePaid = this.handleTogglePaid;
|
||
rowContext.onToggleDelivered = this.handleToggleDelivered;
|
||
|
||
return (
|
||
<>
|
||
<OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
|
||
<PanelTileGrid>
|
||
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
|
||
<FillSpace
|
||
aboveRef={[this.searchRef]}
|
||
reserveBottom={32}
|
||
minPageSize={8}
|
||
minHeight={0}
|
||
items={items}
|
||
totalCount={items.length}
|
||
renderItem={OrderRow}
|
||
virtualScrollbar
|
||
header={
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
height: 36,
|
||
minHeight: 36,
|
||
px: 2,
|
||
gap: 1.5,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
color: 'text.secondary',
|
||
typography: 'caption',
|
||
fontWeight: 600,
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.04em',
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
<Box sx={{ width: 120, flexShrink: 0 }}>Nr. / Ref.</Box>
|
||
<Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
|
||
<Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
|
||
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box>
|
||
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box>
|
||
<Box sx={{ width: 40, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
|
||
<Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
|
||
<Box sx={{ width: 40, flexShrink: 0 }} />
|
||
</Box>
|
||
}
|
||
onPageChange={this.handlePageChange}
|
||
/>
|
||
</PanelTile>
|
||
</PanelTileGrid>
|
||
</>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withNavigate(OrderList);
|