From 36dd60ca6fce7712b35e6d7c1b9602710f442ada Mon Sep 17 00:00:00 2001 From: dujinkim Date: Wed, 28 May 2025 12:26:28 +0000 Subject: (최겸) 기술영업 해양 rfq 개발v1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/[lng]/evcp/(evcp)/cbe-tech/page.tsx | 67 + app/[lng]/evcp/(evcp)/rfq-tech/[id]/cbe/page.tsx | 55 + app/[lng]/evcp/(evcp)/rfq-tech/[id]/layout.tsx | 89 + app/[lng]/evcp/(evcp)/rfq-tech/[id]/page.tsx | 55 + app/[lng]/evcp/(evcp)/rfq-tech/[id]/tbe/page.tsx | 55 + app/[lng]/evcp/(evcp)/rfq-tech/page.tsx | 76 + app/[lng]/evcp/(evcp)/tbe-tech/page.tsx | 67 + lib/cbe-tech/table/cbe-table-columns.tsx | 241 ++ lib/cbe-tech/table/cbe-table-toolbar-actions.tsx | 72 + lib/cbe-tech/table/cbe-table.tsx | 192 + lib/items-tech/repository.ts | 7 +- lib/items-tech/service.ts | 10 +- lib/rfqs-tech/cbe-table/cbe-table-columns.tsx | 257 ++ .../cbe-table/cbe-table-toolbar-actions.tsx | 67 + lib/rfqs-tech/cbe-table/cbe-table.tsx | 178 + lib/rfqs-tech/cbe-table/comments-sheet.tsx | 328 ++ lib/rfqs-tech/cbe-table/invite-vendors-dialog.tsx | 423 +++ lib/rfqs-tech/cbe-table/vendor-contact-dialog.tsx | 71 + lib/rfqs-tech/repository.ts | 222 ++ lib/rfqs-tech/service.ts | 3998 ++++++++++++++++++++ lib/rfqs-tech/table/ItemsDialog.tsx | 754 ++++ lib/rfqs-tech/table/add-rfq-dialog.tsx | 295 ++ lib/rfqs-tech/table/attachment-rfq-sheet.tsx | 426 +++ lib/rfqs-tech/table/delete-rfqs-dialog.tsx | 149 + lib/rfqs-tech/table/feature-flags-provider.tsx | 108 + lib/rfqs-tech/table/feature-flags.tsx | 96 + lib/rfqs-tech/table/rfqs-table-columns.tsx | 308 ++ lib/rfqs-tech/table/rfqs-table-floating-bar.tsx | 338 ++ lib/rfqs-tech/table/rfqs-table-toolbar-actions.tsx | 52 + lib/rfqs-tech/table/rfqs-table.tsx | 254 ++ lib/rfqs-tech/table/update-rfq-sheet.tsx | 243 ++ lib/rfqs-tech/tbe-table/comments-sheet.tsx | 325 ++ lib/rfqs-tech/tbe-table/feature-flags-provider.tsx | 108 + lib/rfqs-tech/tbe-table/file-dialog.tsx | 139 + lib/rfqs-tech/tbe-table/invite-vendors-dialog.tsx | 227 ++ lib/rfqs-tech/tbe-table/tbe-result-dialog.tsx | 208 + lib/rfqs-tech/tbe-table/tbe-table-columns.tsx | 360 ++ .../tbe-table/tbe-table-toolbar-actions.tsx | 67 + lib/rfqs-tech/tbe-table/tbe-table.tsx | 243 ++ lib/rfqs-tech/tbe-table/vendor-contact-dialog.tsx | 71 + .../vendor-contact/vendor-contact-table-column.tsx | 70 + .../vendor-contact/vendor-contact-table.tsx | 89 + lib/rfqs-tech/validations.ts | 284 ++ lib/rfqs-tech/vendor-table/add-vendor-dialog.tsx | 37 + lib/rfqs-tech/vendor-table/comments-sheet.tsx | 318 ++ .../vendor-table/feature-flags-provider.tsx | 108 + .../vendor-table/invite-vendors-dialog.tsx | 173 + .../vendor-list/vendor-list-table-column.tsx | 154 + .../vendor-table/vendor-list/vendor-list-table.tsx | 142 + .../vendor-table/vendors-table-columns.tsx | 219 ++ .../vendor-table/vendors-table-floating-bar.tsx | 137 + .../vendor-table/vendors-table-toolbar-actions.tsx | 84 + lib/rfqs-tech/vendor-table/vendors-table.tsx | 199 + lib/tbe-tech/table/tbe-table-columns.tsx | 347 ++ lib/tbe-tech/table/tbe-table-toolbar-actions.tsx | 68 + lib/tbe-tech/table/tbe-table.tsx | 304 ++ 56 files changed, 14032 insertions(+), 2 deletions(-) create mode 100644 app/[lng]/evcp/(evcp)/cbe-tech/page.tsx create mode 100644 app/[lng]/evcp/(evcp)/rfq-tech/[id]/cbe/page.tsx create mode 100644 app/[lng]/evcp/(evcp)/rfq-tech/[id]/layout.tsx create mode 100644 app/[lng]/evcp/(evcp)/rfq-tech/[id]/page.tsx create mode 100644 app/[lng]/evcp/(evcp)/rfq-tech/[id]/tbe/page.tsx create mode 100644 app/[lng]/evcp/(evcp)/rfq-tech/page.tsx create mode 100644 app/[lng]/evcp/(evcp)/tbe-tech/page.tsx create mode 100644 lib/cbe-tech/table/cbe-table-columns.tsx create mode 100644 lib/cbe-tech/table/cbe-table-toolbar-actions.tsx create mode 100644 lib/cbe-tech/table/cbe-table.tsx create mode 100644 lib/rfqs-tech/cbe-table/cbe-table-columns.tsx create mode 100644 lib/rfqs-tech/cbe-table/cbe-table-toolbar-actions.tsx create mode 100644 lib/rfqs-tech/cbe-table/cbe-table.tsx create mode 100644 lib/rfqs-tech/cbe-table/comments-sheet.tsx create mode 100644 lib/rfqs-tech/cbe-table/invite-vendors-dialog.tsx create mode 100644 lib/rfqs-tech/cbe-table/vendor-contact-dialog.tsx create mode 100644 lib/rfqs-tech/repository.ts create mode 100644 lib/rfqs-tech/service.ts create mode 100644 lib/rfqs-tech/table/ItemsDialog.tsx create mode 100644 lib/rfqs-tech/table/add-rfq-dialog.tsx create mode 100644 lib/rfqs-tech/table/attachment-rfq-sheet.tsx create mode 100644 lib/rfqs-tech/table/delete-rfqs-dialog.tsx create mode 100644 lib/rfqs-tech/table/feature-flags-provider.tsx create mode 100644 lib/rfqs-tech/table/feature-flags.tsx create mode 100644 lib/rfqs-tech/table/rfqs-table-columns.tsx create mode 100644 lib/rfqs-tech/table/rfqs-table-floating-bar.tsx create mode 100644 lib/rfqs-tech/table/rfqs-table-toolbar-actions.tsx create mode 100644 lib/rfqs-tech/table/rfqs-table.tsx create mode 100644 lib/rfqs-tech/table/update-rfq-sheet.tsx create mode 100644 lib/rfqs-tech/tbe-table/comments-sheet.tsx create mode 100644 lib/rfqs-tech/tbe-table/feature-flags-provider.tsx create mode 100644 lib/rfqs-tech/tbe-table/file-dialog.tsx create mode 100644 lib/rfqs-tech/tbe-table/invite-vendors-dialog.tsx create mode 100644 lib/rfqs-tech/tbe-table/tbe-result-dialog.tsx create mode 100644 lib/rfqs-tech/tbe-table/tbe-table-columns.tsx create mode 100644 lib/rfqs-tech/tbe-table/tbe-table-toolbar-actions.tsx create mode 100644 lib/rfqs-tech/tbe-table/tbe-table.tsx create mode 100644 lib/rfqs-tech/tbe-table/vendor-contact-dialog.tsx create mode 100644 lib/rfqs-tech/tbe-table/vendor-contact/vendor-contact-table-column.tsx create mode 100644 lib/rfqs-tech/tbe-table/vendor-contact/vendor-contact-table.tsx create mode 100644 lib/rfqs-tech/validations.ts create mode 100644 lib/rfqs-tech/vendor-table/add-vendor-dialog.tsx create mode 100644 lib/rfqs-tech/vendor-table/comments-sheet.tsx create mode 100644 lib/rfqs-tech/vendor-table/feature-flags-provider.tsx create mode 100644 lib/rfqs-tech/vendor-table/invite-vendors-dialog.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table-column.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendor-list/vendor-list-table.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendors-table-columns.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendors-table-floating-bar.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendors-table-toolbar-actions.tsx create mode 100644 lib/rfqs-tech/vendor-table/vendors-table.tsx create mode 100644 lib/tbe-tech/table/tbe-table-columns.tsx create mode 100644 lib/tbe-tech/table/tbe-table-toolbar-actions.tsx create mode 100644 lib/tbe-tech/table/tbe-table.tsx diff --git a/app/[lng]/evcp/(evcp)/cbe-tech/page.tsx b/app/[lng]/evcp/(evcp)/cbe-tech/page.tsx new file mode 100644 index 00000000..4dadc58f --- /dev/null +++ b/app/[lng]/evcp/(evcp)/cbe-tech/page.tsx @@ -0,0 +1,67 @@ +import { type SearchParams } from "@/types/table" +import { getValidFilters } from "@/lib/data-table" +import { getAllCBE } from "@/lib/rfqs-tech/service" +import { searchParamsCBECache } from "@/lib/rfqs-tech/validations" +import { AllCbeTable } from "@/lib/cbe-tech/table/cbe-table" +import * as React from "react" +import { Shell } from "@/components/shell" +import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton" + +interface IndexPageProps { + params: { + lng: string + } + searchParams: Promise +} + +export default async function RfqCBEPage(props: IndexPageProps) { + const resolvedParams = await props.params + const lng = resolvedParams.lng + + // URL 쿼리 파라미터에서 타입 추출 + const searchParams = await props.searchParams + + // SearchParams 파싱 (Zod) + const search = searchParamsCBECache.parse(searchParams) + const validFilters = getValidFilters(search.filters) + + // 현재 선택된 타입의 데이터 로드 + const promises = Promise.all([ + getAllCBE({ + ...search, + filters: validFilters, + }) + ]) + + return ( + +
+
+
+

