97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
|
|
||
|
|
import * as React from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import Table from '@mui/material/Table'
|
||
|
|
import TableBody from '@mui/material/TableBody'
|
||
|
|
import TableCell from '@mui/material/TableCell'
|
||
|
|
import TableContainer from '@mui/material/TableContainer'
|
||
|
|
import TableHead from '@mui/material/TableHead'
|
||
|
|
import TableRow from '@mui/material/TableRow'
|
||
|
|
import Paper from '@mui/material/Paper'
|
||
|
|
import Button from '@mui/material/Button'
|
||
|
|
import {TableVirtuoso} from 'react-virtuoso'
|
||
|
|
import {Box, Typography} from '@mui/material'
|
||
|
|
import {formatDate} from '@/lib/format.js'
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
width: 200,
|
||
|
|
label: 'Version',
|
||
|
|
dataKey: 'name',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
width: 120,
|
||
|
|
label: 'Créée le',
|
||
|
|
dataKey: 'date_created',
|
||
|
|
numeric: true,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const VirtuosoTableComponents = {
|
||
|
|
Scroller: React.forwardRef((props, ref) => (
|
||
|
|
<TableContainer component={Paper} {...props} ref={ref} />
|
||
|
|
)),
|
||
|
|
Table: props => (
|
||
|
|
<Table {...props} sx={{borderCollapse: 'separate', tableLayout: 'fixed'}} />
|
||
|
|
),
|
||
|
|
TableHead: React.forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
|
||
|
|
TableRow,
|
||
|
|
TableBody: React.forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
|
||
|
|
}
|
||
|
|
|
||
|
|
function fixedHeaderContent() {
|
||
|
|
return (
|
||
|
|
<TableRow>
|
||
|
|
{columns.map(column => (
|
||
|
|
<TableCell
|
||
|
|
key={column.dataKey}
|
||
|
|
variant='head'
|
||
|
|
align={column.numeric || false ? 'right' : 'left'}
|
||
|
|
style={{width: column.width}}
|
||
|
|
sx={{backgroundColor: 'background.paper'}}
|
||
|
|
>
|
||
|
|
{column.label}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
</TableRow>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function rowContent(_index, row) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{columns.map(column => (
|
||
|
|
<TableCell
|
||
|
|
key={column.dataKey}
|
||
|
|
align={column.numeric || false ? 'right' : 'left'}
|
||
|
|
>
|
||
|
|
{column.dataKey === 'date_created' ? formatDate(row[column.dataKey], 'Pp') : <Button variant='outlined' color='success'>{row[column.dataKey]}</Button>}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ListVersions({collection, data}) {
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant='button' textAlign='center' sx={{display: 'block', fontWeight: 'bold'}}>
|
||
|
|
{collection}
|
||
|
|
</Typography>
|
||
|
|
<Paper style={{height: 350, width: '100%', marginBlock: 5}}>
|
||
|
|
<TableVirtuoso
|
||
|
|
data={data}
|
||
|
|
components={VirtuosoTableComponents}
|
||
|
|
fixedHeaderContent={fixedHeaderContent}
|
||
|
|
itemContent={rowContent}
|
||
|
|
/>
|
||
|
|
</Paper>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
ListVersions.propTypes = {
|
||
|
|
collection: PropTypes.oneOf(['titres', 'articles']).isRequired,
|
||
|
|
data: PropTypes.array.isRequired
|
||
|
|
}
|