From e4b2bef735e6aab6a5ecae9a017c5c618a6d3a4b Mon Sep 17 00:00:00 2001 From: dujinkim Date: Thu, 3 Jul 2025 02:48:24 +0000 Subject: (최겸) 기술영업 벤더 아이템 조회 아이콘 기능 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tech-vendor-possible-items-view-dialog.tsx | 201 +++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx (limited to 'lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx') diff --git a/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx b/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx new file mode 100644 index 00000000..b2b9c990 --- /dev/null +++ b/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx @@ -0,0 +1,201 @@ +"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 { Badge } from "@/components/ui/badge" +import { Package, FileText, X } from "lucide-react" +import { getVendorItemsByType } from "../service" + +interface VendorPossibleItem { + id: number; + itemCode: string; + itemList: string; + workType: string | null; + shipTypes?: string | null; // 조선용 + subItemList?: string | null; // 해양용 + techVendorType: "조선" | "해양TOP" | "해양HULL"; +} + +interface TechVendorPossibleItemsViewDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + vendor: { + id: number; + vendorName?: string | null; + vendorCode?: string | null; + techVendorType?: string | null; + } | null; +} + +export function TechVendorPossibleItemsViewDialog({ + open, + onOpenChange, + vendor, +}: TechVendorPossibleItemsViewDialogProps) { + const [items, setItems] = React.useState([]); + const [loading, setLoading] = React.useState(false); + + console.log("TechVendorPossibleItemsViewDialog render:", { open, vendor }); + + React.useEffect(() => { + console.log("TechVendorPossibleItemsViewDialog useEffect:", { open, vendorId: vendor?.id }); + if (open && vendor?.id && vendor?.techVendorType) { + loadItems(); + } + }, [open, vendor?.id, vendor?.techVendorType]); + + const loadItems = async () => { + if (!vendor?.id || !vendor?.techVendorType) return; + + console.log("Loading items for vendor:", vendor.id, vendor.techVendorType); + setLoading(true); + try { + const result = await getVendorItemsByType(vendor.id, vendor.techVendorType); + console.log("Items loaded:", result); + if (result.data) { + setItems(result.data); + } + } catch (error) { + console.error("Failed to load items:", error); + } finally { + setLoading(false); + } + }; + + const getTypeLabel = (type: string) => { + switch (type) { + case "조선": + return "조선"; + case "해양TOP": + return "해양TOP"; + case "해양HULL": + return "해양HULL"; + default: + return type; + } + }; + + const getTypeColor = (type: string) => { + switch (type) { + case "조선": + return "bg-blue-100 text-blue-800"; + case "해양TOP": + return "bg-green-100 text-green-800"; + case "해양HULL": + return "bg-purple-100 text-purple-800"; + default: + return "bg-gray-100 text-gray-800"; + } + }; + + return ( + + + + + 벤더 Possible Items 조회 + + {vendor?.vendorName || `Vendor #${vendor?.id}`} + + {vendor?.techVendorType && ( + + {getTypeLabel(vendor.techVendorType)} + + )} + + + 해당 벤더가 공급 가능한 아이템 목록을 확인할 수 있습니다. + + + +
+
+ {loading ? ( +
+
+
+

아이템을 불러오는 중...

+
+
+ ) : items.length === 0 ? ( +
+ +

등록된 아이템이 없습니다

+

+ 이 벤더에 등록된 아이템이 없습니다. +

+
+ ) : ( + <> + {/* 헤더 행 (라벨) */} +
+
No.
+
타입
+
자재 그룹
+
공종
+
자재명
+
선종/자재명(상세)
+
+ + {/* 아이템 행들 */} +
+ {items.map((item, index) => ( +
+
+ {index + 1} +
+
+ + {getTypeLabel(item.techVendorType)} + +
+
+ {item.itemCode} +
+
+ {item.workType || '-'} +
+
+ {item.itemList} +
+
+ {item.techVendorType === '조선' ? item.shipTypes : item.subItemList} +
+
+ ))} +
+ +
+
+ + + 총 {items.length}개 아이템 + +
+
+ + )} +
+
+ + + + + + + ) +} \ No newline at end of file -- cgit v1.2.3