u

2026-10-15 11:33:02 +02:00
parent 47bac6024c
commit 7e5b262d75
1 changed files with 169 additions and 88 deletions
--- a/src/components/manifest/OrderList.jsx
+++ b/src/components/manifest/OrderList.jsx
@@ -14,6 +14,8 @@ import Skeleton from '@mui/material/Skeleton';
 import Tooltip from '@mui/material/Tooltip';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 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 SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import FillSpace from 'dashgui/FillSpace';
@@ -24,10 +26,12 @@ import orderAutomat, {
  isOrderPaid,
  isOrderDelivered,
 } from '../../automats/orderAutomat';
+import numberAutomat from '../../automats/numberAutomat';
 import { order as orderApi } from '../../api';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 import { formatPrice } from '../../utils/price';
+import { getMaxDocumentNumber } from '../../utils/documentNumber';
 import withNavigate from '../withNavigate';
 import {
  formatDate,
@@ -48,18 +52,86 @@ function orderGrossTotal(lines) {

 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',
-  height: 64,
-  minHeight: 64,
-  maxHeight: 64,
+  width: '100%',
  boxSizing: 'border-box',
-  py: 0,
-  gap: 1.5,
 };

 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
 * (`<Row item index />`), so the list publishes callbacks and the party map
@@ -72,6 +144,7 @@ const rowContext = {
  onDelete: null,
  onTogglePaid: null,
  onToggleDelivered: null,
+  headerItem: null,
 };

 // MARK: <OrderRow/> 
@@ -84,41 +157,28 @@ class OrderRow extends PureComponent {

  render() {
    const { item: order, disabled } = this.props;
+    const dummy = this.props.headerItem || rowContext.headerItem;

    // 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' }}>
+          <ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0, opacity: 0, pointerEvents: 'none' }}>
            <Typography variant="body2">&nbsp;</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 disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}>
+          {renderInvisibleDummyRow(dummy)}
+          <Box sx={{ gridColumn: 1, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
+          <Box sx={{ gridColumn: 2, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
+          <Box sx={{ gridColumn: 3, gridRow: 2 }}><Skeleton variant="text" width="60%" height={20} /></Box>
+          <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
+          <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
+          <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="rounded" width={28} height={20} /></Box>
+          <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}><Skeleton variant="text" width="80%" height={20} /></Box>
+          <Box sx={{ gridColumn: 8, gridRow: 2 }} />
        </ListItemButton>
      );
    }
@@ -130,8 +190,15 @@ class OrderRow extends PureComponent {
    const delivered = isOrderDelivered(order);

    return (
-      <ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}>
-        <Box sx={{ width: 120, flexShrink: 0, minWidth: 0 }}>
+      <ListItemButton
+        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 }}>
            {order.number}
          </Typography>
@@ -140,19 +207,19 @@ class OrderRow extends PureComponent {
          </Typography>
        </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}>
            {order.date ? formatDate(order.date) : '–'}
          </Typography>
        </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 }}>
            {this.partyName(order.entityId)}
          </Typography>
        </Box>

-        <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+        <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
          <Checkbox
            size="small"
            checked={paid}
@@ -164,7 +231,7 @@ class OrderRow extends PureComponent {
          />
        </Box>

-        <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+        <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
          <Checkbox
            size="small"
            checked={delivered}
@@ -176,42 +243,46 @@ class OrderRow extends PureComponent {
          />
        </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 },
-          }}
-        />
+        <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <Chip
+            size="small"
+            label={lines.length}
+            title={`${lines.length} Positionen`}
+            sx={{
+              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 },
+            }}
+          />
+        </Box>

-        <Typography
-          variant="body2"
-          sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
-        >
-          {gross > 0 ? formatPrice(gross) : '—'}
-        </Typography>
+        <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}>
+          <Typography
+            variant="body2"
+            sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'right', whiteSpace: 'nowrap' }}
+          >
+            {gross > 0 ? formatPrice(gross) : '—'}
+          </Typography>
+        </Box>

-        <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>
+        <Box sx={{ gridColumn: 8, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <IconButton
+            aria-label={`„${order.number}“ löschen`}
+            disabled={busyId != null || disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete?.(order);
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            sx={{ width: 40, height: 40 }}
+          >
+            <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+          </IconButton>
+        </Box>
      </ListItemButton>
    );
  }
@@ -471,6 +542,7 @@ class OrderSearchField extends PureComponent {
 export class OrderList extends PureComponent {
  constructor(props) {
    super(props);
+    this.headerItem = createDummyTestOrder();
    // getItems() returns current items or null and triggers loading of the first chunk
    this.state = {
      items: orderAutomat.getItems(),
@@ -497,12 +569,18 @@ export class OrderList extends PureComponent {
      unfilteredTotal: state.unfilteredTotal ?? 0,
      filterKey: orderAutomat.getFilterKey(state),
    }));
+    this.unsubNumber = numberAutomat.subscribe(this, () => {
+      this.headerItem = createDummyTestOrder();
+      this.forceUpdate();
+    });
+    void numberAutomat.actions.ensureLoaded().catch(() => {});
    void this.loadParties();
  }

  componentWillUnmount() {
    this._cancelled = true;
    this.unsub?.();
+    this.unsubNumber?.();
  }

  async loadParties() {
@@ -593,6 +671,7 @@ export class OrderList extends PureComponent {
    rowContext.onDelete = this.handleDelete;
    rowContext.onTogglePaid = this.handleTogglePaid;
    rowContext.onToggleDelivered = this.handleToggleDelivered;
+    rowContext.headerItem = this.headerItem;

    if (items === null && orderAutomat.state.status === 'failed') {
      return (
@@ -621,35 +700,37 @@ export class OrderList extends PureComponent {
              items={items || []}
              totalCount={items ? items.length : 0}
              unfilteredTotal={unfilteredTotal}
+              headerItem={this.headerItem}
              renderItem={OrderRow}
              virtualScrollbar
              header={
                <Box
                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
+                    ...rowGridSx,
                    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 }} />
+                  {renderInvisibleDummyRow(this.headerItem)}
+                  <Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Nr. / Ref.</Box>
+                  <Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
+                  <Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Kunde</Box>
+                  <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', ...headerCellSx }}>
+                    <Tooltip title="Bezahlt">
+                      <PaymentsOutlinedIcon sx={{ fontSize: 18 }} />
+                    </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>
              }
              onPageChange={this.handlePageChange}