add student table row actions

codiumkg · May 25, 2024 · dba5266 · dba5266
1 parent d587262
commit dba5266
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 28 deletions.
diff --git a/src/components/shared/Icons.tsx b/src/components/shared/Icons.tsx
@@ -3,6 +3,8 @@ import { CiCirclePlus } from "react-icons/ci";
 import { IoMdListBox } from "react-icons/io";
 import { FaUserLarge } from "react-icons/fa6";
 import { MdOutlineGroup } from "react-icons/md";
+import { GoTasklist } from "react-icons/go";
+import { HiMiniPresentationChartLine } from "react-icons/hi2";
 
 interface Props extends HTMLAttributes<SVGElement> {}
 
@@ -11,4 +13,8 @@ export const Icons = {
   LIST_BOX: (props: Props) => <IoMdListBox {...props} />,
   USER: (props: Props) => <FaUserLarge {...props} />,
   GROUP: (props: Props) => <MdOutlineGroup {...props} />,
+  TASKS_LIST: (props: Props) => <GoTasklist {...props} />,
+  PRESENTATION_CHART: (props: Props) => (
+    <HiMiniPresentationChartLine {...props} />
+  ),
 };
diff --git a/src/pages/my-groups/StudentProgressModal.tsx b/src/pages/my-groups/StudentProgressModal.tsx
@@ -69,6 +69,9 @@ export default function StudentProgressModal({
                             {student.profile?.firstName}{" "}
                             {student.profile?.lastName}
                           </div>
+                          <div className="text-sm font-thin">
+                            {student.group?.title}
+                          </div>
                         </div>
 
                         <div className="flex text-sm gap-12">

diff --git a/src/pages/my-groups/StudentsTable.tsx b/src/pages/my-groups/StudentsTable.tsx
@@ -6,22 +6,37 @@ import {
   TableBody,
   TableCell,
   useDisclosure,
+  Tooltip,
 } from "@nextui-org/react";
-import { columns, renderCell } from "./columns";
 import { IUser } from "@/interfaces/user";
 import StudentProgressModal from "./StudentProgressModal";
-import { useState } from "react";
+import { Key, useState } from "react";
+import { useTaskUserAnswers } from "@/queries/tasks";
+import { Icons } from "@/components/shared/Icons";
 
 interface Props {
   students: IUser[];
 }
 
+const columns = [
+  { key: "id", label: "ID" },
+  { key: "username", label: "Логин" },
+  { key: "firstName", label: "Имя" },
+  { key: "lastName", label: "Фамилия" },
+  { key: "actions", label: "Действия" },
+];
+
 export default function StudentsTable({ students }: Props) {
   const { isOpen, onOpenChange, onOpen } = useDisclosure();
 
   const [selectedStudent, setSelectedStudent] = useState<IUser | undefined>();
 
-  const handleRowClick = (student: IUser) => {
+  const { userAnswers, isUserAnswersLoading } = useTaskUserAnswers(
+    selectedStudent?.id,
+    !!selectedStudent
+  );
+
+  const handleShowProgress = (student: IUser) => {
     setSelectedStudent(student);
     onOpen();
   };
@@ -36,9 +51,15 @@ export default function StudentsTable({ students }: Props) {
         </TableHeader>
         <TableBody items={students || []} emptyContent="Нет студентов.">
           {(student) => (
-            <TableRow key={student.id} onClick={() => handleRowClick(student)}>
+            <TableRow key={student.id}>
               {(columnKey) => (
-                <TableCell>{renderCell(student, columnKey)}</TableCell>
+                <TableCell>
+                  <StudentRow
+                    user={student}
+                    columnKey={columnKey}
+                    onShowProgress={() => handleShowProgress(student)}
+                  />
+                </TableCell>
               )}
             </TableRow>
           )}
@@ -55,3 +76,40 @@ export default function StudentsTable({ students }: Props) {
     </>
   );
 }
+
+function StudentRow({
+  user,
+  columnKey,
+  onShowProgress,
+}: {
+  user: IUser;
+  columnKey: Key;
+  onShowProgress: () => void;
+}) {
+  const cellValue = user[columnKey as keyof IUser];
+
+  switch (columnKey) {
+    case "firstName":
+      return user.profile?.firstName;
+    case "lastName":
+      return user.profile?.lastName;
+    case "actions":
+      return (
+        <div className="flex gap-4">
+          <Tooltip content="Статистика успеваемости студента">
+            <span className="text-xl cursor-pointer" onClick={onShowProgress}>
+              <Icons.PRESENTATION_CHART />
+            </span>
+          </Tooltip>
+
+          <Tooltip content="Результаты задач студента">
+            <span className="text-xl cursor-pointer">
+              <Icons.TASKS_LIST />
+            </span>
+          </Tooltip>
+        </div>
+      );
+    default:
+      return cellValue as string;
+  }
+}
diff --git a/src/pages/my-groups/columns.tsx b/src/pages/my-groups/columns.tsx
diff --git a/src/queries/tasks.ts b/src/queries/tasks.ts
@@ -73,10 +73,11 @@ export const useTaskDeletion = (params?: MutationQuery) => {
   };
 };
 
-export const useTaskUserAnswers = (userId: number) => {
+export const useTaskUserAnswers = (userId?: number, enabled?: boolean) => {
   const { data, isLoading } = useQuery({
-    queryFn: () => getUserTaskAnswers(userId),
+    queryFn: () => getUserTaskAnswers(userId!),
     queryKey: [QUERY_KEYS.TASK_USER_ANSWERS, userId],
+    enabled,
   });
 
   return {