Toggle view Para won't have access to take data of completed benchmar…

…ks & add placeholder for Search component
sfbrigade · Mar 28, 2024 · 7b37fa9 · 7b37fa9
1 parent 0b93f55
commit 7b37fa9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx
@@ -71,7 +71,7 @@ const TaskCard = ({ task, isPara }: TaskCardProps) => {
         </p>
 
         <div style={{ display: "flex", gap: "1rem" }}>
-          {/* Para smaller screen view may click on card instead */}
+          {/* Para smaller screen view can click on card instead */}
           {!isPara ? (
             <Link
               href={`/benchmarks/${task.task_id}`}

diff --git a/src/pages/benchmarks/index.tsx b/src/pages/benchmarks/index.tsx
@@ -1,7 +1,6 @@
 import { trpc } from "@/client/lib/trpc";
 import TaskCard from "@/components/taskCard/taskCard";
 import $typo from "@/styles/Typography.module.css";
-import CheckBoxOutlineBlankOutlinedIcon from "@mui/icons-material/CheckBoxOutlineBlankOutlined";
 import FilterAlt from "@mui/icons-material/FilterAlt";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import Sort from "@mui/icons-material/Sort";
@@ -11,6 +10,7 @@ import Link from "next/link";
 import { 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";
 
 function Benchmarks() {
   const [isPara, setIsPara] = useState(false);
@@ -54,22 +54,30 @@ function Benchmarks() {
           >
             <h3>Assigned Students</h3>
             <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
-              <span>View - {isPara ? "Para" : "Case Manager"}</span>
-              <button onClick={() => handleTogglePara()}>Toggle View</button>
+              {/* Temporary Toggle View of CM and Para */}
+              <span>{isPara ? "Para" : "Case Manager"}</span>
+              <button
+                onClick={() => handleTogglePara()}
+                style={{ padding: "0 4px" }}
+              >
+                Toggle View
+              </button>
+
+              {/* Search Pill Placeholder */}
+              <span
+                className={`${$button.secondary}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  borderRadius: "30px",
+                  padding: "4px 20px",
+                }}
+              >
+                <SearchIcon /> Search
+              </span>
 
-              {/* May not be applicable to Para */}
-              {!isPara ? (
-                <span
-                  style={{
-                    display: "flex",
-                    maxWidth: "fit-content",
-                    alignItems: "center",
-                    gap: "4px",
-                  }}
-                >
-                  <CheckBoxOutlineBlankOutlinedIcon /> Show all benchmarks
-                </span>
-              ) : null}
+              {/* Filter Pill Placeholder */}
               <span
                 className={`${$button.pilled}`}
                 style={{
@@ -81,6 +89,8 @@ function Benchmarks() {
               >
                 <FilterAlt /> Filter <KeyboardArrowDown />
               </span>
+
+              {/* Sort Pill Placeholder*/}
               <span
                 className={`${$button.pilled}`}
                 style={{
@@ -97,9 +107,13 @@ function Benchmarks() {
 
           <Box sx={{ height: "75vh", overflowY: "scroll" }}>
             {tasks?.map((task) => {
+              const completed = Math.floor(
+                Number(task.completed_trials) / Number(task.target_max_attempts)
+              );
               return (
                 <div key={task.task_id} className={$typo.noDecoration}>
-                  {isPara ? (
+                  {/* Temporary CM & Para View */}
+                  {isPara && !completed ? (
                     <Link
                       href={`/benchmarks/${task.task_id}`}
                       style={{ color: "black", textDecoration: "none" }}