[Closes #424] Add sort by name to assigned page (#459)

nickvisut · canjalal · web-flow · commit 31057b246f22 · 2024-11-14T14:31:00.000-08:00
* add sort by name to assigned

Co-authored-by: Vincent Shuali &lt;vincent.shuali@gmail.com&gt;

* Move types to universal types file

* Add seeds of tasks

* Add second benchmark to student 2 goal in seeds

* Explicitly type getMyTasks and use useEffect instead of getSortedTasks

---------

Co-authored-by: Vincent Shuali &lt;vincent.shuali@gmail.com&gt;
diff --git a/src/backend/db/lib/seed.ts b/src/backend/db/lib/seed.ts
@@ -11,7 +11,7 @@ export const seedfile = async (databaseUrl: string) => {
     .select("user_id")
     .executeTakeFirstOrThrow();
 
-  await db
+  const { student_id: student_1_id } = await db
     .insertInto("student")
     .values({
       first_name: "Edna",
@@ -20,9 +20,10 @@ export const seedfile = async (databaseUrl: string) => {
       grade: 1,
       assigned_case_manager_id: firstuser.user_id,
     })
-    .execute();
+    .returning("student_id")
+    .executeTakeFirstOrThrow();
 
-  await db
+  const { student_id: student_2_id } = await db
     .insertInto("student")
     .values({
       first_name: "Colette",
@@ -31,7 +32,8 @@ export const seedfile = async (databaseUrl: string) => {
       grade: 2,
       assigned_case_manager_id: firstuser.user_id,
     })
-    .execute();
+    .returning("student_id")
+    .executeTakeFirstOrThrow();
 
   await db
     .insertInto("student")
@@ -64,5 +66,169 @@ export const seedfile = async (databaseUrl: string) => {
     })
     .execute();
 
+  const { iep_id: student_1_iep_id } = await db
+    .insertInto("iep")
+    .values({
+      case_manager_id: firstuser.user_id,
+      student_id: student_1_id,
+      start_date: new Date("2024-11-05"),
+      end_date: new Date("2028-12-31"),
+    })
+    .returning("iep_id")
+    .executeTakeFirstOrThrow();
+
+  const { iep_id: student_2_iep_id } = await db
+    .insertInto("iep")
+    .values({
+      case_manager_id: firstuser.user_id,
+      student_id: student_2_id,
+      start_date: new Date("2024-11-04"),
+      end_date: new Date("2028-12-30"),
+    })
+    .returning("iep_id")
+    .executeTakeFirstOrThrow();
+
+  const { goal_id: student_1_goal_1_id } = await db
+    .insertInto("goal")
+    .values({
+      iep_id: student_1_iep_id,
+      description: "Improve Spanish grade",
+      category: "other",
+    })
+    .returning("goal_id")
+    .executeTakeFirstOrThrow();
+
+  const { goal_id: student_1_goal_2_id } = await db
+    .insertInto("goal")
+    .values({
+      iep_id: student_1_iep_id,
+      description: "Come to class more punctually",
+      category: "other",
+    })
+    .returning("goal_id")
+    .executeTakeFirstOrThrow();
+
+  const { goal_id: student_2_goal_id } = await db
+    .insertInto("goal")
+    .values({
+      iep_id: student_2_iep_id,
+      description: "Organize notebook",
+      category: "other",
+    })
+    .returning("goal_id")
+    .executeTakeFirstOrThrow();
+
+  const { benchmark_id: benchmark_student_1_goal_1_id } = await db
+    .insertInto("benchmark")
+    .values({
+      goal_id: student_1_goal_1_id,
+      status: "In Progress",
+      description: "Create example sentences from vocab",
+      setup: "Make Google Sheets from vocab list",
+      instructions:
+        "Have student create example sentences for each vocab word in Google Sheets",
+      materials: "N/A",
+      frequency: "Once per week",
+      target_level: 60,
+      baseline_level: 0,
+      attempts_per_trial: 1,
+      number_of_trials: 16,
+      metric_name: "",
+    })
+    .returning("benchmark_id")
+    .executeTakeFirstOrThrow();
+
+  await db
+    .insertInto("task")
+    .values({
+      benchmark_id: benchmark_student_1_goal_1_id,
+      assignee_id: firstuser.user_id,
+    })
+    .execute();
+
+  const { benchmark_id: benchmark_student_1_goal_2_id } = await db
+    .insertInto("benchmark")
+    .values({
+      goal_id: student_1_goal_2_id,
+      status: "In Progress",
+      description: "Create morning schedule",
+      setup: "Make Google Sheet of empty schedule",
+      instructions:
+        "Have student fill out schedule on Google Sheets and print it",
+      materials: "N/A",
+      frequency: "Once per week",
+      target_level: 60,
+      baseline_level: 0,
+      attempts_per_trial: 1,
+      number_of_trials: 16,
+      metric_name: "",
+    })
+    .returning("benchmark_id")
+    .executeTakeFirstOrThrow();
+
+  await db
+    .insertInto("task")
+    .values({
+      benchmark_id: benchmark_student_1_goal_2_id,
+      assignee_id: firstuser.user_id,
+    })
+    .execute();
+
+  const { benchmark_id: benchmark_1_student_2_goal_id } = await db
+    .insertInto("benchmark")
+    .values({
+      goal_id: student_2_goal_id,
+      status: "In Progress",
+      description: "Consolidate new class handouts",
+      setup: "N/A",
+      instructions:
+        "Have student write dates and sort handouts by date and class",
+      materials: "Pen, folders for each class",
+      frequency: "Tuesdays and Fridays",
+      target_level: 80,
+      baseline_level: 0,
+      attempts_per_trial: 4,
+      number_of_trials: 16,
+      metric_name: "",
+    })
+    .returning("benchmark_id")
+    .executeTakeFirstOrThrow();
+
+  await db
+    .insertInto("task")
+    .values({
+      benchmark_id: benchmark_1_student_2_goal_id,
+      assignee_id: firstuser.user_id,
+    })
+    .execute();
+
+  const { benchmark_id: benchmark_2_student_2_goal_id } = await db
+    .insertInto("benchmark")
+    .values({
+      goal_id: student_2_goal_id,
+      status: "In Progress",
+      description: "Insert handouts into notebooks in appropriate place",
+      setup: "N/A",
+      instructions:
+        "Have student insert sorted notes into notebooks in appropriate position by dates",
+      materials: "Pen, folders for each class",
+      frequency: "Tuesdays and Fridays",
+      target_level: 80,
+      baseline_level: 0,
+      attempts_per_trial: 4,
+      number_of_trials: 16,
+      metric_name: "",
+    })
+    .returning("benchmark_id")
+    .executeTakeFirstOrThrow();
+
+  await db
+    .insertInto("task")
+    .values({
+      benchmark_id: benchmark_2_student_2_goal_id,
+      assignee_id: firstuser.user_id,
+    })
+    .execute();
+
   logger.info("Database has been seeded with test data.");
 };
diff --git a/src/backend/routers/para.ts b/src/backend/routers/para.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { hasCaseManager, hasPara, router } from "../trpc";
 import { createPara } from "../lib/db_helpers/case_manager";
+import { TaskData } from "@/types/global";
 
 export const para = router({
   getParaById: hasCaseManager
@@ -60,7 +61,7 @@ export const para = router({
       // TODO elsewhere: add "email_verified_at" timestamp when para first signs in with their email address (entered into db by cm)
     }),
 
-  getMyTasks: hasPara.query(async (req) => {
+  getMyTasks: hasPara.query(async (req): Promise<TaskData[]> => {
     const { userId } = req.ctx.auth;
 
     const result = await req.ctx.db
diff --git a/src/pages/benchmarks/index.tsx b/src/pages/benchmarks/index.tsx
@@ -7,26 +7,58 @@ import Sort from "@mui/icons-material/Sort";
 import { Box, Container } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import $button from "../../components/design_system/button/Button.module.css";
 import noBenchmarks from "../../public/img/no-benchmarks.png";
 import SearchIcon from "@mui/icons-material/Search";
+import { SortDirection, SortProperty, TaskData } from "@/types/global";
 
 function Benchmarks() {
   const [isPara, setIsPara] = useState(false);
-  const { data: tasks, isLoading } = trpc.para.getMyTasks.useQuery();
+
+  const [sortProperty, setSortProperty] = useState<SortProperty>("first_name");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+
+  const [displayedTasks, setDisplayedTasks] = useState<TaskData[]>([]);
+
+  const { data: tasksData, isLoading } = trpc.para.getMyTasks.useQuery();
 
   const handleTogglePara = () => {
     setIsPara(!isPara);
   };
 
+  useEffect(() => {
+    if (!tasksData) {
+      setDisplayedTasks([]);
+    } else {
+      setDisplayedTasks(
+        [...tasksData].sort((a, b) => {
+          if (a[sortProperty] < b[sortProperty])
+            return sortDirection === "asc" ? -1 : 1;
+          if (a[sortProperty] > b[sortProperty])
+            return sortDirection === "asc" ? 1 : -1;
+          return 0;
+        })
+      );
+    }
+  }, [sortDirection, sortProperty, tasksData]);
+
+  const handleSort = (property: SortProperty) => {
+    if (property === sortProperty) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortProperty(property);
+      setSortDirection("asc");
+    }
+  };
+
   if (isLoading) {
     return <div>Loading...</div>;
   }
 
   return (
     <>
-      {tasks?.length === 0 ? (
+      {displayedTasks?.length === 0 ? (
         <Container sx={{ marginTop: "4rem" }}>
           <Box
             sx={{
@@ -90,7 +122,12 @@ function Benchmarks() {
                 <FilterAlt /> Filter <KeyboardArrowDown />
               </span>
 
-              {/* Sort Pill Placeholder*/}
+              {
+                // TODO: replace simple sort pill w/this sort pill placeholder
+                /*
+              TODO: replace simple sort pill w/this sort pill placeholder
+
+              Sort Pill Placeholder
               <span
                 className={`${$button.pilled}`}
                 style={{
@@ -102,11 +139,27 @@ function Benchmarks() {
               >
                 <Sort /> Sort <KeyboardArrowDown />
               </span>
+              */
+              }
+
+              {/* simple sort pill POC (see TODO above) */}
+              <button
+                onClick={() => handleSort("first_name")}
+                className={`${$button.pilled}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <Sort /> Sort by name
+              </button>
             </div>
           </Box>
 
           <Box sx={{ height: "75vh", overflowY: "scroll" }}>
-            {tasks?.map((task) => {
+            {displayedTasks?.map((task) => {
               const completed = Math.floor(
                 Number(task.completed_trials) / Number(task.number_of_trials)
               );
diff --git a/src/types/global.ts b/src/types/global.ts
@@ -4,3 +4,21 @@ export type Goal = SelectableForTable<"goal">;
 export type Benchmark = SelectableForTable<"benchmark">;
 export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type FormEvent = React.FormEvent<HTMLFormElement>;
+
+export type SortProperty = "first_name";
+export type SortDirection = "asc" | "desc";
+
+export interface TaskData {
+  task_id: string;
+  first_name: string;
+  last_name: string;
+  category: string;
+  description: string;
+  instructions: string | null;
+  attempts_per_trial: number | null;
+  number_of_trials: number | null;
+  due_date: Date | null;
+  trial_count: number | null;
+  seen: boolean;
+  completed_trials: string | number | bigint | null;
+}
