966 lines
29 KiB
JavaScript
966 lines
29 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 Link from '@mui/material/Link';
|
||
import Skeleton from '@mui/material/Skeleton';
|
||
import Typography from '@mui/material/Typography';
|
||
import ViewModuleIcon from '@mui/icons-material/ViewModule';
|
||
import { enqueueSnackbar } from 'notistack';
|
||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||
import FillSpace from 'dashgui/FillSpace';
|
||
import BackendError from '../../BackendError';
|
||
import { getArticleHistoryAutomat } from '../../../automats/articleDetailAutomat';
|
||
import sseAutomat from '../../../automats/sseAutomat';
|
||
import shipmentAutomat from '../../../automats/shipmentAutomat';
|
||
import orderAutomat from '../../../automats/orderAutomat';
|
||
import entityAutomat from '../../../automats/entityAutomat';
|
||
import companyAutomat from '../../../automats/companyAutomat';
|
||
import { shipment as shipmentApi, order as orderApi } from '../../../api';
|
||
import { ShipmentDetailDialog } from '../../manifest';
|
||
import SkeleHashImage from '../../settings/SkeleHashImage';
|
||
import withNavigate from '../../withNavigate';
|
||
import { backendErrorFrom } from '../../../utils/backendError';
|
||
import { notifyError } from '../../../utils/notify';
|
||
import { DEFAULT_CHUNK_SIZE as CHUNK_SIZE } from '../../../automats/createChunkListAutomat';
|
||
|
||
function formatDateTime(val) {
|
||
if (!val) return '–';
|
||
try {
|
||
const d = new Date(val);
|
||
if (isNaN(d.getTime())) return String(val);
|
||
return d.toLocaleString('de-DE', {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
});
|
||
} catch {
|
||
return String(val);
|
||
}
|
||
}
|
||
|
||
function decodeMeta(meta) {
|
||
if (!meta) return null;
|
||
if (typeof meta === 'object') return meta;
|
||
try {
|
||
return JSON.parse(meta);
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// Dummy history entry for layout and FillSpace row measurement
|
||
export function createDummyTestArticleHistory() {
|
||
return {
|
||
id: 999999,
|
||
date: '2030-10-30T12:00:00Z',
|
||
text: 'Preis geändert von 10,00 € auf 12,50 € durch Benutzer Max Mustermann für Lieferschein LS-123456',
|
||
};
|
||
}
|
||
|
||
const rowGridSx = {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'minmax(150px, max-content) minmax(260px, 1fr)',
|
||
gridTemplateRows: '0px 1fr',
|
||
rowGap: 0,
|
||
columnGap: 1.5,
|
||
alignItems: 'center',
|
||
width: '100%',
|
||
boxSizing: 'border-box',
|
||
};
|
||
|
||
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',
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.04em',
|
||
userSelect: 'none',
|
||
};
|
||
|
||
function renderInvisibleDummyRow(dummy) {
|
||
const d = dummy || createDummyTestArticleHistory();
|
||
return (
|
||
<>
|
||
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||
<Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>{formatDateTime(d.date)}</Typography>
|
||
</Box>
|
||
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||
<Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>{d.text}</Typography>
|
||
</Box>
|
||
</>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Ambient row context for `ArticleHistoryRow` callbacks, mirroring the pattern in `QuoteList`.
|
||
*/
|
||
const rowContext = {
|
||
headerItem: null,
|
||
onOpenShipment: null,
|
||
onOpenOrder: null,
|
||
onOpenCustomer: null,
|
||
onOpenBrand: null,
|
||
};
|
||
|
||
// MARK: <ArticleHistoryRow/>
|
||
class ArticleHistoryRow extends PureComponent {
|
||
renderLink(label, onClick) {
|
||
return (
|
||
<Link
|
||
component="span"
|
||
role="button"
|
||
tabIndex={0}
|
||
variant="body2"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
const selection = window.getSelection()?.toString();
|
||
if (selection && selection.length > 0) return;
|
||
onClick?.(e);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onClick?.(e);
|
||
}
|
||
}}
|
||
sx={{
|
||
fontWeight: 600,
|
||
verticalAlign: 'baseline',
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
color: 'primary.main',
|
||
textDecoration: 'underline',
|
||
fontFamily: 'inherit',
|
||
fontSize: 'inherit',
|
||
userSelect: 'text',
|
||
p: 0,
|
||
m: 0,
|
||
border: 'none',
|
||
background: 'none',
|
||
display: 'inline',
|
||
'&:hover': {
|
||
color: 'primary.dark',
|
||
},
|
||
}}
|
||
>
|
||
{label}
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
collectSpans(text, meta) {
|
||
const spans = [];
|
||
if (!text) return spans;
|
||
const { onOpenShipment, onOpenOrder, onOpenCustomer, onOpenBrand } = rowContext;
|
||
|
||
// 1. Lieferschein
|
||
const shipmentNumber =
|
||
meta?.shipmentNumber || (meta?.type === 'shipment' ? meta?.manifestNumber : null);
|
||
const regexShipment =
|
||
!shipmentNumber && text ? text.match(/Lieferschein\s+([A-Za-z0-9\-_]+)/) : null;
|
||
const effectiveShipmentNumber = shipmentNumber || regexShipment?.[1] || null;
|
||
|
||
if (effectiveShipmentNumber) {
|
||
const shipmentId = meta?.shipmentId ?? meta?.manifestId ?? meta?.id ?? null;
|
||
const targetPattern = `Lieferschein ${effectiveShipmentNumber}`;
|
||
let idx = text.indexOf(targetPattern);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + targetPattern.length,
|
||
node: this.renderLink(targetPattern, () =>
|
||
onOpenShipment?.(effectiveShipmentNumber, shipmentId),
|
||
),
|
||
});
|
||
} else {
|
||
idx = text.indexOf(effectiveShipmentNumber);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + effectiveShipmentNumber.length,
|
||
node: this.renderLink(effectiveShipmentNumber, () =>
|
||
onOpenShipment?.(effectiveShipmentNumber, shipmentId),
|
||
),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. Auftrag (Order)
|
||
const orderNumber =
|
||
meta?.orderNumber || (meta?.type === 'order' ? meta?.number : null);
|
||
const regexOrder =
|
||
!orderNumber && text ? text.match(/Auftrag\s+([A-Za-z0-9\-_]+)/) : null;
|
||
const effectiveOrderNumber = orderNumber || regexOrder?.[1] || null;
|
||
|
||
if (effectiveOrderNumber) {
|
||
const orderId = meta?.orderId ?? null;
|
||
const targetPattern = `Auftrag ${effectiveOrderNumber}`;
|
||
let idx = text.indexOf(targetPattern);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + targetPattern.length,
|
||
node: this.renderLink(targetPattern, () =>
|
||
onOpenOrder?.(orderId, effectiveOrderNumber),
|
||
),
|
||
});
|
||
} else {
|
||
idx = text.indexOf(effectiveOrderNumber);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + effectiveOrderNumber.length,
|
||
node: this.renderLink(effectiveOrderNumber, () =>
|
||
onOpenOrder?.(orderId, effectiveOrderNumber),
|
||
),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. Kunde (Customer)
|
||
const customerName =
|
||
meta?.customerName || (text.match(/Kunde:\s*"([^"]+)"/)?.[1] ?? null);
|
||
|
||
if (customerName) {
|
||
const inQuotes = `"${customerName}"`;
|
||
let idx = text.indexOf(inQuotes);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + inQuotes.length,
|
||
node: this.renderLink(inQuotes, () => onOpenCustomer?.(customerName)),
|
||
});
|
||
} else {
|
||
idx = text.indexOf(customerName);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + customerName.length,
|
||
node: this.renderLink(customerName, () => onOpenCustomer?.(customerName)),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// 4. Marke (Brand)
|
||
const brandNames = [meta?.newBrandName, meta?.oldBrandName].filter(Boolean);
|
||
for (const bName of brandNames) {
|
||
const inQuotes = `"${bName}"`;
|
||
let idx = text.indexOf(inQuotes);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + inQuotes.length,
|
||
node: this.renderLink(inQuotes, () => onOpenBrand?.(bName)),
|
||
});
|
||
} else {
|
||
idx = text.indexOf(bName);
|
||
if (idx !== -1) {
|
||
spans.push({
|
||
start: idx,
|
||
end: idx + bName.length,
|
||
node: this.renderLink(bName, () => onOpenBrand?.(bName)),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
return spans;
|
||
}
|
||
|
||
renderEntrySpans(text, meta) {
|
||
if (!text) return null;
|
||
const allSpans = this.collectSpans(text, meta);
|
||
if (allSpans.length === 0) return text;
|
||
|
||
allSpans.sort((a, b) => a.start - b.start || (b.end - b.start) - (a.end - a.start));
|
||
|
||
const nonOverlapping = [];
|
||
let lastEnd = 0;
|
||
for (const span of allSpans) {
|
||
if (span.start >= lastEnd) {
|
||
nonOverlapping.push(span);
|
||
lastEnd = span.end;
|
||
}
|
||
}
|
||
|
||
const fragments = [];
|
||
let cur = 0;
|
||
for (let i = 0; i < nonOverlapping.length; i++) {
|
||
const span = nonOverlapping[i];
|
||
if (span.start > cur) {
|
||
fragments.push(text.slice(cur, span.start));
|
||
}
|
||
fragments.push(<span key={i}>{span.node}</span>);
|
||
cur = span.end;
|
||
}
|
||
if (cur < text.length) {
|
||
fragments.push(text.slice(cur));
|
||
}
|
||
return fragments;
|
||
}
|
||
|
||
renderSkelehashThumb(meta) {
|
||
if (!meta?.skelehash) return null;
|
||
|
||
return (
|
||
<Box
|
||
component="span"
|
||
sx={{
|
||
display: 'inline-block',
|
||
width: 14,
|
||
height: 14,
|
||
lineHeight: 0,
|
||
cursor: 'default',
|
||
m: 0,
|
||
my: 0,
|
||
p: 0,
|
||
py: 0,
|
||
mr: 0.5,
|
||
borderRadius: '2px',
|
||
overflow: 'hidden',
|
||
flexShrink: 0,
|
||
verticalAlign: 'middle',
|
||
}}
|
||
>
|
||
<SkeleHashImage
|
||
hash={meta.skelehash}
|
||
sx={{ width: 14, height: 14, display: 'block' }}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
render() {
|
||
const { item, disabled, headerItem } = this.props;
|
||
const dummy = headerItem || rowContext.headerItem;
|
||
|
||
if (!item) {
|
||
if (disabled) {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
...rowGridSx,
|
||
height: 32,
|
||
minHeight: 32,
|
||
maxHeight: 32,
|
||
px: 1.5,
|
||
py: 0,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
opacity: 0,
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
<Typography variant="body2" sx={{ fontSize: '0.8125rem' }}> </Typography>
|
||
</Box>
|
||
);
|
||
}
|
||
return (
|
||
<Box
|
||
sx={{
|
||
...rowGridSx,
|
||
height: 32,
|
||
minHeight: 32,
|
||
maxHeight: 32,
|
||
px: 1.5,
|
||
py: 0,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
}}
|
||
>
|
||
{renderInvisibleDummyRow(dummy)}
|
||
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
|
||
<Skeleton variant="text" width="85%" height={16} />
|
||
</Box>
|
||
<Box sx={{ gridColumn: 2, gridRow: 2 }}>
|
||
<Skeleton variant="text" width="95%" height={16} />
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
const meta = decodeMeta(item.meta);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
...rowGridSx,
|
||
height: 32,
|
||
minHeight: 32,
|
||
maxHeight: 32,
|
||
px: 1.5,
|
||
py: 0,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
userSelect: 'text',
|
||
cursor: 'text',
|
||
'&:hover': {
|
||
bgcolor: 'action.hover',
|
||
},
|
||
}}
|
||
>
|
||
{renderInvisibleDummyRow(dummy)}
|
||
|
||
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, userSelect: 'text', cursor: 'text' }}>
|
||
<Typography
|
||
variant="body2"
|
||
color="text.secondary"
|
||
sx={{ fontVariantNumeric: 'tabular-nums', fontSize: '0.8125rem', userSelect: 'text', cursor: 'text', ...ellipsisSx }}
|
||
>
|
||
{formatDateTime(item.date || item.createdAt)}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
gridColumn: 2,
|
||
gridRow: 2,
|
||
minWidth: 0,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
overflow: 'hidden',
|
||
userSelect: 'text',
|
||
cursor: 'text',
|
||
}}
|
||
>
|
||
{this.renderSkelehashThumb(meta)}
|
||
<Typography
|
||
variant="body2"
|
||
component="div"
|
||
sx={{ ...ellipsisSx, display: 'inline', width: '100%', fontSize: '0.8125rem', userSelect: 'text', cursor: 'text' }}
|
||
>
|
||
{this.renderEntrySpans(item.text, meta)}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <ArticleHistorySearchField/>
|
||
class ArticleHistorySearchField extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
const { automat } = props;
|
||
const s = automat.state;
|
||
const stats = automat.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.subscribeAutomat(this.props.automat);
|
||
}
|
||
|
||
componentDidUpdate(prevProps) {
|
||
if (prevProps.automat !== this.props.automat) {
|
||
this.unsubscribeAutomat();
|
||
const { automat } = this.props;
|
||
const s = automat.state;
|
||
const stats = automat.getChunkStats?.();
|
||
this.setState({
|
||
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,
|
||
});
|
||
this.subscribeAutomat(automat);
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.unsubscribeAutomat();
|
||
}
|
||
|
||
subscribeAutomat(automat) {
|
||
this.unsub = automat.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 = automat.subscribeChunkStats?.((stats) => {
|
||
this.setState({
|
||
lruChunksCount: stats.lruChunksCount,
|
||
maxLruChunks: stats.maxLruChunks,
|
||
filterCachesCount: stats.filterCaches?.length || 1,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
unsubscribeAutomat() {
|
||
this.unsub?.();
|
||
this.unsub = null;
|
||
this.unsubStats?.();
|
||
this.unsubStats = null;
|
||
}
|
||
|
||
render() {
|
||
const { inputRef, automat } = 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 (
|
||
<Box
|
||
ref={inputRef}
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 1.25,
|
||
pb: 1.5,
|
||
}}
|
||
>
|
||
{/* Top row: search field */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<SingleLineTextEdit
|
||
sx={{ flex: 1 }}
|
||
size="small"
|
||
search
|
||
clear
|
||
value={input}
|
||
placeholder="In Artikel-Historie suchen…"
|
||
onChange={(next) => automat.actions.filter(next)}
|
||
/>
|
||
</Box>
|
||
|
||
{/* Filter Bar: Negativeseek (-1 Month, -1 Year, Reset) & Chunk-Cache Monitor */}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-start',
|
||
flexWrap: 'wrap',
|
||
gap: 1.5,
|
||
}}
|
||
>
|
||
<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={() => automat.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={() => automat.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={() => automat.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 && (
|
||
<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: automat.name },
|
||
}),
|
||
)
|
||
}
|
||
sx={{
|
||
cursor: 'pointer',
|
||
height: 28,
|
||
fontWeight: 600,
|
||
fontSize: '0.75rem',
|
||
bgcolor: 'background.paper',
|
||
boxShadow: 1,
|
||
'&:hover': { bgcolor: 'action.hover' },
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <ArticleHistoryTab/>
|
||
class ArticleHistoryTab extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
this.headerItem = createDummyTestArticleHistory();
|
||
this.automat = getArticleHistoryAutomat(props.sku);
|
||
this.state = {
|
||
items: this.automat.getItems(),
|
||
unfilteredTotal: this.automat.state.unfilteredTotal ?? 0,
|
||
filterKey: this.automat.getFilterKey?.() ?? '',
|
||
status: this.automat.state.status,
|
||
error: this.automat.state.error,
|
||
selectedShipment: null,
|
||
loadingShipment: false,
|
||
};
|
||
this.searchRef = createRef();
|
||
this.handlePageChange = this.handlePageChange.bind(this);
|
||
this.handleRetry = this.handleRetry.bind(this);
|
||
this.handleCloseShipment = this.handleCloseShipment.bind(this);
|
||
this.handleOpenShipment = this.handleOpenShipment.bind(this);
|
||
this.handleOpenOrder = this.handleOpenOrder.bind(this);
|
||
this.handleOpenCustomer = this.handleOpenCustomer.bind(this);
|
||
this.handleOpenBrand = this.handleOpenBrand.bind(this);
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.watch(this.props.sku);
|
||
|
||
if (entityAutomat.state.status === 'idle') {
|
||
void entityAutomat.actions.load().catch(() => {});
|
||
}
|
||
if (companyAutomat.state.brandsStatus === 'idle') {
|
||
void companyAutomat.actions.loadBrands().catch(() => {});
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps) {
|
||
if (prevProps.sku !== this.props.sku) {
|
||
this.watch(this.props.sku);
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.unsub?.();
|
||
this.unsub = null;
|
||
this.unwatchSignal?.();
|
||
this.unwatchSignal = null;
|
||
}
|
||
|
||
watch(sku) {
|
||
this.unsub?.();
|
||
this.unwatchSignal?.();
|
||
|
||
this.automat = getArticleHistoryAutomat(sku);
|
||
this.setState({
|
||
items: this.automat.getItems(),
|
||
unfilteredTotal: this.automat.state.unfilteredTotal ?? 0,
|
||
filterKey: this.automat.getFilterKey?.() ?? '',
|
||
status: this.automat.state.status,
|
||
error: this.automat.state.error,
|
||
});
|
||
|
||
this.unsub = this.automat.subscribe(this, (state) => ({
|
||
items: state.items,
|
||
unfilteredTotal: state.unfilteredTotal ?? 0,
|
||
filterKey: this.automat.getFilterKey(state),
|
||
status: state.status,
|
||
error: state.error,
|
||
}));
|
||
|
||
this.unwatchSignal = sseAutomat.actions.watchArticle(String(sku), () => {
|
||
void this.automat.actions.reload().catch(() => {});
|
||
});
|
||
}
|
||
|
||
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);
|
||
|
||
this.automat.requireChunk(startChunk, endChunk);
|
||
}
|
||
|
||
handleRetry() {
|
||
void this.automat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
|
||
}
|
||
|
||
handleCloseShipment() {
|
||
this.setState({ selectedShipment: null });
|
||
}
|
||
|
||
async handleOpenShipment(shipmentNumber, shipmentId = null) {
|
||
if (shipmentId) {
|
||
this.setState({ selectedShipment: { id: shipmentId, number: shipmentNumber } });
|
||
return;
|
||
}
|
||
if (!shipmentNumber) return;
|
||
|
||
this.setState({ loadingShipment: true });
|
||
try {
|
||
const cached = shipmentAutomat.state.items?.find(
|
||
(s) => s && String(s.number).toLowerCase() === String(shipmentNumber).toLowerCase(),
|
||
);
|
||
if (cached?.id) {
|
||
this.setState({ selectedShipment: cached, loadingShipment: false });
|
||
return;
|
||
}
|
||
|
||
const res = await shipmentApi.list({ search: shipmentNumber });
|
||
const shipments = Array.isArray(res?.shipments) ? res.shipments : [];
|
||
const match = shipments.find(
|
||
(s) => String(s.number).toLowerCase() === String(shipmentNumber).toLowerCase(),
|
||
) || shipments[0];
|
||
|
||
if (match?.id) {
|
||
this.setState({ selectedShipment: match, loadingShipment: false });
|
||
} else {
|
||
enqueueSnackbar(`Lieferschein „${shipmentNumber}“ nicht gefunden.`, { variant: 'warning' });
|
||
this.setState({ loadingShipment: false });
|
||
}
|
||
} catch (err) {
|
||
this.setState({ loadingShipment: false });
|
||
notifyError(err);
|
||
}
|
||
}
|
||
|
||
async handleOpenOrder(orderId, orderNumber) {
|
||
if (orderId) {
|
||
this.props.navigate(`/auftrag/bestellung/${orderId}`);
|
||
return;
|
||
}
|
||
if (!orderNumber) return;
|
||
|
||
const cached = orderAutomat.state.items?.find(
|
||
(o) => o && String(o.number).toLowerCase() === String(orderNumber).toLowerCase(),
|
||
);
|
||
if (cached?.id) {
|
||
this.props.navigate(`/auftrag/bestellung/${cached.id}`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await orderApi.list({ search: orderNumber });
|
||
const orders = Array.isArray(res?.orders) ? res.orders : [];
|
||
const match = orders.find(
|
||
(o) => String(o.number).toLowerCase() === String(orderNumber).toLowerCase(),
|
||
) || orders[0];
|
||
|
||
if (match?.id) {
|
||
this.props.navigate(`/auftrag/bestellung/${match.id}`);
|
||
} else {
|
||
this.props.navigate(`/auftrag/bestellung?search=${encodeURIComponent(orderNumber)}`);
|
||
}
|
||
} catch {
|
||
this.props.navigate(`/auftrag/bestellung?search=${encodeURIComponent(orderNumber)}`);
|
||
}
|
||
}
|
||
|
||
async handleOpenCustomer(customerName) {
|
||
if (!customerName) return;
|
||
const target = String(customerName).trim().toLowerCase();
|
||
|
||
const findInItems = (items) => (items || []).find((c) => {
|
||
const full = [c.firstName, c.name].filter(Boolean).join(' ').trim().toLowerCase();
|
||
const nameOnly = String(c.name || '').trim().toLowerCase();
|
||
return full === target || nameOnly === target;
|
||
});
|
||
|
||
let match = findInItems(entityAutomat.state.items);
|
||
if (!match && entityAutomat.state.status !== 'loading') {
|
||
try {
|
||
const loaded = await entityAutomat.actions.load();
|
||
match = findInItems(loaded || entityAutomat.state.items);
|
||
} catch {}
|
||
}
|
||
|
||
if (match?.id) {
|
||
this.props.navigate(`/kunde/${match.id}`);
|
||
} else {
|
||
this.props.navigate(`/kunde?search=${encodeURIComponent(customerName)}`);
|
||
}
|
||
}
|
||
|
||
handleOpenBrand(brandName) {
|
||
if (!brandName) return;
|
||
const match = (companyAutomat.state.brands || []).find(
|
||
(b) => b && (b.name?.toLowerCase() === brandName.toLowerCase() || String(b.id) === String(brandName)),
|
||
);
|
||
const brandParam = match?.id != null ? String(match.id) : brandName;
|
||
this.props.navigate(`/artikel?brand=${encodeURIComponent(brandParam)}`);
|
||
}
|
||
|
||
render() {
|
||
const { items, unfilteredTotal, filterKey, status, error, selectedShipment } = this.state;
|
||
const isFailed = items === null && status === 'failed';
|
||
|
||
rowContext.onOpenShipment = this.handleOpenShipment;
|
||
rowContext.onOpenOrder = this.handleOpenOrder;
|
||
rowContext.onOpenCustomer = this.handleOpenCustomer;
|
||
rowContext.onOpenBrand = this.handleOpenBrand;
|
||
rowContext.headerItem = this.headerItem;
|
||
|
||
return (
|
||
<Box sx={{ width: '100%', position: 'relative' }}>
|
||
<ArticleHistorySearchField
|
||
inputRef={this.searchRef}
|
||
automat={this.automat}
|
||
/>
|
||
|
||
{isFailed ? (
|
||
<Box sx={{ p: 2 }}>
|
||
<BackendError error={backendErrorFrom(error)} onRetry={this.handleRetry} />
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ width: '100%', position: 'relative' }}>
|
||
<FillSpace
|
||
aboveRef={[this.searchRef]}
|
||
reserveBottom={48}
|
||
minPageSize={8}
|
||
minHeight={0}
|
||
resetKey={filterKey}
|
||
items={items || []}
|
||
totalCount={items ? items.length : 0}
|
||
unfilteredTotal={unfilteredTotal}
|
||
headerItem={this.headerItem}
|
||
renderItem={ArticleHistoryRow}
|
||
disableWheel
|
||
header={
|
||
<Box
|
||
sx={{
|
||
...rowGridSx,
|
||
height: 28,
|
||
minHeight: 28,
|
||
px: 1.5,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
}}
|
||
>
|
||
{renderInvisibleDummyRow(this.headerItem)}
|
||
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Datum</Box>
|
||
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Änderung / Ereignis</Box>
|
||
</Box>
|
||
}
|
||
onPageChange={this.handlePageChange}
|
||
/>
|
||
{items === null && (
|
||
<Box
|
||
sx={{
|
||
position: 'absolute',
|
||
top: 52,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 16,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
pointerEvents: 'none',
|
||
zIndex: 2,
|
||
}}
|
||
>
|
||
<CircularProgress size={32} />
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
)}
|
||
|
||
{selectedShipment && (
|
||
<ShipmentDetailDialog
|
||
open={Boolean(selectedShipment)}
|
||
shipment={selectedShipment}
|
||
onClose={this.handleCloseShipment}
|
||
onNavigate={this.props.navigate}
|
||
/>
|
||
)}
|
||
</Box>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withNavigate(ArticleHistoryTab);
|