fix(fe): add submission detail modal on participant (#2228)

skkuding · Nov 23, 2024 · bf8a4a6 · bf8a4a6
1 parent 7444775
commit bf8a4a6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 17 deletions.
diff --git a/.../app/admin/contest/[contestId]/(overall)/@tabs/submission/_components/SubmissionTable.tsx b/.../app/admin/contest/[contestId]/(overall)/@tabs/submission/_components/SubmissionTable.tsx
@@ -6,12 +6,12 @@ import DataTablePagination from '@/app/admin/_components/table/DataTablePaginati
 import DataTableProblemFilter from '@/app/admin/_components/table/DataTableProblemFilter'
 import DataTableRoot from '@/app/admin/_components/table/DataTableRoot'
 import DataTableSearchBar from '@/app/admin/_components/table/DataTableSearchBar'
+import SubmissionDetailAdmin from '@/app/admin/contest/[contestId]/_components/SubmissionDetailAdmin'
 import { Dialog, DialogContent } from '@/components/shadcn/dialog'
 import { GET_CONTEST_SUBMISSIONS } from '@/graphql/submission/queries'
 import { useSuspenseQuery } from '@apollo/client'
 import { useState } from 'react'
 import { columns } from './Columns'
-import SubmissionDetailAdmin from './SubmissionDetailAdmin'
 
 export function SubmissionTable({ contestId }: { contestId: number }) {
   const { data } = useSuspenseQuery(GET_CONTEST_SUBMISSIONS, {

diff --git a/apps/frontend/app/admin/contest/[contestId]/(overall)/layout.tsx b/apps/frontend/app/admin/contest/[contestId]/(overall)/layout.tsx
@@ -13,12 +13,10 @@ import ContestOverallTabs from '../_components/ContestOverallTabs'
 
 export default function Layout({
   params,
-  tabs,
-  userId
+  tabs
 }: {
   params: { contestId: string }
   tabs: React.ReactNode
-  userId: number
 }) {
   const { contestId } = params
 
@@ -60,7 +58,7 @@ export default function Layout({
         content={contestData?.description}
         classname="prose mb-4 w-full max-w-full border-y-2 border-y-gray-300 p-5 py-12"
       />
-      <ContestOverallTabs contestId={contestId} userId={userId} />
+      <ContestOverallTabs contestId={contestId} />
       {tabs}
     </main>
   )

diff --git a/apps/frontend/app/admin/contest/[contestId]/_components/ContestOverallTabs.tsx b/apps/frontend/app/admin/contest/[contestId]/_components/ContestOverallTabs.tsx
@@ -30,15 +30,22 @@ interface SubmissionSummary {
 }
 
 export default function ContestOverallTabs({
-  contestId,
-  userId
+  contestId
 }: {
   contestId: string
-  userId: number
 }) {
   const id = parseInt(contestId, 10)
   const pathname = usePathname()
 
+  const { data: userData } = useQuery<{
+    getUserIdByContest: { userId: number }
+  }>(GET_CONTEST_SCORE_SUMMARIES, {
+    variables: { contestId: id },
+    skip: !contestId
+  })
+
+  const userId = userData?.getUserIdByContest?.userId
+
   const { data: scoreData } = useQuery<{
     getContestScoreSummaries: ScoreSummary[]
   }>(GET_CONTEST_SCORE_SUMMARIES, {

diff --git a/...ion/_components/SubmissionDetailAdmin.tsx → ...Id]/_components/SubmissionDetailAdmin.tsx b/...ion/_components/SubmissionDetailAdmin.tsx → ...Id]/_components/SubmissionDetailAdmin.tsx
diff --git a/...ontend/app/admin/contest/[contestId]/participant/[userId]/_components/SubmissionTable.tsx b/...ontend/app/admin/contest/[contestId]/participant/[userId]/_components/SubmissionTable.tsx
@@ -5,8 +5,11 @@ import DataTableFallback from '@/app/admin/_components/table/DataTableFallback'
 import DataTablePagination from '@/app/admin/_components/table/DataTablePagination'
 import DataTableProblemFilter from '@/app/admin/_components/table/DataTableProblemFilter'
 import DataTableRoot from '@/app/admin/_components/table/DataTableRoot'
+import SubmissionDetailAdmin from '@/app/admin/contest/[contestId]/_components/SubmissionDetailAdmin'
+import { Dialog, DialogContent } from '@/components/shadcn/dialog'
 import { GET_CONTEST_SUBMISSION_SUMMARIES_OF_USER } from '@/graphql/contest/queries'
 import { useSuspenseQuery } from '@apollo/client'
+import { useState } from 'react'
 import { submissionColumns } from './SubmissionColumns'
 
 export function SubmissionTable({
@@ -22,20 +25,37 @@ export function SubmissionTable({
       variables: { contestId, userId, take: 1000 }
     }
   )
+  const [isSubmissionDialogOpen, setIsSubmissionDialogOpen] = useState(false)
+  const [submissionId, setSubmissionId] = useState(0)
 
   const submissionsData =
     submissions.data.getContestSubmissionSummaryByUserId.submissions
 
   return (
-    <DataTableRoot
-      columns={submissionColumns}
-      data={submissionsData}
-      defaultSortState={[{ id: 'submissionTime', desc: true }]}
-    >
-      <DataTableProblemFilter contestId={contestId} />
-      <DataTable />
-      <DataTablePagination />
-    </DataTableRoot>
+    <>
+      <DataTableRoot
+        columns={submissionColumns}
+        data={submissionsData}
+        defaultSortState={[{ id: 'submissionTime', desc: true }]}
+      >
+        <DataTableProblemFilter contestId={contestId} />
+        <DataTable
+          onRowClick={(_, row) => {
+            setSubmissionId(row.original.id)
+            setIsSubmissionDialogOpen(true)
+          }}
+        />
+        <DataTablePagination />
+      </DataTableRoot>
+      <Dialog
+        open={isSubmissionDialogOpen}
+        onOpenChange={setIsSubmissionDialogOpen}
+      >
+        <DialogContent className="max-h-[840px] max-w-[1000px] justify-center">
+          <SubmissionDetailAdmin submissionId={submissionId} />
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }