Merge pull request #26 from database-playground/pan93412/dbp-111-admin-一次顯示-20-筆資料

DBP-111: improve admin page

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() {
-  const PAGE_SIZE = 10;
+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,6 +1,6 @@
 import { SiteHeader } from "@/components/site-header";
 import type { Metadata } from "next";
-import { EventsDataTable } from "./_components/data-table";
+import FilterableDataTable from "./_components/filterable-data-table";
 
 export const metadata: Metadata = {
   title: "事件管理",
@@ -23,7 +23,7 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <EventsDataTable />
+          <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() {
-  const PAGE_SIZE = 10;
+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,6 +1,6 @@
 import { SiteHeader } from "@/components/site-header";
 import type { Metadata } from "next";
-import { PointsDataTable } from "./_components/data-table";
+import FilterableDataTable from "./_components/filterable-data-table";
 
 export const metadata: Metadata = {
   title: "積分管理",
@@ -23,7 +23,7 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <PointsDataTable />
+          <FilterableDataTable />
         </div>
       </main>
     </>

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

@@ -8,7 +8,7 @@ import { columns, type Submission } from "./data-table-columns";
 import { SUBMISSIONS_TABLE_QUERY } from "./query";
 
 export function SubmissionsDataTable() {
-  const PAGE_SIZE = 10;
+  const PAGE_SIZE = 20;
   const [cursors, setCursors] = useState<(string | null)[]>([null]);
   const [currentIndex, setCurrentIndex] = useState(0);
 

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

@@ -1,5 +1,7 @@
+import { DataTableSkeleton } from "@/components/data-table/skeleton";
 import { SiteHeader } from "@/components/site-header";
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { SubmissionsDataTable } from "./_components/data-table";
 
 export const metadata: Metadata = {
@@ -23,7 +25,9 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <SubmissionsDataTable />
+          <Suspense fallback={<DataTableSkeleton />}>
+            <SubmissionsDataTable />
+          </Suspense>
         </div>
       </main>
     </>