Fix cm student id page (#280)

* add Goal and Iep components and css from feat-cm-edit-goal * remove css class in Goal.module.css for removed controlCarat class * add flexWrap: wrap to div containing benchmark info in goal to avoid pushing ArrowForwardIosIcon into Add Goal form * run prettier * remove additional unused code and imports from components/goal/Goal
sfbrigade · Feb 10, 2024 · c6914db · c6914db
1 parent 9b03b9a
commit c6914db
Show file tree

Hide file tree

Showing 4 changed files with 275 additions and 136 deletions.
diff --git a/src/components/goal/Goal.module.css b/src/components/goal/Goal.module.css
@@ -28,6 +28,52 @@
 }
 
 .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 */
 }
diff --git a/src/components/goal/Goal.tsx b/src/components/goal/Goal.tsx
@@ -1,88 +1,83 @@
 import React from "react";
-import Subgoals from "../subgoal/Subgoal";
 import { trpc } from "@/client/lib/trpc";
 import { Goal } from "@/types/global";
 import $goal from "./Goal.module.css";
-import $button from "@/components/design_system/button/Button.module.css";
+import { useRouter } from "next/router";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 interface GoalProps {
   goal: Goal;
 }
 
 const Goals = ({ goal }: GoalProps) => {
-  const utils = trpc.useContext();
+  const router = useRouter();
+
+  // 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,
   });
 
-  const subgoal = trpc.iep.addSubgoal.useMutation({
-    onSuccess: () => utils.iep.getSubgoals.invalidate(),
-  });
-
-  const handleSubGoalSubmit = async (
-    event: React.FormEvent<HTMLFormElement>
-  ) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-
-    try {
-      await subgoal.mutateAsync({
-        goal_id: goal.goal_id,
-        description: data.get("description") as string,
-        instructions: data.get("instructions") as string,
-        target_max_attempts: Number(data.get("target_max_attempts")) || null,
-      });
-
-      (event.target as HTMLFormElement).reset();
-    } catch (err) {
-      console.log("error: ", err);
-    }
-  };
-
   if (isLoading) {
     return <div>Loading...</div>;
   }
 
   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={$button.default}>
-            Add SubGoal
-          </button>
-        </form>
+    <div className={$goal.goal}>
+      <div className={$goal.textContainer}>
+        <p className={$goal.description}>{goal?.description}</p>
+        <div
+          style={{
+            marginTop: "8px",
+            display: "flex",
+            flexWrap: "wrap",
+            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",
+            }}
+          >
+            <button
+              // standin for tertiary button style
+              style={{
+                display: "inline-flex",
+                height: "40px",
+                padding: "10px 24px",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "8px",
+                flexShrink: "0",
+                fontSize: "14px",
+                borderRadius: "8px",
+                backgroundColor: "white",
+                color: "#20159E",
+                border: "none",
+              }}
+              onClick={async (e) => {
+                e.stopPropagation();
+                await router.push(`/goals/${goal.goal_id}/addSubgoal`);
+              }}
+            >
+              Add benchmark
+            </button>
+          </div>
+        </div>
       </div>
+      <ArrowForwardIosIcon />
     </div>
   );
 };

diff --git a/src/components/iep/Iep.module.css b/src/components/iep/Iep.module.css
@@ -1,16 +1,11 @@
-.goalBox {
-  display: flex;
-  justify-content: space-between;
-}
-
 .goalTab {
-  background-color: #ffffff;
-  width: fit-content;
-  padding: 1rem;
-  border-radius: 10px;
-  margin-top: 1rem;
-  margin-bottom: -1rem;
-  margin-left: -24px;
+  display: inline-flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px 8px 0px 0px;
+  background: #fff;
 }
 
 .goalsContainer {
@@ -19,7 +14,14 @@
   min-height: 50vh;
   max-height: 70vh;
   overflow-y: auto;
-  border-radius: 10px;
+  border-radius: 0px 10px 10px 10px;
+}
+
+.goalsColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
 }
 
 .noGoalBox {
@@ -37,3 +39,39 @@
 .noGoalTextSmall {
   margin-bottom: 1rem;
 }
+
+.addGoalFormContainer {
+  border-left: 1px #d6dde1 solid;
+  padding: 2rem;
+}
+
+.addGoalFormHeading {
+  color: #021426;
+  font-size: 24px;
+  font-family: Quicksand;
+  font-weight: 600;
+  line-height: 24px;
+  word-wrap: break-word;
+  margin-bottom: 2rem;
+}
+
+.addGoalFormTextArea {
+  display: flex;
+  height: 128px;
+  width: 100%;
+  padding: 16px;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #f5f5f5;
+  resize: none;
+}
+
+.listGoal {
+  border-bottom: 1px solid #d6dde1;
+}
+
+.listGoal :hover {
+  cursor: pointer;
+}