Feat cm edit goal

src/backend/routers/iep.test.ts

@@ -73,3 +73,36 @@ test("basic flow - add/get goals, subgoals, tasks", async (t) => {
       .executeTakeFirstOrThrow()
   );
 });
+
+test("edit goal", async (t) => {
+  const { trpc, seed } = await getTestServer(t, {
+    authenticateAs: "case_manager",
+  });
+
+  await trpc.case_manager.addStudent.mutate({
+    first_name: seed.student.first_name,
+    last_name: seed.student.last_name,
+    email: seed.student.email,
+    grade: seed.student.grade,
+  });
+
+  const iep = await trpc.student.addIep.mutate({
+    student_id: seed.student.student_id,
+    start_date: new Date("2023-01-01"),
+    end_date: new Date("2023-12-31"),
+  });
+
+  const goal = await trpc.iep.addGoal.mutate({
+    iep_id: iep.iep_id,
+    description: "goal 1",
+    category: "writing",
+  });
+
+  const modifiedGoal = await trpc.iep.editGoal.mutate({
+    description: "modified goal 1",
+    goal_id: goal!.goal_id,
+  });
+
+  t.is(modifiedGoal!.goal_id, goal!.goal_id);
+  t.is(modifiedGoal?.description, "modified goal 1");
+});

src/backend/routers/iep.ts

@@ -3,6 +3,7 @@ import { authenticatedProcedure, router } from "../trpc";
 import { jsonArrayFrom } from "kysely/helpers/postgres";
 import { deleteFile } from "../lib/files";
 import { substituteTransactionOnContext } from "../lib/utils/context";
