seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-15 11:33:02 +02:00
parent 47bac6024c
commit 7e5b262d75
1 changed files with 169 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/components/manifest/OrderList.jsx
View File

@@ -14,6 +14,8 @@ import Skeleton from '@mui/material/Skeleton';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import ViewModuleIcon from '@mui/icons-material/ViewModule'; import ViewModuleIcon from '@mui/icons-material/ViewModule';
import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from 'notistack';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit'; import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import FillSpace from 'dashgui/FillSpace'; import FillSpace from 'dashgui/FillSpace';
@@ -24,10 +26,12 @@ import orderAutomat, {
isOrderPaid, isOrderPaid,
isOrderDelivered, isOrderDelivered,
} from '../../automats/orderAutomat'; } from '../../automats/orderAutomat';
import numberAutomat from '../../automats/numberAutomat';
import { order as orderApi } from '../../api'; import { order as orderApi } from '../../api';
import { backendErrorFrom } from '../../utils/backendError'; import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify'; import { notifyError } from '../../utils/notify';
import { formatPrice } from '../../utils/price'; import { formatPrice } from '../../utils/price';
import { getMaxDocumentNumber } from '../../utils/documentNumber';
import withNavigate from '../withNavigate'; import withNavigate from '../withNavigate';
import { import {
formatDate, formatDate,
@@ -48,18 +52,86 @@ function orderGrossTotal(lines) {
const cfg = manifestConfig('order'); const cfg = manifestConfig('order');
const rowSx = { // Dummy order generator using the active sequence scheme with max digits for layout testing
export function createDummyTestOrder() {
const maxNumber = getMaxDocumentNumber('order');
return {
id: 999999,
number: maxNumber,
externalNumber: 'REF-999999',
date: '2030-10-30T12:00:00Z',
customerName: 'Kunde',
positions: 999,
grossTotal: 30000.90,
};
}
const rowGridSx = {
display: 'grid',
gridTemplateColumns: 'max-content max-content 1fr max-content max-content max-content max-content auto',
gridTemplateRows: '0px 1fr',
rowGap: 0,
columnGap: 1.5,
alignItems: 'center', alignItems: 'center',
height: 64, width: '100%',
minHeight: 64,
maxHeight: 64,
boxSizing: 'border-box', boxSizing: 'border-box',
py: 0,
gap: 1.5,
}; };
const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }; const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
const measuringCellSx = {
visibility: 'hidden',
height: 0,
boxSizing: 'border-box',
pointerEvents: 'none',
textTransform: 'none',
letterSpacing: 'normal',
};
const headerCellSx = {
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
};
function renderInvisibleDummyRow(dummy) {
const d = dummy || createDummyTestOrder();
return (
<>
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
<Typography variant="body2">{d.externalNumber || 'Nr. / Ref.'}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body1">{d.customerName}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<Checkbox size="small" sx={{ p: 0.5 }} />
</Box>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<Checkbox size="small" sx={{ p: 0.5 }} />
</Box>
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<Chip size="small" label={d.positions} sx={{ height: 24, '& .MuiChip-label': { px: 0.5 } }} />
</Box>
<Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, whiteSpace: 'nowrap', display: 'flex', justifyContent: 'flex-end', ...measuringCellSx }}>
<Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
{formatPrice(d.grossTotal)}
</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 8, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<IconButton sx={{ width: 40, height: 40 }} />
</Box>
</>
);
}
/** /**
* Ambient context for `OrderRow`: FillSpace renders rows as bare elements * Ambient context for `OrderRow`: FillSpace renders rows as bare elements
* (`<Row item index />`), so the list publishes callbacks and the party map * (`<Row item index />`), so the list publishes callbacks and the party map
@@ -72,6 +144,7 @@ const rowContext = {
onDelete: null, onDelete: null,
onTogglePaid: null, onTogglePaid: null,
onToggleDelivered: null, onToggleDelivered: null,
headerItem: null,
}; };
// MARK: <OrderRow/> // MARK: <OrderRow/>
@@ -84,41 +157,28 @@ class OrderRow extends PureComponent {
render() { render() {
const { item: order, disabled } = this.props; const { item: order, disabled } = this.props;
const dummy = this.props.headerItem || rowContext.headerItem;
// Data-free probe (FillSpace measures the row height with `item` undefined). // Data-free probe (FillSpace measures the row height with `item` undefined).
if (!order) { if (!order) {
if (disabled) { if (disabled) {
return ( return (
<ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}> <ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0, opacity: 0, pointerEvents: 'none' }}>
<Typography variant="body2">&nbsp;</Typography> <Typography variant="body2">&nbsp;</Typography>
</ListItemButton> </ListItemButton>
); );
} }
return ( return (
<ListItemButton disabled divider sx={rowSx}> <ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}>
<Box sx={{ width: 120, flexShrink: 0 }}> {renderInvisibleDummyRow(dummy)}
<Skeleton variant="text" width={80} height={20} /> <Box sx={{ gridColumn: 1, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
<Skeleton variant="text" width={50} height={16} /> <Box sx={{ gridColumn: 2, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
</Box> <Box sx={{ gridColumn: 3, gridRow: 2 }}><Skeleton variant="text" width="60%" height={20} /></Box>
<Box sx={{ width: 100, flexShrink: 0 }}> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
<Skeleton variant="text" width={70} height={20} /> <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
</Box> <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="rounded" width={28} height={20} /></Box>
<Box sx={{ flex: 1, minWidth: 0 }}> <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}><Skeleton variant="text" width="80%" height={20} /></Box>
<Skeleton variant="text" width="60%" height={20} /> <Box sx={{ gridColumn: 8, gridRow: 2 }} />
</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> </ListItemButton>
); );
} }
@@ -130,8 +190,15 @@ class OrderRow extends PureComponent {
const delivered = isOrderDelivered(order); const delivered = isOrderDelivered(order);
return ( return (
<ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}> <ListItemButton
<Box sx={{ width: 120, flexShrink: 0, minWidth: 0 }}> divider
sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}
onClick={disabled ? undefined : () => onOpen?.(order)}
disabled={disabled}
>
{renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}> <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
{order.number} {order.number}
</Typography> </Typography>
@@ -140,19 +207,19 @@ class OrderRow extends PureComponent {
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}> <Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}> <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{order.date ? formatDate(order.date) : '–'} {order.date ? formatDate(order.date) : '–'}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ flex: 1, minWidth: 0 }}> <Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}> <Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
{this.partyName(order.entityId)} {this.partyName(order.entityId)}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
<Checkbox <Checkbox
size="small" size="small"
checked={paid} checked={paid}
@@ -164,7 +231,7 @@ class OrderRow extends PureComponent {
/> />
</Box> </Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}> <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
<Checkbox <Checkbox
size="small" size="small"
checked={delivered} checked={delivered}
@@ -176,42 +243,46 @@ class OrderRow extends PureComponent {
/> />
</Box> </Box>
<Chip <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
size="small" <Chip
label={lines.length} size="small"
title={`${lines.length} Positionen`} label={lines.length}
sx={{ title={`${lines.length} Positionen`}
width: 40, sx={{
flexShrink: 0, height: 24,
height: 24, fontSize: '0.75rem',
fontSize: '0.75rem', fontWeight: 600,
fontWeight: 600, fontVariantNumeric: 'tabular-nums',
fontVariantNumeric: 'tabular-nums', bgcolor: 'action.hover',
bgcolor: 'action.hover', color: lines.length > 0 ? 'text.primary' : 'text.disabled',
color: lines.length > 0 ? 'text.primary' : 'text.disabled', '& .MuiChip-label': { px: 0.5 },
'& .MuiChip-label': { px: 0.5 }, }}
}} />
/> </Box>
<Typography <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}>
variant="body2" <Typography
sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }} variant="body2"
> sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'right', whiteSpace: 'nowrap' }}
{gross > 0 ? formatPrice(gross) : '—'} >
</Typography> {gross > 0 ? formatPrice(gross) : '—'}
</Typography>
</Box>
<IconButton <Box sx={{ gridColumn: 8, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
aria-label={`„${order.number}“ löschen`} <IconButton
disabled={busyId != null} aria-label={`„${order.number}“ löschen`}
onClick={(e) => { disabled={busyId != null || disabled}
e.stopPropagation(); onClick={(e) => {
onDelete?.(order); e.stopPropagation();
}} onDelete?.(order);
onMouseDown={(e) => e.stopPropagation()} }}
sx={{ width: 40, height: 40, flexShrink: 0 }} onMouseDown={(e) => e.stopPropagation()}
> sx={{ width: 40, height: 40 }}
<DeleteOutlinedIcon sx={{ fontSize: 24 }} /> >
</IconButton> <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
</IconButton>
</Box>
</ListItemButton> </ListItemButton>
); );
} }
@@ -471,6 +542,7 @@ class OrderSearchField extends PureComponent {
export class OrderList extends PureComponent { export class OrderList extends PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.headerItem = createDummyTestOrder();
// getItems() returns current items or null and triggers loading of the first chunk // getItems() returns current items or null and triggers loading of the first chunk
this.state = { this.state = {
items: orderAutomat.getItems(), items: orderAutomat.getItems(),
@@ -497,12 +569,18 @@ export class OrderList extends PureComponent {
unfilteredTotal: state.unfilteredTotal ?? 0, unfilteredTotal: state.unfilteredTotal ?? 0,
filterKey: orderAutomat.getFilterKey(state), filterKey: orderAutomat.getFilterKey(state),
})); }));
this.unsubNumber = numberAutomat.subscribe(this, () => {
this.headerItem = createDummyTestOrder();
this.forceUpdate();
});
void numberAutomat.actions.ensureLoaded().catch(() => {});
void this.loadParties(); void this.loadParties();
} }
componentWillUnmount() { componentWillUnmount() {
this._cancelled = true; this._cancelled = true;
this.unsub?.(); this.unsub?.();
this.unsubNumber?.();
} }
async loadParties() { async loadParties() {
@@ -593,6 +671,7 @@ export class OrderList extends PureComponent {
rowContext.onDelete = this.handleDelete; rowContext.onDelete = this.handleDelete;
rowContext.onTogglePaid = this.handleTogglePaid; rowContext.onTogglePaid = this.handleTogglePaid;
rowContext.onToggleDelivered = this.handleToggleDelivered; rowContext.onToggleDelivered = this.handleToggleDelivered;
rowContext.headerItem = this.headerItem;
if (items === null && orderAutomat.state.status === 'failed') { if (items === null && orderAutomat.state.status === 'failed') {
return ( return (
@@ -621,35 +700,37 @@ export class OrderList extends PureComponent {
items={items || []} items={items || []}
totalCount={items ? items.length : 0} totalCount={items ? items.length : 0}
unfilteredTotal={unfilteredTotal} unfilteredTotal={unfilteredTotal}
headerItem={this.headerItem}
renderItem={OrderRow} renderItem={OrderRow}
virtualScrollbar virtualScrollbar
header={ header={
<Box <Box
sx={{ sx={{
display: 'flex', ...rowGridSx,
alignItems: 'center',
height: 36, height: 36,
minHeight: 36, minHeight: 36,
px: 2, px: 2,
gap: 1.5,
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: 'divider', 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> {renderInvisibleDummyRow(this.headerItem)}
<Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box> <Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Nr. / Ref.</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box> <Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box> <Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Kunde</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', ...headerCellSx }}>
<Box sx={{ width: 40, flexShrink: 0, textAlign: 'center' }}>Pos.</Box> <Tooltip title="Bezahlt">
<Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box> <PaymentsOutlinedIcon sx={{ fontSize: 18 }} />
<Box sx={{ width: 40, flexShrink: 0 }} /> </Tooltip>
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', ...headerCellSx }}>
<Tooltip title="Geliefert">
<LocalShippingOutlinedIcon sx={{ fontSize: 18 }} />
</Tooltip>
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center', textAlign: 'center', ...headerCellSx }}>Pos.</Box>
<Box sx={{ gridColumn: 7, gridRow: 2, textAlign: 'right', ...headerCellSx }}>Gesamt</Box>
<Box sx={{ gridColumn: 8, gridRow: 2, ...headerCellSx }} />
</Box> </Box>
} }
onPageChange={this.handlePageChange} onPageChange={this.handlePageChange}