From 7c562e8057642ee7187ad0736b65723c3da3857f Mon Sep 17 00:00:00 2001 From: andres Date: Sat, 13 Jul 2024 12:59:07 +0200 Subject: [PATCH] remove prime ng and fix table layout. Fix select --- frontend/bun.lockb | Bin 138157 -> 138157 bytes .../components/db-table-view/data-table.tsx | 193 +++++++++--------- .../{ => sidebar}/session-selector.tsx | 6 +- frontend/src/components/sidebar/sidebar.tsx | 119 +++++++++++ frontend/src/components/ui/select.tsx | 2 +- frontend/src/components/ui/table.tsx | 8 +- frontend/src/index.css | 4 +- frontend/src/routes/__root.tsx | 115 +---------- 8 files changed, 234 insertions(+), 213 deletions(-) rename frontend/src/components/{ => sidebar}/session-selector.tsx (90%) create mode 100644 frontend/src/components/sidebar/sidebar.tsx diff --git a/frontend/bun.lockb b/frontend/bun.lockb index c031b9245b4934b0ff82f804d0a3089665a4d4ec..d57c95af6dbcbbeb76fb6b8963b2abd2aa79d79f 100644 GIT binary patch delta 25 hcmZ3xon!5Gj)pCa`ibm}afW(^dIsCg5*f>P0RVON2yy@b delta 25 dcmZ3xon!5Gj)pCa`ibmJ3}CR`ERnH%7XWEG2PXgk diff --git a/frontend/src/components/db-table-view/data-table.tsx b/frontend/src/components/db-table-view/data-table.tsx index 9421b9d..e0d7ae7 100644 --- a/frontend/src/components/db-table-view/data-table.tsx +++ b/frontend/src/components/db-table-view/data-table.tsx @@ -5,7 +5,6 @@ import { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, - ScrollArea, Table, TableBody, TableCell, @@ -167,7 +166,7 @@ export const DataTable = ({ }); return ( -
+

{tableName} @@ -201,103 +200,105 @@ export const DataTable = ({

- - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - const sorted = header.column.getIsSorted(); +
+
+
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + const sorted = header.column.getIsSorted(); - return ( - - -
header.column.resetSize(), - onMouseDown: header.getResizeHandler(), - onTouchStart: header.getResizeHandler(), - className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`, + return ( + - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} + > + +
header.column.resetSize(), + onMouseDown: header.getResizeHandler(), + onTouchStart: header.getResizeHandler(), + className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`, + }} + /> + + ); + })} - )) - ) : ( - - - No results. - - - )} - -
- + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + + +
+
); diff --git a/frontend/src/components/session-selector.tsx b/frontend/src/components/sidebar/session-selector.tsx similarity index 90% rename from frontend/src/components/session-selector.tsx rename to frontend/src/components/sidebar/session-selector.tsx index 7a648e8..54966f9 100644 --- a/frontend/src/components/session-selector.tsx +++ b/frontend/src/components/sidebar/session-selector.tsx @@ -49,8 +49,10 @@ function RawSessionSelector() { value={currentSessionId ? currentSessionId.toString() : ""} onValueChange={handleSessionSelected} > - - + + + + {mappedSessions} diff --git a/frontend/src/components/sidebar/sidebar.tsx b/frontend/src/components/sidebar/sidebar.tsx new file mode 100644 index 0000000..ae3bbb0 --- /dev/null +++ b/frontend/src/components/sidebar/sidebar.tsx @@ -0,0 +1,119 @@ +import { SessionSelector } from "@/components/sidebar/session-selector"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, + buttonVariants, +} from "@/components/ui"; +import { cn } from "@/lib/utils"; +import { Route } from "@/routes/__root"; +import { useDatabasesListQuery, useTablesListQuery } from "@/services/db"; +import { useUiStore } from "@/state"; +import { Link, useNavigate, useParams } from "@tanstack/react-router"; +import { Database, Rows3 } from "lucide-react"; +import type { PropsWithChildren } from "react"; + +function SidebarContent() { + const { data } = useDatabasesListQuery(); + + const showSidebar = useUiStore.use.showSidebar(); + const params = useParams({ strict: false }); + const dbName = params.dbName ?? ""; + const { data: tables } = useTablesListQuery({ dbName }); + const navigate = useNavigate({ from: Route.fullPath }); + + const handleSelectedDb = (dbName: string) => { + void navigate({ to: "/db/$dbName/tables", params: { dbName } }); + }; + if (!showSidebar) return null; + + return ( + <> + + + + + ); +} + +function SidebarContainer({ children }: PropsWithChildren) { + return ; +} + +export function Sidebar() { + return ( + + + + ); +} diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx index 3cfdb52..95ec012 100644 --- a/frontend/src/components/ui/select.tsx +++ b/frontend/src/components/ui/select.tsx @@ -21,7 +21,7 @@ const SelectTrigger = forwardRef< span]:line-clamp-1", + "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className, )} {...props} diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx index 2ad2e0b..a7b09ae 100644 --- a/frontend/src/components/ui/table.tsx +++ b/frontend/src/components/ui/table.tsx @@ -8,7 +8,7 @@ import { const Table = forwardRef>( ({ className, ...props }, ref) => ( -
+
>(({ className, ...props }, ref) => ( - + )); TableHeader.displayName = "TableHeader"; diff --git a/frontend/src/index.css b/frontend/src/index.css index 0943dc8..7841e0c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -74,11 +74,11 @@ text-underline-position: under; --sidebar-width: 264px; } - + .sidebar-closed { --sidebar-width: 0; } - + .grid-rows-layout { grid-template-rows: 60px 1fr; } diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx index 8e8271d..9869dfd 100644 --- a/frontend/src/routes/__root.tsx +++ b/frontend/src/routes/__root.tsx @@ -1,27 +1,11 @@ -import { SessionSelector } from "@/components/session-selector"; import { SettingsDialog } from "@/components/settings-dialog"; -import { - Button, - ModeToggle, - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, - buttonVariants, -} from "@/components/ui"; +import { Sidebar } from "@/components/sidebar/sidebar"; +import { Button, ModeToggle } from "@/components/ui"; import { cn } from "@/lib/utils"; -import { useDatabasesListQuery, useTablesListQuery } from "@/services/db"; import { useUiStore } from "@/state"; -import { - Link, - Outlet, - createRootRoute, - useNavigate, - useParams, -} from "@tanstack/react-router"; +import { Link, Outlet, createRootRoute } from "@tanstack/react-router"; import { TanStackRouterDevtools } from "@tanstack/router-devtools"; -import { Database, PanelLeft, PanelLeftClose, Rows3 } from "lucide-react"; +import { PanelLeft, PanelLeftClose } from "lucide-react"; export const Route = createRootRoute({ component: Root, @@ -31,16 +15,6 @@ function Root() { const showSidebar = useUiStore.use.showSidebar(); const toggleSidebar = useUiStore.use.toggleSidebar(); - const { data } = useDatabasesListQuery(); - const params = useParams({ strict: false }); - const dbName = params.dbName ?? ""; - const navigate = useNavigate({ from: Route.fullPath }); - - const handleSelectedDb = (dbName: string) => { - void navigate({ to: "/db/$dbName/tables", params: { dbName } }); - }; - - const { data: tables } = useTablesListQuery({ dbName }); return ( <>
- - +