+ Commercial Bid Evaluation +

+

+ 초대된 협력업체에게 CBE를 보낼 수 있습니다.
+ 체크박스 선택을 하면 초대 버튼이 활성화됩니다. 버튼 클릭 후 첨부파일을 함께 전송하면 CBE 내용이 메일로 전달되고 eVCP에도 협력업체가 입력할 수 있게 자동 생성됩니다. +

+
+
+
+ + + } + > + + + + ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/rfq-tech/[id]/cbe/page.tsx b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/cbe/page.tsx new file mode 100644 index 00000000..84379caf --- /dev/null +++ b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/cbe/page.tsx @@ -0,0 +1,55 @@ +import { Separator } from "@/components/ui/separator" +import { type SearchParams } from "@/types/table" +import { getValidFilters } from "@/lib/data-table" +import { searchParamsCBECache } from "@/lib/rfqs-tech/validations" +import { getCBE } from "@/lib/rfqs-tech/service" +import { CbeTable } from "@/lib/rfqs-tech/cbe-table/cbe-table" + +interface IndexPageProps { + // Next.js 13 App Router에서 기본으로 주어지는 객체들 + params: { + lng: string + id: string + } + searchParams: Promise +} + +export default async function RfqCBEPage(props: IndexPageProps) { + const resolvedParams = await props.params + const lng = resolvedParams.lng + const id = resolvedParams.id + + const idAsNumber = Number(id) + + // 2) SearchParams 파싱 (Zod) + // - "filters", "page", "perPage", "sort" 등 contact 전용 컬럼 + const searchParams = await props.searchParams + const search = searchParamsCBECache.parse(searchParams) + const validFilters = getValidFilters(search.filters) + + const promises = Promise.all([ + getCBE({ + ...search, + filters: validFilters, + }, + idAsNumber) + ]) + + // 4) 렌더링 + return ( +
+
+

+ Commercial Bid Evaluation +

+

+ 초대된 협력업체에게 CBE를 보낼 수 있습니다.
"발행하기" 버튼을 통해 CBE를 전송하면 CBE 내용이 메일로 전달되고 eVCP에도 협력업체가 입력할 수 있게 자동 생성됩니다. +

+
+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/rfq-tech/[id]/layout.tsx b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/layout.tsx new file mode 100644 index 00000000..35f76a76 --- /dev/null +++ b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/layout.tsx @@ -0,0 +1,89 @@ +import { Metadata } from "next" +import Link from "next/link" +import { Separator } from "@/components/ui/separator" +import { SidebarNav } from "@/components/layout/sidebar-nav" +import { RfqViewWithItems } from "@/db/schema/rfq" +import { findRfqById } from "@/lib/rfqs-tech/service" +import { formatDate } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { ArrowLeft } from "lucide-react" + +export const metadata: Metadata = { + title: "Vendor Detail", +} + +export default async function RfqLayout({ + children, + params, +}: { + children: React.ReactNode + params: { lng: string, id: string } +}) { + + // 1) URL 파라미터에서 id 추출, Number로 변환 + const resolvedParams = await params + const lng = resolvedParams.lng + const id = resolvedParams.id + + const idAsNumber = Number(id) + // 2) DB에서 해당 협력업체 정보 조회 + const rfq: RfqViewWithItems | null = await findRfqById(idAsNumber) + + // 3) 사이드바 메뉴 + const sidebarNavItems = [ + { + title: "Matched Vendors", + href: `/${lng}/evcp/rfq/${id}`, + }, + { + title: "TBE", + href: `/${lng}/evcp/rfq/${id}/tbe`, + }, + { + title: "CBE", + href: `/${lng}/evcp/rfq/${id}/cbe`, + }, + + ] + + return ( + <> +
+
+
+
+ + + +
+
+ {/* 4) 협력업체 정보가 있으면 코드 + 이름 + "상세 정보" 표기 */} +

+ {rfq + ? `${rfq.projectCode ?? ""} ${rfq.rfqCode ?? ""} 관리` + : "Loading RFQ..."} +

+ +

+ {rfq + ? `${rfq.description ?? ""} ${rfq.lines.map(line => line.itemCode).join(", ")}` + : ""} +

+

Due Date:{rfq && rfq?.dueDate && {formatDate(rfq?.dueDate)}}

+
+ +
+ +
{children}
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/rfq-tech/[id]/page.tsx b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/page.tsx new file mode 100644 index 00000000..007270a1 --- /dev/null +++ b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/page.tsx @@ -0,0 +1,55 @@ +import { Separator } from "@/components/ui/separator" +import { type SearchParams } from "@/types/table" +import { getValidFilters } from "@/lib/data-table" +import { getMatchedVendors } from "@/lib/rfqs-tech/service" +import { searchParamsMatchedVCache } from "@/lib/rfqs-tech/validations" +import { MatchedVendorsTable } from "@/lib/rfqs-tech/vendor-table/vendors-table" + +interface IndexPageProps { + // Next.js 13 App Router에서 기본으로 주어지는 객체들 + params: { + lng: string + id: string + } + searchParams: Promise +} + +export default async function RfqPage(props: IndexPageProps) { + const resolvedParams = await props.params + const lng = resolvedParams.lng + const id = resolvedParams.id + + const idAsNumber = Number(id) + + // 2) SearchParams 파싱 (Zod) + // - "filters", "page", "perPage", "sort" 등 contact 전용 컬럼 + const searchParams = await props.searchParams + const search = searchParamsMatchedVCache.parse(searchParams) + const validFilters = getValidFilters(search.filters) + + const promises = Promise.all([ + getMatchedVendors({ + ...search, + filters: validFilters, + }, + idAsNumber) + ]) + + // 4) 렌더링 + return ( +
+
+

+ Vendors +

+

+ 등록된 협력업체 중에서 이 RFQ 아이템에 매칭되는 업체를 보여줍니다.
"발행하기" 버튼을 통해 RFQ를 전송하면 첨부파일과 함께 RFQ 내용이 메일로 전달되고 eVCP에도 협력업체가 입력할 수 있게 자동 생성됩니다. +

+
+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/rfq-tech/[id]/tbe/page.tsx b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/tbe/page.tsx new file mode 100644 index 00000000..4b226cdc --- /dev/null +++ b/app/[lng]/evcp/(evcp)/rfq-tech/[id]/tbe/page.tsx @@ -0,0 +1,55 @@ +import { Separator } from "@/components/ui/separator" +import { type SearchParams } from "@/types/table" +import { getValidFilters } from "@/lib/data-table" +import { getTBE } from "@/lib/rfqs-tech/service" +import { searchParamsTBECache } from "@/lib/rfqs-tech/validations" +import { TbeTable } from "@/lib/rfqs-tech/tbe-table/tbe-table" + +interface IndexPageProps { + // Next.js 13 App Router에서 기본으로 주어지는 객체들 + params: { + lng: string + id: string + } + searchParams: Promise +} + +export default async function RfqTBEPage(props: IndexPageProps) { + const resolvedParams = await props.params + const lng = resolvedParams.lng + const id = resolvedParams.id + + const idAsNumber = Number(id) + + // 2) SearchParams 파싱 (Zod) + // - "filters", "page", "perPage", "sort" 등 contact 전용 컬럼 + const searchParams = await props.searchParams + const search = searchParamsTBECache.parse(searchParams) + const validFilters = getValidFilters(search.filters) + + const promises = Promise.all([ + getTBE({ + ...search, + filters: validFilters, + }, + idAsNumber) + ]) + + // 4) 렌더링 + return ( +
+
+

+ Technical Bid Evaluation +

+

+ 초대된 협력업체에게 TBE를 보낼 수 있습니다.
"발행하기" 버튼을 통해 TBE를 전송하면 첨부파일과 함께 TBE 내용이 메일로 전달되고 eVCP에도 협력업체가 입력할 수 있게 자동 생성됩니다. +

+
+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/rfq-tech/page.tsx b/app/[lng]/evcp/(evcp)/rfq-tech/page.tsx new file mode 100644 index 00000000..f35b3632 --- /dev/null +++ b/app/[lng]/evcp/(evcp)/rfq-tech/page.tsx @@ -0,0 +1,76 @@ +import * as React from "react" +import { type SearchParams } from "@/types/table" + +import { getValidFilters } from "@/lib/data-table" +import { Skeleton } from "@/components/ui/skeleton" +import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton" +import { Shell } from "@/components/shell" + +import { searchParamsCache } from "@/lib/rfqs-tech/validations" +import { getRfqs, getRfqStatusCounts } from "@/lib/rfqs-tech/service" +import { RfqsTable } from "@/lib/rfqs-tech/table/rfqs-table" +import { getAllOffshoreItems } from "@/lib/items-tech/service" + +interface RfqPageProps { + searchParams: Promise; + title: string; + description: string; +} + +export default async function RfqPage({ + searchParams, + title = "기술영업 해양 RFQ", + description = "기술영업 해양 RFQ를 등록하고 관리할 수 있습니다." +}: RfqPageProps) { + const search = searchParamsCache.parse(await searchParams) + + const validFilters = getValidFilters(search.filters) + + const promises = Promise.all([ + getRfqs({ + ...search, + filters: validFilters, + }), + getRfqStatusCounts(), + getAllOffshoreItems() + ]) + + return ( + +
+
+
+

+ {title} +

+

+ {description} +

+
+
+
+ + }> + {/* */} + + + } + > + + + + ) +} \ No newline at end of file diff --git a/app/[lng]/evcp/(evcp)/tbe-tech/page.tsx b/app/[lng]/evcp/(evcp)/tbe-tech/page.tsx new file mode 100644 index 00000000..17b01ce2 --- /dev/null +++ b/app/[lng]/evcp/(evcp)/tbe-tech/page.tsx @@ -0,0 +1,67 @@ +import { type SearchParams } from "@/types/table" +import { getValidFilters } from "@/lib/data-table" +import { getAllTBE } from "@/lib/rfqs-tech/service" +import { searchParamsTBECache } from "@/lib/rfqs-tech/validations" +import { AllTbeTable } from "@/lib/tbe-tech/table/tbe-table" +import * as React from "react" +import { Shell } from "@/components/shell" +import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton" + +interface IndexPageProps { + params: { + lng: string + } + searchParams: Promise +} + +export default async function RfqTBEPage(props: IndexPageProps) { + const resolvedParams = await props.params + const lng = resolvedParams.lng + + // URL 쿼리 파라미터에서 타입 추출 + const searchParams = await props.searchParams + + // SearchParams 파싱 (Zod) + const search = searchParamsTBECache.parse(searchParams) + const validFilters = getValidFilters(search.filters) + + // 현재 선택된 타입의 데이터 로드 + const promises = Promise.all([ + getAllTBE({ + ...search, + filters: validFilters, + }) + ]) + + return ( + +
+
+
+

