From 1ce038054edf43caf457cd7f7380c108a6fd23e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 23 Jul 2025 18:50:23 +0400
Subject: [PATCH] =?UTF-8?q?feat:=20int=C3=A8gre=20recherche=20et=20filtres?=
 =?UTF-8?q?=20dans=20ListVersions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/versions/list-versions.js | 86 +++++++++++++++++++++-------
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/components/versions/list-versions.js b/components/versions/list-versions.js
index 01bb222..5619643 100644
--- a/components/versions/list-versions.js
+++ b/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'}}>
-            {collection}
-          </Typography>
+          <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,26 +188,39 @@ export default function ListVersions({
           </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>
+        <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>
         ) : (
-          <VersionTimeline
-            collection={collection}
-            data={data}
-            accessToken={accessToken}
-            userId={userId}
-            setError={setError}
-            setIsErrorAlertOpen={setIsErrorAlertOpen}
-          />
+          viewMode === 'table' ? (
+            <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
+              <TableVirtuoso
+                data={filteredData}
+                components={VirtuosoTableComponents}
+                fixedHeaderContent={fixedHeaderContent}
+                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>