1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
"use client";
import React, { useState } from "react";
import {
useReactTable,
getCoreRowModel,
flexRender,
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { ChevronRight } from "lucide-react";
import { swpDocumentColumns } from "./swp-table-columns";
import { SwpDocumentDetailDialog } from "./swp-document-detail-dialog";
import type { DocumentListItem } from "@/lib/swp/document-service";
interface SwpTableProps {
documents: DocumentListItem[];
projNo: string;
vendorCode: string;
userId: string;
}
export function SwpTable({
documents,
projNo,
vendorCode,
userId,
}: SwpTableProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [selectedDocument, setSelectedDocument] = useState<DocumentListItem | null>(null);
const table = useReactTable({
data: documents,
columns: swpDocumentColumns,
getCoreRowModel: getCoreRowModel(),
});
// 문서 클릭 핸들러 - Dialog 열기
const handleDocumentClick = (document: DocumentListItem) => {
setSelectedDocument(document);
setDialogOpen(true);
};
return (
<div className="space-y-4">
{/* 테이블 */}
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="hover:bg-muted/50 cursor-pointer"
onClick={() => handleDocumentClick(row.original)}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{cell.column.id === "expander" ? (
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
>
<ChevronRight className="h-4 w-4" />
</Button>
) : (
flexRender(cell.column.columnDef.cell, cell.getContext())
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={swpDocumentColumns.length} className="h-24 text-center">
데이터 없음
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
{/* 문서 상세 Dialog */}
<SwpDocumentDetailDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
document={selectedDocument}
projNo={projNo}
vendorCode={vendorCode}
userId={userId}
/>
</div>
);
}
|
