From 9a01814b109c7f07005194cedf96d9135c8be5bf Mon Sep 17 00:00:00 2001
From: pankhis <psaini2@ncsu.edu>
Date: Sun, 21 Apr 2024 18:00:59 -0400
Subject: [PATCH] toggle question functionality

---
 src/pages/ViewTeamGrades/ReviewTable.tsx    | 42 +++++++++++----------
 src/pages/ViewTeamGrades/ReviewTableRow.tsx | 11 +++++-
 src/pages/ViewTeamGrades/grades.scss        |  3 +-
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/pages/ViewTeamGrades/ReviewTable.tsx b/src/pages/ViewTeamGrades/ReviewTable.tsx
index 681994c..3105bd7 100644
--- a/src/pages/ViewTeamGrades/ReviewTable.tsx
+++ b/src/pages/ViewTeamGrades/ReviewTable.tsx
@@ -18,6 +18,7 @@ const ReviewTable: React.FC = () => {
   const [sortOrderRow, setSortOrderRow] = useState<'asc' | 'desc' | 'none'>('none'); // State for row sort order
   const [showWordCount10, setShowWordCount10] = useState(false); // State for showing reviews with more than 10 words
   const [showWordCount20, setShowWordCount20] = useState(false); // State for showing reviews with more than 20 words
+  const [showToggleQuestion, setShowToggleQuestion] = useState(false); // State for showing question column
   const [open, setOpen] = useState(false); 
   const [showReviews, setShowReviews] = useState(false);
 
@@ -55,19 +56,9 @@ const ReviewTable: React.FC = () => {
     setShowReviews(!showReviews);
   };
 
-    // const renderQuestionReviews = () => {
-    //   return dummyDataRounds[currentRound].map((question, index) => (
-    //     <div key={index}>
-    //       <h3>Question {question.questionNumber}: {question.questionText}</h3>
-    //       {question.reviews.map((review, reviewIndex) => (
-    //         <div key={reviewIndex}>
-    //           <p>Review {reviewIndex + 1}: Score: {review.score}</p>
-    //           {('comment' in review) && <p>Comment: {review.comment}</p>}
-    //         </div>
-    //       ))}
-    //     </div>
-    //   ));
-    // };
+  const toggleShowQuestion = () => {
+    setShowToggleQuestion(!showToggleQuestion);
+  };
 
   // JSX rendering of the ReviewTable component
   return (
@@ -137,23 +128,34 @@ const ReviewTable: React.FC = () => {
           onChange={(e) => setShowWordCount20(e.target.checked)}
         />
         <label htmlFor="wordCount20"> &nbsp;More than 20 words</label>
+        <input
+          type="checkbox"
+          id="toggleQuestion"
+          name="toggleQuestion"
+          checked={showToggleQuestion}
+          onChange={toggleShowQuestion}
+        />
+        <label htmlFor="toggleQuestion"> &nbsp;Toggle Question</label>
       </form>
       <div className="table-container">
         <table className="tbl_heat">
           <thead>
           <tr className="bg-gray-200">
-            <th className="py-2 px-4">Question No.</th>
+            <th className="py-2 px-4 text-center" style={{ width: '70px' }}>Question No.</th>
+            {showToggleQuestion && (
+                <th className="py-2 px-4 text-center" style={{ width: '150px' }}>Question</th>
+              )}
             {Array.from({ length: currentRoundData[0].reviews.length }, (_, i) => (
-              <th key={i} className="py-2 px-4 text-center">{`Review ${i + 1}`}</th>
+              <th key={i} className="py-2 px-4 text-center" style={{ width: '70px' }}>{`Review ${i + 1}`}</th>
             ))}
-            <th className="py-2 px-4" onClick={toggleSortOrderRow}>
+            <th className="py-2 px-4" style={{ width: '70px' }} onClick={toggleSortOrderRow}>
               Avg
               {sortOrderRow === "none" && <span>▲▼</span>}
               {sortOrderRow === "asc" && <span> ▲</span>}
               {sortOrderRow === "desc" && <span> ▼</span>}
             </th>
-            {showWordCount10 && <th className="py-2 px-4 text-center">10+ Words</th>}
-            {showWordCount20 && <th className="py-2 px-4 text-center">20+ Words</th>}
+            {showWordCount10 && <th className="py-2 px-4 text-center" style={{ width: '70px' }}>10+ Words</th>}
+            {showWordCount20 && <th className="py-2 px-4 text-center" style={{ width: '70px' }}>20+ Words</th>}
           </tr>
           </thead>
           <tbody>
@@ -163,10 +165,12 @@ const ReviewTable: React.FC = () => {
               row={row}
               showWordCount10={showWordCount10}
               showWordCount20={showWordCount20}
+              showToggleQuestion={showToggleQuestion}
             />
           ))}
           <tr className="no-bg">
-            <td className="py-2 px-4">Avg</td>
+            <td className="py-2 px-4" style={{ width: '70px' }}>Avg</td> {/* "Avg" header always in the first column */}
+            {showToggleQuestion && <td></td>} {/* Add an empty cell if toggle question is shown */}
             {columnAverages.map((avg, index) => (
               <td key={index} className="py-2 px-4 text-center">
                 {avg.toFixed(2)}
diff --git a/src/pages/ViewTeamGrades/ReviewTableRow.tsx b/src/pages/ViewTeamGrades/ReviewTableRow.tsx
index 78798ed..2d07040 100644
--- a/src/pages/ViewTeamGrades/ReviewTableRow.tsx
+++ b/src/pages/ViewTeamGrades/ReviewTableRow.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { getColorClass, getWordCount10, getWordCount20 } from './utils'; // Importing utility functions
 import { ReviewData } from './App'; // Importing the ReviewData interface from App
 
@@ -7,10 +7,13 @@ interface ReviewTableRowProps {
   row: ReviewData; // Data for the row
   showWordCount10: boolean; // Flag to show reviews with 10+ words
   showWordCount20: boolean; // Flag to show reviews with 20+ words
+  showToggleQuestion: boolean; // Flag to toggle the question column
 }
 
 // Functional component ReviewTableRow
-const ReviewTableRow: React.FC<ReviewTableRowProps> = ({ row, showWordCount10, showWordCount20 }) => {
+const ReviewTableRow: React.FC<ReviewTableRowProps> = ({ row, showWordCount10, showWordCount20, showToggleQuestion }) => {
+  const [toggleQuestion, setToggleQuestion] = useState<boolean>(showToggleQuestion);
+
   return (
     <tr className={row.maxScore === 1 ? "no-bg" : ""}>
       {/* Question Number */}
@@ -25,6 +28,10 @@ const ReviewTableRow: React.FC<ReviewTableRowProps> = ({ row, showWordCount10, s
         </div>
       </td>
 
+      {showToggleQuestion && (
+        <td className="text-center" >{row.questionText}</td>
+      )}
+
       {/* Review Cells */}
       {row.reviews.map((review, idx) => (
         <td
diff --git a/src/pages/ViewTeamGrades/grades.scss b/src/pages/ViewTeamGrades/grades.scss
index 7aa03bd..e0c9c26 100644
--- a/src/pages/ViewTeamGrades/grades.scss
+++ b/src/pages/ViewTeamGrades/grades.scss
@@ -1,6 +1,6 @@
 /* Set the maximum width of the table container */
 .table-container {
-  max-width: 70%;
+  max-width: 90%;
 }
 
 /* Circle around max score number */
@@ -92,6 +92,7 @@
   font-size: 10px;
   text-align: center;
   table-layout: fixed;
+  min-width: 600px; // Minimum width before scrolling kicks in
 }
 
 .tbl_heat td {