From 57c5321c09f5a457aeab954cf80b40312d3a23a3 Mon Sep 17 00:00:00 2001
From: NouhailaAater <nouhaila.aater.1@ens.etsmtl.ca>
Date: Tue, 8 Apr 2025 19:34:27 -0400
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20page=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Teacher/Dashboard/Dashboard.tsx | 338 ++++++++++++------
 1 file changed, 220 insertions(+), 118 deletions(-)

diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
index 3d4cc65..a5b4f33 100644
--- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx
+++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
@@ -38,7 +38,7 @@ import {
     Upload,
     FolderCopy,
     ContentCopy,
-    Edit,
+    Edit
 } from '@mui/icons-material';
 import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal';
 
@@ -65,6 +65,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 =>
@@ -104,7 +105,7 @@ const Dashboard: React.FC = () => {
 
         fetchData();
     }, []);
-    
+
     useEffect(() => {
         if (rooms.length > 0 && !selectedRoom) {
             selectRoom(rooms[rooms.length - 1]);
@@ -120,41 +121,44 @@ const Dashboard: React.FC = () => {
         }
     };
 
-  // Créer une salle
-  const createRoom = async (title: string) => {
-    // Créer la salle et récupérer l'objet complet
-    const newRoom = await ApiService.createRoom(title);
-    
-    // Mettre à jour la liste des salles
-    const updatedRooms = await ApiService.getUserRooms();
-    setRooms(updatedRooms as RoomType[]);
-    
-    // Sélectionner la nouvelle salle avec son ID
-    selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
-  };
+    const toggleSearchVisibility = () => {
+        setIsSearchVisible(!isSearchVisible);
+    };
 
+    // Créer une salle
+    const createRoom = async (title: string) => {
+        // Créer la salle et récupérer l'objet complet
+        const newRoom = await ApiService.createRoom(title);
 
-  // Sélectionner une salle
-  const selectRoomByName = (roomId: string) => {
-    const room = rooms.find(r => r._id === roomId);
-    selectRoom(room);
-    localStorage.setItem('selectedRoomId', roomId);
-  };
+        // Mettre à jour la liste des salles
+        const updatedRooms = await ApiService.getUserRooms();
+        setRooms(updatedRooms as RoomType[]);
 
-  const handleCreateRoom = async () => {
-    if (newRoomTitle.trim()) {
-      try {
+        // Sélectionner la nouvelle salle avec son ID
+        selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
+    };
+
+    // Sélectionner une salle
+    const selectRoomByName = (roomId: string) => {
+        const room = rooms.find((r) => r._id === roomId);
+        selectRoom(room);
+        localStorage.setItem('selectedRoomId', roomId);
+    };
+
+    const handleCreateRoom = async () => {
+        if (newRoomTitle.trim()) {
+            try {
                 await createRoom(newRoomTitle);
                 const userRooms = await ApiService.getUserRooms();
                 setRooms(userRooms as RoomType[]);
-        setOpenAddRoomDialog(false);
-        setNewRoomTitle('');
-      } catch (error) {
-        setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
-        setShowErrorDialog(true);
-      }
-    }
-  };
+                setOpenAddRoomDialog(false);
+                setNewRoomTitle('');
+            } catch (error) {
+                setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue');
+                setShowErrorDialog(true);
+            }
+        }
+    };
 
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setSelectedFolderId(event.target.value);
@@ -397,35 +401,68 @@ const Dashboard: React.FC = () => {
         } else {
             const randomSixDigit = Math.floor(100000 + Math.random() * 900000);
             navigate(`/teacher/manage-room/${quiz._id}/${randomSixDigit}`);
-        }    
+        }
     };
 
     return (
         <div className="dashboard">
-            <div className="title">Tableau de bord</div>
+            {/* Conteneur pour le titre et le sélecteur de salle */}
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '20px'
+                }}
+            >
+                {/* Titre tableau de bord */}
+                <div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
+                    Tableau de bord
+                </div>
 
