From b410a6da2997b2ef3107d465fa59d93d6d622405 Mon Sep 17 00:00:00 2001
From: "C. Fuhrman" <christopher.fuhrman@etsmtl.ca>
Date: Tue, 24 Sep 2024 09:49:15 -0400
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liorations=20-=20table=20des=20r=C3=A9s?=
 =?UTF-8?q?ultats=20d=C3=A9file=20horizontalement=20avec=20la=20premi?=
 =?UTF-8?q?=C3=A8re=20colonne=20fixe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LiveResults/LiveResults.tsx    | 24 +++++++-------
 .../src/components/LiveResults/liveResult.css | 33 +++++++++++++++++++
 .../pages/Teacher/ManageRoom/ManageRoom.tsx   |  4 +--
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
index ecf64e0..9539a53 100644
--- a/client/src/components/LiveResults/LiveResults.tsx
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -51,14 +51,14 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
 
     useEffect(() => {
         // Set student list before starting
-        let newStudents:StudentResult[] = [];
+        let newStudents: StudentResult[] = [];
 
         for (const student of students as UserType[]) {
-            newStudents.push( { username: student.name, idUser: student.id, answers: [] } )
+            newStudents.push({ username: student.name, idUser: student.id, answers: [] })
         }
 
         setStudentResults(newStudents);
-        
+
     }, [])
 
     useEffect(() => {
@@ -242,16 +242,11 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </FormGroup>
             </div>
 
-            <Table size="small" stickyHeader component={Paper}>
+            <div className="table-container">
+            <Table size="small" component={Paper}>
                 <TableHead>
                     <TableRow>
-                        <TableCell
-                            sx={{
-                                borderStyle: 'solid',
-                                borderWidth: 1,
-                                borderColor: 'rgba(224, 224, 224, 1)'
-                            }}
-                        >
+                        <TableCell className="sticky-column">
                             <div className="text-base text-bold">Nom d'utilisateur</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -259,7 +254,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                                 key={index}
                                 sx={{
                                     textAlign: 'center',
-                                    cursor: `pointer`,
+                                    cursor: 'pointer',
                                     borderStyle: 'solid',
                                     borderWidth: 1,
                                     borderColor: 'rgba(224, 224, 224, 1)'
@@ -270,6 +265,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                             </TableCell>
                         ))}
                         <TableCell
+                            className="sticky-header"
                             sx={{
                                 textAlign: 'center',
                                 borderStyle: 'solid',
@@ -285,6 +281,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                     {studentResults.map((student) => (
                         <TableRow key={student.idUser}>
                             <TableCell
+                                className="sticky-column"
                                 sx={{
                                     borderStyle: 'solid',
                                     borderWidth: 1,
@@ -348,7 +345,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableBody>
                 <TableFooter>
                     <TableRow sx={{ backgroundColor: '#d3d3d34f' }}>
-                        <TableCell sx={{ color: 'black' }}>
+                        <TableCell className="sticky-column" sx={{ color: 'black' }}>
                             <div className="text-base text-bold">% réussite</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -385,6 +382,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableFooter>
             </Table>
         </div>
+        </div>
     );
 };
 
diff --git a/client/src/components/LiveResults/liveResult.css b/client/src/components/LiveResults/liveResult.css
index 553c31e..c16ca48 100644
--- a/client/src/components/LiveResults/liveResult.css
+++ b/client/src/components/LiveResults/liveResult.css
@@ -27,6 +27,39 @@
     align-items: flex-start;
 }
 
+.table-cell-border {
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgba(224, 224, 224, 1);
+}
+
+/* -------------- */
+
+.table-container {
+    overflow-x: auto;
+    position: relative;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 2; /* Ensure it stays above other cells */
+}
+
+.sticky-column {
+    position: sticky;
+    left: 0;
+    background-color: white;
+    z-index: 1; /* Ensure it stays above other cells but below the header */
+}
+
+.sticky-intersection {
+    z-index: 3; /* Ensure the top-left cell stays above both header and column */
+}
+
+/* ------------------------------- */
+
 /* Media query for narrow screens */
 @media (max-width: 600px) {
     .action-bar {
diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
index 47c8294..e8d8bfc 100644
--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@@ -255,8 +255,8 @@ const ManageRoom: React.FC = () => {
                 <div className='dumb'></div>
 
             </div>
-
-            <div className='room'>
+{/* the following breaks the css (nested room classes) */}
+            <div className=''>
 
                 {quizQuestions ? (