u

2026-10-15 02:33:24 +02:00
parent 360660b850
commit 77f6a0815f
2 changed files with 253 additions and 80 deletions
--- a/src/components/manifest/QuoteList.jsx
+++ b/src/components/manifest/QuoteList.jsx
@@ -18,10 +18,12 @@ import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import BackendError from '../BackendError';
 import SkeleHashImage from '../settings/SkeleHashImage';
 import quoteAutomat, { CHUNK_SIZE } from '../../automats/quoteAutomat';
+import numberAutomat from '../../automats/numberAutomat';
 import { quote as quoteApi } 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,
@@ -41,28 +43,130 @@ function quoteGrossTotal(lines) {

 const cfg = manifestConfig('quote');

-const rowSx = {
+// Dummy quote generator using the active sequence scheme with max digits for layout testing
+export function createDummyTestQuote() {
+  const maxNumber = getMaxDocumentNumber('quote');
+  return {
+    id: 999999,
+    number: maxNumber,
+    date: '2030-10-30T12:00:00Z',
+    customerName: 'Testkunde (Mustermann GmbH)',
+    positions: 999,
+    grossTotal: 30000.90,
+    files: [
+      {
+        id: 99991,
+        manifestId: 999999,
+        fileId: 99991,
+        name: `angebot-${maxNumber}.pdf`,
+        mimetype: 'application/pdf',
+        size: 2701,
+        thumbx: 141,
+        thumby: 200,
+        skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
+      },
+      {
+        id: 99992,
+        manifestId: 999999,
+        fileId: 99992,
+        name: 'datenblatt-muster.pdf',
+        mimetype: 'application/pdf',
+        size: 15420,
+        thumbx: 141,
+        thumby: 200,
+        skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
+      },
+      {
+        id: 99993,
+        manifestId: 999999,
+        fileId: 99993,
+        name: 'skizze-entwurf.pdf',
+        mimetype: 'application/pdf',
+        size: 8900,
+        thumbx: 141,
+        thumby: 200,
+        skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
+      },
+      {
+        id: 99994,
+        manifestId: 999999,
+        fileId: 99994,
+        name: 'agb-anlage.pdf',
+        mimetype: 'application/pdf',
+        size: 4500,
+        thumbx: 141,
+        thumby: 200,
+        skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
+      },
+      {
+        id: 99995,
+        manifestId: 999999,
+        fileId: 99995,
+        name: 'lieferschein-anhang.pdf',
+        mimetype: 'application/pdf',
+        size: 3200,
+        thumbx: 141,
+        thumby: 200,
+        skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
+      },
+    ],
+  };
+}
+
+const rowGridSx = {
+  display: 'grid',
+  gridTemplateColumns: 'max-content max-content 1fr max-content max-content max-content auto',
  alignItems: 'center',
-  height: 64,
-  minHeight: 64,
-  maxHeight: 64,
-  boxSizing: 'border-box',
-  py: 0,
  gap: 1.5,
+  width: '100%',
+  boxSizing: 'border-box',
 };

 const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };

+function renderInvisibleDummyRow(dummy) {
+  if (!dummy) return null;
+  return (
+    <>
+      <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}>
+        <Typography variant="body1" sx={{ fontWeight: 600 }}>{dummy.number}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}>
+        <Typography variant="body2">{dummy.date ? formatDate(dummy.date) : '–'}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}>
+        <Typography variant="body1">{dummy.customerName}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', pointerEvents: 'none' }}>
+        <Chip size="small" label={dummy.positions} sx={{ height: 24, '& .MuiChip-label': { px: 0.5 } }} />
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', display: 'flex', gap: '3px', pointerEvents: 'none' }}>
+        {[0, 1, 2, 3].map((i) => (
+          <Box key={i} sx={{ width: 15, height: 20, flexShrink: 0 }} />
+        ))}
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}>
+        <Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
+          {formatPrice(dummy.grossTotal)}
+        </Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', pointerEvents: 'none' }}>
+        <IconButton sx={{ width: 40, height: 40 }} />
+      </Box>
+    </>
+  );
+}
+
 /**
 * Ambient context for `QuoteRow`: FillSpace renders rows as bare elements
- * (`<Row item index />`), so the list publishes callbacks and the party map
- * here on every render.
+ * (`<Row item index />`), so the list publishes callbacks and the dummy quote here on every render.
 */
 const rowContext = {
  partiesById: {},
  busyId: null,
  onOpen: null,
  onDelete: null,
+  headerItem: null,
 };

 // MARK: <QuoteRow/>
