store column order in local storage, refactor a bit

2025-12-16 12:33:05 +00:00 · 2024-07-14 17:34:45 +02:00
parent 1c976ecda1
commit 2ca70ec1a5
8 changed files with 74 additions and 153 deletions
--- a/frontend/src/components/db-table-view/columns-dropdown.tsx
+++ b/frontend/src/components/db-table-view/columns-dropdown.tsx
@@ -73,7 +73,7 @@ export function ColumnsDropdown<T>({
    if (active.id !== over?.id) {
      setColumnOrder((items) => {
        const oldIndex = items.findIndex((id) => id === active.id);
-        const newIndex = items.findIndex((id) => id === over.id);
+        const newIndex = items.findIndex((id) => id === over?.id);

        return arrayMove(items, oldIndex, newIndex);
      });
@@ -81,7 +81,7 @@ export function ColumnsDropdown<T>({
  }
 }

-const SortableItem = ({ column }: { column: Column<any> }) => {
+const SortableItem = <T,>({ column }: { column: Column<T> }) => {
  const {
    attributes,
    listeners,
--- a/frontend/src/components/db-table-view/columns.tsx
+++ b/frontend/src/components/db-table-view/columns.tsx
@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/state";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useMemo } from "react";

-const buildColumns = ({
+const buildColumns = <T,>({
  columns,
  formatDates,
  showImagesPreview,
@@ -13,8 +13,8 @@ const buildColumns = ({

  formatDates: boolean;
  showImagesPreview: boolean;
-}): ColumnDef<any>[] => {
-  if (!columns) return [] as ColumnDef<any>[];
+}): ColumnDef<T>[] => {
+  if (!columns) return [] as ColumnDef<T>[];

  return columns.map(({ column_name, udt_name, data_type }) => ({
    accessorKey: column_name,
@@ -67,6 +67,9 @@ const buildColumns = ({
          </a>
        );
      }
+      if (typeof finalValue === "boolean") {
+        finalValue = finalValue ? "true" : "false";
+      }
      return (
        <div
          className={cn(
@@ -79,7 +82,7 @@ const buildColumns = ({
        </div>
      );
    },
-  })) as ColumnDef<any>[];
+  })) as ColumnDef<T>[];
 };

 export const useColumns = ({
--- a/frontend/src/components/db-table-view/data-table.tsx
+++ b/frontend/src/components/db-table-view/data-table.tsx
@@ -1,124 +0,0 @@
-import {
-  TableScrollContainer,
-  TableView,
-} from "@/components/db-table-view/table";
-import { DataTablePagination } from "@/components/ui";
-import { useTableDataQuery } from "@/services/db";
-import {
-  type OnChangeFn,
-  type PaginationState,
-  type SortingState,
-  type VisibilityState,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { Rows3 } from "lucide-react";
-import { useCallback, useState } from "react";
-import { useColumns } from "./columns";
-import { ColumnsDropdown } from "./columns-dropdown";
-import {
-  WhereClauseForm,
-  type WhereClauseFormValues,
-} from "./where-clause-form";
-
-export const DataTable = ({
-  tableName,
-  dbName,
-  pageIndex,
-  pageSize,
-  onPageSizeChange,
-  onPageIndexChange,
-}: {
-  tableName: string;
-  pageIndex: number;
-  dbName: string;
-  pageSize: number;
-  onPageIndexChange: (pageIndex: number) => void;
-  onPageSizeChange: (pageSize: number) => void;
-}) => {
-  const columns = useColumns({ dbName, tableName });
-  const [whereQuery, setWhereQuery] = useState("");
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-
-  const { data, refetch } = useTableDataQuery({
-    whereQuery,
-    tableName,
-    dbName,
-    perPage: pageSize,
-    page: pageIndex,
-    sortDesc: sorting[0]?.desc,
-    sortField: sorting[0]?.id,
-  });
-
-  const handleWhereClauseFormSubmit = useCallback(
-    ({ whereClause }: WhereClauseFormValues) => {
-      if (whereClause === whereQuery) {
-        void refetch();
-        return;
-      }
-      setWhereQuery(whereClause);
-    },
-    [whereQuery, refetch],
-  );
-
-  const paginationUpdater: OnChangeFn<PaginationState> = (args) => {
-    if (typeof args === "function") {
-      const newArgs = args({
-        pageIndex,
-        pageSize,
-      });
-      if (newArgs.pageSize !== pageSize) {
-        onPageSizeChange(newArgs.pageSize);
-      } else if (newArgs.pageIndex !== pageIndex) {
-        onPageIndexChange(newArgs.pageIndex);
-      }
-    } else {
-      onPageSizeChange(args.pageSize);
-      onPageIndexChange(args.pageIndex);
-    }
-  };
-
-  const table = useReactTable({
-    data: data?.data ?? [],
-    columns,
-    columnResizeMode: "onChange",
-    getCoreRowModel: getCoreRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    rowCount: data?.count ?? 0,
-    manualSorting: true,
-    onSortingChange: setSorting,
-    state: {
-      sorting,
-      columnVisibility,
-      pagination: {
-        pageIndex,
-        pageSize,
-      },
-    },
-    onPaginationChange: paginationUpdater,
-    manualPagination: true,
-  });
-
-  return (
-    <div className={"flex flex-col gap-4 flex-1 max-h-full pb-3"}>
-      <div className={"flex gap-4 items-center justify-between"}>
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <Rows3 /> {tableName}
-          <WhereClauseForm onSubmit={handleWhereClauseFormSubmit} />
-        </h1>
-        <ColumnsDropdown table={table} />
-        <p>
-          Rows: <strong>{data?.count}</strong>
-        </p>
-      </div>
-
-      <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
-        <TableScrollContainer>
-          <TableView table={table} columnLength={columns.length} />
-        </TableScrollContainer>
-      </div>
-      <DataTablePagination table={table} />
-    </div>
-  );
-};
--- a/frontend/src/components/db-table-view/reset-state-dropdown.tsx
+++ b/frontend/src/components/db-table-view/reset-state-dropdown.tsx
@@ -0,0 +1,35 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+} from "@/components/ui";
+import type { Table } from "@tanstack/react-table";
+import { RotateCcw } from "lucide-react";
+
+export const ResetStateDropdown = <T,>({ table }: { table: Table<T> }) => {
+  return (
+    <DropdownMenu>
+      <Tooltip content={"Reset state"}>
+        <DropdownMenuTrigger asChild>
+          <Button variant={"outline"} size={"icon"}>
+            <RotateCcw className={"size-[1.2rem]"} />
+          </Button>
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent align={"end"}>
+        <DropdownMenuItem onSelect={() => table.resetColumnOrder()}>
+          Reset Column Order
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => table.resetColumnSizing()}>
+          Reset Column Sizing
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => table.resetColumnVisibility()}>
+          Reset Column Visibility
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
--- a/frontend/src/components/sidebar/sidebar.tsx
+++ b/frontend/src/components/sidebar/sidebar.tsx
@@ -94,7 +94,6 @@ function SidebarContent() {
                aria-label={"Explore Data"}
                to={"/db/$dbName/tables/$tableName/data"}
                params={{ tableName: table.table_name, dbName: dbName }}
-                search={{ pageIndex: 0, pageSize: 10 }}
              >
                <Rows3 className={"size-4 shrink-0"} />
              </Link>
--- a/frontend/src/routes/auth/login.tsx
+++ b/frontend/src/routes/auth/login.tsx
@@ -21,7 +21,12 @@ import { useSessionStore } from "@/state/db-session-store";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
-import { type Control, useForm } from "react-hook-form";
+import {
+  type Control,
+  type FieldPath,
+  type FieldValues,
+  useForm,
+} from "react-hook-form";
 import { z } from "zod";

 export const Route = createFileRoute("/auth/login")({
@@ -56,7 +61,7 @@ function ConnectionStringForm({
      onSubmit={handleSubmit(onSubmit)}
      id={"login-form"}
    >
-      <DatabaseTypeSelector control={control} />
+      <DatabaseTypeSelector control={control} name={"type"} />
      <FormInput
        label={"Connection string"}
        name={"connectionString"}
@@ -104,7 +109,7 @@ function ConnectionFieldsForm({
      onSubmit={handleSubmit(onSubmit)}
      id={"login-form"}
    >
-      <DatabaseTypeSelector control={control} />
+      <DatabaseTypeSelector control={control} name={"type"} />
      <FormInput
        name={"host"}
        control={control}
@@ -193,15 +198,17 @@ function LoginForm() {
  );
 }

-function DatabaseTypeSelector({
+function DatabaseTypeSelector<T extends FieldValues>({
  control,
+  name,
 }: {
-  control: Control<any>;
+  control: Control<T>;
+  name: FieldPath<T>;
 }) {
  return (
    <div className="grid gap-2">
      <Label htmlFor="dbType">Database type</Label>
-      <FormSelect control={control} name={"type"}>
+      <FormSelect control={control} name={name}>
        <SelectTrigger className="w-full" id={"dbType"}>
          <SelectValue />
        </SelectTrigger>
--- a/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
+++ b/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
@@ -1,5 +1,6 @@
 import { useColumns } from "@/components/db-table-view/columns";
 import { ColumnsDropdown } from "@/components/db-table-view/columns-dropdown";
+import { ResetStateDropdown } from "@/components/db-table-view/reset-state-dropdown";
 import {
  TableScrollContainer,
  TableView,
@@ -29,8 +30,8 @@ import { useLocalStorage } from "usehooks-ts";
 import { z } from "zod";

 const tableSearchSchema = z.object({
-  pageSize: z.number().catch(10),
-  pageIndex: z.number().catch(0),
+  pageSize: z.number().optional(),
+  pageIndex: z.number().optional(),
  sortField: z.string().optional(),
  sortDesc: z.boolean().optional(),
 });
@@ -42,6 +43,7 @@ export const Route = createFileRoute("/db/$dbName/tables/$tableName/data")({

 function Component() {
  const { tableName, dbName } = Route.useParams();
+  const columns = useColumns({ dbName, tableName });

  const { filters, setFilters } = useFilters(Route.fullPath);
  const [whereQuery, setWhereQuery] = useState("");
@@ -54,6 +56,15 @@ function Component() {
      `columnVisibility-${dbName}-${tableName}`,
      {},
    );
+  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>(
+    `columnOrder-${dbName}-${tableName}`,
+    () => columns.map((c) => c.id ?? ""),
+  );
+
+  useEffect(() => {
+    if (columnOrder.length === columns.length) return;
+    setColumnOrder(columns.map((c) => c.id ?? ""));
+  }, [columns, columnOrder.length, setColumnOrder]);

  const paginationState = useMemo(
    () => ({
@@ -64,20 +75,13 @@ function Component() {
  );

  const sortingState = useMemo(() => sortByToState(filters), [filters]);
-  const columns = useColumns({ dbName, tableName });
-  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
-    columns.map((c) => c.id ?? ""),
-  );
-  useEffect(() => {
-    if (columnOrder.length !== 0) return;
-    setColumnOrder(columns.map((c) => c.id ?? ""));
-  }, [columns, columnOrder.length]);
+
  const { data, refetch } = useTableDataQuery({
    whereQuery,
    tableName,
    dbName,
-    perPage: filters.pageSize,
-    page: filters.pageIndex,
+    perPage: filters.pageSize ?? DEFAULT_PAGE_SIZE,
+    page: filters.pageIndex ?? DEFAULT_PAGE_INDEX,
    sortField: filters.sortField,
    sortDesc: filters.sortDesc,
  });
@@ -150,6 +154,7 @@ function Component() {
            columnOrder={columnOrder}
            setColumnOrder={setColumnOrder}
          />
+          <ResetStateDropdown table={table} />
          <p>
            Rows: <strong>{data?.count}</strong>
          </p>
--- a/frontend/src/routes/db/$dbName/tables/$tableName/index.tsx
+++ b/frontend/src/routes/db/$dbName/tables/$tableName/index.tsx
@@ -97,10 +97,6 @@ function TableDetailsTable() {
          <Link
            from={Route.fullPath}
            to={"./data"}
-            search={{
-              pageIndex: 0,
-              pageSize: 10,
-            }}
            className={cn("flex gap-2 items-center", "hover:underline")}
          >
            Explore data <ArrowRight className={"size-4"} />