fix tables

ocadotechnology · Sep 24, 2024 · e2e2f18 · e2e2f18
1 parent 39a0abb
commit e2e2f18
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 213 deletions.
diff --git a/src/components/table/Body.tsx b/src/components/table/Body.tsx
diff --git a/src/components/table/Cell.tsx b/src/components/table/Cell.tsx
diff --git a/src/components/table/Row.tsx b/src/components/table/Row.tsx
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
diff --git a/src/pages/teacherDashboard/classes/ClassTable.tsx b/src/pages/teacherDashboard/classes/ClassTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import { CopyIconButton, TablePagination } from "codeforlife/components"
 import { Create as CreateIcon } from "@mui/icons-material"
 import { type FC } from "react"
@@ -6,7 +7,6 @@ import { type SchoolTeacherUser } from "codeforlife/api"
 import { Typography } from "@mui/material"
 import { generatePath } from "react-router"
 
-import * as tables from "../../../components/table"
 import { type RetrieveUserResult } from "../../../api/user"
 import { paths } from "../../../routes"
 import { useLazyListClassesQuery } from "../../../api/klass"
@@ -31,27 +31,31 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
     >
       {classes => (
         <tables.Table
-          titles={
+          headers={
             authUser.teacher.is_admin
               ? ["Class name", "Access code", "Teacher", "Action"]
               : ["Class name", "Access code", "Action"]
           }
         >
           {classes.map(klass => (
-            <tables.Body key={`klass-${klass.id}`}>
+            <tables.BodyRow key={`klass-${klass.id}`}>
               <tables.Cell>{klass.name}</tables.Cell>
-              <tables.Cell justifyContent="space-between" alignItems="center">
+              <tables.CellStack
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+              >
                 {klass.id}
                 <CopyIconButton content={klass.id} />
-              </tables.Cell>
+              </tables.CellStack>
               {authUser.teacher.is_admin && (
                 <tables.Cell>
                   {klass.teacher.id === authUser.teacher.id
                     ? "You"
                     : `${klass.teacher.user.first_name} ${klass.teacher.user.last_name}`}
                 </tables.Cell>
               )}
-              <tables.Cell justifyContent="center">
+              <tables.CellStack alignItems="center">
                 <LinkButton
                   to={generatePath(
                     paths.teacher.dashboard.tab.classes.class._,
@@ -63,8 +67,8 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
                 >
                   Edit details
                 </LinkButton>
-              </tables.Cell>
-            </tables.Body>
+              </tables.CellStack>
+            </tables.BodyRow>
           ))}
         </tables.Table>
       )}

diff --git a/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx b/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import {
   Add as AddIcon,
   DoNotDisturb as DoNotDisturbIcon,
@@ -10,7 +11,6 @@ import { TablePagination } from "codeforlife/components"
 import { generatePath } from "react-router"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as tables from "../../../components/table"
 import {
   useHandleJoinClassRequestMutation,
   useLazyListUsersQuery,
@@ -47,10 +47,10 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
           users.length ? (
             <tables.Table
               className="body"
-              titles={["Name", "Email address", "Class", "Actions"]}
+              headers={["Name", "Email address", "Class", "Actions"]}
             >
               {users.map(user => (
-                <tables.Body key={`user-${user.id}`}>
+                <tables.BodyRow key={`user-${user.id}`}>
                   <tables.Cell>
                     <Typography>
                       {user.first_name} {user.last_name}
@@ -66,7 +66,7 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
                       ? ""
                       : ` (${user.requesting_to_join_class!.teacher.user.first_name} ${user.requesting_to_join_class!.teacher.user.last_name})`}
                   </tables.Cell>
-                  <tables.Cell justifyContent="center">
+                  <tables.CellStack alignItems="center">
                     <LinkButton
                       to={generatePath(
                         paths.teacher.dashboard.tab.classes.class.joinRequest._,
@@ -106,8 +106,8 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
                     >
                       Reject
                     </Button>
-                  </tables.Cell>
-                </tables.Body>
+                  </tables.CellStack>
+                </tables.BodyRow>
               ))}
             </tables.Table>
           ) : (

diff --git a/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx b/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx
@@ -1,8 +1,8 @@
+import * as tables from "codeforlife/components/table"
 import { type FC } from "react"
 import { TablePagination } from "codeforlife/components"
 import { Typography } from "@mui/material"
 
-import * as tables from "../../../../components/table"
 import { type RetrieveClassResult } from "../../../../api/klass"
 import { useLazyListUsersQuery } from "../../../../api/user"
 
@@ -27,7 +27,7 @@ const StudentTable: FC<StudentTableProps> = ({ klass, newClass }) => (
     >
       {users => (
         <tables.Table
-          titles={["Student name"]}
+          headers={["Student name"]}
           containerProps={{
             sx: {
               margin: "auto",
@@ -37,14 +37,14 @@ const StudentTable: FC<StudentTableProps> = ({ klass, newClass }) => (
         >
           {users.length ? (
             users.map(user => (
-              <tables.Body key={`user-${user.id}`}>
+              <tables.BodyRow key={`user-${user.id}`}>
                 <tables.Cell>{user.first_name}</tables.Cell>
-              </tables.Body>
+              </tables.BodyRow>
             ))
           ) : (
-            <tables.Body>
+            <tables.BodyRow>
               <tables.Cell>(no students)</tables.Cell>
-            </tables.Body>
+            </tables.BodyRow>
           )}
         </tables.Table>
       )}

diff --git a/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx b/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx
@@ -1,12 +1,12 @@
 import * as forms from "codeforlife/components/form"
+import * as tables from "codeforlife/components/table"
 import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { LinkButton } from "codeforlife/components/router"
 import { type StudentUser } from "codeforlife/api"
 import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as tables from "../../../../components/table"
 import {
   type TransferStudentsArg,
   useTransferStudentsMutation,
@@ -81,9 +81,9 @@ const TransferStudentsForm: FC<TransferStudentsFormProps> = ({
           },
         })}
       >
-        <tables.Table titles={["Existing name", "New student name"]}>
+        <tables.Table headers={["Existing name", "New student name"]}>
           {studentUsers.map(studentUser => (
-            <tables.Body key={`user-${studentUser.id}`}>
+            <tables.BodyRow key={`user-${studentUser.id}`}>
               <tables.Cell>{studentUser.first_name}</tables.Cell>
               <tables.Cell>
                 <forms.FirstNameField
@@ -93,7 +93,7 @@ const TransferStudentsForm: FC<TransferStudentsFormProps> = ({
                   placeholder={`Enter a name for ${studentUser.first_name}`}
                 />
               </tables.Cell>
-            </tables.Body>
+            </tables.BodyRow>
           ))}
         </tables.Table>
         <Stack className="form-buttons" justifyContent="end">

diff --git a/src/pages/teacherDashboard/school/Leave.tsx b/src/pages/teacherDashboard/school/Leave.tsx
@@ -1,5 +1,6 @@
 import * as form from "codeforlife/components/form"
 import * as page from "codeforlife/components/page"
+import * as tables from "codeforlife/components/table"
 import * as yup from "yup"
 import { CircularProgress, Stack, Typography } from "@mui/material"
 import { type FC, useEffect } from "react"
@@ -9,7 +10,6 @@ import { TablePagination } from "codeforlife/components"
 import { type User } from "codeforlife/api"
 import { submitForm } from "codeforlife/utils/form"
 
-import * as table from "../../../components/table"
 import {
   useLazyListClassesQuery,
   useUpdateClassesMutation,
@@ -125,27 +125,27 @@ const Leave: FC<LeaveProps> = ({ authUserId }) => {
                 )}
                 onSubmit={submitForm(updateClasses)}
               >
-                <table.Table
+                <tables.Table
                   className="body"
-                  titles={["Class name", "New teacher"]}
+                  headers={["Class name", "New teacher"]}
                 >
                   {classes.map(klass => (
-                    <table.Body key={klass.id}>
-                      <table.Cell>
+                    <tables.BodyRow key={klass.id}>
+                      <tables.Cell>
                         <Typography variant="subtitle1">
                           {klass.name}
                         </Typography>
-                      </table.Cell>
-                      <table.Cell direction="column" alignItems="flex-start">
+                      </tables.Cell>
+                      <tables.CellStack alignItems="flex-start">
                         <TeacherAutocompleteField
                           required
                           name={`${klass.id}.teacher`}
                           _id={user.id}
                         />
-                      </table.Cell>
-                    </table.Body>
+                      </tables.CellStack>
+                    </tables.BodyRow>
                   ))}
-                </table.Table>
+                </tables.Table>
                 <Stack direction="row" spacing={2}>
                   <LinkButton
                     variant="outlined"