feat(fe): apply scrollarea only to score table (#2067)

skkuding · Sep 9, 2024 · 334230a · 334230a
1 parent df7a728
commit 334230a
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 50 deletions.
diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/_components/Columns.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/_components/Columns.tsx
@@ -30,7 +30,8 @@ export const columns = (
         <div className="whitespace-nowrap text-center text-xs font-medium">
           {row.original.realName}
         </div>
-      )
+      ),
+      filterFn: 'includesString'
     },
     {
       accessorKey: 'username',

diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/page.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { DataTableAdmin } from '@/components/DataTableAdmin'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Skeleton } from '@/components/ui/skeleton'
 import { GET_CONTEST_SCORE_SUMMARIES } from '@/graphql/contest/queries'
 import { GET_CONTEST_PROBLEMS } from '@/graphql/problem/queries'
@@ -41,13 +42,25 @@ export default function Submission() {
           ))}
         </>
       ) : (
-        <DataTableAdmin
-          columns={columns(problemData as ProblemData[])}
-          data={summariesData as ScoreSummary[]}
-          enableSearch={true}
-          searchColumn="realName"
-          enablePagination={true}
-        />
+        <>
+          <p className="mb-3 font-medium">
+            <span className="text-primary font-bold">
+              {summariesData?.length}
+            </span>{' '}
+            Participants
+          </p>
+          <ScrollArea>
+            <DataTableAdmin
+              columns={columns(problemData as ProblemData[])}
+              data={summariesData as ScoreSummary[]}
+              enableSearch={true}
+              searchColumn="realName"
+              enablePagination={true}
+            />
+            <div className="mt-6" />
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </>
       )}
     </div>
   )

diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/page.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/page.tsx
@@ -15,7 +15,7 @@ export default function Submission() {
       input: {
         contestId: Number(id)
       },
-      take: 10
+      take: 1000
     }
   })
   const submissions = data?.getContestSubmissions || []

diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/layout.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/layout.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { GET_CONTEST } from '@/graphql/contest/queries'
 import { renderKatex } from '@/lib/renderKatex'
 import { dateFormatter } from '@/lib/utils'
@@ -41,39 +40,36 @@ export default function Layout({
   )
 
   return (
-    <ScrollArea className="shrink-0">
-      <main className="flex flex-col gap-6 px-20 py-16">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Link href="/admin/contest">
-              <FaAngleLeft className="h-12 hover:text-gray-700/80" />
-            </Link>
-            <span className="text-4xl font-bold">{contestData?.title}</span>
-          </div>
-          <Link href={`/admin/contest/${id}/edit`}>
-            <Button variant="default">
-              <FaPencil className="mr-2 h-4 w-4" />
-              Edit
-            </Button>
+    <main className="flex flex-col gap-6 px-20 py-16">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/admin/contest">
+            <FaAngleLeft className="h-12 hover:text-gray-700/80" />
           </Link>
+          <span className="text-4xl font-bold">{contestData?.title}</span>
         </div>
-        <div className="flex justify-between">
-          <p className="text-primary font-bold">
-            Invitation code: {contestData?.invitationCode}
+        <Link href={`/admin/contest/${id}/edit`}>
+          <Button variant="default">
+            <FaPencil className="mr-2 h-4 w-4" />
+            Edit
+          </Button>
+        </Link>
+      </div>
+      <div className="flex justify-between">
+        <p className="text-primary font-bold">
+          Invitation code: {contestData?.invitationCode}
+        </p>
+        <div className="flex items-center gap-2">
+          <Image src={Period} alt="period" width={22} />
+          <p className="font-semibold">
+            {dateFormatter(contestData?.startTime, 'YY-MM-DD HH:mm')} ~{' '}
+            {dateFormatter(contestData?.endTime, 'YY-MM-DD HH:mm')}
           </p>
-          <div className="flex items-center gap-2">
-            <Image src={Period} alt="period" width={22} />
-            <p className="font-semibold">
-              {dateFormatter(contestData?.startTime, 'YY-MM-DD HH:mm')} ~{' '}
-              {dateFormatter(contestData?.endTime, 'YY-MM-DD HH:mm')}
-            </p>
-          </div>
         </div>
-        {katexContent}
-        <ContestOverallTabs contestId={id} />
-        {tabs}
-      </main>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
+      </div>
+      {katexContent}
+      <ContestOverallTabs contestId={id} />
+      {tabs}
+    </main>
   )
 }
