Skip to content

Commit 703f6bf

Browse files
committed
feat(activity-management): implement user filtering
1 parent 5ef8ff0 commit 703f6bf

File tree

10 files changed

+74
-14
lines changed

10 files changed

+74
-14
lines changed

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,15 @@ export function EventsDataTable({ query }: { query?: string }) {
1818
const variables = {
1919
first: PAGE_SIZE,
2020
after,
21-
where: query ? { typeContains: query } : undefined,
21+
where: query
22+
? {
23+
or: [
24+
{ typeContains: query },
25+
{ hasUserWith: [{ nameContains: query }] },
26+
{ hasUserWith: [{ emailContains: query }] },
27+
],
28+
}
29+
: undefined,
2230
} satisfies VariablesOf<typeof EVENTS_TABLE_QUERY>;
2331

2432
const { data } = useSuspenseQuery(EVENTS_TABLE_QUERY, {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function FilterableDataTable() {
1515
<div className="flex flex-col">
1616
<div className="mb-4 flex items-center gap-4">
1717
<Input
18-
placeholder="搜尋事件類型"
18+
placeholder="搜尋事件類型或使用者名稱、e-mail"
1919
value={query}
2020
onChange={(e) => setQuery(e.target.value)}
2121
/>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,15 @@ export function PointsDataTable({ query }: { query?: string }) {
6262
const variables = {
6363
first: PAGE_SIZE,
6464
after,
65-
where: query ? { descriptionContains: query } : undefined,
65+
where: query
66+
? {
67+
or: [
68+
{ descriptionContains: query },
69+
{ hasUserWith: [{ nameContains: query }] },
70+
{ hasUserWith: [{ emailContains: query }] },
71+
],
72+
}
73+
: undefined,
6674
} satisfies VariablesOf<typeof POINTS_TABLE_QUERY>;
6775

6876
const { data } = useSuspenseQuery(POINTS_TABLE_QUERY, {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function FilterableDataTable() {
1515
<div className="flex flex-col">
1616
<div className="mb-4 flex items-center gap-4">
1717
<Input
18-
placeholder="搜尋描述"
18+
placeholder="搜尋描述、使用者名稱或 e-mail"
1919
value={query}
2020
onChange={(e) => setQuery(e.target.value)}
2121
/>

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,29 @@
33
import { CursorDataTable } from "@/components/data-table/cursor";
44
import type { Direction } from "@/components/data-table/pagination";
55
import { useSuspenseQuery } from "@apollo/client/react";
6+
import type { VariablesOf } from "@graphql-typed-document-node/core";
67
import { useState } from "react";
78
import { columns, type Submission } from "./data-table-columns";
89
import { SUBMISSIONS_TABLE_QUERY } from "./query";
910

10-
export function SubmissionsDataTable() {
11+
export function SubmissionsDataTable({ query }: { query?: string }) {
1112
const PAGE_SIZE = 20;
1213
const [cursors, setCursors] = useState<(string | null)[]>([null]);
1314
const [currentIndex, setCurrentIndex] = useState(0);
1415

1516
const after = cursors[currentIndex];
16-
const variables = { first: PAGE_SIZE, after };
17+
const variables = {
18+
first: PAGE_SIZE,
19+
after,
20+
where: query
21+
? {
22+
or: [
23+
{ hasUserWith: [{ nameContains: query }] },
24+
{ hasUserWith: [{ emailContains: query }] },
25+
],
26+
}
27+
: undefined,
28+
} satisfies VariablesOf<typeof SUBMISSIONS_TABLE_QUERY>;
1729

1830
const { data } = useSuspenseQuery(SUBMISSIONS_TABLE_QUERY, {
1931
variables,
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use client";
2+
3+
import { Input } from "@/components/ui/input";
4+
5+
import { DataTableSkeleton } from "@/components/data-table/skeleton";
6+
import { useDebouncedValue } from "foxact/use-debounced-value";
7+
import { Suspense, useState } from "react";
8+
import { SubmissionsDataTable } from "./data-table";
9+
10+
export default function FilterableDataTable() {
11+
const [query, setQuery] = useState("");
12+
const debouncedQuery = useDebouncedValue(query, 200);
13+
14+
return (
15+
<div className="flex flex-col">
16+
<div className="mb-4 flex items-center gap-4">
17+
<Input
18+
placeholder="搜尋使用者名稱或 e-mail"
19+
value={query}
20+
onChange={(e) => setQuery(e.target.value)}
21+
/>
22+
</div>
23+
24+
<Suspense fallback={<DataTableSkeleton />}>
25+
<SubmissionsDataTable query={debouncedQuery} />
26+
</Suspense>
27+
</div>
28+
);
29+
}

app/(admin)/(activity-management)/submissions/_components/query.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ export const SUBMISSIONS_TABLE_QUERY = graphql(`
66
$after: Cursor
77
$last: Int
88
$before: Cursor
9+
$where: SubmissionWhereInput
910
) {
10-
submissions(first: $first, after: $after, last: $last, before: $before, orderBy: { field: SUBMITTED_AT, direction: DESC }) {
11+
submissions(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: SUBMITTED_AT, direction: DESC }) {
1112
edges {
1213
node {
1314
id
@@ -16,6 +17,7 @@ export const SUBMISSIONS_TABLE_QUERY = graphql(`
1617
user {
1718
id
1819
name
20+
email
1921
}
2022
question {
2123
id

app/(admin)/(activity-management)/submissions/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DataTableSkeleton } from "@/components/data-table/skeleton";
22
import { SiteHeader } from "@/components/site-header";
33
import type { Metadata } from "next";
44
import { Suspense } from "react";
5-
import { SubmissionsDataTable } from "./_components/data-table";
5+
import FilterableDataTable from "./_components/filterable-data-table";
66

77
export const metadata: Metadata = {
88
title: "提交記錄",
@@ -26,7 +26,7 @@ export default function Page() {
2626
</div>
2727
<div>
2828
<Suspense fallback={<DataTableSkeleton />}>
29-
<SubmissionsDataTable />
29+
<FilterableDataTable />
3030
</Suspense>
3131
</div>
3232
</main>

gql/gql.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ type Documents = {
2929
"\n query SubmissionCards($id: ID!) {\n submission(id: $id) {\n id\n ...SubmissionDetailsCard\n ...SubmissionUserCard\n ...SubmissionResultCard\n }\n }\n": typeof types.SubmissionCardsDocument,
3030
"\n fragment SubmissionDetailsCard on Submission {\n submittedCode\n error\n }\n": typeof types.SubmissionDetailsCardFragmentDoc,
3131
"\n fragment SubmissionUserCard on Submission {\n user {\n id\n name\n }\n }\n": typeof types.SubmissionUserCardFragmentDoc,
32-
"\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": typeof types.SubmissionsTableDocument,
32+
"\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: SubmissionWhereInput\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n email\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": typeof types.SubmissionsTableDocument,
3333
"\n query DatabaseCards($id: ID!) {\n database(id: $id) {\n id\n ...DatabaseDescriptionCard\n ...DatabaseRelationCard\n ...DatabaseSchemaCard\n }\n }\n": typeof types.DatabaseCardsDocument,
3434
"\n fragment DatabaseDescriptionCard on Database {\n description\n }\n": typeof types.DatabaseDescriptionCardFragmentDoc,
3535
"\n query DatabaseHeader($id: ID!) {\n database(id: $id) {\n id\n slug\n description\n }\n }\n": typeof types.DatabaseHeaderDocument,
@@ -117,7 +117,7 @@ const documents: Documents = {
117117
"\n query SubmissionCards($id: ID!) {\n submission(id: $id) {\n id\n ...SubmissionDetailsCard\n ...SubmissionUserCard\n ...SubmissionResultCard\n }\n }\n": types.SubmissionCardsDocument,
118118
"\n fragment SubmissionDetailsCard on Submission {\n submittedCode\n error\n }\n": types.SubmissionDetailsCardFragmentDoc,
119119
"\n fragment SubmissionUserCard on Submission {\n user {\n id\n name\n }\n }\n": types.SubmissionUserCardFragmentDoc,
120-
"\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": types.SubmissionsTableDocument,
120+
"\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: SubmissionWhereInput\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n email\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": types.SubmissionsTableDocument,
121121
"\n query DatabaseCards($id: ID!) {\n database(id: $id) {\n id\n ...DatabaseDescriptionCard\n ...DatabaseRelationCard\n ...DatabaseSchemaCard\n }\n }\n": types.DatabaseCardsDocument,
122122
"\n fragment DatabaseDescriptionCard on Database {\n description\n }\n": types.DatabaseDescriptionCardFragmentDoc,
123123
"\n query DatabaseHeader($id: ID!) {\n database(id: $id) {\n id\n slug\n description\n }\n }\n": types.DatabaseHeaderDocument,
@@ -267,7 +267,7 @@ export function graphql(source: "\n fragment SubmissionUserCard on Submission {
267267
/**
268268
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
269269
*/
270-
export function graphql(source: "\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"): (typeof documents)["\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"];
270+
export function graphql(source: "\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: SubmissionWhereInput\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n email\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"): (typeof documents)["\n query SubmissionsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: SubmissionWhereInput\n ) {\n submissions(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: SUBMITTED_AT, direction: DESC }) {\n edges {\n node {\n id\n submittedCode\n status\n user {\n id\n name\n email\n }\n question {\n id\n title\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"];
271271
/**
272272
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
273273
*/

0 commit comments

Comments
 (0)