[#509] Clean up and consolidate data table implementation across pages

* Create new generic DataTable component, update Students page implementation, remove email from students table schema

* Debounce search value, implement search in backend

* Implement sort in back-end, use query params to manage state

* Navigate on table row click

* Change students migration from drop to alter

* Restore email as optional

* Upgrade zod. Create IEP with student when end_date provided. Allow override of global error handler. Show error states on student form.

* Make sure Add Student works for first record, disable button when form visible

* Migrate Staff page to new table implementation

* More refactor of data table

* Delete old table implementation

* Restore case manager logic around emails, fix tests

* Handle creating IEP with end date for student

* Make email optional for student

* When changing DataTable sort column, default to sort ascending

Author: francisli

package-lock.json

@@ -63,7 +63,7 @@
     "tsx": "^4.19.2",
     "winston": "^3.17.0",
     "zapatos": "^6.4.4",
-    "zod": "^3.23.8"
+    "zod": "^3.25.28"
   },
   "devDependencies": {
     "@ava/get-port": "^2.0.0",

package.json

@@ -0,0 +1 @@
+ALTER TABLE student ALTER COLUMN email DROP NOT NULL;

src/backend/db/migrations/7_make-email-in-students-optional.sql

@@ -1,3 +1,5 @@
 {
-  "ignorePatterns": ["*"]
-}
+  "ignorePatterns": [
+    "*"
+  ]
+}

src/backend/db/zapatos/.eslintrc.json

