feat: implement query of data tables

Fixed DBP-112

Author: pan93412

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

@@ -3,17 +3,23 @@
 import { CursorDataTable } from "@/components/data-table/cursor";
 import type { Direction } from "@/components/data-table/pagination";
 import { useSuspenseQuery } from "@apollo/client/react";
+import type { VariablesOf } from "@graphql-typed-document-node/core";
 import { useState } from "react";
 import { columns, type Event } from "./data-table-columns";
 import { EVENTS_TABLE_QUERY } from "./query";
 
-export function EventsDataTable() {
+export function EventsDataTable({ query }: { query?: string }) {
   const PAGE_SIZE = 20;
   const [cursors, setCursors] = useState<(string | null)[]>([null]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const after = cursors[currentIndex];
-  const variables = { first: PAGE_SIZE, after };
+
+  const variables = {
+    first: PAGE_SIZE,
+    after,
+    where: query ? { typeContains: query } : undefined,
+  } satisfies VariablesOf<typeof EVENTS_TABLE_QUERY>;
 
   const { data } = useSuspenseQuery(EVENTS_TABLE_QUERY, {
     variables,

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+
+import { DataTableSkeleton } from "@/components/data-table/skeleton";
+import { useDebouncedValue } from "foxact/use-debounced-value";
+import { Suspense, useState } from "react";
+import { EventsDataTable } from "./data-table";
+
+export default function FilterableDataTable() {
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebouncedValue(query, 200);
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-4 flex items-center gap-4">
+        <Input
+          placeholder="搜尋事件類型"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <Suspense fallback={<DataTableSkeleton />}>
+        <EventsDataTable query={debouncedQuery} />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -6,8 +6,9 @@ export const EVENTS_TABLE_QUERY = graphql(`
     $after: Cursor
     $last: Int
     $before: Cursor
+    $where: EventWhereInput
   ) {
-    events(first: $first, after: $after, last: $last, before: $before, orderBy: { field: TRIGGERED_AT, direction: DESC }) {
+    events(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: TRIGGERED_AT, direction: DESC }) {
       edges {
         node {
           id

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

@@ -1,8 +1,6 @@
-import { DataTableSkeleton } from "@/components/data-table/skeleton";
 import { SiteHeader } from "@/components/site-header";
 import type { Metadata } from "next";
-import { Suspense } from "react";
-import { EventsDataTable } from "./_components/data-table";
+import FilterableDataTable from "./_components/filterable-data-table";
 
 export const metadata: Metadata = {
   title: "事件管理",
@@ -25,9 +23,7 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <Suspense fallback={<DataTableSkeleton />}>
-            <EventsDataTable />
-          </Suspense>
+          <FilterableDataTable />
         </div>
       </main>
     </>

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

@@ -3,17 +3,23 @@
 import { CursorDataTable } from "@/components/data-table/cursor";
 import type { Direction } from "@/components/data-table/pagination";
 import { useSuspenseQuery } from "@apollo/client/react";
+import type { VariablesOf } from "@graphql-typed-document-node/core";
 import { useState } from "react";
 import { columns, type Point } from "./data-table-columns";
 import { POINTS_TABLE_QUERY } from "./query";
 
-export function PointsDataTable() {
+export function PointsDataTable({ query }: { query?: string }) {
   const PAGE_SIZE = 20;
   const [cursors, setCursors] = useState<(string | null)[]>([null]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const after = cursors[currentIndex];
-  const variables = { first: PAGE_SIZE, after };
+
+  const variables = {
+    first: PAGE_SIZE,
+    after,
+    where: query ? { descriptionContains: query } : undefined,
+  } satisfies VariablesOf<typeof POINTS_TABLE_QUERY>;
 
   const { data } = useSuspenseQuery(POINTS_TABLE_QUERY, {
     variables,

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+
+import { DataTableSkeleton } from "@/components/data-table/skeleton";
+import { useDebouncedValue } from "foxact/use-debounced-value";
+import { Suspense, useState } from "react";
+import { PointsDataTable } from "./data-table";
+
+export default function FilterableDataTable() {
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebouncedValue(query, 200);
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-4 flex items-center gap-4">
+        <Input
+          placeholder="搜尋描述"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <Suspense fallback={<DataTableSkeleton />}>
+        <PointsDataTable query={debouncedQuery} />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -6,8 +6,9 @@ export const POINTS_TABLE_QUERY = graphql(`
     $after: Cursor
     $last: Int
     $before: Cursor
+    $where: PointWhereInput
   ) {
-    points(first: $first, after: $after, last: $last, before: $before, orderBy: { field: GRANTED_AT, direction: DESC }) {
+    points(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: GRANTED_AT, direction: DESC }) {
       edges {
         node {
           id

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

@@ -1,8 +1,6 @@
-import { DataTableSkeleton } from "@/components/data-table/skeleton";
 import { SiteHeader } from "@/components/site-header";
 import type { Metadata } from "next";
-import { Suspense } from "react";
-import { PointsDataTable } from "./_components/data-table";
+import FilterableDataTable from "./_components/filterable-data-table";
 
 export const metadata: Metadata = {
   title: "積分管理",
@@ -25,9 +23,7 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <Suspense fallback={<DataTableSkeleton />}>
-            <PointsDataTable />
-          </Suspense>
+          <FilterableDataTable />
         </div>
       </main>
     </>

app/(admin)/(question-management)/database/_components/data-table.tsx

@@ -5,16 +5,35 @@ import { useSuspenseQuery } from "@apollo/client/react";
 import { columns, type Database } from "./data-table-columns";
 import { DATABASES_TABLE_QUERY } from "./query";
 
-export function DatabaseDataTable() {
+export function DatabaseDataTable({ query }: { query?: string }) {
   const { data } = useSuspenseQuery(DATABASES_TABLE_QUERY);
 
-  const databaseList = data?.databases?.map((database) => ({
-    id: database.id,
-    slug: database.slug,
-    description: database.description,
-    schema: database.schema,
-    relationFigure: database.relationFigure,
-  } satisfies Database)) ?? [];
+  const databaseList = data?.databases
+    ?.map(
+      (database) => ({
+        id: database.id,
+        slug: database.slug,
+        description: database.description,
+        schema: database.schema,
+        relationFigure: database.relationFigure,
+      } satisfies Database),
+    )
+    .filter((database) => {
+      if (query && database.slug.includes(query)) {
+        return true;
+      }
+
+      if (query && database.description?.includes(query)) {
+        return true;
+      }
+
+      // If no query is provided, return all databases
+      if (!query) {
+        return true;
+      }
+
+      return false;
+    }) ?? [];
 
   return (
     <GeneralDataTable

app/(admin)/(question-management)/database/_components/filterable-data-table.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+
+import { DataTableSkeleton } from "@/components/data-table/skeleton";
+import { useDebouncedValue } from "foxact/use-debounced-value";
+import { Suspense, useState } from "react";
+import { DatabaseDataTable } from "./data-table";
+
+export default function FilterableDataTable() {
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebouncedValue(query, 200);
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-4 flex items-center gap-4">
+        <Input
+          placeholder="搜尋資料庫 slug 或描述"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <Suspense fallback={<DataTableSkeleton />}>
+        <DatabaseDataTable query={debouncedQuery} />
+      </Suspense>
+    </div>
+  );
+}