diff options
Diffstat (limited to 'lib/gtc-contract/status/gtc-documents-table-floating-bar.tsx')
| -rw-r--r-- | lib/gtc-contract/status/gtc-documents-table-floating-bar.tsx | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/lib/gtc-contract/status/gtc-documents-table-floating-bar.tsx b/lib/gtc-contract/status/gtc-documents-table-floating-bar.tsx new file mode 100644 index 00000000..a9139ed2 --- /dev/null +++ b/lib/gtc-contract/status/gtc-documents-table-floating-bar.tsx @@ -0,0 +1,90 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { Download, X } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { Separator } from "@/components/ui/separator" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" + +import { exportTableToCSV } from "@/lib/export" +import { type GtcDocumentWithRelations } from "@/db/schema/gtc" +import { DeleteGtcDocumentsDialog } from "./delete-gtc-documents-dialog" + +interface GtcDocumentsTableFloatingBarProps { + table: Table<GtcDocumentWithRelations> +} + +export function GtcDocumentsTableFloatingBar({ + table, +}: GtcDocumentsTableFloatingBarProps) { + const rows = table.getFilteredSelectedRowModel().rows + + const [isPending, startTransition] = React.useTransition() + + // Clear selection on Escape key press + React.useEffect(() => { + function handleKeyDown(event: KeyboardEvent) { + if (event.key === "Escape") { + table.toggleAllRowsSelected(false) + } + } + + document.addEventListener("keydown", handleKeyDown) + return () => document.removeEventListener("keydown", handleKeyDown) + }, [table]) + + return ( + <div className="fixed inset-x-0 bottom-4 z-50 mx-auto w-fit px-4"> + <div className="w-full overflow-x-auto"> + <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-card p-2 shadow-2xl"> + <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1"> + <span className="whitespace-nowrap text-xs"> + {rows.length} selected + </span> + <Separator orientation="vertical" className="ml-2 mr-1" /> + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="icon" + className="size-5 hover:border" + onClick={() => table.toggleAllRowsSelected(false)} + > + <X className="size-3.5 shrink-0" aria-hidden="true" /> + </Button> + </TooltipTrigger> + <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900"> + <p>Clear selection</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + <Separator orientation="vertical" className="hidden h-5 sm:block" /> + <div className="flex items-center gap-1.5"> + <Button + variant="secondary" + size="sm" + onClick={() => + exportTableToCSV(table, { + filename: "gtc-documents", + excludeColumns: ["select", "actions"], + }) + } + disabled={isPending} + > + <Download className="mr-2 size-4" aria-hidden="true" /> + Export + </Button> + <DeleteGtcDocumentsDialog + gtcDocuments={rows.map((row) => row.original)} + onSuccess={() => table.toggleAllRowsSelected(false)} + /> + </div> + </div> + </div> + </div> + ) +}
\ No newline at end of file |
