From 4b2d468701ab069fdc2347f345da56abe37c70be Mon Sep 17 00:00:00 2001 From: rlaks5757 Date: Fri, 28 Mar 2025 14:25:29 +0900 Subject: Reapply "Merge branch 'dev' into feature/kiman" This reverts commit 494a473964fa85b36c7846750c3a012a3c8468c7. --- lib/poa/table/poa-table-columns.tsx | 165 ++++++++++++++++++++++++ lib/poa/table/poa-table-toolbar-actions.tsx | 45 +++++++ lib/poa/table/poa-table.tsx | 189 ++++++++++++++++++++++++++++ 3 files changed, 399 insertions(+) create mode 100644 lib/poa/table/poa-table-columns.tsx create mode 100644 lib/poa/table/poa-table-toolbar-actions.tsx create mode 100644 lib/poa/table/poa-table.tsx (limited to 'lib/poa/table') diff --git a/lib/poa/table/poa-table-columns.tsx b/lib/poa/table/poa-table-columns.tsx new file mode 100644 index 00000000..b362e54c --- /dev/null +++ b/lib/poa/table/poa-table-columns.tsx @@ -0,0 +1,165 @@ +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" +import { InfoIcon, PenIcon } from "lucide-react" + +import { formatDate } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { POADetail } from "@/db/schema/contract" +import { poaColumnsConfig } from "@/config/poaColumnsConfig" + +interface GetColumnsProps { + setRowAction: React.Dispatch | null>> +} + +/** + * tanstack table column definitions with nested headers + */ +export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef[] { + // ---------------------------------------------------------------- + // 1) actions column (buttons for item info) + // ---------------------------------------------------------------- + const actionsColumn: ColumnDef = { + id: "actions", + enableHiding: false, + cell: function Cell({ row }) { + const hasSignature = row.original.hasSignature; + + return ( +
+ {/* Item Info Button */} + + + + + + + View Item Info + + + + + {/* Signature Request Button - only show if no signature exists */} + {!hasSignature && ( + + + + + + + Request Electronic Signature + + + + )} +
+ ); + }, + size: 80, + }; + + // ---------------------------------------------------------------- + // 2) Regular columns grouped by group name + // ---------------------------------------------------------------- + // 2-1) groupMap: { [groupName]: ColumnDef[] } + const groupMap: Record[]> = {}; + + poaColumnsConfig.forEach((cfg) => { + // Use "_noGroup" if no group is specified + const groupName = cfg.group || "_noGroup"; + + if (!groupMap[groupName]) { + groupMap[groupName] = []; + } + + // Child column definition + const childCol: ColumnDef = { + accessorKey: cfg.id, + enableResizing: true, + header: ({ column }) => ( + + ), + meta: { + excelHeader: cfg.excelHeader, + group: cfg.group, + type: cfg.type, + }, + cell: ({ cell }) => { + const value = cell.getValue(); + + if (cfg.type === "date") { + const dateVal = value as Date; + return ( +
+ {formatDate(dateVal)} +
+ ); + } + if (cfg.type === "number") { + const numVal = value as number; + return ( +
+ {numVal ? numVal.toLocaleString() : "-"} +
+ ); + } + return ( +
+ {value ?? "-"} +
+ ); + }, + }; + + groupMap[groupName].push(childCol); + }); + + // ---------------------------------------------------------------- + // 2-2) Create actual parent columns (groups) from the groupMap + // ---------------------------------------------------------------- + const nestedColumns: ColumnDef[] = []; + + // Order can be fixed by pre-defining group order or sorting + Object.entries(groupMap).forEach(([groupName, colDefs]) => { + if (groupName === "_noGroup") { + // No group → Add as top-level columns + nestedColumns.push(...colDefs); + } else { + // Parent column + nestedColumns.push({ + id: groupName, + header: groupName, + columns: colDefs, + }); + } + }); + + // ---------------------------------------------------------------- + // 3) Final column array: nestedColumns + actionsColumn + // ---------------------------------------------------------------- + return [ + ...nestedColumns, + actionsColumn, + ]; +} \ No newline at end of file diff --git a/lib/poa/table/poa-table-toolbar-actions.tsx b/lib/poa/table/poa-table-toolbar-actions.tsx new file mode 100644 index 00000000..97a9cc55 --- /dev/null +++ b/lib/poa/table/poa-table-toolbar-actions.tsx @@ -0,0 +1,45 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { Download, RefreshCcw } from "lucide-react" + +import { exportTableToExcel } from "@/lib/export" +import { Button } from "@/components/ui/button" +import { POADetail } from "@/db/schema/contract" + +interface ItemsTableToolbarActionsProps { + table: Table +} + +export function PoaTableToolbarActions({ table }: ItemsTableToolbarActionsProps) { + return ( +
+ {/** Refresh 버튼 */} + + + {/** Export 버튼 */} + +
+ ) +} \ No newline at end of file diff --git a/lib/poa/table/poa-table.tsx b/lib/poa/table/poa-table.tsx new file mode 100644 index 00000000..a5cad02a --- /dev/null +++ b/lib/poa/table/poa-table.tsx @@ -0,0 +1,189 @@ +"use client" + +import * as React from "react" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" + +import { getChangeOrders } from "../service" +import { POADetail } from "@/db/schema/contract" +import { getColumns } from "./poa-table-columns" +import { PoaTableToolbarActions } from "./poa-table-toolbar-actions" + +interface ItemsTableProps { + promises: Promise< + [ + Awaited>, + ] + > +} + +export function ChangeOrderListsTable({ promises }: ItemsTableProps) { + const [result] = React.use(promises) + const { data, pageCount } = result + + const [rowAction, setRowAction] = + React.useState | null>(null) + + // Handle row actions + React.useEffect(() => { + if (!rowAction) return + + if (rowAction.type === "items") { + // Handle items view action + setRowAction(null) + } + }, [rowAction]) + + const columns = React.useMemo( + () => getColumns({ setRowAction }), + [setRowAction] + ) + + const filterFields: DataTableFilterField[] = [ + { + id: "contractNo", + label: "계약번호", + }, + { + id: "originalContractName", + label: "계약명", + }, + { + id: "approvalStatus", + label: "승인 상태", + }, + ] + + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { + id: "contractNo", + label: "계약번호", + type: "text", + }, + { + id: "originalContractName", + label: "계약명", + type: "text", + }, + { + id: "projectId", + label: "프로젝트 ID", + type: "number", + }, + { + id: "vendorId", + label: "벤더 ID", + type: "number", + }, + { + id: "originalStatus", + label: "상태", + type: "text", + }, + { + id: "deliveryTerms", + label: "납품조건", + type: "text", + }, + { + id: "deliveryDate", + label: "납품기한", + type: "date", + }, + { + id: "deliveryLocation", + label: "납품장소", + type: "text", + }, + { + id: "currency", + label: "통화", + type: "text", + }, + { + id: "totalAmount", + label: "총 금액", + type: "number", + }, + { + id: "discount", + label: "할인", + type: "number", + }, + { + id: "tax", + label: "세금", + type: "number", + }, + { + id: "shippingFee", + label: "배송비", + type: "number", + }, + { + id: "netTotal", + label: "최종 금액", + type: "number", + }, + { + id: "changeReason", + label: "변경 사유", + type: "text", + }, + { + id: "approvalStatus", + label: "승인 상태", + type: "text", + }, + { + id: "createdAt", + label: "생성일", + type: "date", + }, + { + id: "updatedAt", + label: "수정일", + type: "date", + }, + ] + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + + + + + + + ) +} \ No newline at end of file -- cgit v1.2.3