From 15969dfedffc4e215c81d507164bc2bb383974e5 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 2 Jun 2025 08:37:21 +0000 Subject: (최겸) 기술영업 해양 rfq 캐시 삭제 및 add vendor 필터 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../vendor-table/vendor-list/vendor-list-table.tsx | 68 ++++++++++++++++------ 1 file changed, 51 insertions(+), 17 deletions(-) (limited to 'lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx') diff --git a/lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx b/lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx index e34a5052..defbac86 100644 --- a/lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx +++ b/lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { ClientDataTable } from "@/components/client-data-table/data-table" -import { DataTableRowAction, getColumns } from "./vendor-list-table-column" +import { getColumns } from "./vendor-list-table-column" import { DataTableAdvancedFilterField } from "@/types/table" import { addItemToVendors, getAllVendors } from "../../service" import { Loader2, Plus } from "lucide-react" @@ -30,27 +30,63 @@ interface VendorsListTableProps { export function VendorsListTable({ rfqId }: VendorsListTableProps) { const { toast } = useToast() - const [rowAction, setRowAction] = - React.useState | null>(null) // Changed to array for multiple selection const [selectedVendorIds, setSelectedVendorIds] = React.useState([]) const [isSubmitting, setIsSubmitting] = React.useState(false) - const columns = React.useMemo( - () => getColumns({ setRowAction, setSelectedVendorIds }), - [setRowAction, setSelectedVendorIds] - ) - const [vendors, setVendors] = React.useState([]) const [isLoading, setIsLoading] = React.useState(false) + const columns = React.useMemo( + () => getColumns({ setSelectedVendorIds }), + [setSelectedVendorIds] + ) + + // 고급 필터 필드 정의 + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { + id: "vendorName", + label: "Vendor Name", + type: "text", + }, + { + id: "vendorCode", + label: "Vendor Code", + type: "text", + }, + { + id: "status", + label: "Status", + type: "select", + options: [ + { label: "Active", value: "ACTIVE" }, + { label: "Inactive", value: "INACTIVE" }, + { label: "Pending", value: "PENDING" }, + ], + }, + { + id: "country", + label: "Country", + type: "text", + }, + { + id: "email", + label: "Email", + type: "text", + }, + ] + + // 초기 데이터 로드 React.useEffect(() => { - async function loadAllVendors() { + async function loadVendors() { setIsLoading(true) try { - const allVendors = await getAllVendors() - setVendors(allVendors) + const result = await getAllVendors() + + if (result.data) { + setVendors(result.data) + } } catch (error) { console.error("협력업체 목록 로드 오류:", error) toast({ @@ -62,11 +98,10 @@ export function VendorsListTable({ rfqId }: VendorsListTableProps) { setIsLoading(false) } } - loadAllVendors() + + loadVendors() }, [toast]) - const advancedFilterFields: DataTableAdvancedFilterField[] = [] - async function handleAddVendors() { if (selectedVendorIds.length === 0) return // Safety check @@ -100,9 +135,9 @@ export function VendorsListTable({ rfqId }: VendorsListTableProps) { setIsSubmitting(false) } } - + // If loading, show a flex container that fills the parent and centers the spinner - if (isLoading) { + if (isLoading && vendors.length === 0) { return (
@@ -110,7 +145,6 @@ export function VendorsListTable({ rfqId }: VendorsListTableProps) { ) } - // Otherwise, show the table return (