u
This commit is contained in:
553
src/components/manifest/QuoteList.jsx
Normal file
553
src/components/manifest/QuoteList.jsx
Normal file
@@ -0,0 +1,553 @@
|
|||||||
|
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 IconButton from '@mui/material/IconButton';
|
||||||
|
import ListItemButton from '@mui/material/ListItemButton';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
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 { enqueueSnackbar } from 'notistack';
|
||||||
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||||
|
import FillSpace from 'dashgui/FillSpace';
|
||||||
|
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
||||||
|
import BackendError from '../BackendError';
|
||||||
|
import quoteAutomat, { CHUNK_SIZE } from '../../automats/quoteAutomat';
|
||||||
|
import { quote as quoteApi } 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 quoteGrossTotal(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('quote');
|
||||||
|
|
||||||
|
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 `QuoteRow`: 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,
|
||||||
|
};
|
||||||
|
|
||||||
|
// MARK: <QuoteRow/>
|
||||||
|
class QuoteRow extends PureComponent {
|
||||||
|
partyName(partyId) {
|
||||||
|
if (partyId == null) return '–';
|
||||||
|
const party = rowContext.partiesById[partyId];
|
||||||
|
return partyDisplayName('quote', party) || `Kunde #${partyId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { item: quote, disabled } = this.props;
|
||||||
|
|
||||||
|
// 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' }}>
|
||||||
|
<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: 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 } = rowContext;
|
||||||
|
const posCount = quote.positions != null ? quote.positions : (quote.lines?.length ?? 0);
|
||||||
|
const gross = quote.grossTotal != null ? Number(quote.grossTotal) : quoteGrossTotal(quote.lines);
|
||||||
|
const customer = quote.customerName || this.partyName(quote.entityId);
|
||||||
|
const quantityInfo = quote.totalQuantity != null ? ` · ${quote.totalQuantity} Stück` : '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItemButton divider sx={rowSx} onClick={() => onOpen?.(quote)}>
|
||||||
|
<Box sx={{ width: 120, flexShrink: 0, minWidth: 0 }}>
|
||||||
|
<Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
|
||||||
|
{quote.number}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||||||
|
{numberDisplay(quote.externalNumber)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}>
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||||||
|
{quote.date ? formatDate(quote.date) : '–'}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<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 },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
|
||||||
|
>
|
||||||
|
{gross > 0 ? formatPrice(gross) : '—'}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</ListItemButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: <QuoteSearchField/>
|
||||||
|
class QuoteSearchField extends PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const s = quoteAutomat.state;
|
||||||
|
const stats = quoteAutomat.getChunkStats?.();
|
||||||
|
this.state = {
|
||||||
|
input: s.filter ?? '',
|
||||||
|
seekMonths: s.seekMonths ?? 0,
|
||||||
|
seekYears: s.seekYears ?? 0,
|
||||||
|
negativeSeekMonths: s.negativeSeekMonths ?? 0,
|
||||||
|
lruChunksCount: stats?.lruChunksCount || 0,
|
||||||
|
maxLruChunks: stats?.maxLruChunks || 50,
|
||||||
|
filterCachesCount: stats?.filterCaches?.length || 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.unsub = quoteAutomat.subscribe(this, (state) => ({
|
||||||
|
input: state.filter ?? '',
|
||||||
|
seekMonths: state.seekMonths ?? 0,
|
||||||
|
seekYears: state.seekYears ?? 0,
|
||||||
|
negativeSeekMonths: state.negativeSeekMonths ?? 0,
|
||||||
|
}));
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
this.unsubStats = quoteAutomat.subscribeChunkStats?.((stats) => {
|
||||||
|
this.setState({
|
||||||
|
lruChunksCount: stats.lruChunksCount,
|
||||||
|
maxLruChunks: stats.maxLruChunks,
|
||||||
|
filterCachesCount: stats.filterCaches?.length || 1,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.unsub?.();
|
||||||
|
this.unsubStats?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { inputRef, onCreate } = this.props;
|
||||||
|
const { input, 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) => quoteAutomat.actions.filter(next)}
|
||||||
|
/>
|
||||||
|
<Button variant="contained" onClick={onCreate}>
|
||||||
|
{cfg.createButton}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Filter Bar: Negativeseek (-1 Month, -1 Year, Reset) & Chunk-Cache Monitor */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
gap: 1.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 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={() => quoteAutomat.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={() => quoteAutomat.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={() => quoteAutomat.actions.resetNegativeSeek()}
|
||||||
|
sx={{
|
||||||
|
minWidth: 'auto',
|
||||||
|
px: 1,
|
||||||
|
py: 0.25,
|
||||||
|
height: 28,
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{import.meta.env.DEV && (
|
||||||
|
<Tooltip title={`Chunk-Cache-Monitor öffnen (Alt+Shift+C) — ${this.state.lruChunksCount || 0}/${this.state.maxLruChunks || 50} Chunks im RAM über ${this.state.filterCachesCount || 1} Filter`}>
|
||||||
|
<Chip
|
||||||
|
size="small"
|
||||||
|
icon={<ViewModuleIcon sx={{ fontSize: 16 }} />}
|
||||||
|
label={this.state.lruChunksCount > 0 ? `Chunk-Cache (${this.state.lruChunksCount}/${this.state.maxLruChunks || 50})` : 'Chunk-Cache'}
|
||||||
|
onClick={() => window.dispatchEvent(new CustomEvent('dash:toggle-chunk-monitor', { detail: { target: 'quote' } }))}
|
||||||
|
sx={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
height: 28,
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
boxShadow: 1,
|
||||||
|
'&:hover': { bgcolor: 'action.hover' },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</PanelTileGrid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: <QuoteList/>
|
||||||
|
export class QuoteList extends PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
items: quoteAutomat.getItems(),
|
||||||
|
unfilteredTotal: quoteAutomat.state.unfilteredTotal ?? 0,
|
||||||
|
filterKey: quoteAutomat.getFilterKey?.() ?? '',
|
||||||
|
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.handlePageChange = this.handlePageChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._cancelled = false;
|
||||||
|
this.unsub = quoteAutomat.subscribe(this, (state) => ({
|
||||||
|
items: state.items,
|
||||||
|
unfilteredTotal: state.unfilteredTotal ?? 0,
|
||||||
|
filterKey: quoteAutomat.getFilterKey(state),
|
||||||
|
}));
|
||||||
|
void this.loadParties();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._cancelled = true;
|
||||||
|
this.unsub?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadParties() {
|
||||||
|
try {
|
||||||
|
const parties = await loadParties('quote');
|
||||||
|
if (!this._cancelled) {
|
||||||
|
this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Non-fatal: names fall back to ids or customerName.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
quoteAutomat.requireChunk(startChunk, endChunk);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleRetry() {
|
||||||
|
void quoteAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCreate() {
|
||||||
|
this.props.navigate(cfg.createPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleOpen(quote) {
|
||||||
|
this.props.navigate(cfg.editPath(quote.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleDelete(quote) {
|
||||||
|
if (this.state.busyId != null) return;
|
||||||
|
if (!window.confirm(cfg.confirmDelete(quote.number))) return;
|
||||||
|
this.setState({ busyId: quote.id });
|
||||||
|
try {
|
||||||
|
await quoteApi.delete(quote.id);
|
||||||
|
await quoteAutomat.actions.reload();
|
||||||
|
enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
notifyError(err);
|
||||||
|
} finally {
|
||||||
|
if (!this._cancelled) this.setState({ busyId: null });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { items, unfilteredTotal, filterKey, partiesById, busyId } = this.state;
|
||||||
|
|
||||||
|
rowContext.partiesById = partiesById;
|
||||||
|
rowContext.busyId = busyId;
|
||||||
|
rowContext.onOpen = this.handleOpen;
|
||||||
|
rowContext.onDelete = this.handleDelete;
|
||||||
|
|
||||||
|
if (items === null && quoteAutomat.state.status === 'failed') {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<QuoteSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
|
||||||
|
<PanelTileGrid>
|
||||||
|
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ p: 2 }}>
|
||||||
|
<BackendError error={backendErrorFrom(quoteAutomat.state.error)} onRetry={this.handleRetry} />
|
||||||
|
</PanelTile>
|
||||||
|
</PanelTileGrid>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<QuoteSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
|
||||||
|
<PanelTileGrid>
|
||||||
|
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0, position: 'relative' }}>
|
||||||
|
<FillSpace
|
||||||
|
aboveRef={[this.searchRef]}
|
||||||
|
reserveBottom={32}
|
||||||
|
minPageSize={8}
|
||||||
|
minHeight={0}
|
||||||
|
resetKey={filterKey}
|
||||||
|
items={items || []}
|
||||||
|
totalCount={items ? items.length : 0}
|
||||||
|
unfilteredTotal={unfilteredTotal}
|
||||||
|
renderItem={QuoteRow}
|
||||||
|
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: 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}
|
||||||
|
/>
|
||||||
|
{items === null && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 52,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 32,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CircularProgress size={32} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</PanelTile>
|
||||||
|
</PanelTileGrid>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withNavigate(QuoteList);
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
export { default as ManifestList } from './ManifestList';
|
export { default as ManifestList } from './ManifestList';
|
||||||
export { default as DeliveryList } from './DeliveryList';
|
export { default as DeliveryList } from './DeliveryList';
|
||||||
export { default as OrderList } from './OrderList';
|
export { default as OrderList } from './OrderList';
|
||||||
|
export { default as QuoteList } from './QuoteList';
|
||||||
export { default as ShipmentList } from './ShipmentList';
|
export { default as ShipmentList } from './ShipmentList';
|
||||||
export { default as OrderPaymentList } from './OrderPaymentList';
|
export { default as OrderPaymentList } from './OrderPaymentList';
|
||||||
|
|
||||||
|
|||||||
@@ -37,10 +37,23 @@ import orderAutomat, {
|
|||||||
MAX_LRU_CHUNKS,
|
MAX_LRU_CHUNKS,
|
||||||
isOrderPaid,
|
isOrderPaid,
|
||||||
isOrderDelivered,
|
isOrderDelivered,
|
||||||
subscribeChunkStats,
|
|
||||||
} from '../automats/orderAutomat';
|
} from '../automats/orderAutomat';
|
||||||
|
import quoteAutomat from '../automats/quoteAutomat';
|
||||||
import { formatPrice } from '../utils/price';
|
import { formatPrice } from '../utils/price';
|
||||||
|
|
||||||
|
function getAutomatFor(target) {
|
||||||
|
return target === 'quote' ? quoteAutomat : orderAutomat;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getInitialTarget() {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const p = window.location.pathname;
|
||||||
|
if (p.startsWith('/auftrag/bestellung')) return 'order';
|
||||||
|
if (p.startsWith('/auftrag')) return 'quote';
|
||||||
|
}
|
||||||
|
return 'order';
|
||||||
|
}
|
||||||
|
|
||||||
const PANEL_WIDTH = 680;
|
const PANEL_WIDTH = 680;
|
||||||
const PANEL_HEIGHT = 520;
|
const PANEL_HEIGHT = 520;
|
||||||
|
|
||||||
@@ -72,7 +85,9 @@ function orderGrossTotal(lines) {
|
|||||||
class ChunkCacheMonitor extends PureComponent {
|
class ChunkCacheMonitor extends PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
const initialStats = orderAutomat.getChunkStats?.() || {
|
const target = getInitialTarget();
|
||||||
|
const automat = getAutomatFor(target);
|
||||||
|
const initialStats = automat.getChunkStats?.() || {
|
||||||
chunkSize: CHUNK_SIZE,
|
chunkSize: CHUNK_SIZE,
|
||||||
maxLruChunks: MAX_LRU_CHUNKS,
|
maxLruChunks: MAX_LRU_CHUNKS,
|
||||||
lruChunksCount: 0,
|
lruChunksCount: 0,
|
||||||
@@ -100,6 +115,7 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
open: false,
|
open: false,
|
||||||
position: null,
|
position: null,
|
||||||
tab: 'grid', // 'grid' | 'lru' | 'log'
|
tab: 'grid', // 'grid' | 'lru' | 'log'
|
||||||
|
target, // 'quote' | 'order'
|
||||||
inspectFilterKey: null, // null means follow activeFilterKey
|
inspectFilterKey: null, // null means follow activeFilterKey
|
||||||
selectedChunk: null,
|
selectedChunk: null,
|
||||||
pulseCounter: 0,
|
pulseCounter: 0,
|
||||||
@@ -121,10 +137,12 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
this.handleApplyFilter = this.handleApplyFilter.bind(this);
|
this.handleApplyFilter = this.handleApplyFilter.bind(this);
|
||||||
this.handlePrefetchAll = this.handlePrefetchAll.bind(this);
|
this.handlePrefetchAll = this.handlePrefetchAll.bind(this);
|
||||||
this.handleReload = this.handleReload.bind(this);
|
this.handleReload = this.handleReload.bind(this);
|
||||||
|
this.switchTarget = this.switchTarget.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.unsubscribeStats = subscribeChunkStats((stats) => {
|
const automat = getAutomatFor(this.state.target);
|
||||||
|
this.unsubscribeStats = automat.subscribeChunkStats?.((stats) => {
|
||||||
this.setState((prev) => ({
|
this.setState((prev) => ({
|
||||||
stats,
|
stats,
|
||||||
pulseCounter: prev.pulseCounter + 1,
|
pulseCounter: prev.pulseCounter + 1,
|
||||||
@@ -132,10 +150,39 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('keydown', this.handleKeyDown);
|
window.addEventListener('keydown', this.handleKeyDown);
|
||||||
this.customEventListener = () => this.handleToggle();
|
this.customEventListener = (event) => {
|
||||||
|
const reqTarget = event?.detail?.target;
|
||||||
|
if (reqTarget === 'quote' || reqTarget === 'order') {
|
||||||
|
this.switchTarget(reqTarget);
|
||||||
|
} else {
|
||||||
|
const detected = getInitialTarget();
|
||||||
|
if (detected !== this.state.target) {
|
||||||
|
this.switchTarget(detected);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.handleToggle();
|
||||||
|
};
|
||||||
window.addEventListener('dash:toggle-chunk-monitor', this.customEventListener);
|
window.addEventListener('dash:toggle-chunk-monitor', this.customEventListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
switchTarget(newTarget) {
|
||||||
|
if (newTarget === this.state.target) return;
|
||||||
|
this.unsubscribeStats?.();
|
||||||
|
const automat = getAutomatFor(newTarget);
|
||||||
|
this.unsubscribeStats = automat.subscribeChunkStats?.((stats) => {
|
||||||
|
this.setState((prev) => ({
|
||||||
|
stats,
|
||||||
|
pulseCounter: prev.pulseCounter + 1,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
target: newTarget,
|
||||||
|
stats: automat.getChunkStats?.() || this.state.stats,
|
||||||
|
selectedChunk: null,
|
||||||
|
inspectFilterKey: null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.unsubscribeStats?.();
|
this.unsubscribeStats?.();
|
||||||
window.removeEventListener('keydown', this.handleKeyDown);
|
window.removeEventListener('keydown', this.handleKeyDown);
|
||||||
@@ -204,51 +251,60 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
|
|
||||||
handleLoadChunk(chunkIndex, filterKey, e) {
|
handleLoadChunk(chunkIndex, filterKey, e) {
|
||||||
e?.stopPropagation();
|
e?.stopPropagation();
|
||||||
|
const automat = getAutomatFor(this.state.target);
|
||||||
const targetFilter = filterKey || this.getInspectedFilterKey();
|
const targetFilter = filterKey || this.getInspectedFilterKey();
|
||||||
void orderAutomat.actions.loadChunk(chunkIndex, orderAutomat.state.queryEpoch, targetFilter);
|
void automat.actions.loadChunk(chunkIndex, automat.state.queryEpoch, targetFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEvictChunk(chunkIndex, filterKey, e) {
|
handleEvictChunk(chunkIndex, filterKey, e) {
|
||||||
e?.stopPropagation();
|
e?.stopPropagation();
|
||||||
|
const automat = getAutomatFor(this.state.target);
|
||||||
const targetFilter = filterKey || this.getInspectedFilterKey();
|
const targetFilter = filterKey || this.getInspectedFilterKey();
|
||||||
orderAutomat.evictChunk?.(chunkIndex, targetFilter);
|
automat.evictChunk?.(chunkIndex, targetFilter);
|
||||||
if (this.state.selectedChunk === chunkIndex) {
|
if (this.state.selectedChunk === chunkIndex) {
|
||||||
this.setState({ selectedChunk: null });
|
this.setState({ selectedChunk: null });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClearCache() {
|
handleClearCache() {
|
||||||
orderAutomat.clearCache?.();
|
const automat = getAutomatFor(this.state.target);
|
||||||
|
automat.clearCache?.();
|
||||||
this.setState({ selectedChunk: null });
|
this.setState({ selectedChunk: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClearFilter(filterKey, e) {
|
handleClearFilter(filterKey, e) {
|
||||||
e?.stopPropagation();
|
e?.stopPropagation();
|
||||||
orderAutomat.clearFilterCache?.(filterKey);
|
const automat = getAutomatFor(this.state.target);
|
||||||
|
automat.clearFilterCache?.(filterKey);
|
||||||
if (this.state.inspectFilterKey === filterKey) {
|
if (this.state.inspectFilterKey === filterKey) {
|
||||||
this.setState({ inspectFilterKey: null, selectedChunk: null });
|
this.setState({ inspectFilterKey: null, selectedChunk: null });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleApplyFilter(filterKey) {
|
handleApplyFilter(filterKey) {
|
||||||
|
const automat = getAutomatFor(this.state.target);
|
||||||
const entry = this.state.stats.filterCaches?.find((f) => f.key === filterKey);
|
const entry = this.state.stats.filterCaches?.find((f) => f.key === filterKey);
|
||||||
if (!entry) return;
|
if (!entry) return;
|
||||||
const p = entry.params || {};
|
const p = entry.params || {};
|
||||||
orderAutomat.actions.resetFilters();
|
automat.actions.resetFilters();
|
||||||
if (p.filter) orderAutomat.actions.filter(p.filter);
|
if (p.filter) automat.actions.filter(p.filter);
|
||||||
if (p.onlyUnpaid) orderAutomat.actions.setOnlyUnpaid(true);
|
if (this.state.target === 'order') {
|
||||||
if (p.onlyUndelivered) orderAutomat.actions.setOnlyUndelivered(true);
|
if (p.onlyUnpaid) automat.actions.setOnlyUnpaid(true);
|
||||||
if (p.negativeSeekMonths) orderAutomat.actions.addNegativeSeek(p.negativeSeekMonths);
|
if (p.onlyUndelivered) automat.actions.setOnlyUndelivered(true);
|
||||||
|
}
|
||||||
|
if (p.negativeSeekMonths) automat.actions.addNegativeSeek(p.negativeSeekMonths);
|
||||||
this.setState({ inspectFilterKey: null, selectedChunk: null });
|
this.setState({ inspectFilterKey: null, selectedChunk: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePrefetchAll(filterKey) {
|
handlePrefetchAll(filterKey) {
|
||||||
|
const automat = getAutomatFor(this.state.target);
|
||||||
const targetFilter = filterKey || this.getInspectedFilterKey();
|
const targetFilter = filterKey || this.getInspectedFilterKey();
|
||||||
orderAutomat.prefetchAllChunks?.(targetFilter);
|
automat.prefetchAllChunks?.(targetFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReload() {
|
handleReload() {
|
||||||
void orderAutomat.actions.reload(false);
|
const automat = getAutomatFor(this.state.target);
|
||||||
|
void automat.actions.reload(false);
|
||||||
this.setState({ selectedChunk: null });
|
this.setState({ selectedChunk: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -658,9 +714,12 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
) : (
|
) : (
|
||||||
<Stack spacing={0.5}>
|
<Stack spacing={0.5}>
|
||||||
{chunkOrders.map(({ item: order, index }) => {
|
{chunkOrders.map(({ item: order, index }) => {
|
||||||
const paid = isOrderPaid(order);
|
const isOrd = this.state.target === 'order';
|
||||||
const delivered = isOrderDelivered(order);
|
const paid = isOrd ? isOrderPaid(order) : false;
|
||||||
const gross = orderGrossTotal(order.lines);
|
const delivered = isOrd ? isOrderDelivered(order) : false;
|
||||||
|
const gross = order.grossTotal != null ? Number(order.grossTotal) : orderGrossTotal(order.lines);
|
||||||
|
const customer = order.customerName || (order.entityId ? `Kunde #${order.entityId}` : '–');
|
||||||
|
const posCount = order.positions != null ? order.positions : (order.lines?.length ?? 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@@ -690,8 +749,15 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
{order.date ? new Date(order.date).toLocaleDateString() : '–'}
|
{order.date ? new Date(order.date).toLocaleDateString() : '–'}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="caption" sx={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
<Typography variant="caption" sx={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||||
Kunde #{order.entityId || '–'}
|
{customer}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<Chip
|
||||||
|
size="small"
|
||||||
|
label={`${posCount} Pos.`}
|
||||||
|
sx={{ height: 20, fontSize: '0.7rem' }}
|
||||||
|
/>
|
||||||
|
{isOrd && (
|
||||||
|
<>
|
||||||
<Chip
|
<Chip
|
||||||
size="small"
|
size="small"
|
||||||
label={paid ? 'Bezahlt' : 'Unbezahlt'}
|
label={paid ? 'Bezahlt' : 'Unbezahlt'}
|
||||||
@@ -704,6 +770,8 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
color={delivered ? 'primary' : 'default'}
|
color={delivered ? 'primary' : 'default'}
|
||||||
sx={{ height: 20, fontSize: '0.7rem' }}
|
sx={{ height: 20, fontSize: '0.7rem' }}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<Typography
|
<Typography
|
||||||
variant="caption"
|
variant="caption"
|
||||||
sx={{ fontWeight: 600, width: 75, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}
|
sx={{ fontWeight: 600, width: 75, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}
|
||||||
@@ -961,7 +1029,24 @@ class ChunkCacheMonitor extends PureComponent {
|
|||||||
Chunk-Cache-Monitor
|
Chunk-Cache-Monitor
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Chip size="small" color="primary" variant="outlined" label="orderAutomat" />
|
<Stack direction="row" spacing={0.5}>
|
||||||
|
<Chip
|
||||||
|
size="small"
|
||||||
|
color={this.state.target === 'quote' ? 'primary' : 'default'}
|
||||||
|
variant={this.state.target === 'quote' ? 'filled' : 'outlined'}
|
||||||
|
label="Angebote (quoteAutomat)"
|
||||||
|
onClick={() => this.switchTarget('quote')}
|
||||||
|
sx={{ cursor: 'pointer', height: 24, fontSize: '0.72rem', fontWeight: this.state.target === 'quote' ? 700 : 500 }}
|
||||||
|
/>
|
||||||
|
<Chip
|
||||||
|
size="small"
|
||||||
|
color={this.state.target === 'order' ? 'primary' : 'default'}
|
||||||
|
variant={this.state.target === 'order' ? 'filled' : 'outlined'}
|
||||||
|
label="Bestellungen (orderAutomat)"
|
||||||
|
onClick={() => this.switchTarget('order')}
|
||||||
|
sx={{ cursor: 'pointer', height: 24, fontSize: '0.72rem', fontWeight: this.state.target === 'order' ? 700 : 500 }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
<Chip
|
<Chip
|
||||||
size="small"
|
size="small"
|
||||||
color={lruCount >= maxLru ? 'warning' : 'success'}
|
color={lruCount >= maxLru ? 'warning' : 'success'}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { PureComponent } from 'react';
|
import { PureComponent } from 'react';
|
||||||
import { ManifestList } from '../components/manifest';
|
import QuoteList from '../components/manifest/QuoteList';
|
||||||
|
|
||||||
class AuftragAngebotPage extends PureComponent {
|
class AuftragAngebotPage extends PureComponent {
|
||||||
render() {
|
render() {
|
||||||
return <ManifestList kind="quote" />;
|
return <QuoteList />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user