Update BenchmarkListElement to show current task assignment status

src/backend/routers/iep.ts

@@ -392,7 +392,33 @@ export const iep = router({
       const result = await req.ctx.db
         .selectFrom("benchmark")
         .where("goal_id", "=", goal_id)
-        .selectAll()
+        .select((eb) => [
+          "benchmark.benchmark_id",
+          "benchmark.status",
+          "benchmark.description",
+          "benchmark.instructions",
+          "benchmark.materials",
+          "benchmark.metric_name",
+          "benchmark.setup",
+          "benchmark.frequency",
+          "benchmark.number_of_trials",
+          "benchmark.attempts_per_trial",
+          "benchmark.trial_count",
+          "benchmark.baseline_level",
+          "benchmark.current_level",
+          "benchmark.target_level",
+          "benchmark.created_at",
+          "benchmark.due_date",
+          "benchmark.goal_id",
+          jsonArrayFrom(
+            eb
+              .selectFrom("user")
+              .innerJoin("task", "task.assignee_id", "user.user_id")
+              .whereRef("task.benchmark_id", "=", "benchmark.benchmark_id")
+              .orderBy("user.first_name")
+              .selectAll()
+          ).as("assignees"),
+        ])
         .execute();
 
       return result;

src/client/lib/trpc.ts

@@ -1,4 +1,12 @@
-import { createTRPCReact } from "@trpc/react-query";
+import {
+  createTRPCReact,
+  type inferReactQueryProcedureOptions,
+} from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 import { AppRouter } from "@/backend/routers/_app";
 
+export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
+export type RouterInputs = inferRouterInputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
 export const trpc = createTRPCReact<AppRouter>();

src/components/benchmarks/BenchmarkAssignees.tsx

@@ -0,0 +1,55 @@
+import { Box, Button, Stack } from "@mui/material";
+import { BenchmarkWithAssignees } from "@/types/global";
+import { format } from "date-fns";
+
+import $button from "@/components/design_system/button/Button.module.css";
+
+const BenchmarkAssignees = ({
+  benchmark,
+  onAssign,
+}: {
+  benchmark: BenchmarkWithAssignees;
+  onAssign: () => void;
+}) => {
+  const { assignees, due_date, trial_count } = benchmark;
+
+  return (
+    <>
+      {assignees.length === 0 && (
+        <Button
+          className={$button.secondary}
+          onClick={() => onAssign()}
+          sx={{
+            paddingTop: ".4rem !important",
+            paddingBottom: ".4rem !important",
+            paddingLeft: ".4rem !important",
+            paddingRight: ".4rem !important",
+          }}
+        >
+          Assign staff
+        </Button>
+      )}
+      {!!assignees.length && (
+        <Stack direction="row">
+          <Stack>
+            {assignees.map((u) => (
+              <Box key={u.user_id} fontWeight="bold" textAlign="left">
+                {u.first_name} {u.last_name}
+              </Box>
+            ))}
+            {due_date && <Box>Until {format(new Date(due_date), "MMM d")}</Box>}
+            {!due_date && !!trial_count && <Box>{trial_count} times</Box>}
+            {!due_date && !trial_count && <Box>Until unassigned</Box>}
+          </Stack>
+          <Box>
+            <Button className={$button.tertiary} onClick={() => onAssign()}>
+              Change
+            </Button>
+          </Box>
+        </Stack>
+      )}
+    </>
+  );
+};
+
+export default BenchmarkAssignees;

src/components/benchmarks/BenchmarkListElement.tsx

@@ -1,15 +1,18 @@
-import { Benchmark } from "@/types/global";
+import { BenchmarkWithAssignees } from "@/types/global";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import { useState, type ReactNode } from "react";
-import { BenchmarkAssignmentModal } from "./BenchmarkAssignmentModal";
 import $button from "@/components/design_system/button/Button.module.css";
 import { format } from "date-fns";
 import Typography from "@mui/material/Typography";
+
+import { BenchmarkAssignmentModal } from "./BenchmarkAssignmentModal";
+import BenchmarkAssignees from "./BenchmarkAssignees";
+
 interface BenchmarkProps {
-  benchmark: Benchmark;
+  benchmark: BenchmarkWithAssignees;
   index?: number;
 }
 
@@ -112,6 +115,12 @@ const BenchmarkListElement = ({ benchmark, index }: BenchmarkProps) => {
             {" "}
             {benchmark?.number_of_trials || "N/A"}
           </Info>
+          <Info description={"STAFF"}>
+            <BenchmarkAssignees
+              benchmark={benchmark}
+              onAssign={() => setIsAssignmentModalOpen(true)}
+            />
+          </Info>
           <Info description="DATA">
             <Box
               sx={{
@@ -157,20 +166,6 @@ const BenchmarkListElement = ({ benchmark, index }: BenchmarkProps) => {
               </Box>
             </Box>
           </Info>
-          <Info description={"STAFF"}>
-            <Button
-              className={$button.secondary}
-              onClick={() => setIsAssignmentModalOpen(true)}
-              sx={{
-                paddingTop: ".4rem !important",
-                paddingBottom: ".4rem !important",
-                paddingLeft: ".4rem !important",
-                paddingRight: ".4rem !important",
-              }}
-            >
-              Assign
-            </Button>
-          </Info>
         </Box>
       </Box>
       <BenchmarkAssignmentModal

src/pages/students/[student_id]/goals/[goal_id].tsx

@@ -14,9 +14,14 @@ const GoalPage = () => {
     { student_id: student_id },
     { enabled: Boolean(student_id), retry: false }
   );
-  const { data: goals = [] } = trpc.iep.getGoals.useQuery({
-    iep_id: activeIep?.iep_id || "",
-  });
+  const { data: goals = [] } = trpc.iep.getGoals.useQuery(
+    {
+      iep_id: activeIep?.iep_id || "",
+    },
+    {
+      enabled: Boolean(activeIep),
+    }
+  );
 
   const { data: goal } = trpc.iep.getGoal.useQuery(
     { goal_id: goal_id },

src/types/global.ts

@@ -2,12 +2,17 @@ import { SelectableForTable } from "zapatos/schema";
 
 export type Goal = SelectableForTable<"goal">;
 export type Benchmark = SelectableForTable<"benchmark">;
+export type User = SelectableForTable<"user">;
 export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type FormEvent = React.FormEvent<HTMLFormElement>;
 
 export type SortProperty = "first_name" | "created_at";
 export type SortDirection = "asc" | "desc";
 
+export interface BenchmarkWithAssignees extends Benchmark {
+  assignees: User[];
+}
+
 export interface TaskData {
   task_id: string;
   first_name: string;