diff --git a/apps/frontend/app/admin/contest/[id]/participant/[userId]/page.tsx b/apps/frontend/app/admin/contest/[id]/participant/[userId]/page.tsx
@@ -26,7 +26,7 @@ export default function Page({
   const userData = user.data?.getGroupMember
 
   const submissions = useQuery(GET_CONTEST_SUBMISSION_SUMMARIES_OF_USER, {
-    variables: { contestId: Number(id), userId: Number(userId) }
+    variables: { contestId: Number(id), userId: Number(userId), take: 1000 }
   })
   const submissionsLoading = submissions.loading
   const scoreData =

diff --git a/apps/frontend/components/DataTableAdmin.tsx b/apps/frontend/components/DataTableAdmin.tsx
@@ -277,7 +277,11 @@ export function DataTableAdmin<TData, TValue>({
               <div className="relative">
                 <IoSearch className="text-muted-foreground absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                 <Input
-                  placeholder="Search"
+                  placeholder={
+                    /^\/admin\/contest\/\d+$/.test(pathname)
+                      ? 'Search Name'
+                      : 'Search'
+                  }
                   value={
                     (table
                       .getColumn(searchColumn)

diff --git a/apps/frontend/graphql/contest/queries.ts b/apps/frontend/graphql/contest/queries.ts
@@ -71,8 +71,8 @@ const GET_CONTEST_SCORE_SUMMARIES =
   }`)
 
 const GET_CONTEST_SUBMISSION_SUMMARIES_OF_USER =
-  gql(`query getContestSubmissionSummariesByUserId($contestId: Int!, $userId: Int!) {
-  getContestSubmissionSummaryByUserId(contestId: $contestId, userId: $userId) {
+  gql(`query getContestSubmissionSummariesByUserId($contestId: Int!, $userId: Int!, $take: Int!) {
+  getContestSubmissionSummaryByUserId(contestId: $contestId, userId: $userId, take: $take) {
     scoreSummary {
       contestPerfectScore
       problemScores {

diff --git a/collection/admin/Contest/Get Contest Score Summary of User/Succeed.bru b/collection/admin/Contest/Get Contest Score Summary of User/Succeed.bru
@@ -11,8 +11,8 @@ post {
 }
 
 body:graphql {
-  query getContestSubmissionSummariesByUserId($contestId: Int!, $userId: Int!) {
-    getContestSubmissionSummaryByUserId(contestId: $contestId, userId: $userId) {
+  query getContestSubmissionSummariesByUserId($contestId: Int!, $userId: Int!, $take: Int!) {
+    getContestSubmissionSummaryByUserId(contestId: $contestId, userId: $userId, take: $take) {
       scoreSummary {
         contestPerfectScore
         problemScores {
@@ -39,24 +39,25 @@ body:graphql {
       }
     }
   }
-  
+
 }
 
 body:graphql:vars {
   {
     "contestId": 1,
-    "userId": 4
+    "userId": 4,
+    "take": 500
     // "problemId": 1
   }
 }
 
 docs {
   ## Get Contest Score Summary of User
   유저의 특정 Contest에 대한 점수 요약을 반환합니다.
-  
+
   Contest Overall 페이지에서 특정 유저를 선택했을 때 사용
   https://github.com/skkuding/codedang/pull/1894
-  
+
   - submittedProblemCount
     - 제출된 문제의 개수(정답 여부와 관계 없음)
   - totalProblemCount