feat: ajoute bascule table/timeline dans ListVersions

components/versions/list-versions.js

@@ -8,10 +8,15 @@ 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 ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import ViewListIcon from '@mui/icons-material/ViewList'
+import TimelineIcon from '@mui/icons-material/Timeline'
 import {TableVirtuoso} from 'react-virtuoso'
 import {Box, Typography} from '@mui/material'
 import SessionExpired from '../session/session-expired.js'
 import VersionDialog from './version-dialog.js'
+import VersionTimeline from './version-timeline.js'
 import {formatDate} from '@/lib/format.js'
 import {compareVersion} from '@/lib/directus.js'
 
@@ -110,29 +115,73 @@ export default function ListVersions({
   setIsErrorAlertOpen
 }) {
   const countdownRef = useRef()
-
+  const [viewMode, setViewMode] = useState('table')
   const [isOpenComparison, setIsOpenComparison] = useState(false)
   const [versionCompare, setVersionCompare] = useState(null)
 
   const versionData = data.find(({id}) => id === versionCompare?.versionId)
 
+  const handleViewModeChange = (event, newViewMode) => {
+    if (newViewMode !== null) {
+      setViewMode(newViewMode)
+    }
+  }
+
   return (
     <>
       <Box>
-        <Typography variant='button' textAlign='center' sx={{display: 'block', fontWeight: 'bold'}}>
-          {collection}
-        </Typography>
-        <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
-          <TableVirtuoso
+        <Box sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          mb: 2
+        }}
+        >
+          <Typography variant='button' sx={{fontWeight: 'bold'}}>
+            {collection}
+          </Typography>
+
+          <ToggleButtonGroup
+            exclusive
+            color='primary'
+            size='small'
+            value={viewMode}
+            onChange={handleViewModeChange}
+          >
+            <ToggleButton value='table' aria-label='vue tableau'>
+              <ViewListIcon sx={{mr: 1}} />
+              Table
+            </ToggleButton>
+            <ToggleButton value='timeline' aria-label='vue chronologique'>
+              <TimelineIcon sx={{mr: 1}} />
+              Timeline
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Box>
+
+        {viewMode === 'table' ? (
+          <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
+            <TableVirtuoso
+              data={data}
+              components={VirtuosoTableComponents}
+              fixedHeaderContent={fixedHeaderContent}
+              itemContent={(index, row) => rowContent({
+                index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
+              })}
+            />
+          </Paper>
+        ) : (
+          <VersionTimeline
+            collection={collection}
             data={data}
-            components={VirtuosoTableComponents}
-            fixedHeaderContent={fixedHeaderContent}
-            itemContent={(index, row) => rowContent({
-              index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
-            })}
+            accessToken={accessToken}
+            userId={userId}
+            setError={setError}
+            setIsErrorAlertOpen={setIsErrorAlertOpen}
           />
-        </Paper>
+        )}
       </Box>
+
       {isOpenComparison && (
         <VersionDialog versionData={versionData} versionCompare={versionCompare} isOpen={isOpenComparison} setIsOpen={setIsOpenComparison} />
       )}