render PINs in monospace font for easier legibility. Consider making …

…them clickable to let the proctor validate them?
CodeGrade · Feb 23, 2024 · 27d9945 · 27d9945
1 parent 1efb1af
commit 27d9945
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/app/packs/components/workflows/proctor/exams/index.tsx b/app/packs/components/workflows/proctor/exams/index.tsx
@@ -1928,16 +1928,23 @@ const ShowCurrentPinsTable: React.FC<{
             </tr>
           </thead>
           <tbody>
-            {all.map((reg) => (
-              <tr key={reg.id}>
-                <td>{reg.name}</td>
-                <td>
-                  {regsById.get(reg.id)?.pinValidated
-                    ? 'Already validated'
-                    : (regsById.get(reg.id)?.currentPin ?? 'none required')}
-                </td>
-              </tr>
-            ))}
+            {all.map((reg) => {
+              const r = regsById.get(reg.id);
+              let row: React.ReactElement;
+              if (r?.pinValidated) {
+                row = <td>Already validated</td>;
+              } else if (r?.currentPin) {
+                row = <td style={{ fontFamily: 'monospace' }}>{r.currentPin}</td>;
+              } else {
+                row = <td>none required</td>;
+              }
+              return (
+                <tr key={reg.id}>
+                  <td>{reg.name}</td>
+                  {row}
+                </tr>
+              );
+            })}
           </tbody>
         </Table>
       </Row>

diff --git a/app/packs/components/workflows/professor/exams/submissions/index.tsx b/app/packs/components/workflows/professor/exams/submissions/index.tsx
@@ -517,22 +517,26 @@ const ExamSubmissionsQuery: React.FC = () => {
             </tr>
           </thead>
           <tbody>
-            {groups.notStarted.map((reg) => (
-              <tr key={reg.id}>
-                <td>
-                  <Link to={`/exams/${examId}/submissions/${reg.id}`}>
-                    {reg.user.displayName}
-                  </Link>
-                </td>
-                {anyPins && (
+            {groups.notStarted.map((reg) => {
+              let row: React.ReactElement;
+              if (reg?.pinValidated) {
+                row = <td>Already validated</td>;
+              } else if (reg?.currentPin) {
+                row = <td style={{ fontFamily: 'monospace' }}>{reg.currentPin}</td>;
+              } else {
+                row = <td>none required</td>;
+              }
+              return (
+                <tr key={reg.id}>
                   <td>
-                    {reg.pinValidated
-                      ? 'Already validated'
-                      : (reg.currentPin ?? 'none required')}
+                    <Link to={`/exams/${examId}/submissions/${reg.id}`}>
+                      {reg.user.displayName}
+                    </Link>
                   </td>
-                )}
-              </tr>
-            ))}
+                  {anyPins && row}
+                </tr>
+              );
+            })}
           </tbody>
         </Table>
       )}