feat: Updated assignment completion tab

web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx

@@ -136,7 +136,7 @@ const AssignmentDetailsPage = ({
               <AssignmentSolutionsTab assignmentId={assignmentId} />
             </Tabs.Panel>
             <Tabs.Panel value="completedBy">
-              <AssignmentCompletedByTab completedBy={assignment.completed_by} />
+              <AssignmentCompletedByTab groupId={groupId} assignmentId={assignmentId} />
             </Tabs.Panel>
           </>
         )}

web/components/assignments/AssignmentCompletedByTab.tsx

@@ -1,15 +1,23 @@
-import { TaskyUser } from "@/service/types/tasky";
 import EntityList, { EntityListCol } from "@/components/EntityList";
 import { useTranslation } from "react-i18next";
+import useApiServiceClient from "@/hooks/useApiServiceClient";
+import useClientQuery from "@/hooks/useClientQuery";
+import React, {useState} from "react";
+import {Pagination} from "@mantine/core";
 
 interface AssignmentCompletedByTabProps {
-  completedBy: TaskyUser[];
+  groupId: number;
+  assignmentId: number;
 }
 
 const AssignmentCompletedByTab = ({
-  completedBy,
+    groupId,
+  assignmentId,
 }: AssignmentCompletedByTabProps) => {
   const { t } = useTranslation("common");
+  const api = useApiServiceClient();
+  const [page, setPage] = useState<number>(1);
+  const [completedBy] = useClientQuery(() => api.getAssignmentCompletions(groupId, assignmentId, page), [groupId, assignmentId, page]);
 
   const cols: EntityListCol[] = [
     {
@@ -22,7 +30,16 @@ const AssignmentCompletedByTab = ({
     },
   ];
 
-  return <EntityList cols={cols} rows={completedBy} />;
+  return (
+      <>
+        <EntityList cols={cols} rows={completedBy?.completions ?? []} />
+        <Pagination
+            total={Math.ceil((completedBy?.total ?? 0) / 50)}
+            value={page}
+            onChange={setPage}
+        />
+      </>
+  );
 };
 
 export default AssignmentCompletedByTab;

web/service/ApiService.ts

@@ -18,7 +18,7 @@ import {
   AssignmentWish,
   CodeComment,
   AssignmentWishesResponse,
-  Notification, GroupJoinRequestPolicy, TaskyUser, GroupMembersResponse,
+  Notification, GroupJoinRequestPolicy, TaskyUser, GroupMembersResponse, AssignmentCompletionsResponse,
 } from "@/service/types/tasky";
 import { FileStructureTree } from "@/components/FileStructure";
 import { Spotlight3Response } from "@/service/types/spotlight";
@@ -353,6 +353,10 @@ class ApiService {
     return await this.get<GroupMembersResponse>(`/tasky/groups/${groupId}/members?page=${page}`);
   }
 
+  public async getAssignmentCompletions(groupId: number, assignmentId: number, page: number): Promise<AssignmentCompletionsResponse> {
+    return await this.get<AssignmentCompletionsResponse>(`/tasky/groups/${groupId}/assignments/${assignmentId}/completions?page=${page}`);
+  }
+
   public async createOrUpdateCodeTests(
     groupId: number,
     assignmentId: number,

web/service/types/tasky.ts

@@ -184,3 +184,8 @@ export interface GroupMembersResponse {
   members: TaskyUser[];
   total: number;
 }
+
+export interface AssignmentCompletionsResponse {
+  completions: TaskyUser[];
+  total: number;
+}