diff options
Diffstat (limited to 'lib/avl/table/columns-detail.tsx')
| -rw-r--r-- | lib/avl/table/columns-detail.tsx | 516 |
1 files changed, 63 insertions, 453 deletions
diff --git a/lib/avl/table/columns-detail.tsx b/lib/avl/table/columns-detail.tsx index 204d34f5..84ad9d9a 100644 --- a/lib/avl/table/columns-detail.tsx +++ b/lib/avl/table/columns-detail.tsx @@ -1,28 +1,8 @@ import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Edit, Trash2 } from "lucide-react" -import { type ColumnDef, TableMeta } from "@tanstack/react-table" +import { type ColumnDef } from "@tanstack/react-table" import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { EditableCell } from "@/components/data-table/editable-cell" -// 수정 여부 확인 헬퍼 함수 -const getIsModified = (table: any, rowId: string, fieldName: string) => { - const pendingChanges = table.options.meta?.getPendingChanges?.() || {} - return String(rowId) in pendingChanges && fieldName in pendingChanges[String(rowId)] -} - -// 테이블 메타 타입 확장 -declare module "@tanstack/react-table" { - interface TableMeta<TData> { - onCellUpdate?: (id: string, field: keyof TData, newValue: any) => Promise<void> - onCellCancel?: (id: string, field: keyof TData) => void - onAction?: (action: string, data?: any) => void - onSaveEmptyRow?: (tempId: string) => Promise<void> - onCancelEmptyRow?: (tempId: string) => void - isEmptyRow?: (id: string) => boolean - } -} // AVL 상세 아이템 타입 export type AvlDetailItem = { @@ -90,29 +70,6 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: "기본 정보", columns: [ { - id: "select", - header: ({ table }) => ( - <Checkbox - checked={ - table.getIsAllPageRowsSelected() || - (table.getIsSomePageRowsSelected() && "indeterminate") - } - onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - /> - ), - cell: ({ row }) => ( - <Checkbox - checked={row.getIsSelected()} - onCheckedChange={(value) => row.toggleSelected(!!value)} - aria-label="Select row" - /> - ), - enableSorting: false, - enableHiding: false, - size: 50, - }, - { accessorKey: "no", header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="No." /> @@ -124,33 +81,12 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="Equip/Bulk 구분" /> ), - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("equipBulkDivision") as string - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "equipBulkDivision", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "equipBulkDivision") - return ( - <EditableCell - value={value} - type="select" - onSave={onSave} - options={[ - { label: "EQUIP", value: "EQUIP" }, - { label: "BULK", value: "BULK" } - ]} - placeholder="구분 선택" - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> + <Badge variant="outline"> + {value || "-"} + </Badge> ) }, size: 120, @@ -160,31 +96,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="설계공종" /> ), - cell: ({ row, table }) => { - const value = row.getValue("disciplineName") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "disciplineName", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "disciplineName") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="설계공종 입력" - maxLength={50} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("disciplineName") as string + return <span>{value || "-"}</span> }, size: 120, }, @@ -193,31 +107,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="고객사 AVL 자재명" /> ), - cell: ({ row, table }) => { - const value = row.getValue("materialNameCustomerSide") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "materialNameCustomerSide", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "materialNameCustomerSide") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="자재명 입력" - maxLength={100} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("materialNameCustomerSide") as string + return <span>{value || "-"}</span> }, size: 150, }, @@ -226,31 +118,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="패키지 정보" /> ), - cell: ({ row, table }) => { - const value = row.getValue("packageName") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "packageName", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "packageName") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="패키지명 입력" - maxLength={100} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("packageName") as string + return <span>{value || "-"}</span> }, size: 130, }, @@ -259,31 +129,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="자재그룹코드" /> ), - cell: ({ row, table }) => { - const value = row.getValue("materialGroupCode") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "materialGroupCode", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "materialGroupCode") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="자재그룹코드 입력" - maxLength={50} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("materialGroupCode") as string + return <span>{value || "-"}</span> }, size: 120, }, @@ -292,31 +140,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="자재그룹명" /> ), - cell: ({ row, table }) => { - const value = row.getValue("materialGroupName") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "materialGroupName", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "materialGroupName") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="자재그룹명 입력" - maxLength={100} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("materialGroupName") as string + return <span>{value || "-"}</span> }, size: 130, }, @@ -325,31 +151,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="협력업체코드" /> ), - cell: ({ row, table }) => { - const value = row.getValue("vendorCode") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "vendorCode", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "vendorCode") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="협력업체코드 입력" - maxLength={50} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("vendorCode") as string + return <span>{value || "-"}</span> }, size: 120, }, @@ -358,31 +162,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="협력업체명" /> ), - cell: ({ row, table }) => { - const value = row.getValue("vendorName") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "vendorName", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "vendorName") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="협력업체명 입력" - maxLength={100} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("vendorName") as string + return <span className="font-medium">{value || "-"}</span> }, size: 140, }, @@ -391,31 +173,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="AVL 등재업체명" /> ), - cell: ({ row, table }) => { - const value = row.getValue("avlVendorName") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "avlVendorName", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "avlVendorName") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="AVL 등재업체명 입력" - maxLength={100} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("avlVendorName") as string + return <span>{value || "-"}</span> }, size: 140, }, @@ -424,34 +184,20 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="등급 (Tier)" /> ), - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("tier") as string - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "tier", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "tier") - + if (!value) return <span>-</span> + + const tierColor = { + "Tier 1": "bg-green-100 text-green-800", + "Tier 2": "bg-yellow-100 text-yellow-800", + "Tier 3": "bg-red-100 text-red-800" + }[value] || "bg-gray-100 text-gray-800" + return ( - <EditableCell - value={value} - type="select" - onSave={onSave} - options={[ - { label: "Tier 1", value: "Tier 1" }, - { label: "Tier 2", value: "Tier 2" }, - { label: "Tier 3", value: "Tier 3" } - ]} - placeholder="등급 선택" - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> + <Badge className={tierColor}> + {value} + </Badge> ) }, size: 100, @@ -467,28 +213,12 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="FA 대상" /> ), - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("faTarget") as boolean - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "faTarget", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "faTarget") - return ( - <EditableCell - value={value} - type="checkbox" - onSave={onSave} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> + <Badge variant={value ? "default" : "secondary"}> + {value ? "대상" : "비대상"} + </Badge> ) }, size: 80, @@ -498,31 +228,9 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="FA 현황" /> ), - cell: ({ row, table }) => { - const value = row.getValue("faStatus") - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "faStatus", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "faStatus") - - return ( - <EditableCell - value={value} - type="text" - onSave={onSave} - placeholder="FA 현황 입력" - maxLength={50} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} - /> - ) + cell: ({ row }) => { + const value = row.getValue("faStatus") as string + return <span>{value || "-"}</span> }, size: 100, }, @@ -535,27 +243,13 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ { accessorKey: "shiAvl", header: "AVL", - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("shiAvl") as boolean - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "shiAvl", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "shiAvl") - return ( - <EditableCell - value={value} - type="checkbox" - onSave={onSave} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} + <Checkbox + checked={value} + disabled + aria-label="SHI AVL 등재 여부" /> ) }, @@ -564,27 +258,13 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ { accessorKey: "shiBlacklist", header: "Blacklist", - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("shiBlacklist") as boolean - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "shiBlacklist", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "shiBlacklist") - return ( - <EditableCell - value={value} - type="checkbox" - onSave={onSave} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} + <Checkbox + checked={value} + disabled + aria-label="SHI Blacklist 등재 여부" /> ) }, @@ -593,27 +273,13 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ { accessorKey: "shiBcc", header: "BCC", - cell: ({ row, table }) => { + cell: ({ row }) => { const value = row.getValue("shiBcc") as boolean - const isEmptyRow = String(row.original.id).startsWith('temp-') - - const onSave = async (newValue: any) => { - if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "shiBcc", newValue) - } - } - - const isModified = getIsModified(table, row.original.id, "shiBcc") - return ( - <EditableCell - value={value} - type="checkbox" - onSave={onSave} - autoSave={true} - disabled={false} - initialEditMode={isEmptyRow} - isModified={isModified} + <Checkbox + checked={value} + disabled + aria-label="SHI BCC 등재 여부" /> ) }, @@ -621,60 +287,4 @@ export const columns: ColumnDef<AvlDetailItem>[] = [ }, ], }, - // 액션 컬럼 - { - id: "actions", - header: "액션", - cell: ({ row, table }) => { - const isEmptyRow = String(row.original.id).startsWith('temp-') - - return ( - <div className="flex items-center gap-2"> - {!isEmptyRow && ( - <> - <Button - variant="ghost" - size="sm" - onClick={() => table.options.meta?.onAction?.('edit', row.original)} - className="h-8 w-8 p-0" - > - <Edit className="h-4 w-4" /> - </Button> - <Button - variant="ghost" - size="sm" - onClick={() => table.options.meta?.onAction?.('delete', row.original)} - className="h-8 w-8 p-0 text-destructive hover:text-destructive" - > - <Trash2 className="h-4 w-4" /> - </Button> - </> - )} - {isEmptyRow && ( - <> - <Button - variant="ghost" - size="sm" - onClick={() => table.options.meta?.onSaveEmptyRow?.(row.original.id)} - className="h-8 w-8 p-0" - > - 저장 - </Button> - <Button - variant="ghost" - size="sm" - onClick={() => table.options.meta?.onCancelEmptyRow?.(row.original.id)} - className="h-8 w-8 p-0" - > - 취소 - </Button> - </> - )} - </div> - ) - }, - size: 100, - enableSorting: false, - enableHiding: false, - }, ] |