-            <div className="roomSelection">
-                <label htmlFor="select-room">Sélectionner une salle: </label>
-                <select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
-                    <option value="" disabled>
-                        -- Sélectionner une salle --
-                    </option>
-                    {rooms.map((room) => (
-                        <option key={room._id} value={room._id}>
-                            {room.title}
+                {/* Sélecteur de salle */}
+                <div
+                    className="roomSelection"
+                    style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
+                >
+                    <select
+                        value={selectedRoom?._id || ''}
+                        onChange={(e) => handleSelectRoom(e)}
+                        id="room-select"
+                        style={{
+                            padding: '8px 12px',
+                            fontSize: '14px',
+                            borderRadius: '8px',
+                            border: '1px solid #ccc',
+                            backgroundColor: '#fff',
+                            maxWidth: '200px',
+                            cursor: 'pointer',
+                            fontWeight: '500'
+                        }}
+                    >
+                        <option value="" disabled>
+                            Sélectionner une salle
                         </option>
-                    ))}
-                    <option value="add-room">Ajouter salle</option>
-                </select>
-
+                        {rooms.map((room) => (
+                            <option key={room._id} value={room._id}>
+                                {room.title}
+                            </option>
+                        ))}
+                        <option
+                            value="add-room"
+                            style={{
+                                color: 'black',
+                                backgroundColor: '#f0f0f0',
+                                fontWeight: 'bold'
+                            }}
+                        >
+                            Ajouter une salle
+                        </option>
+                    </select>
+                </div>
             </div>
 
-            {selectedRoom && (
-                <div className="roomTitle">
-                    <h2>Salle sélectionnée: {selectedRoom.title}</h2>
-                </div>
-            )}
-
+            {/* Dialog pour créer une salle */}
             <Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
                 <DialogTitle>Créer une nouvelle salle</DialogTitle>
                 <DialogContent>
@@ -450,24 +487,17 @@ const Dashboard: React.FC = () => {
                 </DialogActions>
             </Dialog>
 
-            <div className="search-bar">
-                <TextField
-                    onChange={handleSearch}
-                    value={searchTerm}
-                    placeholder="Rechercher un quiz par son titre"
-                    fullWidth
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton>
-                                    <Search />
-                                </IconButton>
-                            </InputAdornment>
-                        )
-                    }}
-                />
-            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    width: '100%',
+                    gap: '20px'
+                }}
+            ></div>
 
+            {/* Conteneur principal avec les actions et la liste des quiz */}
             <div className="folder">
                 <div className="select">
                     <NativeSelect
