u
This commit is contained in:
seb
@@ -1,107 +1,448 @@
|
||||
import { PureComponent } from 'react';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { PanelTile } from 'dashgui/panels';
|
||||
import { AutomatGrid } from 'react-virtual-aggridautomat';
|
||||
import { articleHistoryGridAutomat } from '../../automats';
|
||||
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 RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import ViewModuleIcon from '@mui/icons-material/ViewModule';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||
import FillSpace from 'dashgui/FillSpace';
|
||||
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import articleHistoryAutomat from '../../automats/articleHistoryAutomat';
|
||||
import { router } from '../../appRouter';
|
||||
import {
|
||||
LINK,
|
||||
} from '../../colors';
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { LINK } from '../../colors';
|
||||
|
||||
const COLUMN_DEFS = [
|
||||
{
|
||||
headerName: 'ID',
|
||||
field: 'id',
|
||||
maxWidth: 90,
|
||||
sortable: true,
|
||||
filter: 'agNumberColumnFilter',
|
||||
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||
},
|
||||
{
|
||||
headerName: 'Datum',
|
||||
field: 'date',
|
||||
minWidth: 170,
|
||||
maxWidth: 200,
|
||||
sortable: true,
|
||||
valueFormatter: (p) => (p.value ? new Date(p.value).toLocaleString('de-DE') : ''),
|
||||
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||
},
|
||||
{
|
||||
headerName: 'Artikel-Nr.',
|
||||
field: 'sku',
|
||||
minWidth: 130,
|
||||
maxWidth: 160,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
cellRenderer: (p) => {
|
||||
if (!p.value) return '';
|
||||
const CHUNK_SIZE = 50;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
export function createDummyTestArticleHistory() {
|
||||
return {
|
||||
id: 999999,
|
||||
date: '2030-10-30T12:00:00Z',
|
||||
sku: 'SKU-99999999',
|
||||
name: 'Musterartikel Name Langform',
|
||||
text: 'Preis geändert von 10,00 € auf 12,50 € durch Benutzer',
|
||||
user: 'Max Mustermann',
|
||||
};
|
||||
}
|
||||
|
||||
const rowGridSx = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns:
|
||||
'minmax(60px, max-content) minmax(150px, max-content) minmax(120px, max-content) minmax(160px, 1.2fr) minmax(240px, 2fr) minmax(120px, max-content)',
|
||||
gridTemplateRows: '0px 1fr',
|
||||
rowGap: 0,
|
||||
columnGap: 2,
|
||||
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',
|
||||
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">{d.id}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{formatDateTime(d.date)}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.sku}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.name}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.text}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.user}</Typography>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
class ArticleHistoryRow extends PureComponent {
|
||||
render() {
|
||||
const { item, disabled, headerItem } = this.props;
|
||||
const dummy = headerItem || createDummyTestArticleHistory();
|
||||
|
||||
if (!item) {
|
||||
return (
|
||||
<a
|
||||
href={`/artikel/${encodeURIComponent(p.value)}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
void router.navigate(`/artikel/${encodeURIComponent(p.value)}`);
|
||||
}}
|
||||
style={{ color: LINK, fontWeight: 600, textDecoration: 'none' }}
|
||||
<ListItemButton
|
||||
disabled
|
||||
divider
|
||||
sx={{ ...rowGridSx, height: 56, minHeight: 56, maxHeight: 56, px: 2, py: 0 }}
|
||||
>
|
||||
{p.value}
|
||||
</a>
|
||||
{renderInvisibleDummyRow(dummy)}
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="80%" 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="85%" height={20} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="70%" height={20} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="90%" height={20} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="60%" height={20} />
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
headerName: 'Artikelname',
|
||||
field: 'name',
|
||||
minWidth: 180,
|
||||
flex: 1,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
},
|
||||
{
|
||||
headerName: 'Änderung / Ereignis',
|
||||
field: 'text',
|
||||
minWidth: 300,
|
||||
flex: 2,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
cellStyle: { whiteSpace: 'pre-wrap', lineHeight: '1.4' },
|
||||
autoHeight: true,
|
||||
},
|
||||
{
|
||||
headerName: 'Benutzer',
|
||||
field: 'user',
|
||||
maxWidth: 160,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
valueGetter: (p) =>
|
||||
p.data?.user ||
|
||||
p.data?.employee ||
|
||||
p.data?.companyuser ||
|
||||
(p.data?.companyuserId ? `User #${p.data.companyuserId}` : '—'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const userName =
|
||||
item.user ||
|
||||
item.employee ||
|
||||
item.companyuser ||
|
||||
(item.companyuserId ? `User #${item.companyuserId}` : '—');
|
||||
|
||||
return (
|
||||
<ListItemButton
|
||||
divider
|
||||
disabled={disabled}
|
||||
sx={{ ...rowGridSx, height: 56, minHeight: 56, maxHeight: 56, px: 2, py: 0 }}
|
||||
onClick={
|
||||
item.sku
|
||||
? () => {
|
||||
void router.navigate(`/artikel/${encodeURIComponent(item.sku)}`);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{renderInvisibleDummyRow(dummy)}
|
||||
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
|
||||
{item.id}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
|
||||
{formatDateTime(item.date || item.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
|
||||
{item.sku ? (
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="a"
|
||||
href={`/artikel/${encodeURIComponent(item.sku)}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void router.navigate(`/artikel/${encodeURIComponent(item.sku)}`);
|
||||
}}
|
||||
sx={{
|
||||
color: LINK,
|
||||
fontWeight: 600,
|
||||
textDecoration: 'none',
|
||||
...ellipsisSx,
|
||||
'&:hover': { textDecoration: 'underline' },
|
||||
}}
|
||||
>
|
||||
{item.sku}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.disabled">
|
||||
–
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, ...ellipsisSx }}>
|
||||
{item.name || item.articlename || '–'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0 }}>
|
||||
<Tooltip title={item.text || item.message || ''} placement="top-start" enterDelay={500}>
|
||||
<Typography variant="body2" sx={ellipsisSx}>
|
||||
{item.text || item.message || '–'}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||||
{userName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ArticleHistorySearchField extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const s = articleHistoryAutomat.state;
|
||||
const stats = articleHistoryAutomat.getChunkStats?.();
|
||||
this.state = {
|
||||
input: s.filter ?? '',
|
||||
seekMonths: s.seekMonths ?? 0,
|
||||
seekYears: s.seekYears ?? 0,
|
||||
lruChunksCount: stats?.lruChunksCount || 0,
|
||||
maxLruChunks: stats?.maxLruChunks || 50,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = articleHistoryAutomat.subscribe(this, (state) => ({
|
||||
input: state.filter ?? '',
|
||||
seekMonths: state.seekMonths ?? 0,
|
||||
seekYears: state.seekYears ?? 0,
|
||||
}));
|
||||
if (import.meta.env.DEV) {
|
||||
this.unsubStats = articleHistoryAutomat.subscribeChunkStats?.((stats) => {
|
||||
this.setState({
|
||||
lruChunksCount: stats.lruChunksCount,
|
||||
maxLruChunks: stats.maxLruChunks,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsub?.();
|
||||
this.unsubStats?.();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { inputRef, onReload, loading } = 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 */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SingleLineTextEdit
|
||||
sx={{ flex: 1 }}
|
||||
size="small"
|
||||
search
|
||||
clear
|
||||
value={input}
|
||||
placeholder="Artikel-Nr., Name, Änderung oder Benutzer suchen…"
|
||||
onChange={(next) => articleHistoryAutomat.actions.filter(next)}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={onReload}
|
||||
disabled={loading}
|
||||
sx={{ height: 40, px: 2, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
Aktualisieren
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Filter Bar: Negativeseek (-1 Month, -1 Year, Reset) */}
|
||||
<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={() => articleHistoryAutomat.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={() => articleHistoryAutomat.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={() => articleHistoryAutomat.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'))}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
height: 28,
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 1,
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</PanelTileGrid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class ArticleHistoryPage extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const s = articleHistoryGridAutomat.state;
|
||||
this.headerItem = createDummyTestArticleHistory();
|
||||
this.state = {
|
||||
loading: s.loading,
|
||||
error: s.error,
|
||||
totalRows: s.totalRows,
|
||||
items: articleHistoryAutomat.getItems(),
|
||||
unfilteredTotal: articleHistoryAutomat.state.unfilteredTotal ?? 0,
|
||||
filterKey: articleHistoryAutomat.getFilterKey?.() ?? '',
|
||||
status: articleHistoryAutomat.state.status,
|
||||
error: articleHistoryAutomat.state.error,
|
||||
};
|
||||
this.searchRef = createRef();
|
||||
this.handleReload = this.handleReload.bind(this);
|
||||
this.handleRetry = this.handleRetry.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = articleHistoryGridAutomat.subscribe(this, (state) => ({
|
||||
loading: state.loading,
|
||||
this.unsub = articleHistoryAutomat.subscribe(this, (state) => ({
|
||||
items: state.items,
|
||||
unfilteredTotal: state.unfilteredTotal ?? 0,
|
||||
filterKey: articleHistoryAutomat.getFilterKey(state),
|
||||
status: state.status,
|
||||
error: state.error,
|
||||
totalRows: state.totalRows,
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -109,47 +450,112 @@ export default class ArticleHistoryPage extends PureComponent {
|
||||
this.unsub?.();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
articleHistoryAutomat.requireChunk(startChunk, endChunk);
|
||||
}
|
||||
|
||||
handleReload() {
|
||||
articleHistoryGridAutomat.actions.reload();
|
||||
void articleHistoryAutomat.actions.reload().catch(() => {});
|
||||
}
|
||||
|
||||
handleRetry() {
|
||||
void articleHistoryAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading, totalRows } = this.state;
|
||||
const { items, unfilteredTotal, filterKey, status, error } = this.state;
|
||||
const loading = status === 'loading';
|
||||
|
||||
const actions = (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
{loading && <CircularProgress size={18} thickness={5} />}
|
||||
{totalRows >= 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{totalRows} Einträge
|
||||
</Typography>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={this.handleReload}
|
||||
disabled={loading}
|
||||
>
|
||||
Aktualisieren
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
if (items === null && status === 'failed') {
|
||||
return (
|
||||
<>
|
||||
<ArticleHistorySearchField
|
||||
inputRef={this.searchRef}
|
||||
onReload={this.handleReload}
|
||||
loading={loading}
|
||||
/>
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} sx={{ p: 2 }}>
|
||||
<BackendError error={backendErrorFrom(error)} onRetry={this.handleRetry} />
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTile title="Artikel-Historie" actions={actions} sx={{ p: 0, height: 'calc(100vh - 140px)', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ flex: 1, minHeight: 0, width: '100%' }}>
|
||||
<AutomatGrid
|
||||
automat={articleHistoryGridAutomat}
|
||||
columnDefs={COLUMN_DEFS}
|
||||
rowIdField="id"
|
||||
cacheBlockSize={50}
|
||||
height="100%"
|
||||
width="100%"
|
||||
noRowsOverlayText="Keine Historieneinträge vorhanden"
|
||||
/>
|
||||
</Box>
|
||||
</PanelTile>
|
||||
<>
|
||||
<ArticleHistorySearchField
|
||||
inputRef={this.searchRef}
|
||||
onReload={this.handleReload}
|
||||
loading={loading}
|
||||
/>
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} 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}
|
||||
headerItem={this.headerItem}
|
||||
renderItem={ArticleHistoryRow}
|
||||
virtualScrollbar
|
||||
header={
|
||||
<Box
|
||||
sx={{
|
||||
...rowGridSx,
|
||||
height: 36,
|
||||
minHeight: 36,
|
||||
px: 2,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
{renderInvisibleDummyRow(this.headerItem)}
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>ID</Box>
|
||||
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
|
||||
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Artikel-Nr.</Box>
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Artikelname</Box>
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx }}>Änderung / Ereignis</Box>
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2, ...headerCellSx }}>Benutzer</Box>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +1,460 @@
|
||||
import { PureComponent } from 'react';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { PanelTile } from 'dashgui/panels';
|
||||
import { AutomatGrid } from 'react-virtual-aggridautomat';
|
||||
import { globalHistoryGridAutomat } from '../../automats';
|
||||
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 RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import ViewModuleIcon from '@mui/icons-material/ViewModule';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||
import FillSpace from 'dashgui/FillSpace';
|
||||
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import globalHistoryAutomat from '../../automats/globalHistoryAutomat';
|
||||
import { router } from '../../appRouter';
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { LINK } from '../../colors';
|
||||
|
||||
const COLUMN_DEFS = [
|
||||
{
|
||||
headerName: 'ID',
|
||||
field: 'id',
|
||||
maxWidth: 90,
|
||||
sortable: true,
|
||||
filter: 'agNumberColumnFilter',
|
||||
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||
},
|
||||
{
|
||||
headerName: 'Datum',
|
||||
field: 'date',
|
||||
minWidth: 170,
|
||||
maxWidth: 200,
|
||||
sortable: true,
|
||||
valueFormatter: (p) => (p.value ? new Date(p.value).toLocaleString('de-DE') : ''),
|
||||
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||
},
|
||||
{
|
||||
headerName: 'Typ',
|
||||
field: 'type',
|
||||
minWidth: 120,
|
||||
maxWidth: 160,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
},
|
||||
{
|
||||
headerName: 'Referenz / Key',
|
||||
field: 'reference',
|
||||
minWidth: 140,
|
||||
maxWidth: 200,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
valueGetter: (p) => p.data?.reference || p.data?.p1 || '',
|
||||
},
|
||||
{
|
||||
headerName: 'Meldung / Beschreibung',
|
||||
field: 'text',
|
||||
minWidth: 300,
|
||||
flex: 2,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
valueGetter: (p) => p.data?.text || p.data?.value || '',
|
||||
cellStyle: { whiteSpace: 'pre-wrap', lineHeight: '1.4' },
|
||||
autoHeight: true,
|
||||
},
|
||||
{
|
||||
headerName: 'Benutzer',
|
||||
field: 'user',
|
||||
maxWidth: 160,
|
||||
sortable: true,
|
||||
filter: 'agTextColumnFilter',
|
||||
valueGetter: (p) =>
|
||||
p.data?.user ||
|
||||
p.data?.employee ||
|
||||
(p.data?.companyuserId ? `User #${p.data.companyuserId}` : '—'),
|
||||
},
|
||||
];
|
||||
const CHUNK_SIZE = 50;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
export function createDummyTestGlobalHistory() {
|
||||
return {
|
||||
id: 999999,
|
||||
date: '2030-10-30T12:00:00Z',
|
||||
type: 'Bestellung',
|
||||
reference: 'BEST-999999',
|
||||
text: 'Status geändert auf abgeschlossen durch Benutzer',
|
||||
user: 'Max Mustermann',
|
||||
};
|
||||
}
|
||||
|
||||
const rowGridSx = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns:
|
||||
'minmax(60px, max-content) minmax(150px, max-content) minmax(110px, max-content) minmax(140px, max-content) minmax(240px, 2fr) minmax(120px, max-content)',
|
||||
gridTemplateRows: '0px 1fr',
|
||||
rowGap: 0,
|
||||
columnGap: 2,
|
||||
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',
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.04em',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
function renderInvisibleDummyRow(dummy) {
|
||||
const d = dummy || createDummyTestGlobalHistory();
|
||||
return (
|
||||
<>
|
||||
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.id}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{formatDateTime(d.date)}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.type}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.reference}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.text}</Typography>
|
||||
</Box>
|
||||
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
|
||||
<Typography variant="body2">{d.user}</Typography>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
class GlobalHistoryRow extends PureComponent {
|
||||
render() {
|
||||
const { item, disabled, headerItem } = this.props;
|
||||
const dummy = headerItem || createDummyTestGlobalHistory();
|
||||
|
||||
if (!item) {
|
||||
return (
|
||||
<ListItemButton
|
||||
disabled
|
||||
divider
|
||||
sx={{ ...rowGridSx, height: 56, minHeight: 56, maxHeight: 56, px: 2, py: 0 }}
|
||||
>
|
||||
{renderInvisibleDummyRow(dummy)}
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="80%" 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="rounded" width={70} height={22} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="80%" height={20} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="90%" height={20} />
|
||||
</Box>
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2 }}>
|
||||
<Skeleton variant="text" width="60%" height={20} />
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
|
||||
const userName =
|
||||
item.user ||
|
||||
item.employee ||
|
||||
(item.companyuserId ? `User #${item.companyuserId}` : '—');
|
||||
|
||||
const typeStr = item.type || item.entityType || '–';
|
||||
const refStr = item.reference || item.p1 || '–';
|
||||
|
||||
const isArticle = (typeStr === 'article' || typeStr === 'artikel') && refStr && refStr !== '–';
|
||||
|
||||
return (
|
||||
<ListItemButton
|
||||
divider
|
||||
disabled={disabled}
|
||||
sx={{ ...rowGridSx, height: 56, minHeight: 56, maxHeight: 56, px: 2, py: 0 }}
|
||||
onClick={
|
||||
isArticle
|
||||
? () => {
|
||||
void router.navigate(`/artikel/${encodeURIComponent(refStr)}`);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{renderInvisibleDummyRow(dummy)}
|
||||
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
|
||||
{item.id}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
|
||||
{formatDateTime(item.date || item.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
|
||||
<Chip
|
||||
size="small"
|
||||
label={typeStr}
|
||||
sx={{
|
||||
height: 22,
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
bgcolor: 'action.hover',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
|
||||
{isArticle ? (
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="a"
|
||||
href={`/artikel/${encodeURIComponent(refStr)}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void router.navigate(`/artikel/${encodeURIComponent(refStr)}`);
|
||||
}}
|
||||
sx={{
|
||||
color: LINK,
|
||||
fontWeight: 600,
|
||||
textDecoration: 'none',
|
||||
...ellipsisSx,
|
||||
'&:hover': { textDecoration: 'underline' },
|
||||
}}
|
||||
>
|
||||
{refStr}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
|
||||
{refStr}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0 }}>
|
||||
<Tooltip title={item.text || item.value || ''} placement="top-start" enterDelay={500}>
|
||||
<Typography variant="body2" sx={ellipsisSx}>
|
||||
{item.text || item.value || '–'}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2, minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
|
||||
{userName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class GlobalHistorySearchField extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const s = globalHistoryAutomat.state;
|
||||
const stats = globalHistoryAutomat.getChunkStats?.();
|
||||
this.state = {
|
||||
input: s.filter ?? '',
|
||||
seekMonths: s.seekMonths ?? 0,
|
||||
seekYears: s.seekYears ?? 0,
|
||||
lruChunksCount: stats?.lruChunksCount || 0,
|
||||
maxLruChunks: stats?.maxLruChunks || 50,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = globalHistoryAutomat.subscribe(this, (state) => ({
|
||||
input: state.filter ?? '',
|
||||
seekMonths: state.seekMonths ?? 0,
|
||||
seekYears: state.seekYears ?? 0,
|
||||
}));
|
||||
if (import.meta.env.DEV) {
|
||||
this.unsubStats = globalHistoryAutomat.subscribeChunkStats?.((stats) => {
|
||||
this.setState({
|
||||
lruChunksCount: stats.lruChunksCount,
|
||||
maxLruChunks: stats.maxLruChunks,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsub?.();
|
||||
this.unsubStats?.();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { inputRef, onReload, loading } = 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 */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SingleLineTextEdit
|
||||
sx={{ flex: 1 }}
|
||||
size="small"
|
||||
search
|
||||
clear
|
||||
value={input}
|
||||
placeholder="Referenz, Typ, Meldung oder Benutzer suchen…"
|
||||
onChange={(next) => globalHistoryAutomat.actions.filter(next)}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={onReload}
|
||||
disabled={loading}
|
||||
sx={{ height: 40, px: 2, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
Aktualisieren
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Filter Bar: Negativeseek (-1 Month, -1 Year, Reset) */}
|
||||
<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={() => globalHistoryAutomat.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={() => globalHistoryAutomat.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={() => globalHistoryAutomat.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'))}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
height: 28,
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 1,
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</PanelTileGrid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class GlobalHistoryPage extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const s = globalHistoryGridAutomat.state;
|
||||
this.headerItem = createDummyTestGlobalHistory();
|
||||
this.state = {
|
||||
loading: s.loading,
|
||||
error: s.error,
|
||||
totalRows: s.totalRows,
|
||||
items: globalHistoryAutomat.getItems(),
|
||||
unfilteredTotal: globalHistoryAutomat.state.unfilteredTotal ?? 0,
|
||||
filterKey: globalHistoryAutomat.getFilterKey?.() ?? '',
|
||||
status: globalHistoryAutomat.state.status,
|
||||
error: globalHistoryAutomat.state.error,
|
||||
};
|
||||
this.searchRef = createRef();
|
||||
this.handleReload = this.handleReload.bind(this);
|
||||
this.handleRetry = this.handleRetry.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = globalHistoryGridAutomat.subscribe(this, (state) => ({
|
||||
loading: state.loading,
|
||||
this.unsub = globalHistoryAutomat.subscribe(this, (state) => ({
|
||||
items: state.items,
|
||||
unfilteredTotal: state.unfilteredTotal ?? 0,
|
||||
filterKey: globalHistoryAutomat.getFilterKey(state),
|
||||
status: state.status,
|
||||
error: state.error,
|
||||
totalRows: state.totalRows,
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -91,47 +462,112 @@ export default class GlobalHistoryPage extends PureComponent {
|
||||
this.unsub?.();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
globalHistoryAutomat.requireChunk(startChunk, endChunk);
|
||||
}
|
||||
|
||||
handleReload() {
|
||||
globalHistoryGridAutomat.actions.reload();
|
||||
void globalHistoryAutomat.actions.reload().catch(() => {});
|
||||
}
|
||||
|
||||
handleRetry() {
|
||||
void globalHistoryAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading, totalRows } = this.state;
|
||||
const { items, unfilteredTotal, filterKey, status, error } = this.state;
|
||||
const loading = status === 'loading';
|
||||
|
||||
const actions = (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
{loading && <CircularProgress size={18} thickness={5} />}
|
||||
{totalRows >= 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{totalRows} Einträge
|
||||
</Typography>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={this.handleReload}
|
||||
disabled={loading}
|
||||
>
|
||||
Aktualisieren
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
if (items === null && status === 'failed') {
|
||||
return (
|
||||
<>
|
||||
<GlobalHistorySearchField
|
||||
inputRef={this.searchRef}
|
||||
onReload={this.handleReload}
|
||||
loading={loading}
|
||||
/>
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} sx={{ p: 2 }}>
|
||||
<BackendError error={backendErrorFrom(error)} onRetry={this.handleRetry} />
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTile title="Globale Historie" actions={actions} sx={{ p: 0, height: 'calc(100vh - 140px)', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ flex: 1, minHeight: 0, width: '100%' }}>
|
||||
<AutomatGrid
|
||||
automat={globalHistoryGridAutomat}
|
||||
columnDefs={COLUMN_DEFS}
|
||||
rowIdField="id"
|
||||
cacheBlockSize={50}
|
||||
height="100%"
|
||||
width="100%"
|
||||
noRowsOverlayText="Keine globalen Historieneinträge vorhanden"
|
||||
/>
|
||||
</Box>
|
||||
</PanelTile>
|
||||
<>
|
||||
<GlobalHistorySearchField
|
||||
inputRef={this.searchRef}
|
||||
onReload={this.handleReload}
|
||||
loading={loading}
|
||||
/>
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} 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}
|
||||
headerItem={this.headerItem}
|
||||
renderItem={GlobalHistoryRow}
|
||||
virtualScrollbar
|
||||
header={
|
||||
<Box
|
||||
sx={{
|
||||
...rowGridSx,
|
||||
height: 36,
|
||||
minHeight: 36,
|
||||
px: 2,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
{renderInvisibleDummyRow(this.headerItem)}
|
||||
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>ID</Box>
|
||||
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
|
||||
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Typ</Box>
|
||||
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Referenz / Key</Box>
|
||||
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx }}>Meldung / Beschreibung</Box>
|
||||
<Box sx={{ gridColumn: 6, gridRow: 2, ...headerCellSx }}>Benutzer</Box>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,6 +47,7 @@ import { generateTextThumbnail } from '../../utils/textThumbnail';
|
||||
import { extractPdfText } from '../../utils/pdfText';
|
||||
import { getDeliveryEditorAutomat } from '../../automats/deliveryEditorAutomat';
|
||||
import { setLastDeliveryPath, userSettingsAutomat, setViewerPosition } from '../../automats';
|
||||
import chatAutomat from '../../automats/chatAutomat';
|
||||
|
||||
import { fetchDeliveryLedgerSummary } from '../../utils/deliveryLedger';
|
||||
import {
|
||||
@@ -101,6 +102,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
this.handlePdfUpload = this.handlePdfUpload.bind(this);
|
||||
this.handlePdfRescan = this.handlePdfRescan.bind(this);
|
||||
this.handlePdfDelete = this.handlePdfDelete.bind(this);
|
||||
this.handleMentionInChat = this.handleMentionInChat.bind(this);
|
||||
this.handleAttachmentClick = this.handleAttachmentClick.bind(this);
|
||||
this.handleCloseTextEditor = this.handleCloseTextEditor.bind(this);
|
||||
this.handleTextEditorPositionChange = this.handleTextEditorPositionChange.bind(this);
|
||||
@@ -657,17 +659,20 @@ class LieferungNeuPage extends PureComponent {
|
||||
const existingTxt = this.state.attachments?.find(
|
||||
(a) => a.parentPdfId === attachment.id || a.name === txtName,
|
||||
);
|
||||
let targetTxt = existingTxt;
|
||||
if (existingTxt) {
|
||||
this.automat.actions.updateAttachment({
|
||||
const updated = {
|
||||
id: existingTxt.id,
|
||||
file: txtFile,
|
||||
size: txtFile.size,
|
||||
text,
|
||||
thumbnail: txtThumbnail || existingTxt.thumbnail,
|
||||
isDirty: true,
|
||||
});
|
||||
};
|
||||
this.automat.actions.updateAttachment(updated);
|
||||
targetTxt = { ...existingTxt, ...updated };
|
||||
} else {
|
||||
this.automat.actions.addAttachment({
|
||||
targetTxt = {
|
||||
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
file: txtFile,
|
||||
name: txtFile.name,
|
||||
@@ -677,14 +682,52 @@ class LieferungNeuPage extends PureComponent {
|
||||
text,
|
||||
parentPdfId: attachment.id,
|
||||
uploadedAt: new Date().toISOString(),
|
||||
});
|
||||
};
|
||||
this.automat.actions.addAttachment(targetTxt);
|
||||
}
|
||||
this.handleAttachmentClick(targetTxt);
|
||||
enqueueSnackbar('Text aus PDF extrahiert und geöffnet', { variant: 'success' });
|
||||
} catch (txtErr) {
|
||||
console.error('Fehler beim Aktualisieren der Textdatei:', txtErr);
|
||||
enqueueSnackbar('Fehler beim Extrahieren von Text aus der PDF', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async handleMentionInChat(attachment) {
|
||||
if (!attachment) return;
|
||||
let text = attachment.text;
|
||||
if (!text && (!attachment.file || attachment.file.size === 0)) {
|
||||
const file = await this.ensureAttachmentFile(attachment);
|
||||
if (file) {
|
||||
try {
|
||||
text = await file.text();
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Lesen des Texts:', e);
|
||||
}
|
||||
}
|
||||
} else if (!text && (attachment.file instanceof Blob || attachment.file instanceof File)) {
|
||||
try {
|
||||
text = await attachment.file.text();
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Lesen des Texts:', e);
|
||||
}
|
||||
}
|
||||
|
||||
const trimmed = (text || '').trim();
|
||||
if (!trimmed) {
|
||||
enqueueSnackbar('Datei enthält keinen Text zum Erwähnen im Chat.', { variant: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
const size = attachment.size || new Blob([trimmed]).size;
|
||||
chatAutomat.actions.insertExtractionSnippet({
|
||||
text: trimmed,
|
||||
size,
|
||||
});
|
||||
enqueueSnackbar('Text im Chat erwähnt', { variant: 'success' });
|
||||
}
|
||||
|
||||
handlePdfDelete(attachment) {
|
||||
if (!attachment?.id) return;
|
||||
this.automat.actions.removeAttachment(attachment.id);
|
||||
@@ -1058,6 +1101,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
onPdfRescan={this.handlePdfRescan}
|
||||
onPdfDelete={this.handlePdfDelete}
|
||||
onAttachmentClick={this.handleAttachmentClick}
|
||||
onMentionInChat={this.handleMentionInChat}
|
||||
onSave={this.handleSave}
|
||||
onPartyChange={this.handlePartyChange}
|
||||
onDateChange={this.handleDateChange}
|
||||
|
||||
Reference in New Issue
Block a user