From 5f4b97e004a6729d1cd8a10a93ac892faa423dac Mon Sep 17 00:00:00 2001
From: NouhailaAater <nouhaila.aater.1@ens.etsmtl.ca>
Date: Tue, 25 Mar 2025 04:40:47 -0400
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20bouton=20recherche=20quiz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Teacher/Dashboard/Dashboard.tsx | 123 +++++++++++-------
 1 file changed, 76 insertions(+), 47 deletions(-)

diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
index 9d84bbb..9b5ba1b 100644
--- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx
+++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
@@ -66,6 +66,7 @@ const Dashboard: React.FC = () => {
     const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
     const [errorMessage, setErrorMessage] = useState('');
     const [showErrorDialog, setShowErrorDialog] = useState(false);
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
 
     // Filter quizzes based on search term
     // const filteredQuizzes = quizzes.filter(quiz =>
@@ -120,6 +121,9 @@ const Dashboard: React.FC = () => {
             selectRoomByName(event.target.value);
         }
     };
+    const toggleSearchVisibility = () => {
+        setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
+    };
 
     // Créer une salle
     const createRoom = async (title: string) => {
@@ -511,62 +515,87 @@ const Dashboard: React.FC = () => {
             <div
                 style={{
                     display: 'flex',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                     alignItems: 'center',
-                    marginBottom: '20px'
+                    width: '100%',
+                    gap: '20px'
                 }}
             >
-                <div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}>
-                    <TextField
-                        onChange={handleSearch}
-                        value={searchTerm}
-                        placeholder="Rechercher un quiz par son titre"
-                        fullWidth
-                        variant="outlined"
-                        InputProps={{
-                            endAdornment: (
-                                <InputAdornment position="end">
-                                    <IconButton>
-                                        <Search />
-                                    </IconButton>
-                                </InputAdornment>
-                            )
-                        }}
-                        sx={{
-                            '& .MuiOutlinedInput-root': {
+                {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
+                <div
+                    className="search-bar"
+                    style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
+                >
+                    {!isSearchVisible ? (
+                        <IconButton
+                            onClick={toggleSearchVisibility}
+                            sx={{
                                 borderRadius: '8px',
-                                '& fieldset': {
-                                    borderColor: '#e0e0e0'
-                                },
-                                '&:hover fieldset': {
-                                    borderColor: '#5271FF'
-                                }
-                            }
-                        }}
-                    />
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                color: '#5271FF'
+                            }}
+                        >
+                            <Search />
+                        </IconButton>
+                    ) : (
+                        // Barre de recherche visible
+                        <TextField
+                            onChange={handleSearch}
+                            value={searchTerm}
+                            placeholder="Rechercher un quiz"
+                            fullWidth
+                            autoFocus
+                            sx={{
+                                borderRadius: '8px',
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                maxWidth: '1000px',
+                                width: '100%',
+                                fontWeight: 500
+                            }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            onClick={toggleSearchVisibility}
+                                            sx={{
+                                                borderRadius: '8px',
+                                                border: '1px solid #ccc',
+                                                backgroundColor: '#fff',
+                                                color: '#5271FF'
+                                            }}
+                                        >
+                                            <Search />
+                                        </IconButton>
+                                    </InputAdornment>
+                                )
+                            }}
+                        />
+                    )}
                 </div>
 
-                <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-                    <Button
-                        variant="outlined"
-                        color="primary"
-                        startIcon={<Add />}
-                        onClick={handleCreateQuiz}
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    startIcon={<Add />}
+                    onClick={handleCreateQuiz}
                         sx={{ borderRadius: '8px' }}
-                    >
-                        Ajouter nouveau quiz
-                    </Button>
+                >
+                    Ajouter nouveau quiz
+                </Button>
 
-                    <Button
-                        variant="outlined"
-                        color="primary"
-                        startIcon={<Upload />}
-                        onClick={handleOnImport}
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    startIcon={<Upload />}
+                    onClick={handleOnImport}
                         sx={{ borderRadius: '8px' }}
-                    >
-                        Importer
-                    </Button>
-                </div>
+                >
+                    Importer
+                </Button>
             </div>
 
             {/* Conteneur principal avec les actions et la liste des quiz */}