From 1a94e453d07c94a6e16e112e330cf41287494d6d Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 10:40:51 -0800 Subject: [PATCH 1/7] Add Nav tab for benchmarks --- src/components/navbar/NavBar.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx index e5d9fd70..aef88302 100644 --- a/src/components/navbar/NavBar.tsx +++ b/src/components/navbar/NavBar.tsx @@ -1,9 +1,10 @@ import CloseIcon from "@mui/icons-material/Close"; -import CoPresent from "@mui/icons-material/CoPresent"; +import PeopleOutline from "@mui/icons-material/PeopleOutline"; import Logout from "@mui/icons-material/Logout"; import MenuIcon from "@mui/icons-material/Menu"; -import PeopleOutline from "@mui/icons-material/PeopleOutline"; -import Settings from "@mui/icons-material/Settings"; +import SchoolOutlined from "@mui/icons-material/SchoolOutlined"; +import ContentPaste from "@mui/icons-material/ContentPaste"; +import SettingsOutlined from "@mui/icons-material/SettingsOutlined"; import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; @@ -90,9 +91,10 @@ export default function NavBar() { const drawer = (
- } text="Students" /> - } text="Staff" /> - } text="Settings" /> + } text="Assigned" /> + } text="Students" /> + } text="Staff" /> + } text="Settings" /> } text="Logout" From 61d9700d5db9dd3386439eaff93a9cf2e347dc41 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 11:43:34 -0800 Subject: [PATCH 2/7] Add Title box and sort icons --- .../design_system/button/Button.module.css | 1 + src/components/layout/Layout.tsx | 5 +- src/pages/benchmarks/index.tsx | 62 ++++++++++++++++--- 3 files changed, 59 insertions(+), 9 deletions(-) diff --git a/src/components/design_system/button/Button.module.css b/src/components/design_system/button/Button.module.css index ebe69e43..0e97586d 100644 --- a/src/components/design_system/button/Button.module.css +++ b/src/components/design_system/button/Button.module.css @@ -69,6 +69,7 @@ .pilled { border-radius: 20px; padding: 5px 10px; + background-color: var(--primary-90); } .circular { diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 6b66869a..1e79fa77 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -22,8 +22,9 @@ const Layout = ({ children }: LayoutProps) => {
{children}
diff --git a/src/pages/benchmarks/index.tsx b/src/pages/benchmarks/index.tsx index 08872d62..37420c59 100644 --- a/src/pages/benchmarks/index.tsx +++ b/src/pages/benchmarks/index.tsx @@ -1,10 +1,15 @@ -import React from "react"; -import TaskCard from "@/components/taskCard/taskCard"; import { trpc } from "@/client/lib/trpc"; +import TaskCard from "@/components/taskCard/taskCard"; import $typo from "@/styles/Typography.module.css"; -import { Container, Box } from "@mui/material"; +import { Box, Container } from "@mui/material"; import Image from "next/image"; import noBenchmarks from "../../public/img/no-benchmarks.png"; +import $box from "../../styles/Box.module.css"; +import $button from "../../components/design_system/button/Button.module.css"; +import Sort from "@mui/icons-material/Sort"; +import FilterAlt from "@mui/icons-material/FilterAlt"; +import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown"; +import CheckBoxOutlineBlankOutlinedIcon from "@mui/icons-material/CheckBoxOutlineBlankOutlined"; function Benchmarks() { const { data: tasks, isLoading } = trpc.para.getMyTasks.useQuery(); @@ -33,15 +38,58 @@ function Benchmarks() { ) : ( -
    + + +

    Assigned Students

    +
    + + Show all benchmarks + + + Filter + + + Sort + +
    +     {tasks?.map((task) => { return ( -
  • +
    -
    • +
); })} - + )} ); From b897684b8a0ac30e411578a22c07a0971fb39f74 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 12:43:50 -0800 Subject: [PATCH 3/7] Edit each individual task card --- src/components/taskCard/TaskCard.module.css | 3 +- src/components/taskCard/taskCard.tsx | 48 +++++++++++---------- src/pages/benchmarks/index.tsx | 18 ++++---- src/styles/Box.module.css | 2 +- 4 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/components/taskCard/TaskCard.module.css b/src/components/taskCard/TaskCard.module.css index d50a0928..1b96cf21 100644 --- a/src/components/taskCard/TaskCard.module.css +++ b/src/components/taskCard/TaskCard.module.css @@ -48,7 +48,8 @@ color: var(--grey-30); display: flex; flex-direction: column; + justify-content: flex-end; align-items: flex-end; gap: 3px; - margin: 10px 0; + width: 65%; } diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx index 5ef82928..cc68f2b7 100644 --- a/src/components/taskCard/taskCard.tsx +++ b/src/components/taskCard/taskCard.tsx @@ -1,4 +1,3 @@ -// import Image from "next/image"; import React, { useMemo } from "react"; import $taskCard from "./TaskCard.module.css"; import $button from "@/components/design_system/button/Button.module.css"; @@ -51,6 +50,8 @@ const TaskCard = ({ task }: TaskCardProps) => { } }; + console.log("task ", task); + return (
= 100 ? $box.inactive : $box.greyBg}>
@@ -63,15 +64,7 @@ const TaskCard = ({ task }: TaskCardProps) => { }`}
- {/* Student's profile picture. */} -
= 100 ? $taskCard.imageDone : $taskCard.image - } - >
-
- {task.first_name} {task.last_name} -
+ {task.first_name} {task.last_name}

@@ -79,19 +72,30 @@ const TaskCard = ({ task }: TaskCardProps) => {

-
- {completionRate}% complete - -
+
+
+ {completionRate}% complete + +
- = 100 ? $button.inactive : "" - }`} - > - Collect data - +
+ + View benchmark + + + = 100 ? $button.inactive : "" + }`} + > + Collect data + +
+
); }; diff --git a/src/pages/benchmarks/index.tsx b/src/pages/benchmarks/index.tsx index 37420c59..122c8aeb 100644 --- a/src/pages/benchmarks/index.tsx +++ b/src/pages/benchmarks/index.tsx @@ -4,7 +4,6 @@ import $typo from "@/styles/Typography.module.css"; import { Box, Container } from "@mui/material"; import Image from "next/image"; import noBenchmarks from "../../public/img/no-benchmarks.png"; -import $box from "../../styles/Box.module.css"; import $button from "../../components/design_system/button/Button.module.css"; import Sort from "@mui/icons-material/Sort"; import FilterAlt from "@mui/icons-material/FilterAlt"; @@ -82,13 +81,16 @@ function Benchmarks() { - {tasks?.map((task) => { - return ( -
- -
- ); - })} + + + {tasks?.map((task) => { + return ( +
+ +
+ ); + })} + )} diff --git a/src/styles/Box.module.css b/src/styles/Box.module.css index a63b4fb9..ce3b845f 100644 --- a/src/styles/Box.module.css +++ b/src/styles/Box.module.css @@ -17,7 +17,7 @@ .inactive { composes: default; background-color: var(--grey-80); - border: none; + /* border: none; */ color: var(--grey-50); } From 9f1cab95617b6641addbd5e382f346807c2e02ae Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Fri, 23 Feb 2024 13:16:56 -0800 Subject: [PATCH 4/7] Add Para view as toggle --- src/components/taskCard/taskCard.tsx | 26 +++++++------- src/pages/benchmarks/index.tsx | 54 +++++++++++++++++++--------- 2 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx index cc68f2b7..1b14e0f5 100644 --- a/src/components/taskCard/taskCard.tsx +++ b/src/components/taskCard/taskCard.tsx @@ -1,10 +1,10 @@ -import React, { useMemo } from "react"; -import $taskCard from "./TaskCard.module.css"; import $button from "@/components/design_system/button/Button.module.css"; import $box from "@/styles/Box.module.css"; +import { differenceInWeeks, format } from "date-fns"; import Link from "next/link"; +import { useMemo } from "react"; import ProgressBar from "../progressBar/progressBar"; -import { differenceInWeeks, format } from "date-fns"; +import $taskCard from "./TaskCard.module.css"; interface ParaTaskCard { task_id: string; @@ -22,9 +22,10 @@ interface ParaTaskCard { interface TaskCardProps { task: ParaTaskCard; + isPara: boolean; } -const TaskCard = ({ task }: TaskCardProps) => { +const TaskCard = ({ task, isPara }: TaskCardProps) => { const completionRate = useMemo(() => { const num = parseInt(task.completed_trials as string) || 0; const calculatedRate = Math.floor( @@ -50,8 +51,6 @@ const TaskCard = ({ task }: TaskCardProps) => { } }; - console.log("task ", task); - return (
= 100 ? $box.inactive : $box.greyBg}>
@@ -79,12 +78,15 @@ const TaskCard = ({ task }: TaskCardProps) => {
- - View benchmark - + {/* Para smaller screen view may click on card instead */} + {!isPara ? ( + + View benchmark + + ) : null} { + setIsPara(!isPara); + }; + if (isLoading) { return
Loading...
; } @@ -47,16 +54,22 @@ function Benchmarks() { >

Assigned Students

- - Show all benchmarks - + View - {isPara ? "Para" : "Case Manager"} + + + {/* May not be applicable to Para */} + {!isPara ? ( + + Show all benchmarks + + ) : null} { return (
- + {isPara ? ( + + + + ) : ( + + )}
); })} From 0b93f55037d99b8c91e00b5ad2d6c9f8cf7c7e60 Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Tue, 27 Feb 2024 16:23:55 -0800 Subject: [PATCH 5/7] Remove progress bar --- src/components/taskCard/taskCard.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx index 1b14e0f5..5c14840f 100644 --- a/src/components/taskCard/taskCard.tsx +++ b/src/components/taskCard/taskCard.tsx @@ -3,7 +3,6 @@ import $box from "@/styles/Box.module.css"; import { differenceInWeeks, format } from "date-fns"; import Link from "next/link"; import { useMemo } from "react"; -import ProgressBar from "../progressBar/progressBar"; import $taskCard from "./TaskCard.module.css"; interface ParaTaskCard { @@ -65,17 +64,11 @@ const TaskCard = ({ task, isPara }: TaskCardProps) => {
{task.first_name} {task.last_name}
-
+ +

{task.category} - {task.description}

-
- -
-
- {completionRate}% complete - -
{/* Para smaller screen view may click on card instead */} From 7b37fa99f2404e25706f209bd097868c0e6976ff Mon Sep 17 00:00:00 2001 From: Hieu Ngo Date: Thu, 28 Mar 2024 15:12:26 -0700 Subject: [PATCH 6/7] Toggle view Para won't have access to take data of completed benchmarks & add placeholder for Search component --- src/components/taskCard/taskCard.tsx | 2 +- src/pages/benchmarks/index.tsx | 48 ++++++++++++++++++---------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx index 5c14840f..56ccda67 100644 --- a/src/components/taskCard/taskCard.tsx +++ b/src/components/taskCard/taskCard.tsx @@ -71,7 +71,7 @@ const TaskCard = ({ task, isPara }: TaskCardProps) => {

- {/* Para smaller screen view may click on card instead */} + {/* Para smaller screen view can click on card instead */} {!isPara ? (

Assigned Students

- View - {isPara ? "Para" : "Case Manager"} - + {/* Temporary Toggle View of CM and Para */} + {isPara ? "Para" : "Case Manager"} + + + {/* Search Pill Placeholder */} + + Search + - {/* May not be applicable to Para */} - {!isPara ? ( - - Show all benchmarks - - ) : null} + {/* Filter Pill Placeholder */} Filter + + {/* Sort Pill Placeholder*/} {tasks?.map((task) => { + const completed = Math.floor( + Number(task.completed_trials) / Number(task.target_max_attempts) + ); return (
- {isPara ? ( + {/* Temporary CM & Para View */} + {isPara && !completed ? ( Date: Thu, 28 Mar 2024 15:14:38 -0700 Subject: [PATCH 7/7] Prevent null task category & descriptions --- src/components/taskCard/taskCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/taskCard/taskCard.tsx b/src/components/taskCard/taskCard.tsx index 56ccda67..476a4d05 100644 --- a/src/components/taskCard/taskCard.tsx +++ b/src/components/taskCard/taskCard.tsx @@ -67,7 +67,7 @@ const TaskCard = ({ task, isPara }: TaskCardProps) => {

- {task.category} - {task.description} + {task?.category} - {task?.description}