+ Technical Bid Evaluation +

+

+ 초대된 협력업체에게 TBE를 보낼 수 있습니다.
+ 체크박스 선택을 하면 초대 버튼이 활성화됩니다. 버튼 클릭 후 첨부파일을 함께 전송하면 TBE 내용이 메일로 전달되고 eVCP에도 협력업체가 입력할 수 있게 자동 생성됩니다. +

+
+
+
+ + + } + > + + + + ) +} \ No newline at end of file diff --git a/lib/cbe-tech/table/cbe-table-columns.tsx b/lib/cbe-tech/table/cbe-table-columns.tsx new file mode 100644 index 00000000..2da62ea8 --- /dev/null +++ b/lib/cbe-tech/table/cbe-table-columns.tsx @@ -0,0 +1,241 @@ +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" +import { Download, Ellipsis, MessageSquare } from "lucide-react" +import { toast } from "sonner" + +import { getErrorMessage } from "@/lib/handle-error" +import { formatDate } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { useRouter } from "next/navigation" + +import { VendorWithCbeFields,vendorCbeColumnsConfig } from "@/config/vendorCbeColumnsConfig" + + +type NextRouter = ReturnType + +interface GetColumnsProps { + setRowAction: React.Dispatch< + React.SetStateAction | null> + > + router: NextRouter + openCommentSheet: (responseId: number) => void + openVendorContactsDialog: (vendorId: number, vendor: VendorWithCbeFields) => void // 수정된 시그니처 + +} + +/** + * tanstack table 컬럼 정의 (중첩 헤더 버전) + */ +export function getColumns({ + setRowAction, + router, + openCommentSheet, + openVendorContactsDialog +}: GetColumnsProps): ColumnDef[] { + // ---------------------------------------------------------------- + // 1) Select 컬럼 (체크박스) + // ---------------------------------------------------------------- + const selectColumn: ColumnDef = { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + size: 40, + enableSorting: false, + enableHiding: false, + } + + // ---------------------------------------------------------------- + // 2) 그룹화(Nested) 컬럼 구성 + // ---------------------------------------------------------------- + const groupMap: Record[]> = {} + + vendorCbeColumnsConfig.forEach((cfg) => { + const groupName = cfg.group || "_noGroup" + if (!groupMap[groupName]) { + groupMap[groupName] = [] + } + + // childCol: ColumnDef + const childCol: ColumnDef = { + accessorKey: cfg.id, + enableResizing: true, + header: ({ column }) => ( + + ), + meta: { + excelHeader: cfg.excelHeader, + group: cfg.group, + type: cfg.type, + }, + // 셀 렌더링 + cell: ({ row, getValue }) => { + // 1) 필드값 가져오기 + const val = getValue() + + if (cfg.id === "vendorName") { + const vendor = row.original; + const vendorId = vendor.vendorId; + + // 협력업체 이름을 클릭할 수 있는 버튼으로 렌더링 + const handleVendorNameClick = () => { + if (vendorId) { + openVendorContactsDialog(vendorId, vendor); // vendor 전체 객체 전달 + } else { + toast.error("협력업체 ID를 찾을 수 없습니다."); + } + }; + + return ( + + ); + } + + + if (cfg.id === "vendorStatus") { + const statusVal = row.original.vendorStatus + if (!statusVal) return null + // const Icon = getStatusIcon(statusVal) + return ( + + {statusVal} + + ) + } + + + if (cfg.id === "responseStatus") { + const statusVal = row.original.responseStatus + if (!statusVal) return null + // const Icon = getStatusIcon(statusVal) + const variant = statusVal ==="INVITED"?"default" :statusVal ==="DECLINED"?"destructive":statusVal ==="ACCEPTED"?"secondary":"outline" + return ( + + {statusVal} + + ) + } + + // 예) CBE Updated (날짜) + if (cfg.id === "respondedAt") { + const dateVal = val as Date | undefined + if (!dateVal) return null + return formatDate(dateVal) + } + + // 그 외 필드는 기본 값 표시 + return val ?? "" + }, + } + + groupMap[groupName].push(childCol) + }) + + // groupMap → nestedColumns + const nestedColumns: ColumnDef[] = [] + Object.entries(groupMap).forEach(([groupName, colDefs]) => { + if (groupName === "_noGroup") { + nestedColumns.push(...colDefs) + } else { + nestedColumns.push({ + id: groupName, + header: groupName, + columns: colDefs, + }) + } + }) + +// 댓글 칼럼 +const commentsColumn: ColumnDef = { + id: "comments", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const vendor = row.original + const commCount = vendor.comments?.length ?? 0 + + function handleClick() { + // setRowAction() 로 type 설정 + setRowAction({ row, type: "comments" }) + // 필요하면 즉시 openCommentSheet() 직접 호출 + openCommentSheet(vendor.responseId ?? 0) + } + + return ( + + ) + }, + enableSorting: false, + minSize: 80, +} +// ---------------------------------------------------------------- +// 5) 최종 컬럼 배열 - Update to include the files column +// ---------------------------------------------------------------- +return [ + selectColumn, + ...nestedColumns, + commentsColumn, + // actionsColumn, +] + +} \ No newline at end of file diff --git a/lib/cbe-tech/table/cbe-table-toolbar-actions.tsx b/lib/cbe-tech/table/cbe-table-toolbar-actions.tsx new file mode 100644 index 00000000..44a79b37 --- /dev/null +++ b/lib/cbe-tech/table/cbe-table-toolbar-actions.tsx @@ -0,0 +1,72 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { Download, Upload } from "lucide-react" +import { toast } from "sonner" + +import { exportTableToExcel } from "@/lib/export" +import { Button } from "@/components/ui/button" + + +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { InviteVendorsDialog } from "@/lib/rfqs-tech/cbe-table/invite-vendors-dialog" + +interface VendorsTableToolbarActionsProps { + table: Table + rfqId: number +} + +export function VendorsTableToolbarActions({ table, rfqId }: VendorsTableToolbarActionsProps) { + // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식 + const fileInputRef = React.useRef(null) + + // 파일이 선택되었을 때 처리 + + function handleImportClick() { + // 숨겨진 요소를 클릭 + fileInputRef.current?.click() + } + + const uniqueRfqIds = table.getFilteredSelectedRowModel().rows.length > 0 + ? [...new Set(table.getFilteredSelectedRowModel().rows.map(row => row.original.rfqId))] + : []; + +const hasMultipleRfqIds = uniqueRfqIds.length > 1; + +const invitationPossibeVendors = React.useMemo(() => { + return table + .getFilteredSelectedRowModel() + .rows + .map(row => row.original) + .filter(vendor => vendor.commercialResponseStatus === null); +}, [table.getFilteredSelectedRowModel().rows]); + +return ( +
+ {invitationPossibeVendors.length > 0 && ( + table.toggleAllRowsSelected(false)} + showTrigger={true} + /> + )} + + +
+ ) +} \ No newline at end of file diff --git a/lib/cbe-tech/table/cbe-table.tsx b/lib/cbe-tech/table/cbe-table.tsx new file mode 100644 index 00000000..0cd5aec0 --- /dev/null +++ b/lib/cbe-tech/table/cbe-table.tsx @@ -0,0 +1,192 @@ +"use client" + +import * as React from "react" +import { useRouter } from "next/navigation" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { toSentenceCase } from "@/lib/utils" +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 { getColumns } from "./cbe-table-columns" +import { CommentSheet, CbeComment } from "@/lib/rfqs-tech/cbe-table/comments-sheet" +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { fetchRfqAttachmentsbyCommentId, getAllCBE } from "@/lib/rfqs-tech/service" +import { VendorsTableToolbarActions } from "./cbe-table-toolbar-actions" +import { InviteVendorsDialog } from "@/lib/rfqs-tech/cbe-table/invite-vendors-dialog" +import { VendorContactsDialog } from "@/lib/rfqs-tech/cbe-table/vendor-contact-dialog" +import { useSession } from "next-auth/react" // Next-auth session hook 추가 + + + +import { toast } from "sonner" + +interface VendorsTableProps { + promises: Promise<[ + Awaited>, + ]> +} + +export function AllCbeTable({ promises }: VendorsTableProps) { + + // Suspense로 받아온 데이터 + const [{ data, pageCount }] = React.use(promises) + const { data: session } = useSession() // 세션 정보 가져오기 + + const currentUserId = session?.user?.id ? parseInt(session.user.id, 10) : 0 + const currentUser = session?.user + + const [rowAction, setRowAction] = React.useState | null>(null) + // **router** 획득 + const router = useRouter() + // 댓글 시트 관련 state + const [initialComments, setInitialComments] = React.useState([]) + const [isLoadingComments, setIsLoadingComments] = React.useState(false) + + const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) + const [selectedVendorId, setSelectedVendorId] = React.useState(null) + const [selectedCbeId, setSelectedCbeId] = React.useState(null) + const [isContactDialogOpen, setIsContactDialogOpen] = React.useState(false) + const [selectedVendor, setSelectedVendor] = React.useState(null) + const [selectedRfqId, setSelectedRfqId] = React.useState(null) + + // ----------------------------------------------------------- + // 특정 action이 설정될 때마다 실행되는 effect + // ----------------------------------------------------------- + React.useEffect(() => { + if (rowAction?.type === "comments") { + // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행 + openCommentSheet(Number(rowAction.row.original.responseId)) + } + }, [rowAction]) + + // ----------------------------------------------------------- + // 댓글 시트 열기 + // ----------------------------------------------------------- + async function openCommentSheet(responseId: number) { + setInitialComments([]) + setIsLoadingComments(true) + const comments = rowAction?.row.original.comments + const rfqId = rowAction?.row.original.rfqId + const vendorId = rowAction?.row.original.vendorId + try { + if (comments && comments.length > 0) { + const commentWithAttachments: CbeComment[] = await Promise.all( + comments.map(async (c) => { + const attachments = await fetchRfqAttachmentsbyCommentId(c.id) + + return { + ...c, + commentedBy: currentUserId, // DB나 API 응답에 있다고 가정 + attachments, + } + }) + ) + // 3) state에 저장 -> CommentSheet에서 initialComments로 사용 + setInitialComments(commentWithAttachments) + } + + if(vendorId){ setSelectedVendorId(vendorId)} + if(rfqId){ setSelectedRfqId(rfqId)} + setSelectedCbeId(responseId) + setCommentSheetOpen(true) + }catch (error) { + console.error("Error loading comments:", error) + toast.error("Failed to load comments") + } finally { + // End loading regardless of success/failure + setIsLoadingComments(false) + } +} + +const openVendorContactsDialog = (vendorId: number, vendor: VendorWithCbeFields) => { + setSelectedVendorId(vendorId) + setSelectedVendor(vendor) + setIsContactDialogOpen(true) +} + + // ----------------------------------------------------------- + // 테이블 컬럼 + // ----------------------------------------------------------- + const columns = React.useMemo( + () => getColumns({ setRowAction, router, openCommentSheet, openVendorContactsDialog }), + [setRowAction, router] + ) + + // ----------------------------------------------------------- + // 필터 필드 + // ----------------------------------------------------------- + const filterFields: DataTableFilterField[] = [ + // 예: 표준 필터 + ] + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { id: "vendorName", label: "Vendor Name", type: "text" }, + { id: "vendorCode", label: "Vendor Code", type: "text" }, + { id: "respondedAt", label: "Updated at", type: "date" }, + ] + + // ----------------------------------------------------------- + // 테이블 생성 훅 + // ----------------------------------------------------------- + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "respondedAt", desc: true }], + columnPinning: { right: ["comments"] }, + }, + getRowId: (originalRow) => (`${originalRow.vendorId}${originalRow.rfqId}`), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + + + + + + + {/* 댓글 시트 */} + + + setRowAction(null)} + rfqId={selectedRfqId ?? 0} + open={rowAction?.type === "invite"} + showTrigger={false} + currentUser={currentUser} + /> + + + + ) +} \ No newline at end of file diff --git a/lib/items-tech/repository.ts b/lib/items-tech/repository.ts index 43e88866..1f4f7933 100644 --- a/lib/items-tech/repository.ts +++ b/lib/items-tech/repository.ts @@ -1,6 +1,6 @@ // src/lib/items/repository.ts import db from "@/db/db"; -import { Item, items } from "@/db/schema/items"; +import { Item, ItemOffshoreTop, ItemOffshoreHull, itemOffshoreHull, itemOffshoreTop, items } from "@/db/schema/items"; import { eq, inArray, @@ -117,3 +117,8 @@ export async function updateItems( export async function findAllItems(): Promise { return db.select().from(items).orderBy(asc(items.itemCode)); } +export async function findAllOffshoreItems(): Promise<(ItemOffshoreHull | ItemOffshoreTop)[]> { + const hullItems = await db.select().from(itemOffshoreHull); + const topItems = await db.select().from(itemOffshoreTop); + return [...hullItems, ...topItems]; +} diff --git a/lib/items-tech/service.ts b/lib/items-tech/service.ts index 62a66aaa..70c664f3 100644 --- a/lib/items-tech/service.ts +++ b/lib/items-tech/service.ts @@ -10,8 +10,9 @@ import { getErrorMessage } from "@/lib/handle-error"; import { asc, desc, ilike, and, or, eq, count, inArray, sql } from "drizzle-orm"; import { GetItemsSchema, UpdateItemSchema, ShipbuildingItemCreateData, TypedItemCreateData, OffshoreTopItemCreateData, OffshoreHullItemCreateData } from "./validations"; -import { Item, items, itemShipbuilding, itemOffshoreTop, itemOffshoreHull } from "@/db/schema/items"; +import { Item, items, itemShipbuilding, itemOffshoreTop, itemOffshoreHull, ItemOffshoreTop, ItemOffshoreHull } from "@/db/schema/items"; import { findAllItems } from "./repository"; +import { findAllOffshoreItems } from "./repository"; /* ----------------------------------------------------- 1) 조회 관련 @@ -1000,3 +1001,10 @@ export async function getAllShipbuildingItems(): Promise { throw new Error("Failed to get items"); } } +export async function getAllOffshoreItems(): Promise<(ItemOffshoreHull | ItemOffshoreTop)[]> { + try { + return await findAllOffshoreItems(); + } catch (err) { + throw new Error("Failed to get items"); + } +} diff --git a/lib/rfqs-tech/cbe-table/cbe-table-columns.tsx b/lib/rfqs-tech/cbe-table/cbe-table-columns.tsx new file mode 100644 index 00000000..11ce9ccf --- /dev/null +++ b/lib/rfqs-tech/cbe-table/cbe-table-columns.tsx @@ -0,0 +1,257 @@ +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" +import { Download, Ellipsis, MessageSquare } from "lucide-react" +import { toast } from "sonner" + +import { getErrorMessage } from "@/lib/handle-error" +import { formatDate } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { useRouter } from "next/navigation" + + +import { VendorWithCbeFields,vendorCbeColumnsConfig } from "@/config/vendorCbeColumnsConfig" + +type NextRouter = ReturnType + +interface GetColumnsProps { + setRowAction: React.Dispatch< + React.SetStateAction | null> + > + router: NextRouter + openCommentSheet: (responseId: number) => void + openVendorContactsDialog: (vendorId: number, vendor: VendorWithCbeFields) => void // 수정된 시그니처 + +} + +/** + * tanstack table 컬럼 정의 (중첩 헤더 버전) + */ +export function getColumns({ + setRowAction, + router, + openCommentSheet, + openVendorContactsDialog +}: GetColumnsProps): ColumnDef[] { + // ---------------------------------------------------------------- + // 1) Select 컬럼 (체크박스) + // ---------------------------------------------------------------- + const selectColumn: ColumnDef = { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + size: 40, + enableSorting: false, + enableHiding: false, + } + + // ---------------------------------------------------------------- + // 2) 그룹화(Nested) 컬럼 구성 + // ---------------------------------------------------------------- + const groupMap: Record[]> = {} + + vendorCbeColumnsConfig.forEach((cfg) => { + const groupName = cfg.group || "_noGroup" + if (!groupMap[groupName]) { + groupMap[groupName] = [] + } + + // childCol: ColumnDef + const childCol: ColumnDef = { + accessorKey: cfg.id, + enableResizing: true, + header: ({ column }) => ( + + ), + meta: { + excelHeader: cfg.excelHeader, + group: cfg.group, + type: cfg.type, + }, + // 셀 렌더링 + cell: ({ row, getValue }) => { + // 1) 필드값 가져오기 + const val = getValue() + + if (cfg.id === "vendorName") { + const vendor = row.original; + const vendorId = vendor.vendorId; + + // 협력업체 이름을 클릭할 수 있는 버튼으로 렌더링 + const handleVendorNameClick = () => { + if (vendorId) { + openVendorContactsDialog(vendorId, vendor); // vendor 전체 객체 전달 + } else { + toast.error("협력업체 ID를 찾을 수 없습니다."); + } + }; + + return ( + + ); + } + + if (cfg.id === "vendorStatus") { + const statusVal = row.original.vendorStatus + if (!statusVal) return null + // const Icon = getStatusIcon(statusVal) + return ( + + {statusVal} + + ) + } + + + if (cfg.id === "responseStatus") { + const statusVal = row.original.responseStatus + if (!statusVal) return null + // const Icon = getStatusIcon(statusVal) + const variant = statusVal ==="INVITED"?"default" :statusVal ==="DECLINED"?"destructive":statusVal ==="ACCEPTED"?"secondary":"outline" + return ( + + {statusVal} + + ) + } + + // 예) CBE Updated (날짜) + if (cfg.id === "respondedAt" ) { + const dateVal = val as Date | undefined + if (!dateVal) return null + return formatDate(dateVal) + } + + // 그 외 필드는 기본 값 표시 + return val ?? "" + }, + } + + groupMap[groupName].push(childCol) + }) + + // groupMap → nestedColumns + const nestedColumns: ColumnDef[] = [] + Object.entries(groupMap).forEach(([groupName, colDefs]) => { + if (groupName === "_noGroup") { + nestedColumns.push(...colDefs) + } else { + nestedColumns.push({ + id: groupName, + header: groupName, + columns: colDefs, + }) + } + }) + // ---------------------------------------------------------------- + // 2) 액션컬럼 (빈 상태로 유지하여 에러 방지) + // ---------------------------------------------------------------- + const actionsColumn: ColumnDef = { + id: "actions", + enableHiding: false, + cell: () => { + // 빈 셀 반환 (액션 없음) + return null + }, + size: 40, + enableSorting: false, + } +// ---------------------------------------------------------------- +// 3) Comments 컬럼 +// ---------------------------------------------------------------- +const commentsColumn: ColumnDef = { + id: "comments", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const vendor = row.original + const commCount = vendor.comments?.length ?? 0 + + function handleClick() { + // rowAction + openCommentSheet + setRowAction({ row, type: "comments" }) + openCommentSheet(vendor.responseId ?? 0) + } + + return ( + + ) + }, + enableSorting: false, + maxSize:80 +} + + + + +// ---------------------------------------------------------------- +// 5) 최종 컬럼 배열 - Update to include the files column +// ---------------------------------------------------------------- +return [ + selectColumn, + ...nestedColumns, + commentsColumn, + actionsColumn, +] + +} \ No newline at end of file diff --git a/lib/rfqs-tech/cbe-table/cbe-table-toolbar-actions.tsx b/lib/rfqs-tech/cbe-table/cbe-table-toolbar-actions.tsx new file mode 100644 index 00000000..464bf988 --- /dev/null +++ b/lib/rfqs-tech/cbe-table/cbe-table-toolbar-actions.tsx @@ -0,0 +1,67 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { Download, Upload } from "lucide-react" +import { toast } from "sonner" + +import { exportTableToExcel } from "@/lib/export" +import { Button } from "@/components/ui/button" + + +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { InviteVendorsDialog } from "./invite-vendors-dialog" + +interface VendorsTableToolbarActionsProps { + table: Table + rfqId: number +} + +export function VendorsTableToolbarActions({ table, rfqId }: VendorsTableToolbarActionsProps) { + // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식 + const fileInputRef = React.useRef(null) + + // 파일이 선택되었을 때 처리 + + function handleImportClick() { + // 숨겨진 요소를 클릭 + fileInputRef.current?.click() + } + + const invitationPossibeVendors = React.useMemo(() => { + return table + .getFilteredSelectedRowModel() + .rows + .map(row => row.original) + .filter(vendor => vendor.commercialResponseStatus === null); + }, [table.getFilteredSelectedRowModel().rows]); + + return ( +
+ {invitationPossibeVendors.length > 0 && + ( + table.toggleAllRowsSelected(false)} + /> + ) + } + + +
+ ) +} \ No newline at end of file diff --git a/lib/rfqs-tech/cbe-table/cbe-table.tsx b/lib/rfqs-tech/cbe-table/cbe-table.tsx new file mode 100644 index 00000000..37fbc3f4 --- /dev/null +++ b/lib/rfqs-tech/cbe-table/cbe-table.tsx @@ -0,0 +1,178 @@ +"use client" + +import * as React from "react" +import { useRouter } from "next/navigation" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} 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 { fetchRfqAttachmentsbyCommentId, getCBE } from "../service" +import { getColumns } from "./cbe-table-columns" +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { CommentSheet, CbeComment } from "./comments-sheet" +import { useSession } from "next-auth/react" // Next-auth session hook 추가 +import { VendorContactsDialog } from "./vendor-contact-dialog" +import { InviteVendorsDialog } from "./invite-vendors-dialog" +import { VendorsTableToolbarActions } from "./cbe-table-toolbar-actions" + +interface VendorsTableProps { + promises: Promise< + [ + Awaited>, + ] + > + rfqId: number +} + + +export function CbeTable({ promises, rfqId }: VendorsTableProps) { + + // Suspense로 받아온 데이터 + const [{ data, pageCount }] = React.use(promises) + const { data: session } = useSession() // 세션 정보 가져오기 + + const currentUserId = session?.user?.id ? parseInt(session.user.id, 10) : 0 + const currentUser = session?.user + + + const [rowAction, setRowAction] = React.useState | null>(null) + + // **router** 획득 + const router = useRouter() + + const [initialComments, setInitialComments] = React.useState([]) + const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) + const [isLoadingComments, setIsLoadingComments] = React.useState(false) + // const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState(null) + + const [selectedVendorId, setSelectedVendorId] = React.useState(null) + const [selectedCbeId, setSelectedCbeId] = React.useState(null) + const [isContactDialogOpen, setIsContactDialogOpen] = React.useState(false) + const [selectedVendor, setSelectedVendor] = React.useState(null) + // console.log("selectedVendorId", selectedVendorId) + // console.log("selectedCbeId", selectedCbeId) + + React.useEffect(() => { + if (rowAction?.type === "comments") { + // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행 + openCommentSheet(Number(rowAction.row.original.responseId)) + } + }, [rowAction]) + + async function openCommentSheet(responseId: number) { + setInitialComments([]) + setIsLoadingComments(true) + const comments = rowAction?.row.original.comments + // const rfqId = rowAction?.row.original.rfqId + const vendorId = rowAction?.row.original.vendorId + + if (comments && comments.length > 0) { + const commentWithAttachments: CbeComment[] = await Promise.all( + comments.map(async (c) => { + const attachments = await fetchRfqAttachmentsbyCommentId(c.id) + + return { + ...c, + commentedBy: currentUserId, // DB나 API 응답에 있다고 가정 + attachments, + } + }) + ) + // 3) state에 저장 -> CommentSheet에서 initialComments로 사용 + setInitialComments(commentWithAttachments) + } + + // if(rfqId){ setSelectedRfqIdForComments(rfqId)} + if(vendorId){ setSelectedVendorId(vendorId)} + setSelectedCbeId(responseId) + setCommentSheetOpen(true) + setIsLoadingComments(false) + } + + const openVendorContactsDialog = (vendorId: number, vendor: VendorWithCbeFields) => { + setSelectedVendorId(vendorId) + setSelectedVendor(vendor) + setIsContactDialogOpen(true) + } + + // getColumns() 호출 시, router를 주입 + const columns = React.useMemo( + () => getColumns({ setRowAction, router, openCommentSheet, openVendorContactsDialog }), + [setRowAction, router] + ) + + const filterFields: DataTableFilterField[] = [ + ] + + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { id: "vendorName", label: "Vendor Name", type: "text" }, + { id: "vendorCode", label: "Vendor Code", type: "text" }, + { id: "respondedAt", label: "Updated at", type: "date" }, + ] + + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "respondedAt", desc: true }], + columnPinning: { right: ["comments"] }, + }, + getRowId: (originalRow) => String(originalRow.responseId), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + + + + + + + + + setRowAction(null)} + rfqId={rfqId} + open={rowAction?.type === "invite"} + showTrigger={false} + currentUser={currentUser} + /> + + + + + ) +} \ No newline at end of file diff --git a/lib/rfqs-tech/cbe-table/comments-sheet.tsx b/lib/rfqs-tech/cbe-table/comments-sheet.tsx new file mode 100644 index 00000000..e91a0617 --- /dev/null +++ b/lib/rfqs-tech/cbe-table/comments-sheet.tsx @@ -0,0 +1,328 @@ +"use client" + +import * as React from "react" +import { useForm, useFieldArray } from "react-hook-form" +import { z } from "zod" +import { zodResolver } from "@hookform/resolvers/zod" +import { Download, X, Loader2 } from "lucide-react" +import prettyBytes from "pretty-bytes" +import { toast } from "sonner" + +import { + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet" +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Textarea } from "@/components/ui/textarea" +import { + Dropzone, + DropzoneZone, + DropzoneUploadIcon, + DropzoneTitle, + DropzoneDescription, + DropzoneInput, +} from "@/components/ui/dropzone" +import { + Table, + TableHeader, + TableRow, + TableHead, + TableBody, + TableCell, +} from "@/components/ui/table" + +import { createRfqCommentWithAttachments } from "../service" +import { formatDate } from "@/lib/utils" + + +export interface CbeComment { + id: number + commentText: string + commentedBy?: number + commentedByEmail?: string + createdAt?: Date + attachments?: { + id: number + fileName: string + filePath: string + }[] +} + +// 1) props 정의 +interface CommentSheetProps extends React.ComponentPropsWithRef { + initialComments?: CbeComment[] + currentUserId: number + rfqId: number + // tbeId?: number + cbeId?: number + vendorId: number + onCommentsUpdated?: (comments: CbeComment[]) => void + isLoading?: boolean // New prop +} + +// 2) 폼 스키마 +const commentFormSchema = z.object({ + commentText: z.string().min(1, "댓글을 입력하세요."), + newFiles: z.array(z.any()).optional(), // File[] +}) +type CommentFormValues = z.infer + +const MAX_FILE_SIZE = 30e6 // 30MB + +export function CommentSheet({ + rfqId, + vendorId, + initialComments = [], + currentUserId, + // tbeId, + cbeId, + onCommentsUpdated, + isLoading = false, // Default to false + ...props +}: CommentSheetProps) { + + + const [comments, setComments] = React.useState(initialComments) + const [isPending, startTransition] = React.useTransition() + + React.useEffect(() => { + setComments(initialComments) + }, [initialComments]) + + const form = useForm({ + resolver: zodResolver(commentFormSchema), + defaultValues: { + commentText: "", + newFiles: [], + }, + }) + + const { fields: newFileFields, append, remove } = useFieldArray({ + control: form.control, + name: "newFiles", + }) + + // (A) 기존 코멘트 렌더링 + function renderExistingComments() { + + if (isLoading) { + return ( +
+ + Loading comments... +
+ ) + } + + if (comments.length === 0) { + return

No comments yet

+ } + return ( + + + + Comment + Attachments + Created At + Created By + + + + {comments.map((c) => ( + + {c.commentText} + + {!c.attachments?.length && ( + No files + )} + {c.attachments?.length && ( +
+ {c.attachments.map((att) => ( + + ))} +
+ )} + + {c.createdAt ? formatDate(c.createdAt) : "-"} + {c.commentedByEmail ?? "-"} + + ))} + +
+ ) + } + + // (B) 파일 드롭 + function handleDropAccepted(files: File[]) { + append(files) + } + + // (C) Submit + async function onSubmit(data: CommentFormValues) { + if (!rfqId) return + startTransition(async () => { + try { + // console.log("rfqId", rfqId) + // console.log("vendorId", vendorId) + // console.log("cbeId", cbeId) + // console.log("currentUserId", currentUserId) + + const res = await createRfqCommentWithAttachments({ + rfqId, + vendorId, + commentText: data.commentText, + commentedBy: currentUserId, + evaluationId: null, + cbeId: cbeId, + files: data.newFiles, + }) + + if (!res.ok) { + throw new Error("Failed to create comment") + } + + toast.success("Comment created") + + // 임시로 새 코멘트 추가 + const newComment: CbeComment = { + id: res.commentId, // 서버 응답 + commentText: data.commentText, + commentedBy: currentUserId, + createdAt: res.createdAt, + attachments: + data.newFiles?.map((f) => ({ + id: Math.floor(Math.random() * 1e6), + fileName: f.name, + filePath: "/uploads/" + f.name, + })) || [], + } + setComments((prev) => [...prev, newComment]) + onCommentsUpdated?.([...comments, newComment]) + + form.reset() + } catch (err: any) { + console.error(err) + toast.error("Error: " + err.message) + } + }) + } + + return ( + + + + Comments + + 필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다. + + + +
{renderExistingComments()}
+ +
+ + ( + + New Comment + +