+import { TRPCError } from "@trpc/server";
 
 // TODO: define .output() schemas for all procedures
 export const iep = router({
@@ -30,6 +31,45 @@ export const iep = router({
       return result;
     }),
 
+  editGoal: authenticatedProcedure
+    .input(
+      z.object({
+        goal_id: z.string(),
+        description: z.string(),
+      })
+    )
+    .mutation(async (req) => {
+      const { goal_id, description } = req.input;
+      const { userId } = req.ctx.auth;
+
+      // make sure that this goal belongs to this case manager
+      const authCheck = await req.ctx.db
+        .selectFrom("goal")
+        .fullJoin("iep", "iep.iep_id", "goal.goal_id")
+        .fullJoin("student", "student.student_id", "iep.student_id")
+        .where("student.assigned_case_manager_id", "=", userId)
+        .selectAll()
+        .executeTakeFirst();
+
+      if (!authCheck) {
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: "Could not find a matching goal for a student of yours",
+        });
+      }
+
+      const result = await req.ctx.db
+        .updateTable("goal")
+        .set({
+          description: description,
+        })
+        .where("goal_id", "=", goal_id)
+        .returningAll()
+        .executeTakeFirst();
+
+      return result;
+    }),
+
   addSubgoal: authenticatedProcedure
     .input(
       z.object({
@@ -223,6 +263,22 @@ export const iep = router({
       return result;
     }),
 
+  getGoal: authenticatedProcedure
+    .input(
+      z.object({
+        goal_id: z.string(),
+      })
+    )
+    .query(async (req) => {
+      const result = await req.ctx.db
+        .selectFrom("goal")
+        .where("goal_id", "=", req.input.goal_id)
+        .selectAll()
+        .executeTakeFirst();
+
+      return result;
+    }),
+
   getSubgoals: authenticatedProcedure
     .input(
       z.object({

src/components/goal/Goal.module.css

@@ -28,6 +28,56 @@
 }
 
 .description {
-  /* font-family: "Quicksand", sans-serif; */
-  margin: 4px;
+  color: var(--grey-202-a-333-c, #2a333c);
+
+  /* Body 1 */
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 24px */
+}
+
+.goal {
+  display: flex;
+  padding: 24px;
+  align-items: center;
+  gap: 40px;
+  align-self: stretch;
+  width: 100%;
+}
+
+.textContainer {
+  /* display: flex; */
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.subgoalCountBadge {
+  width: fit-content;
+  display: flex;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 16px;
+  background: var(--grey-80-f-4-f-6-f-7, #f4f6f7);
+}
+
+.subgoalCount {
+  color: var(--grey-30586874, #586874);
+
+  /* Body 2 */
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%; /* 21px */
+}
+
+.controlCarat :hover {
+  cursor: pointer;
 }

src/components/goal/Goal.tsx

@@ -3,13 +3,71 @@
 import { trpc } from "@/client/lib/trpc";
 import { Goal } from "@/types/global";
 import $goal from "./Goal.module.css";
+import { useState } from "react";
+import Link from "next/link";
+
+type ControlCaratProps = {
+  direction: "down" | "right" | "left" | "up";
+  handleClick?: (e: React.MouseEvent) => void;
+};
+
+const handleNull = (e: React.MouseEvent) => {
+  return;
+};
+
+const ControlCarat = ({ handleClick, direction }: ControlCaratProps) => {
+  let rotation: string;
+
+  switch (direction) {
+    case "right":
+      rotation = "0";
+      break;
+    case "down":
+      rotation = "90";
+      break;
+    case "left":
+      rotation = "180";
+      break;
+    case "up":
+      rotation = "270";
+      break;
+    default:
+      rotation = "0";
+      break;
+  }
+
+  return (
+    <div
+      onClick={handleClick ? handleClick : handleNull}
+      className={$goal.controlCarat}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        style={{ transform: `rotate(${rotation}deg)` }}
+      >
+        <path
+          d="M17.0359 13.0306L9.53593 20.5306C9.46624 20.6002 9.38352 20.6555 9.29247 20.6932C9.20143 20.7309 9.10385 20.7503 9.0053 20.7503C8.90675 20.7503 8.80917 20.7309 8.71813 20.6932C8.62708 20.6555 8.54436 20.6002 8.47467 20.5306C8.40499 20.4609 8.34972 20.3781 8.312 20.2871C8.27429 20.1961 8.25488 20.0985 8.25488 19.9999C8.25488 19.9014 8.27429 19.8038 8.312 19.7128C8.34972 19.6217 8.40499 19.539 8.47467 19.4693L15.445 12.4999L8.47467 5.53055C8.33394 5.38982 8.25488 5.19895 8.25488 4.99993C8.25488 4.80091 8.33394 4.61003 8.47467 4.4693C8.6154 4.32857 8.80628 4.24951 9.0053 4.24951C9.20432 4.24951 9.39519 4.32857 9.53593 4.4693L17.0359 11.9693C17.1057 12.039 17.161 12.1217 17.1987 12.2127C17.2365 12.3038 17.2559 12.4014 17.2559 12.4999C17.2559 12.5985 17.2365 12.6961 17.1987 12.7871C17.161 12.8782 17.1057 12.9609 17.0359 13.0306Z"
+          fill="#A2ACB3"
+        />
+      </svg>
+    </div>
+  );
+};
 
 interface GoalProps {
   goal: Goal;
 }
 
 const Goals = ({ goal }: GoalProps) => {
   const utils = trpc.useContext();
+
+  // per current design, subgoals not currently showing in this component.
+  // trpc method, state for subgoals are here should that change, can be moved
+  // to different page/component as needed
   const { data: subgoals, isLoading } = trpc.iep.getSubgoals.useQuery({
     goal_id: goal.goal_id,
   });
@@ -18,7 +76,17 @@
     onSuccess: () => utils.iep.getSubgoals.invalidate(),
   });
 
+  const [expandSubgoals, setExpandSubgoals] = useState(false);
+
+  const hideSubgoals = () => {
+    setExpandSubgoals(false);
+  };
+
+  const showSubgoals = () => {
+    setExpandSubgoals(true);
+  };
+
   const handleSubGoalSubmit = async (
     event: React.FormEvent<HTMLFormElement>
   ) => {
     event.preventDefault();
@@ -43,45 +111,61 @@
   }
 
   return (
-    <div>
-      <p className={$goal.description}>{goal.description}</p>
-
-      <div className={$goal.tab}>
-        <ul className={$goal.listNames}>
-          {subgoals?.map((subgoal) => (
-            <li key={subgoal.subgoal_id}>
-              <br />
-              <Subgoals subgoal={subgoal} />
-            </li>
-          ))}
-        </ul>
-        <br />
-        <form onSubmit={handleSubGoalSubmit} className={$goal.createInput}>
-          <input
-            type="text"
-            name="description"
-            placeholder="Subgoal description"
-            required
-          />
-          <input
-            type="text"
-            name="instructions"
-            placeholder="Instructions"
-            required
-          />
-          <input
-            type="number"
-            name="target_max_attempts"
-            placeholder="# of attempts"
-            min="1"
-            required
-          />
-
-          <button type="submit" className={$goal.createButton}>
-            Add SubGoal
-          </button>
-        </form>
+    <div className={$goal.goal}>
+      <div className={$goal.textContainer}>
+        <p className={$goal.description}>{goal?.description}</p>
+
+        {!expandSubgoals && (
+          <div style={{ marginTop: "8px", display: "flex", gap: "16px" }}>
+            <div className={$goal.subgoalCountBadge}>
+              <div className={$goal.subgoalCount}>
+                {subgoals?.length} active benchmark
+                {subgoals?.length !== 1 && "s"}
+              </div>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                height: "40px",
+                padding: "10px 24px",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <Link
+                href={`/goals/${goal.goal_id}/addSubgoal`}
+                style={{
+                  textAlign: "center",
+                  color: "#20159E",
+                  fontSize: "16px",
+                  fontFamily: "Quicksand",
+                  fontWeight: "600",
+                  lineHeight: "24px",
+                  wordWrap: "break-word",
+                  borderRadius: "8px",
+                  textDecoration: "none",
+                }}
+              >
+                Add benchmark
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {expandSubgoals && (
+          <ul className={$goal.listNames}>
+            {subgoals?.map((subgoal) => (
+              <li key={subgoal.subgoal_id}>
+                <br />
+                <Subgoals subgoal={subgoal} />
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
+
+      <ControlCarat direction="right" />
     </div>
   );
 };