@@ -101,7 +101,7 @@ export async function assignParaToCaseManager(
 type createStudentProps = {
   first_name: string;
   last_name: string;
-  email: string;
+  email?: string | null | undefined;
   grade: number;
   db: KyselyDatabaseInstance;
   userId: string;
@@ -127,32 +127,34 @@ export async function createAndAssignStudent({
   db,
   userId,
 }: createStudentProps) {
-  const lookahead = await db
-    .selectFrom("student")
-    .selectAll()
-    .where("email", "=", email)
-    .execute();
+  if (email) {
+    const lookahead = await db
+      .selectFrom("student")
+      .selectAll()
+      .where("email", "=", email)
+      .execute();
 
-  if (lookahead.length > 0) {
-    const student = lookahead[0];
-    if (student.assigned_case_manager_id === userId) {
-      throw STUDENT_ASSIGNED_TO_YOU_ERR;
+    if (lookahead.length > 0) {
+      const student = lookahead[0];
+      if (student.assigned_case_manager_id === userId) {
+        throw STUDENT_ASSIGNED_TO_YOU_ERR;
+      }
+      // not null
+      else if (student.assigned_case_manager_id) {
+        throw STUDENT_ALREADY_ASSIGNED_ERR;
+      }
+      // if student exists in table, but is unassigned,
+      // handle in onConflict during creation
     }
-    // not null
-    else if (student.assigned_case_manager_id) {
-      throw STUDENT_ALREADY_ASSIGNED_ERR;
-    }
-    // if student exists in table, but is unassigned,
-    // handle in onConflict during creation
   }
 
   // else, safe to create or re-assign student
-  await db
+  return db
     .insertInto("student")
     .values({
       first_name,
       last_name,
-      email: email.toLowerCase(),
+      email: email?.toLowerCase(),
       assigned_case_manager_id: userId,
       grade,
     })

src/backend/db/zapatos/schema.d.ts

@@ -1,4 +1,6 @@
 import { z } from "zod";
+import { parseISO, sub } from "date-fns";
+
 import { hasCaseManager, router } from "../trpc";
 import {
   createPara,
@@ -22,28 +24,64 @@ export const case_manager = router({
     return result;
   }),
 
-  getMyStudentsAndIepInfo: hasCaseManager.query(async (req) => {
-    const { userId } = req.ctx.auth;
+  getMyStudentsAndIepInfo: hasCaseManager
+    .input(
+      z
+        .object({
+          search: z.string().optional(),
+          sort: z.string().optional(),
+          sortAsc: z.coerce.boolean().optional(),
+        })
+        .optional()
+    )
+    .query(async (req) => {
+      const { userId } = req.ctx.auth;
+      const { search, sort, sortAsc = true } = req.input ?? {};
 
-    const studentData = await req.ctx.db
-      .selectFrom("iep")
-      .fullJoin("student", (join) =>
-        join.onRef("student.student_id", "=", "iep.student_id")
-      )
-      .where("assigned_case_manager_id", "=", userId)
-      .select([
-        "student.student_id as student_id",
-        "first_name",
-        "last_name",
-        "student.email",
-        "iep.iep_id as iep_id",
-        "iep.end_date as end_date",
-        "student.grade as grade",
-      ])
-      .execute();
+      let query = req.ctx.db
+        .selectFrom("iep")
+        .fullJoin("student", (join) =>
+          join.onRef("student.student_id", "=", "iep.student_id")
+        )
+        .where("assigned_case_manager_id", "=", userId);
 
-    return studentData;
-  }),
+      if (search) {
+        query = query.where((eb) =>
+          eb.or([
+            eb("student.first_name", "ilike", `%${search}%`),
+            eb("student.last_name", "ilike", `%${search}%`),
+          ])
+        );
+      }
+
+      const result = await query
+        .select([
+          "student.student_id as student_id",
+          "first_name",
+          "last_name",
+          "student.grade as grade",
+          "iep.iep_id as iep_id",
+          "iep.end_date as end_date",
+        ])
+        .orderBy(
+          (eb) => {
+            switch (sort) {
+              case "last_name":
+                return eb.ref("student.last_name");
+              case "grade":
+                return eb.ref("student.grade");
+              case "end_date":
+                return eb.ref("iep.end_date");
+              default:
+                return eb.ref("student.first_name");
+            }
+          },
+          sortAsc ? "asc" : "desc"
+        )
+        .execute();
+
+      return result;
+    }),
 
   /**
    * Adds the given student to the CM's roster. The student row is created if
@@ -55,17 +93,37 @@ export const case_manager = router({
       z.object({
         first_name: z.string(),
         last_name: z.string(),
-        email: z.string().email(),
+        email: z.string().email().nullable().optional(),
         grade: z.number(),
+        end_date: z.string().date().optional(),
       })
     )
     .mutation(async (req) => {
       const { userId } = req.ctx.auth;
 
-      await createAndAssignStudent({
-        ...req.input,
-        userId,
-        db: req.ctx.db,
+      return req.ctx.db.transaction().execute(async (trx) => {
+        const result = await createAndAssignStudent({
+          ...req.input,
+          userId,
+          db: trx,
+        });
+
+        const { end_date } = req.input;
+        if (end_date) {
+          const start_date = sub(parseISO(end_date), { years: 1 });
+          await trx
+            .insertInto("iep")
+            .values({
+              student_id: result.student_id,
+              case_manager_id: userId,
+              start_date,
+              end_date: parseISO(end_date),
+            })
+            .returningAll()
+            .executeTakeFirstOrThrow();
+        }
+
+        return result;
       });
     }),
 
@@ -78,7 +136,7 @@ export const case_manager = router({
         student_id: z.string(),
         first_name: z.string(),
         last_name: z.string(),
-        email: z.string().email(),
+        email: z.string().email().nullable().optional(),
         grade: z.number(),
       })
     )
@@ -104,7 +162,7 @@ export const case_manager = router({
         .set({
           first_name,
           last_name,
-          email: email.toLowerCase(),
+          email: email?.toLowerCase(),
           grade,
         })
         .where("student_id", "=", student_id)
@@ -131,22 +189,58 @@ export const case_manager = router({
         .execute();
     }),
 
-  getMyParas: hasCaseManager.query(async (req) => {
-    const { userId } = req.ctx.auth;
+  getMyParas: hasCaseManager
+    .input(
+      z
+        .object({
+          search: z.string().optional(),
+          sort: z.string().optional(),
+          sortAsc: z.coerce.boolean().optional(),
+        })
+        .optional()
+    )
+    .query(async (req) => {
+      const { userId } = req.ctx.auth;
+      const { search, sort, sortAsc = true } = req.input ?? {};
 
-    const result = await req.ctx.db
-      .selectFrom("user")
-      .innerJoin(
-        "paras_assigned_to_case_manager",
-        "user.user_id",
-        "paras_assigned_to_case_manager.para_id"
-      )
-      .where("paras_assigned_to_case_manager.case_manager_id", "=", userId)
-      .selectAll()
-      .execute();
+      let query = req.ctx.db
+        .selectFrom("user")
+        .innerJoin(
+          "paras_assigned_to_case_manager",
+          "user.user_id",
+          "paras_assigned_to_case_manager.para_id"
+        )
+        .where("paras_assigned_to_case_manager.case_manager_id", "=", userId);
 
-    return result;
-  }),
+      if (search) {
+        query = query.where((eb) =>
+          eb.or([
+            eb("user.first_name", "ilike", `%${search}%`),
+            eb("user.last_name", "ilike", `%${search}%`),
+            eb("user.email", "ilike", `%${search}%`),
+          ])
+        );
+      }
+
+      const result = await query
+        .selectAll()
+        .orderBy(
+          (eb) => {
+            switch (sort) {
+              case "last_name":
+                return eb.ref("user.last_name");
+              case "email":
+                return eb.ref("user.email");
+              default:
+                return eb.ref("user.first_name");
+            }
+          },
+          sortAsc ? "asc" : "desc"
+        )
+        .execute();
+
+      return result;
+    }),
 
   /**
    * Handles creation of para and assignment to user, attempts to send