"use client" import * as React from "react" import type { DataTableAdvancedFilterField } 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 { Button } from "@/components/ui/button" import { toast } from "sonner" import { getColumns } from "./avl-table-columns" import { handleAvlActionAction } from "../service" import type { AvlListItem } from "../types" import { AvlHistoryModal, type AvlHistoryRecord } from "@/lib/avl/components/avl-history-modal" import { getAvlHistory } from "@/lib/avl/history-service" // 테이블 메타 타입 확장 declare module "@tanstack/react-table" { interface TableMeta { onCellUpdate?: (id: string, field: keyof TData, newValue: string | boolean) => Promise onCellCancel?: (id: string, field: keyof TData) => void onAction?: (action: string, data?: Partial) => void onSaveEmptyRow?: (tempId: string) => Promise onCancelEmptyRow?: (tempId: string) => void isEmptyRow?: (id: string) => boolean getPendingChanges?: () => Record> } } interface AvlTableProps { data: AvlListItem[] pageCount?: number isLoading?: boolean // 로딩 상태 onRegistrationModeChange?: (mode: 'standard' | 'project') => void // 등록 모드 변경 콜백 onRowSelect?: (selectedRow: AvlListItem | null) => void // 행 선택 콜백 } export function AvlTable({ data, pageCount, isLoading, onRegistrationModeChange, onRowSelect }: AvlTableProps) { // 단일 선택을 위한 상태 (shi-vendor-po 방식) const [selectedRows, setSelectedRows] = React.useState([]) // 히스토리 모달 관리 const [historyModalOpen, setHistoryModalOpen] = React.useState(false) const [selectedAvlItem, setSelectedAvlItem] = React.useState(null) // 히스토리 데이터 로드 함수 const loadHistoryData = React.useCallback(async (avlItem: AvlListItem): Promise => { try { const historyRecords = await getAvlHistory(avlItem) return historyRecords.map(record => ({ ...record, vendorInfoSnapshot: record.vendorInfoSnapshot || [] })) } catch (error) { console.error('히스토리 로드 실패:', error) toast.error("히스토리를 불러오는데 실패했습니다.") return [] } }, []) // 필터 필드 정의 const filterFields: DataTableAdvancedFilterField[] = [ { id: "isTemplate", label: "AVL 분류", placeholder: "AVL 분류 선택...", options: [ { label: "프로젝트 AVL", value: "false" }, { label: "표준 AVL", value: "true" }, ], type: "select" }, { id: "constructionSector", label: "공사부문", placeholder: "공사부문 선택...", options: [ { label: "조선", value: "조선" }, { label: "해양", value: "해양" }, ], type: "select" }, { id: "htDivision", label: "H/T 구분", placeholder: "H/T 구분 선택...", options: [ { label: "H", value: "H" }, { label: "T", value: "T" }, ], type: "select" }, ] // 액션 핸들러 const handleAction = React.useCallback(async (action: string, data?: Partial) => { try { switch (action) { case 'avl-registration': // AVL 등록 (통합된 기능) const result = await handleAvlActionAction('avl-registration') if (result.success) { toast.success(result.message) onRegistrationModeChange?.('standard') // 등록 모드 변경 콜백 호출 } else { toast.error(result.message) } break case 'view-detail': // 상세 조회 (페이지 이동) - 원래 방식으로 복원 if (data?.id && !String(data.id).startsWith('temp-')) { console.log('AVL 상세보기 이동:', data.id) // 디버깅용 window.location.href = `/ko/evcp/avl/${data.id}` } break case 'view-history': // 리비전 히스토리 조회 if (data?.id && !String(data.id).startsWith('temp-')) { setSelectedAvlItem(data as AvlListItem) setHistoryModalOpen(true) } break default: toast.error(`알 수 없는 액션: ${action}`) } } catch (error) { console.error('액션 처리 실패:', error) toast.error("액션 처리 중 오류가 발생했습니다.") } }, [onRegistrationModeChange]) // 빈 행 포함한 전체 데이터 const allData = React.useMemo(() => { // 로딩 중에는 빈 데이터를 표시 if (isLoading) { return [] } return [...data] }, [data, isLoading]) // 행 선택 처리 (1개만 선택 가능 - shi-vendor-po 방식) const handleRowSelect = React.useCallback((id: number, selected: boolean) => { if (selected) { setSelectedRows([id]) // 1개만 선택 // 선택된 레코드 찾아서 부모 콜백 호출 const selectedRow = allData.find(row => row.id === id) if (selectedRow) { onRowSelect?.(selectedRow) } } else { setSelectedRows([]) onRowSelect?.(null) } }, [allData, onRowSelect]) // 데이터 테이블 설정 const { table } = useDataTable({ data: allData, columns: getColumns({ selectedRows, onRowSelect: handleRowSelect }), pageCount: pageCount || 1, filterFields, initialState: { sorting: [{ id: "createdAt", desc: true }], columnPinning: { right: ["actions"] }, pagination: { pageIndex: 0, pageSize: 10, }, // 기본 컬럼 사이즈 설정 columnSizing: {}, }, getRowId: (row) => String(row.id), meta: { onAction: handleAction, }, }) return (
{/* 툴바 */}
{/* 액션 버튼들 */}
{/* 데이터 테이블 */} {/* 히스토리 모달 */} { setHistoryModalOpen(false) setSelectedAvlItem(null) }} avlItem={selectedAvlItem} onLoadHistory={loadHistoryData} />
) }