diff options
Diffstat (limited to 'lib/payment-terms/table/payment-terms-table-columns.tsx')
| -rw-r--r-- | lib/payment-terms/table/payment-terms-table-columns.tsx | 206 |
1 files changed, 140 insertions, 66 deletions
diff --git a/lib/payment-terms/table/payment-terms-table-columns.tsx b/lib/payment-terms/table/payment-terms-table-columns.tsx index 208723f7..08d30482 100644 --- a/lib/payment-terms/table/payment-terms-table-columns.tsx +++ b/lib/payment-terms/table/payment-terms-table-columns.tsx @@ -1,76 +1,71 @@ -import { type ColumnDef, type Row } from "@tanstack/react-table"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; -import { Ellipsis } from "lucide-react"; +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" +import { Ellipsis } from "lucide-react" + +import { formatDateTime } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, + DropdownMenuShortcut, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { paymentTerms } from "@/db/schema/procurementRFQ"; -import { toast } from "sonner"; -import { deletePaymentTerm } from "../service"; +} from "@/components/ui/dropdown-menu" -type PaymentTerm = typeof paymentTerms.$inferSelect; +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { paymentTerms } from "@/db/schema/procurementRFQ" interface GetColumnsProps { - setRowAction: (action: { type: string; row: Row<PaymentTerm> }) => void; - onSuccess: () => void; + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<typeof paymentTerms.$inferSelect> | null>> } -const handleDelete = async (code: string, onSuccess: () => void) => { - const result = await deletePaymentTerm(code); - if (result.success) { - toast.success("삭제 완료"); - onSuccess(); - } else { - toast.error(result.error || "삭제 실패"); +/** + * tanstack table 컬럼 정의 + */ +export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<typeof paymentTerms.$inferSelect>[] { + // ---------------------------------------------------------------- + // 1) select 컬럼 (체크박스) + // ---------------------------------------------------------------- + const selectColumn: ColumnDef<typeof paymentTerms.$inferSelect> = { + 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" + /> + ), + maxSize: 30, + enableSorting: false, + enableHiding: false, } -}; -export function getColumns({ setRowAction, onSuccess }: GetColumnsProps): ColumnDef<PaymentTerm>[] { - return [ - { - id: "code", - header: () => <div>코드</div>, - cell: ({ row }) => <div>{row.original.code}</div>, - enableSorting: true, - enableHiding: false, - }, - { - id: "description", - header: () => <div>설명</div>, - cell: ({ row }) => <div>{row.original.description}</div>, - enableSorting: true, - enableHiding: false, - }, - { - id: "isActive", - header: () => <div>상태</div>, - cell: ({ row }) => ( - <Badge variant={row.original.isActive ? "default" : "secondary"}> - {row.original.isActive ? "활성" : "비활성"} - </Badge> - ), - enableSorting: true, - enableHiding: false, - }, - { - id: "createdAt", - header: () => <div>생성일</div>, - cell: ({ row }) => { - const value = row.original.createdAt; - const date = value ? new Date(value) : null; - return date ? date.toLocaleDateString() : ""; - }, - enableSorting: true, - enableHiding: false, - }, - { - id: "actions", - cell: ({ row }) => ( + // ---------------------------------------------------------------- + // 2) actions 컬럼 (Dropdown 메뉴) + // ---------------------------------------------------------------- + const actionsColumn: ColumnDef<typeof paymentTerms.$inferSelect> = { + id: "actions", + enableHiding: false, + cell: function Cell({ row }) { + return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button @@ -83,20 +78,99 @@ export function getColumns({ setRowAction, onSuccess }: GetColumnsProps): Column </DropdownMenuTrigger> <DropdownMenuContent align="end" className="w-40"> <DropdownMenuItem - onSelect={() => setRowAction({ type: "edit", row })} + onSelect={() => setRowAction({ row, type: "update" })} > - 수정 + Edit </DropdownMenuItem> + <DropdownMenuSeparator /> <DropdownMenuItem - onSelect={() => handleDelete(row.original.code, onSuccess)} - className="text-destructive" + onSelect={() => setRowAction({ row, type: "delete" })} > - 삭제 + Delete + <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> + ) + }, + maxSize: 30, + } + + // ---------------------------------------------------------------- + // 3) 데이터 컬럼들 + // ---------------------------------------------------------------- + const dataColumns: ColumnDef<typeof paymentTerms.$inferSelect>[] = [ + { + accessorKey: "code", + enableResizing: true, + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="코드" /> + ), + meta: { + excelHeader: "코드", + type: "text", + }, + cell: ({ row }) => row.getValue("code") ?? "", + minSize: 80 + }, + { + accessorKey: "description", + enableResizing: true, + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="설명" /> ), + meta: { + excelHeader: "설명", + type: "text", + }, + cell: ({ row }) => row.getValue("description") ?? "", + minSize: 80 }, - ]; + { + accessorKey: "isActive", + enableResizing: true, + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="상태" /> + ), + meta: { + excelHeader: "상태", + type: "boolean", + }, + cell: ({ row }) => { + const isActive = row.getValue("isActive") as boolean + return ( + <Badge variant={isActive ? "default" : "secondary"}> + {isActive ? "활성" : "비활성"} + </Badge> + ) + }, + minSize: 80 + }, + { + accessorKey: "createdAt", + enableResizing: true, + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="생성일" /> + ), + meta: { + excelHeader: "생성일", + type: "date", + }, + cell: ({ row }) => { + const dateVal = row.getValue("createdAt") as Date + return formatDateTime(dateVal) + }, + minSize: 80 + } + ] + + // ---------------------------------------------------------------- + // 4) 최종 컬럼 배열: select, dataColumns, actions + // ---------------------------------------------------------------- + return [ + selectColumn, + ...dataColumns, + actionsColumn, + ] }
\ No newline at end of file |