From bafbc9b8a3e673871886df8fe96dfd79c1a38b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sun, 15 Sep 2024 18:02:30 +0400
Subject: [PATCH] Create ListVersions component

---
 components/versions/list-versions.js | 96 ++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 components/versions/list-versions.js

diff --git a/components/versions/list-versions.js b/components/versions/list-versions.js
new file mode 100644
index 0000000..21067f8
--- /dev/null
+++ b/components/versions/list-versions.js
@@ -0,0 +1,96 @@
+
+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
+}