Display student answer results

src/constants/routes.ts

@@ -21,6 +21,8 @@ export const ROUTES = {
   TASK_RESULTS: "/office/task-results",
   MY_GROUPS: "/office/my-groups",
   GROUP_STUDENTS: (groupId: number) => `/office/my-groups/${groupId}/students`,
+  STUDENT_TASK_ANSWERS: (studentId: number) =>
+    `/office/students/${studentId}/task-answers`,
   METHODOLOGIES: "/office/methodologies",
   METHODOLOGY: "/office/methodology",
   PRESENTATIONS: "/office/presentations",

src/interfaces/task.ts

@@ -29,7 +29,7 @@ export interface ITaskCreate {
 export interface ITaskUserAnswer {
   id: number;
   text: string;
-  answer: IAnswer;
+  answer?: IAnswer;
   user: IUser;
   task: ITask;
   createdAt: string;

src/pages/my-groups/StudentTaskAnswersPage.tsx

@@ -0,0 +1,65 @@
+import { useTaskUserAnswers } from "@/queries/tasks";
+import { useParams } from "react-router-dom";
+import cn from "classnames";
+
+export default function StudentTaskAnswersPage() {
+  const { id } = useParams();
+
+  const { userAnswers, isUserAnswersLoading } = useTaskUserAnswers(+id!);
+
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <h1 className="font-bold">Результаты студента</h1>
+
+      {!isUserAnswersLoading && userAnswers && (
+        <div className="grid gap-4">
+          {!userAnswers.length && (
+            <div className="bg-bgSecondary p-4 rounded-xl">
+              Результаты не найдены.
+            </div>
+          )}
+          {userAnswers.map((answer) => (
+            <div
+              className="flex flex-col p-6 rounded-xl bg-bgSecondary gap-2"
+              key={answer.id}
+            >
+              <h1 className="text-xs font-light">{answer.task.topic.title}</h1>
+              <div
+                dangerouslySetInnerHTML={{ __html: answer.task.text }}
+                className="bg-background rounded-xl px-4 py-1"
+              ></div>
+
+              <div
+                className={cn(
+                  "flex gap-3",
+                  answer.answer ? "flex-row items-center" : "flex-col"
+                )}
+              >
+                <h2 className="text-sm font-light">Ответ студента: </h2>
+
+                {answer.answer ? (
+                  <div
+                    className={cn(
+                      "px-4 py-1 rounded-xl text-background",
+                      answer.answer.isCorrectAnswer
+                        ? "bg-green-600"
+                        : "bg-red-600"
+                    )}
+                  >
+                    <div className="text-sm">{answer.answer.text}</div>
+                  </div>
+                ) : (
+                  <div className="p-4 bg-background rounded-xl">
+                    <div
+                      dangerouslySetInnerHTML={{ __html: answer.text }}
+                    ></div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/my-groups/StudentTaskAnswersTable.tsx

@@ -0,0 +1 @@
+const columns = [{ key: "id", label: "ID" }];

src/pages/my-groups/StudentsTable.tsx

@@ -11,8 +11,9 @@ import {
 import { IUser } from "@/interfaces/user";
 import StudentProgressModal from "./StudentProgressModal";
 import { Key, useState } from "react";
-import { useTaskUserAnswers } from "@/queries/tasks";
 import { Icons } from "@/components/shared/Icons";
+import { useNavigate } from "react-router-dom";
+import { ROUTES } from "@/constants/routes";
 
 interface Props {
   students: IUser[];
@@ -29,18 +30,19 @@ const columns = [
 export default function StudentsTable({ students }: Props) {
   const { isOpen, onOpenChange, onOpen } = useDisclosure();
 
-  const [selectedStudent, setSelectedStudent] = useState<IUser | undefined>();
+  const navigate = useNavigate();
 
-  const { userAnswers, isUserAnswersLoading } = useTaskUserAnswers(
-    selectedStudent?.id,
-    !!selectedStudent
-  );
+  const [selectedStudent, setSelectedStudent] = useState<IUser | undefined>();
 
   const handleShowProgress = (student: IUser) => {
     setSelectedStudent(student);
     onOpen();
   };
 
+  const handleStudentTaskAnswers = (student: IUser) => {
+    navigate(ROUTES.STUDENT_TASK_ANSWERS(student.id));
+  };
+
   return (
     <>
       <Table aria-label="Студенты">
@@ -58,6 +60,7 @@ export default function StudentsTable({ students }: Props) {
                     user={student}
                     columnKey={columnKey}
                     onShowProgress={() => handleShowProgress(student)}
+                    onShowStudentTasks={() => handleStudentTaskAnswers(student)}
                   />
                 </TableCell>
               )}
@@ -81,10 +84,12 @@ function StudentRow({
   user,
   columnKey,
   onShowProgress,
+  onShowStudentTasks,
 }: {
   user: IUser;
   columnKey: Key;
   onShowProgress: () => void;
+  onShowStudentTasks: () => void;
 }) {
   const cellValue = user[columnKey as keyof IUser];
 
@@ -103,7 +108,10 @@ function StudentRow({
           </Tooltip>
 
           <Tooltip content="Результаты задач студента">
-            <span className="text-xl cursor-pointer">
+            <span
+              className="text-xl cursor-pointer"
+              onClick={onShowStudentTasks}
+            >
               <Icons.TASKS_LIST />
             </span>
           </Tooltip>

src/routes/RootRouter.tsx

@@ -25,6 +25,7 @@ import MethodologiesPage from "@/pages/methodologies/MethodologiesPage";
 import MethodologyDetails from "@/pages/methodologies/MethodologyDetails";
 import PresentationsPage from "@/pages/presentations/PresentationsPage";
 import PresentationDetails from "@/pages/presentations/PresentationDetails";
+import StudentTaskAnswersPage from "@/pages/my-groups/StudentTaskAnswersPage";
 
 function RootRouter({ children }) {
   return (
@@ -63,6 +64,10 @@ function RootRouter({ children }) {
               path="my-groups/:id/students"
               element={<GroupStudentsPage />}
             />
+            <Route
+              path="students/:id/task-answers"
+              element={<StudentTaskAnswersPage />}
+            />
             <Route path="methodologies" element={<MethodologiesPage />} />
             <Route path="methodology" element={<MethodologyDetails />} />
             <Route path="methodology/:id" element={<MethodologyDetails />} />