diff options
Diffstat (limited to 'lib/vendor-document-list/table/doc-table-column.tsx')
| -rw-r--r-- | lib/vendor-document-list/table/doc-table-column.tsx | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/lib/vendor-document-list/table/doc-table-column.tsx b/lib/vendor-document-list/table/doc-table-column.tsx new file mode 100644 index 00000000..30fb06b0 --- /dev/null +++ b/lib/vendor-document-list/table/doc-table-column.tsx @@ -0,0 +1,202 @@ +"use client" + +import * as React from "react" +import { ColumnDef } from "@tanstack/react-table" +import { formatDate, formatDateTime } from "@/lib/utils" +import { Checkbox } from "@/components/ui/checkbox" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { DataTableRowAction } from "@/types/table" +import { DocumentStagesView } from "@/db/schema/vendorDocu" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { Button } from "@/components/ui/button" +import { Ellipsis } from "lucide-react" +import { Badge } from "@/components/ui/badge" + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<DocumentStagesView> | null>> +} + +export function getColumns({ + setRowAction, +}: GetColumnsProps): ColumnDef<DocumentStagesView>[] { + return [ + { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + size:40, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "docNumber", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Doc Number" /> + ), + cell: ({ row }) => <div>{row.getValue("docNumber")}</div>, + meta: { + excelHeader: "Doc Number" + }, + enableResizing: true, + minSize: 50, + size: 100, + }, + { + accessorKey: "title", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Doc title" /> + ), + cell: ({ row }) => <div>{row.getValue("title")}</div>, + meta: { + excelHeader: "Doc title" + }, + enableResizing: true, + minSize: 100, + size: 160, + }, + + { + accessorKey: "stageCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Stage Count" /> + ), + cell: ({ row }) => <div>{row.getValue("stageCount")}</div>, + meta: { + excelHeader: "Stage Count" + }, + enableResizing: true, + minSize: 50, + size: 50, + }, + { + accessorKey: "stageList", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Stage List" /> + ), + cell: ({ row }) => { + const stageNames = row.getValue("stageList") as string[] | null + + if (!stageNames || stageNames.length === 0) { + return <span className="text-sm text-muted-foreground italic">No stages</span> + } + + return ( + <div className="flex flex-wrap gap-2"> + {stageNames.map((stageName, idx) => ( + <Badge variant="secondary" key={idx}> + {stageName} + </Badge> + ))} + </div> + ) + }, + enableResizing: true, + minSize: 120, + size: 120, + }, + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="status" /> + ), + cell: ({ row }) => <div>{row.getValue("status")}</div>, + meta: { + excelHeader: "status" + }, + enableResizing: true, + minSize: 60, + size: 60, + }, + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Created At" /> + ), + cell: ({ cell }) => formatDateTime(cell.getValue() as Date), + meta: { + excelHeader: "created At" + }, + enableResizing: true, + minSize: 120, + size: 120, + }, + { + accessorKey: "updatedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Updated At" /> + ), + cell: ({ cell }) => formatDateTime(cell.getValue() as Date), + meta: { + excelHeader: "updated At" + }, + enableResizing: true, + minSize: 120, + size: 120, + }, + { + id: "actions", + enableHiding: false, + cell: function Cell({ row }) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button + aria-label="Open menu" + variant="ghost" + className="flex size-7 p-0 data-[state=open]:bg-muted" + > + <Ellipsis className="size-4" aria-hidden="true" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="w-40"> + <DropdownMenuItem + onSelect={() => setRowAction({ row, type: "update" })} + > + Edit + </DropdownMenuItem> + + <DropdownMenuItem + onSelect={() => setRowAction({ row, type: "delete" })} + > + Delete + <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) + }, + size: 40, + } + ] +}
\ No newline at end of file |