feat(submissions): implement submission status filtering

Author: pan93412

app/(admin)/(activity-management)/submissions/_components/data-table.tsx

@@ -2,13 +2,22 @@
 
 import { CursorDataTable } from "@/components/data-table/cursor";
 import type { Direction } from "@/components/data-table/pagination";
+import type { SubmissionStatus } from "@/gql/graphql";
 import { useSuspenseQuery } from "@apollo/client/react";
 import type { VariablesOf } from "@graphql-typed-document-node/core";
 import { useState } from "react";
 import { columns, type Submission } from "./data-table-columns";
 import { SUBMISSIONS_TABLE_QUERY } from "./query";
 
-export function SubmissionsDataTable({ query }: { query?: string }) {
+export type SubmissionStatusFilter = SubmissionStatus | "all";
+
+export function SubmissionsDataTable({
+  query,
+  status,
+}: {
+  query?: string;
+  status?: SubmissionStatusFilter;
+}) {
   const PAGE_SIZE = 20;
   const [cursors, setCursors] = useState<(string | null)[]>([null]);
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -17,14 +26,13 @@ export function SubmissionsDataTable({ query }: { query?: string }) {
   const variables = {
     first: PAGE_SIZE,
     after,
-    where: query
-      ? {
-        or: [
-          { hasUserWith: [{ nameContains: query }] },
-          { hasUserWith: [{ emailContains: query }] },
-        ],
-      }
-      : undefined,
+    where: {
+      or: [
+        { hasUserWith: [{ nameContains: query }] },
+        { hasUserWith: [{ emailContains: query }] },
+      ],
+      status: status === "all" ? undefined : status,
+    },
   } satisfies VariablesOf<typeof SUBMISSIONS_TABLE_QUERY>;
 
   const { data } = useSuspenseQuery(SUBMISSIONS_TABLE_QUERY, {
@@ -57,7 +65,7 @@ export function SubmissionsDataTable({ query }: { query?: string }) {
     if (!pageInfo) return;
     if (direction === "forward" && pageInfo.hasNextPage) {
       const nextCursor = pageInfo.endCursor ?? null;
-      setCursors(prev => {
+      setCursors((prev) => {
         const newCursors = prev.slice(0, currentIndex + 1);
         newCursors.push(nextCursor);
         return newCursors;

app/(admin)/(activity-management)/submissions/_components/filterable-data-table.tsx

@@ -3,12 +3,15 @@
 import { Input } from "@/components/ui/input";
 
 import { DataTableSkeleton } from "@/components/data-table/skeleton";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { SubmissionStatus } from "@/gql/graphql";
 import { useDebouncedValue } from "foxact/use-debounced-value";
 import { Suspense, useState } from "react";
-import { SubmissionsDataTable } from "./data-table";
+import { SubmissionsDataTable, type SubmissionStatusFilter } from "./data-table";
 
 export default function FilterableDataTable() {
   const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<SubmissionStatusFilter>("all");
   const debouncedQuery = useDebouncedValue(query, 200);
 
   return (
@@ -19,10 +22,21 @@ export default function FilterableDataTable() {
           value={query}
           onChange={(e) => setQuery(e.target.value)}
         />
+        <Select value={status} onValueChange={(value) => setStatus(value as SubmissionStatusFilter)}>
+          <SelectTrigger>
+            <SelectValue placeholder="選擇解題狀態" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部</SelectItem>
+            <SelectItem value={SubmissionStatus.Failed}>錯誤</SelectItem>
+            <SelectItem value={SubmissionStatus.Success}>成功</SelectItem>
+            <SelectItem value={SubmissionStatus.Pending}>執行中</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
       <Suspense fallback={<DataTableSkeleton />}>
-        <SubmissionsDataTable query={debouncedQuery} />
+        <SubmissionsDataTable query={debouncedQuery} status={status} />
       </Suspense>
     </div>
   );