@@ -475,13 +505,18 @@ const Dashboard: React.FC = () => {
                         color="primary"
                         value={selectedFolderId}
                         onChange={handleSelectFolder}
+                        sx={{
+                            padding: '6px 12px',
+                            maxWidth: '180px',
+                            borderRadius: '8px',
+                            borderColor: '#e0e0e0',
+                            '&:hover': { borderColor: '#5271FF' }
+                        }}
                     >
-                        <option value=""> Tous les dossiers... </option>
-
-                        {folders.map((folder: FolderType) => (
+                        <option value="">Tous les dossiers...</option>
+                        {folders.map((folder) => (
                             <option value={folder._id} key={folder._id}>
-                                {' '}
-                                {folder.title}{' '}
+                                {folder.title}
                             </option>
                         ))}
                     </NativeSelect>
@@ -497,65 +532,130 @@ const Dashboard: React.FC = () => {
 
                     <Tooltip title="Renommer dossier" placement="top">
                         <div>
-                        <IconButton
-                            color="primary"
-                            onClick={handleRenameFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <Edit />{' '}
-                        </IconButton>
+                            <IconButton
+                                color="primary"
+                                onClick={handleRenameFolder}
+                                disabled={selectedFolderId == ''} // cannot action on all
+                            >
+                                {' '}
+                                <Edit />{' '}
+                            </IconButton>
                         </div>
                     </Tooltip>
 
                     <Tooltip title="Dupliquer dossier" placement="top">
                         <div>
-                        <IconButton
-                            color="primary"
-                            onClick={handleDuplicateFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <FolderCopy />{' '}
-                        </IconButton>
+                            <IconButton
+                                color="primary"
+                                onClick={handleDuplicateFolder}
+                                disabled={selectedFolderId == ''} // cannot action on all
+                            >
+                                {' '}
+                                <FolderCopy />{' '}
+                            </IconButton>
                         </div>
                     </Tooltip>
 
                     <Tooltip title="Supprimer dossier" placement="top">
                         <div>
-                        <IconButton
-                            aria-label="delete"
-                            color="primary"
-                            onClick={handleDeleteFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <DeleteOutline />{' '}
-                        </IconButton>
+                            <IconButton
+                                aria-label="delete"
+                                color="primary"
+                                onClick={handleDeleteFolder}
+                                disabled={selectedFolderId == ''} // cannot action on all
+                            >
+                                {' '}
+                                <DeleteOutline />{' '}
+                            </IconButton>
                         </div>
                     </Tooltip>
                 </div>
             </div>
 
-            <div className="ajouter">
-                <Button
-                    variant="outlined"
-                    color="primary"
-                    startIcon={<Add />}
-                    onClick={handleCreateQuiz}
-                >
-                    Ajouter un nouveau quiz
-                </Button>
+            <div
+                className="search-bar"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    gap: '20px',
+                    width: '100%'
+                }}
+            >
+                <div style={{ flex: 1 }}>
+                    {!isSearchVisible ? (
+                        <IconButton
+                            onClick={toggleSearchVisibility}
+                            sx={{
+                                borderRadius: '8px',
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                color: '#5271FF'
+                            }}
+                        >
+                            <Search />
+                        </IconButton>
+                    ) : (
+                        <TextField
+                            onChange={handleSearch}
+                            value={searchTerm}
+                            placeholder="Rechercher un quiz"
+                            fullWidth
+                            autoFocus
+                            sx={{
+                                borderRadius: '8px',
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                fontWeight: 500,
+                                width: '100%',
+                                maxWidth: '1000px'
+                            }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            onClick={toggleSearchVisibility}
+                                            sx={{
+                                                borderRadius: '8px',
+                                                border: '1px solid #ccc',
+                                                backgroundColor: '#fff',
+                                                color: '#5271FF'
+                                            }}
+                                        >
+                                            <Search />
+                                        </IconButton>
+                                    </InputAdornment>
+                                )
+                            }}
+                        />
+                    )}
+                </div>
 
-                <Button
-                    variant="outlined"
-                    color="primary"
-                    startIcon={<Upload />}
-                    onClick={handleOnImport}
-                >
-                    Import
-                </Button>
+                {/* À droite : les boutons */}
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <Button
+                        variant="outlined"
+                        color="primary"
+                        startIcon={<Add />}
+                        onClick={handleCreateQuiz}
+                        sx={{ borderRadius: '8px', minWidth: 'auto', padding: '4px 12px' }}
+                    >
+                        Nouveau quiz
+                    </Button>
+
+                    <Button
+                        variant="outlined"
+                        color="primary"
+                        startIcon={<Upload />}
+                        onClick={handleOnImport}
+                    >
+                        Importer
+                    </Button>
+                </div>
             </div>
+
             <div className="list">
                 {Object.keys(quizzesByFolder).map((folderName) => (
                     <CustomCard key={folderName} className="folder-card">
@@ -571,7 +671,9 @@ const Dashboard: React.FC = () => {
                                                     onClick={() => handleLancerQuiz(quiz)}
                                                     disabled={!validateQuiz(quiz.content)}
                                                 >
-                                                    {`${quiz.title} (${quiz.content.length} question${
+                                                    {`${quiz.title} (${
+                                                        quiz.content.length
+                                                    } question${
                                                         quiz.content.length > 1 ? 's' : ''
                                                     })`}
                                                 </Button>
@@ -622,7 +724,7 @@ const Dashboard: React.FC = () => {
                                         </Tooltip>
 
                                         <div className="quiz-share">
-                                                    <ShareQuizModal quiz={quiz} />
+                                            <ShareQuizModal quiz={quiz} />
                                         </div>
                                     </div>
                                 </div>