@@ -75,37 +179,27 @@ class QuoteRow extends PureComponent {

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

    // Data-free probe (FillSpace measures the row height with `item` undefined).
    if (!quote) {
      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} />
-          </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: 40, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
-            <Skeleton variant="rounded" width={28} height={20} />
-          </Box>
-          <Box sx={{ width: 76, flexShrink: 0, display: 'flex', alignItems: 'center', gap: '3px' }}>
-            <Skeleton variant="rounded" width={15} 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="rounded" width={28} height={20} /></Box>
+          <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', alignItems: 'center', gap: '3px' }}><Skeleton variant="rounded" width={15} height={20} /></Box>
+          <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}><Skeleton variant="text" width="80%" height={20} /></Box>
+          <Box sx={{ gridColumn: 7, gridRow: 2 }} />
        </ListItemButton>
      );
    }
@@ -118,47 +212,54 @@ class QuoteRow extends PureComponent {
    const files = Array.isArray(quote.files) ? quote.files : [];

    return (
-      <ListItemButton divider sx={rowSx} onClick={() => onOpen?.(quote)}>
-        <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?.(quote)}
+        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 }}>
            {quote.number}
          </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}>
            {quote.date ? formatDate(quote.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 }}>
            {customer}
          </Typography>
        </Box>

-        <Chip
-          size="small"
-          label={posCount}
-          title={`${posCount} Positionen${quantityInfo}`}
-          sx={{
-            width: 40,
-            flexShrink: 0,
-            height: 24,
-            fontSize: '0.75rem',
-            fontWeight: 600,
-            fontVariantNumeric: 'tabular-nums',
-            bgcolor: 'action.hover',
-            color: posCount > 0 ? 'text.primary' : 'text.disabled',
-            '& .MuiChip-label': { px: 0.5 },
-          }}
-        />
+        <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <Chip
+            size="small"
+            label={posCount}
+            title={`${posCount} Positionen${quantityInfo}`}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums',
+              bgcolor: 'action.hover',
+              color: posCount > 0 ? 'text.primary' : 'text.disabled',
+              '& .MuiChip-label': { px: 0.5 },
+            }}
+          />
+        </Box>

        {/* Files / Attachments column after Pos.: space for 4 per row, 2 lines max */}
        <Box
          sx={{
-            width: 76,
-            flexShrink: 0,
+            gridColumn: 5,
+            gridRow: 2,
            display: 'flex',
            flexWrap: 'wrap',
            alignContent: 'center',
@@ -226,25 +327,29 @@ class QuoteRow extends PureComponent {
          })}
        </Box>

