153 lines
4.0 KiB
JavaScript
153 lines
4.0 KiB
JavaScript
import { PureComponent } 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 { router } from '../../appRouter';
|
|
|
|
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 '';
|
|
return (
|
|
<a
|
|
href={`/artikel/${encodeURIComponent(p.value)}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
void router.navigate(`/artikel/${encodeURIComponent(p.value)}`);
|
|
}}
|
|
style={{ color: '#2563eb', fontWeight: 600, textDecoration: 'none' }}
|
|
>
|
|
{p.value}
|
|
</a>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
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}` : '—'),
|
|
},
|
|
];
|
|
|
|
export default class ArticleHistoryPage extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
const s = articleHistoryGridAutomat.state;
|
|
this.state = {
|
|
loading: s.loading,
|
|
error: s.error,
|
|
totalRows: s.totalRows,
|
|
};
|
|
this.handleReload = this.handleReload.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsub = articleHistoryGridAutomat.subscribe(this, (state) => ({
|
|
loading: state.loading,
|
|
error: state.error,
|
|
totalRows: state.totalRows,
|
|
}));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsub?.();
|
|
}
|
|
|
|
handleReload() {
|
|
articleHistoryGridAutomat.actions.reload();
|
|
}
|
|
|
|
render() {
|
|
const { loading, totalRows } = this.state;
|
|
|
|
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>
|
|
);
|
|
|
|
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>
|
|
);
|
|
}
|
|
}
|