Merge 1981a7f7d5 into ee7a7a0544

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -66,7 +66,6 @@ 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 =>
@@ -121,9 +120,6 @@ 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) => {
@@ -515,87 +511,62 @@ const Dashboard: React.FC = () => {
             <div
                 style={{
                     display: 'flex',
-                    justifyContent: 'flex-end',
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    width: '100%',
+                    marginBottom: '20px'
-                    gap: '20px'
                 }}
             >
-                {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
+                <div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}>
-                <div
+                    <TextField
-                    className="search-bar"
+                        onChange={handleSearch}
-                    style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
+                        value={searchTerm}
-                >
+                        placeholder="Rechercher un quiz par son titre"
-                    {!isSearchVisible ? (
+                        fullWidth
-                        <IconButton
+                        variant="outlined"
-                            onClick={toggleSearchVisibility}
+                        InputProps={{
-                            sx={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton>
+                                        <Search />
+                                    </IconButton>
+                                </InputAdornment>
+                            )
+                        }}
+                        sx={{
+                            '& .MuiOutlinedInput-root': {
                                 borderRadius: '8px',
-                                border: '1px solid #ccc',
+                                '& fieldset': {
-                                padding: '8px 12px',
+                                    borderColor: '#e0e0e0'
-                                backgroundColor: '#fff',
+                                },
-                                color: '#5271FF'
+                                '&:hover fieldset': {
-                            }}
+                                    borderColor: '#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>
 
-                <Button
+                <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-                    variant="outlined"
+                    <Button
-                    color="primary"
+                        variant="outlined"
-                    startIcon={<Add />}
+                        color="primary"
-                    onClick={handleCreateQuiz}
+                        startIcon={<Add />}
+                        onClick={handleCreateQuiz}
                         sx={{ borderRadius: '8px' }}
-                >
+                    >
-                    Ajouter nouveau quiz
+                        Ajouter nouveau quiz
-                </Button>
+                    </Button>
 
-                <Button
+                    <Button
-                    variant="outlined"
+                        variant="outlined"
-                    color="primary"
+                        color="primary"
-                    startIcon={<Upload />}
+                        startIcon={<Upload />}
-                    onClick={handleOnImport}
+                        onClick={handleOnImport}
                         sx={{ borderRadius: '8px' }}
-                >
+                    >
-                    Importer
+                        Importer
-                </Button>
+                    </Button>
+                </div>
             </div>
 
             {/* Conteneur principal avec les actions et la liste des quiz */}