feat(admin): add self-host setup and user management page (#7537)

2026-07-22 04:26:23 +08:00 · 2024-08-13 14:11:03 +08:00
parent dc519348c5
commit ccf225c8f9
47 changed files with 2793 additions and 551 deletions
@@ -0,0 +1,102 @@
+import { ScrollArea } from '@affine/admin/components/ui/scroll-area';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from '@affine/admin/components/ui/table';
+import { useQuery } from '@affine/core/hooks/use-query';
+import { getUsersCountQuery } from '@affine/graphql';
+import type { ColumnDef, PaginationState } from '@tanstack/react-table';
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+
+import { DataTablePagination } from './data-table-pagination';
+import { DataTableToolbar } from './data-table-toolbar';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  pagination: PaginationState;
+  onPaginationChange: Dispatch<
+    SetStateAction<{
+      pageIndex: number;
+      pageSize: number;
+    }>
+  >;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  pagination,
+  onPaginationChange,
+}: DataTableProps<TData, TValue>) {
+  const {
+    data: { usersCount },
+  } = useQuery({
+    query: getUsersCountQuery,
+  });
+
+  const [tableData, setTableData] = useState(data);
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: usersCount,
+    enableFilters: true,
+    onPaginationChange: onPaginationChange,
+    state: {
+      pagination,
+    },
+  });
+
+  useEffect(() => {
+    setTableData(data);
+  }, [data]);
+
+  return (
+    <div className="space-y-4 py-5 px-6 h-full">
+      <DataTableToolbar setDataTable={setTableData} data={data} />
+      <ScrollArea className="rounded-md border max-h-[75vh] h-full">
+        <Table>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  className="flex items-center justify-between"
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+
+      <DataTablePagination table={table} />
+    </div>
+  );
+}