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
121
122
123
124
125
126
127
|
"use client"
import * as React from "react"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { RfqWithAll } from "../types"
/**
* 아이템 구조 예시
* - API 응답에서 quantity가 "string" 형태이므로,
* 숫자로 사용하실 거라면 parse 과정이 필요할 수 있습니다.
*/
export interface RfqItem {
id: number
itemCode: string
itemName: string
itemList: string | null
subItemList: string | null
quantity: string
description: string
uom: string
}
/**
* 첨부파일 구조 예시
*/
export interface RfqAttachment {
id: number
fileName: string
filePath: string
vendorId: number | null
evaluationId: number | null
}
/**
* 다이얼로그 내에서만 사용할 단순 아이템 구조 (예: 임시/기본값 표출용)
*/
export interface DefaultItem {
id?: number
itemCode: string
description?: string | null
quantity?: number | null
uom?: string | null
}
/**
* RfqsItemsDialog 컴포넌트 Prop 타입
*/
export interface RfqsItemsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
rfq: RfqWithAll
defaultItems?: DefaultItem[]
}
export function RfqsItemsDialog({
open,
onOpenChange,
rfq,
}: RfqsItemsDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-none w-[1200px]">
<DialogHeader>
<DialogTitle>Items for RFQ {rfq?.rfqCode}</DialogTitle>
<DialogDescription>
Below is the list of items for this RFQ.
</DialogDescription>
</DialogHeader>
<div className="overflow-x-auto w-full space-y-4">
{rfq && rfq.items.length === 0 && (
<p className="text-sm text-muted-foreground">No items found.</p>
)}
{rfq && rfq.items.length > 0 && (
<Table>
{/* 필요에 따라 TableCaption 등을 추가해도 좋습니다. */}
<TableHeader>
<TableRow>
<TableHead>Item Code</TableHead>
<TableHead>Item List</TableHead>
<TableHead>Sub Item List</TableHead>
<TableHead>Description</TableHead>
<TableHead>Qty</TableHead>
<TableHead>UoM</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{rfq.items.map((it, idx) => (
<TableRow key={it.id ?? idx}>
<TableCell>{it.itemCode || "No Code"}</TableCell>
<TableCell>{it.itemList || "-"}</TableCell>
<TableCell>{it.subItemList || "-"}</TableCell>
<TableCell>{it.description || "-"}</TableCell>
<TableCell>{it.quantity ?? 1}</TableCell>
<TableCell>{it.uom ?? "each"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</div>
<DialogFooter className="mt-4">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
Close
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
|
