diff options
Diffstat (limited to 'lib/pq/pq-criteria/pq-table-column.tsx')
| -rw-r--r-- | lib/pq/pq-criteria/pq-table-column.tsx | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/lib/pq/pq-criteria/pq-table-column.tsx b/lib/pq/pq-criteria/pq-table-column.tsx new file mode 100644 index 00000000..924d80c4 --- /dev/null +++ b/lib/pq/pq-criteria/pq-table-column.tsx @@ -0,0 +1,232 @@ +"use client" + +import * as React from "react" +import { ColumnDef } from "@tanstack/react-table" +import { formatDate } 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 { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { Button } from "@/components/ui/button" +import { Ellipsis } from "lucide-react" +import { Badge } from "@/components/ui/badge" +import { PqCriterias } from "@/db/schema/pq" + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<PqCriterias> | null>> +} + +export function getColumns({ + setRowAction, +}: GetColumnsProps): ColumnDef<PqCriterias>[] { + 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: "groupName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="대분류" /> + ), + cell: ({ row }) => <div>{row.getValue("groupName")}</div>, + meta: { + excelHeader: "Group Name" + }, + enableResizing: true, + minSize: 60, + size: 100, + }, + { + accessorKey: "subGroupName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="소분류" /> + ), + cell: ({ row }) => <div>{row.getValue("subGroupName") || "-"}</div>, + meta: { + excelHeader: "Sub Group Name" + }, + enableResizing: true, + minSize: 60, + size: 100, + }, + { + accessorKey: "code", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="일련번호" /> + ), + cell: ({ row }) => <div>{row.getValue("code")}</div>, + meta: { + excelHeader: "Code" + }, + enableResizing: true, + minSize: 50, + size: 100, + }, + { + accessorKey: "checkPoint", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="PQ 항목" /> + ), + cell: ({ row }) => <div>{row.getValue("checkPoint")}</div>, + meta: { + excelHeader: "Check Point" + }, + enableResizing: true, + minSize: 180, + size: 180, + }, + + { + accessorKey: "description", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="설명" /> + ), + cell: ({ row }) => { + const text = row.getValue("description") as string + return ( + <div style={{ whiteSpace: "pre-wrap" }}> + {text} + </div> + ) + }, + meta: { + excelHeader: "Description" + }, + enableResizing: true, + minSize: 180, + size: 180, + }, + // { + // accessorKey: "remarks", + // header: ({ column }) => ( + // <DataTableColumnHeaderSimple column={column} title="SHI Comment" /> + // ), + // cell: ({ row }) => { + // const text = row.getValue("remarks") as string + // return ( + // <div style={{ whiteSpace: "pre-wrap" }}> + // {text || "-"} + // </div> + // ) + // }, + // meta: { + // excelHeader: "Remarks" + // }, + // enableResizing: true, + // minSize: 180, + // size: 180, + // }, + { + accessorKey: "inputFormat", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="협력업체 입력사항" /> + ), + cell: ({ row }) => { + const format = row.getValue("inputFormat") as string + const formatLabels = { + TEXT: "텍스트", + FILE: "파일", + EMAIL: "이메일", + PHONE: "전화번호", + NUMBER: "숫자", + "TEXT_FILE": "텍스트 + 파일" + } + return ( + <Badge variant="outline"> + {formatLabels[format as keyof typeof formatLabels] || format} + </Badge> + ) + }, + meta: { + excelHeader: "Input Format" + }, + enableResizing: true, + minSize: 100, + size: 120, + }, + + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="생성일" /> + ), + cell: ({ cell }) => formatDate(cell.getValue() as Date, "ko-KR"), + enableResizing: true, + minSize: 180, + size: 180, + }, + { + accessorKey: "updatedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="수정일" /> + ), + cell: ({ cell }) => formatDate(cell.getValue() as Date, "ko-KR"), + enableResizing: true, + minSize: 180, + size: 180, + }, + { + id: "actions", + enableHiding: false, + cell: function Cell({ row }) { + 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 |