feat: intègre recherche et filtres dans ListVersions

components/versions/list-versions.js

@@ -17,8 +17,11 @@ 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 VersionSearch from './version-search.js'
+import VersionFilters from './version-filters.js'
 import {formatDate} from '@/lib/format.js'
 import {compareVersion} from '@/lib/directus.js'
+import {filterVersions, getFilterStats} from '@/lib/version-utils.js'
 
 const columns = [
   {
@@ -118,9 +121,28 @@ export default function ListVersions({
   const [viewMode, setViewMode] = useState('table')
   const [isOpenComparison, setIsOpenComparison] = useState(false)
   const [versionCompare, setVersionCompare] = useState(null)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filters, setFilters] = useState({
+    author: '',
+    dateFrom: '',
+    dateTo: '',
+    status: ''
+  })
+
+  // Filter data based on search and filters
+  const filteredData = filterVersions(data, searchTerm, filters)
+  const stats = getFilterStats(data, filteredData)
 
   const versionData = data.find(({id}) => id === versionCompare?.versionId)
 
+  const handleSearchChange = newSearchTerm => {
+    setSearchTerm(newSearchTerm)
+  }
+
+  const handleFiltersChange = newFilters => {
+    setFilters(newFilters)
+  }
+
   const handleViewModeChange = (event, newViewMode) => {
     if (newViewMode !== null) {
       setViewMode(newViewMode)
@@ -137,9 +159,16 @@ export default function ListVersions({
           mb: 2
         }}
         >
-          <Typography variant='button' sx={{fontWeight: 'bold'}}>
+          <Box>
-            {collection}
+            <Typography variant='button' sx={{fontWeight: 'bold'}}>
-          </Typography>
+              {collection}
+            </Typography>
+            {stats.hidden > 0 && (
+              <Typography variant='caption' color='text.secondary' sx={{ml: 1}}>
+                ({stats.filtered}/{stats.total} versions)
+              </Typography>
+            )}
+          </Box>
 
           <ToggleButtonGroup
             exclusive
@@ -159,26 +188,39 @@ export default function ListVersions({
           </ToggleButtonGroup>
         </Box>
 
-        {viewMode === 'table' ? (
+        <VersionSearch onSearchChange={handleSearchChange} />
-          <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
+        <VersionFilters data={data} onFiltersChange={handleFiltersChange} />
-            <TableVirtuoso
+
-              data={data}
+        {filteredData.length === 0 ? (
-              components={VirtuosoTableComponents}
+          <Box sx={{textAlign: 'center', py: 4}}>
-              fixedHeaderContent={fixedHeaderContent}
+            <Typography variant='body1' color='text.secondary'>
-              itemContent={(index, row) => rowContent({
+              {searchTerm || Object.values(filters).some(Boolean)
-                index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
+                ? 'Aucune version ne correspond aux critères de recherche'
-              })}
+                : 'Aucune version disponible'}
-            />
+            </Typography>
-          </Paper>
+          </Box>
         ) : (
-          <VersionTimeline
+          viewMode === 'table' ? (
-            collection={collection}
+            <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
-            data={data}
+              <TableVirtuoso
-            accessToken={accessToken}
+                data={filteredData}
-            userId={userId}
+                components={VirtuosoTableComponents}
-            setError={setError}
+                fixedHeaderContent={fixedHeaderContent}
-            setIsErrorAlertOpen={setIsErrorAlertOpen}
+                itemContent={(index, row) => rowContent({
-          />
+                  index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
+                })}
+              />
+            </Paper>
+          ) : (
+            <VersionTimeline
+              collection={collection}
+              data={filteredData}
+              accessToken={accessToken}
+              userId={userId}
+              setError={setError}
+              setIsErrorAlertOpen={setIsErrorAlertOpen}
+            />
+          )
         )}
       </Box>