Portal frontend 52 (#63)

* initial

* fixes after testing

* refactor

* use cfl navigate

* initial

* children

* merge from dev

* relock

* New version

* fix links

* fix paths

* new js package

* initial

* auto complete field

* tested

* fix tables

* fix type error

* restructure join class request view

* restructure reset students password

* restructure update student user view

* fix path

* restructure leave view

* no class names

* merge from dev

* add filter

* fix label

* instal new cfl package

package.json

@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.5",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.6",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

src/api/student.ts

@@ -45,7 +45,7 @@ export type TransferStudentsArg = BulkUpdateArg<
   "klass",
   never,
   {
-    user: Arg<User, never, "first_name">
+    user?: Arg<User, never, "first_name">
   }
 >
 

src/components/form/ClassAutocompleteField.tsx

@@ -0,0 +1,28 @@
+import { ApiAutocompleteField } from "codeforlife/components/form"
+import { type FC } from "react"
+
+import { type ListClassesArg, useLazyListClassesQuery } from "../../api/klass"
+
+export interface ClassAutocompleteFieldProps {
+  required?: boolean
+  name?: string
+  _id?: ListClassesArg["_id"]
+}
+
+const ClassAutocompleteField: FC<ClassAutocompleteFieldProps> = ({
+  required = false,
+  name = "klass",
+  _id,
+}) => (
+  <ApiAutocompleteField
+    useLazyListQuery={useLazyListClassesQuery}
+    searchKey="id_or_name"
+    filterOptions={{ _id }}
+    getOptionLabel={({ name, id, teacher }) =>
+      `${name} (${id}), ${teacher.user.first_name} ${teacher.user.last_name}`
+    }
+    textFieldProps={{ required, name }}
+  />
+)
+
+export default ClassAutocompleteField

src/components/form/index.tsx

@@ -1,3 +1,5 @@
+export * from "./ClassAutocompleteField"
+export { default as ClassAutocompleteField } from "./ClassAutocompleteField"
 export * from "./ClassNameField"
 export { default as ClassNameField } from "./ClassNameField"
 export * from "./LastNameField"

src/pages/home/TargetAudience.tsx

@@ -38,7 +38,7 @@ const TargetAudience: FC<TargetAudienceProps> = () => {
     "Helping teachers and families to inspire the next generation of computer scientists.",
     "Anyone can learn how to code. We will help you learn how. It's fun, free and easy.",
   ]
-  const linkButtons: LinkButtonProps[] = [
+  const linkButtons: LinkButtonProps<"to">[] = [
     {
       children: "Learn more",
       to: paths.teacher._,

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"
@@ -27,31 +27,38 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
     </Typography>
     <TablePagination
       useLazyListQuery={useLazyListClassesQuery}
+      filters={
+        authUser.teacher.is_admin ? undefined : { teacher: authUser.teacher.id }
+      }
       preferCacheValue
     >
       {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 +70,8 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
                 >
                   Edit details
                 </LinkButton>
-              </tables.Cell>
-            </tables.Body>
+              </tables.CellStack>
+            </tables.BodyRow>
           ))}
         </tables.Table>
       )}

src/pages/teacherDashboard/classes/Classes.tsx

@@ -5,11 +5,12 @@ import { type SchoolTeacherUser } from "codeforlife/api"
 import Class from "./class/Class"
 import ClassTable from "./ClassTable"
 import CreateClassForm from "./CreateClassForm"
-import JoinClassRequest from "./JoinClassRequest"
+import JoinClassRequest from "./joinClassRequest/JoinClassRequest"
 import JoinClassRequestTable from "./JoinClassRequestTable"
-import ResetStudentsPassword from "./class/ResetStudentsPassword"
+import ResetStudentsPassword from "./resetStudentsPassword/ResetStudentsPassword"
 import { type RetrieveUserResult } from "../../../api/user"
-import UpdateStudentUser from "./class/UpdateStudentUser"
+import TransferStudents from "./transferStudents/TransferStudents"
+import UpdateStudentUser from "./updateStudentUser/UpdateStudentUser"
 
 export interface ClassesProps {
   authUser: SchoolTeacherUser<RetrieveUserResult>
@@ -18,6 +19,7 @@ export interface ClassesProps {
     | "join-class-request"
     | "reset-students-password"
     | "update-student-user"
+    | "transfer-students"
 }
 
 const Classes: FC<ClassesProps> = ({ authUser, view }) => {
@@ -27,6 +29,7 @@ const Classes: FC<ClassesProps> = ({ authUser, view }) => {
       "join-class-request": <JoinClassRequest />,
       "reset-students-password": <ResetStudentsPassword />,
       "update-student-user": <UpdateStudentUser />,
+      "transfer-students": <TransferStudents />,
     }[view]
   }
 

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>
           ) : (