79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import { Component } from 'react';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import { StorageManagerContext } from '../../../api/storageManagerContext';
|
|
import { notifyError } from '../../../utils/notify';
|
|
|
|
function formatDate(iso) {
|
|
return new Date(iso).toLocaleString('de-DE');
|
|
}
|
|
|
|
export default class ArticleHistoryTab extends Component {
|
|
static contextType = StorageManagerContext;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { history: null };
|
|
this.unwatchHistory = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unwatchHistory = this.context.article.historyWatch(
|
|
this.props.sku,
|
|
(history) => this.setState({ history }),
|
|
notifyError,
|
|
);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unwatchHistory?.();
|
|
this.unwatchHistory = null;
|
|
}
|
|
|
|
render() {
|
|
const { history } = this.state;
|
|
if (history == null) return null;
|
|
return (
|
|
<Table
|
|
size="small"
|
|
sx={{
|
|
'& td': { borderBottom: 'none', bgcolor: 'transparent' },
|
|
'& th': { bgcolor: 'transparent' },
|
|
}}
|
|
>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell
|
|
sx={{
|
|
borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
|
|
width: '1%',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
Datum
|
|
</TableCell>
|
|
<TableCell
|
|
sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.35)' }}
|
|
/>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{history.map((entry) => (
|
|
<TableRow key={entry.id}>
|
|
<TableCell
|
|
sx={{ verticalAlign: 'top', whiteSpace: 'nowrap', width: '1%' }}
|
|
>
|
|
{formatDate(entry.date)}
|
|
</TableCell>
|
|
<TableCell sx={{ whiteSpace: 'pre-wrap' }}>{entry.text}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|
|
}
|