-        <Typography
-          variant="body2"
-          sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
-        >
-          {gross > 0 ? formatPrice(gross) : '—'}
-        </Typography>
+        <Box sx={{ gridColumn: 6, 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={`„${quote.number}“ löschen`}
-          disabled={busyId != null}
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete?.(quote);
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          sx={{ width: 40, height: 40, flexShrink: 0 }}
-        >
-          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
-        </IconButton>
+        <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <IconButton
+            aria-label={`„${quote.number}“ löschen`}
+            disabled={busyId != null || disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete?.(quote);
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            sx={{ width: 40, height: 40 }}
+          >
+            <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+          </IconButton>
+        </Box>
      </ListItemButton>
    );
  }
@@ -450,6 +555,7 @@ class QuoteSearchField extends PureComponent {
 export class QuoteList extends PureComponent {
  constructor(props) {
    super(props);
+    this.headerItem = createDummyTestQuote();
    this.state = {
      items: quoteAutomat.getItems(),
      unfilteredTotal: quoteAutomat.state.unfilteredTotal ?? 0,
@@ -473,12 +579,18 @@ export class QuoteList extends PureComponent {
      unfilteredTotal: state.unfilteredTotal ?? 0,
      filterKey: quoteAutomat.getFilterKey(state),
    }));
+    this.unsubNumber = numberAutomat.subscribe(this, () => {
+      this.headerItem = createDummyTestQuote();
+      this.forceUpdate();
+    });
+    void numberAutomat.actions.ensureLoaded().catch(() => { });
    void this.loadParties();
  }

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

  async loadParties() {
@@ -506,7 +618,7 @@ export class QuoteList extends PureComponent {
  }

  handleRetry() {
-    void quoteAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
+    void quoteAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => { });
  }

  handleCreate() {
@@ -514,10 +626,18 @@ export class QuoteList extends PureComponent {
  }

  handleOpen(quote) {
+    if (quote.id === 999999) {
+      enqueueSnackbar(`Test-Angebot „${quote.number}“ angeklickt.`, { variant: 'info' });
+      return;
+    }
    this.props.navigate(cfg.editPath(quote.id));
  }

  async handleDelete(quote) {
+    if (quote.id === 999999) {
+      enqueueSnackbar('Test-Angebot kann nicht gelöscht werden.', { variant: 'info' });
+      return;
+    }
    if (this.state.busyId != null) return;
    if (!window.confirm(cfg.confirmDelete(quote.number))) return;
    this.setState({ busyId: quote.id });
@@ -539,6 +659,7 @@ export class QuoteList extends PureComponent {
    rowContext.busyId = busyId;
    rowContext.onOpen = this.handleOpen;
    rowContext.onDelete = this.handleDelete;
+    rowContext.headerItem = this.headerItem;

    if (items === null && quoteAutomat.state.status === 'failed') {
      return (
@@ -567,17 +688,16 @@ export class QuoteList extends PureComponent {
              items={items || []}
              totalCount={items ? items.length : 0}
              unfilteredTotal={unfilteredTotal}
+              headerItem={this.headerItem}
              renderItem={QuoteRow}
              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',
@@ -588,13 +708,14 @@ export class QuoteList extends PureComponent {
                    userSelect: 'none',
                  }}
                >
-                  <Box sx={{ width: 120, flexShrink: 0 }}>Nr.</Box>
-                  <Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
-                  <Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
-                  <Box sx={{ width: 40, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
-                  <Box sx={{ width: 76, flexShrink: 0, textAlign: 'center' }}>Dateien</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 }}>Nr.</Box>
+                  <Box sx={{ gridColumn: 2, gridRow: 2 }}>Datum</Box>
+                  <Box sx={{ gridColumn: 3, gridRow: 2 }}>Kunde</Box>
+                  <Box sx={{ gridColumn: 4, gridRow: 2, textAlign: 'center' }}>Pos.</Box>
+                  <Box sx={{ gridColumn: 5, gridRow: 2, textAlign: 'center' }}>Dateien</Box>
+                  <Box sx={{ gridColumn: 6, gridRow: 2, textAlign: 'right' }}>Gesamt</Box>
+                  <Box sx={{ gridColumn: 7, gridRow: 2 }} />
                </Box>
              }
              onPageChange={this.handlePageChange}
--- a/src/utils/documentNumber.js
+++ b/src/utils/documentNumber.js
@@ -110,3 +110,55 @@ export async function ensureDocumentNumber(kind) {
  ]);
  return getNextDocumentNumber(kind);
 }
+
+/**
+ * Returns the maximum document number pattern for quote or order based on company sequences.
+ * E.g. with prefix 'ANG-' and padding 6 -> 'ANG-999999'.
+ *
+ * @param {'quote'|'order'|string} [kind='quote']
+ * @returns {string}
+ */
+export function getMaxDocumentNumber(kind = 'quote') {
+  const numbers = numberAutomat.state.items ?? [];
+  const seq = numbers.find((r) => r.type === kind);
+  if (seq) {
+    const pad = Math.max(1, Number(seq.padding) || 6);
+    const prefix = seq.prefix ?? '';
+    return `${prefix}${'9'.repeat(pad)}`;
+  }
+
+  const skuSeq = numbers.find((r) => r.type === 'sku');
+  const deliverySeq = numbers.find((r) => r.type === 'delivery');
+  const entitySeq = numbers.find((r) => r.type === 'entity');
+  const refSeq = skuSeq || deliverySeq || entitySeq;
+
+  const pad = refSeq ? Math.max(1, Number(refSeq.padding) || 6) : 6;
+  const prefixStyle = refSeq?.prefix ?? '';
+
+  let prefix = '';
+  if (
+    prefixStyle.startsWith('ART-') ||
+    prefixStyle.startsWith('LS-') ||
+    prefixStyle.startsWith('KD-') ||
+    prefixStyle.endsWith('-')
+  ) {
+    prefix = kind === 'quote' ? 'ANG-' : (kind === 'order' ? 'AUF-' : '');
+  } else if (
+    prefixStyle.startsWith('SKU-') ||
+    prefixStyle.startsWith('DEL-') ||
+    prefixStyle.startsWith('C-')
+  ) {
+    prefix = kind === 'quote' ? 'Q-' : (kind === 'order' ? 'ORD-' : '');
+  } else if (
+    prefixStyle.startsWith('A-') ||
+    prefixStyle.startsWith('L-') ||
+    prefixStyle.startsWith('K-')
+  ) {
+    prefix = kind === 'quote' ? 'AG-' : (kind === 'order' ? 'AU-' : '');
+  } else {
+    prefix = kind === 'quote' ? 'ANG-' : (kind === 'order' ? 'AUF-' : '');
+  }
+
+  return `${prefix}${'9'.repeat(pad)}`;
+}
+