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
         }}
         >
+          <Box>
             <Typography variant='button' sx={{fontWeight: 'bold'}}>
               {collection}
             </Typography>
+            {stats.hidden > 0 && (
+              <Typography variant='caption' color='text.secondary' sx={{ml: 1}}>
+                ({stats.filtered}/{stats.total} versions)
+              </Typography>
+            )}
+          </Box>
 
           <ToggleButtonGroup
             exclusive
@@ -159,10 +188,22 @@ export default function ListVersions({
           </ToggleButtonGroup>
         </Box>
 
-        {viewMode === 'table' ? (
+        <VersionSearch onSearchChange={handleSearchChange} />
+        <VersionFilters data={data} onFiltersChange={handleFiltersChange} />
+
+        {filteredData.length === 0 ? (
+          <Box sx={{textAlign: 'center', py: 4}}>
+            <Typography variant='body1' color='text.secondary'>
+              {searchTerm || Object.values(filters).some(Boolean)
+                ? 'Aucune version ne correspond aux critères de recherche'
+                : 'Aucune version disponible'}
+            </Typography>
+          </Box>
+        ) : (
+          viewMode === 'table' ? (
             <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
               <TableVirtuoso
-              data={data}
+                data={filteredData}
                 components={VirtuosoTableComponents}
                 fixedHeaderContent={fixedHeaderContent}
                 itemContent={(index, row) => rowContent({
@@ -173,12 +214,13 @@ export default function ListVersions({
           ) : (
             <VersionTimeline
               collection={collection}
-            data={data}
+              data={filteredData}
               accessToken={accessToken}
               userId={userId}
               setError={setError}
               setIsErrorAlertOpen={setIsErrorAlertOpen}
             />
+          )
         )}
       </Box>