From ef4c533ebacc2cdc97e518f30e9a9350004fcdfb Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 28 Apr 2025 02:13:30 +0000 Subject: ~20250428 작업사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/rfqs/cbe-table/cbe-table-columns.tsx | 92 +- lib/rfqs/cbe-table/cbe-table-toolbar-actions.tsx | 67 + lib/rfqs/cbe-table/cbe-table.tsx | 123 +- lib/rfqs/cbe-table/comments-sheet.tsx | 328 ++++ lib/rfqs/cbe-table/feature-flags-provider.tsx | 108 -- lib/rfqs/cbe-table/invite-vendors-dialog.tsx | 423 ++++++ lib/rfqs/cbe-table/vendor-contact-dialog.tsx | 71 + lib/rfqs/repository.ts | 10 +- lib/rfqs/service.ts | 1596 +++++++++++++++++--- lib/rfqs/table/add-rfq-dialog.tsx | 72 +- lib/rfqs/table/rfqs-table.tsx | 2 +- lib/rfqs/tbe-table/comments-sheet.tsx | 145 +- lib/rfqs/tbe-table/invite-vendors-dialog.tsx | 39 +- lib/rfqs/tbe-table/tbe-result-dialog.tsx | 208 +++ lib/rfqs/tbe-table/tbe-table-columns.tsx | 99 +- lib/rfqs/tbe-table/tbe-table-toolbar-actions.tsx | 23 +- lib/rfqs/tbe-table/tbe-table.tsx | 66 +- lib/rfqs/tbe-table/vendor-contact-dialog.tsx | 71 + .../vendor-contact/vendor-contact-table-column.tsx | 70 + .../vendor-contact/vendor-contact-table.tsx | 89 ++ lib/rfqs/validations.ts | 75 +- lib/rfqs/vendor-table/comments-sheet.tsx | 10 +- .../vendor-table/vendor-list/vendor-list-table.tsx | 2 +- .../vendor-table/vendors-table-toolbar-actions.tsx | 12 +- lib/rfqs/vendor-table/vendors-table.tsx | 16 +- 25 files changed, 3179 insertions(+), 638 deletions(-) create mode 100644 lib/rfqs/cbe-table/cbe-table-toolbar-actions.tsx create mode 100644 lib/rfqs/cbe-table/comments-sheet.tsx delete mode 100644 lib/rfqs/cbe-table/feature-flags-provider.tsx create mode 100644 lib/rfqs/cbe-table/invite-vendors-dialog.tsx create mode 100644 lib/rfqs/cbe-table/vendor-contact-dialog.tsx create mode 100644 lib/rfqs/tbe-table/tbe-result-dialog.tsx create mode 100644 lib/rfqs/tbe-table/vendor-contact-dialog.tsx create mode 100644 lib/rfqs/tbe-table/vendor-contact/vendor-contact-table-column.tsx create mode 100644 lib/rfqs/tbe-table/vendor-contact/vendor-contact-table.tsx (limited to 'lib/rfqs') diff --git a/lib/rfqs/cbe-table/cbe-table-columns.tsx b/lib/rfqs/cbe-table/cbe-table-columns.tsx index 325b0465..bc16496f 100644 --- a/lib/rfqs/cbe-table/cbe-table-columns.tsx +++ b/lib/rfqs/cbe-table/cbe-table-columns.tsx @@ -34,8 +34,9 @@ interface GetColumnsProps { React.SetStateAction | null> > router: NextRouter - openCommentSheet: (vendorId: number) => void - openFilesDialog: (cbeId:number , vendorId: number) => void + openCommentSheet: (responseId: number) => void + openVendorContactsDialog: (vendorId: number, vendor: VendorWithCbeFields) => void // 수정된 시그니처 + } /** @@ -45,7 +46,7 @@ export function getColumns({ setRowAction, router, openCommentSheet, - openFilesDialog + openVendorContactsDialog }: GetColumnsProps): ColumnDef[] { // ---------------------------------------------------------------- // 1) Select 컬럼 (체크박스) @@ -104,6 +105,30 @@ export function getColumns({ // 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 @@ -116,8 +141,8 @@ export function getColumns({ } - if (cfg.id === "rfqVendorStatus") { - const statusVal = row.original.rfqVendorStatus + 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" @@ -128,8 +153,8 @@ export function getColumns({ ) } - // 예) TBE Updated (날짜) - if (cfg.id === "cbeUpdated") { + // 예) CBE Updated (날짜) + if (cfg.id === "respondedAt" ) { const dateVal = val as Date | undefined if (!dateVal) return null return formatDate(dateVal) @@ -172,39 +197,32 @@ const commentsColumn: ColumnDef = { function handleClick() { // rowAction + openCommentSheet setRowAction({ row, type: "comments" }) - openCommentSheet(vendor.cbeId ?? 0) + openCommentSheet(vendor.responseId ?? 0) } return ( -
- - {/* - {commCount > 0 ? `${commCount} Comments` : "Add Comment"} - */} -
+ ) }, enableSorting: false, diff --git a/lib/rfqs/cbe-table/cbe-table-toolbar-actions.tsx b/lib/rfqs/cbe-table/cbe-table-toolbar-actions.tsx new file mode 100644 index 00000000..fbcf9af9 --- /dev/null +++ b/lib/rfqs/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/cbe-table/cbe-table.tsx b/lib/rfqs/cbe-table/cbe-table.tsx index b2a74466..37fbc3f4 100644 --- a/lib/rfqs/cbe-table/cbe-table.tsx +++ b/lib/rfqs/cbe-table/cbe-table.tsx @@ -8,16 +8,17 @@ import type { 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 { useFeatureFlags } from "./feature-flags-provider" -import { Vendor, vendors } from "@/db/schema/vendors" import { fetchRfqAttachmentsbyCommentId, getCBE } from "../service" -import { TbeComment } from "../tbe-table/comments-sheet" 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< @@ -30,56 +31,54 @@ interface VendorsTableProps { export function CbeTable({ promises, rfqId }: VendorsTableProps) { - const { featureFlags } = useFeatureFlags() // 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 - console.log(data, "data") const [rowAction, setRowAction] = React.useState | null>(null) // **router** 획득 const router = useRouter() - const [initialComments, setInitialComments] = React.useState([]) + const [initialComments, setInitialComments] = React.useState([]) const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) - const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState(null) - - const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false) - const [selectedVendorId, setSelectedVendorId] = React.useState(null) - const [selectedTbeId, setSelectedTbeId] = React.useState(null) + const [isLoadingComments, setIsLoadingComments] = React.useState(false) + // const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState(null) - // Add handleRefresh function - const handleRefresh = React.useCallback(() => { - router.refresh(); - }, [router]); + 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.id)) - } else if (rowAction?.type === "files") { - // Handle files action - const vendorId = rowAction.row.original.vendorId; - const cbeId = rowAction.row.original.cbeId ?? 0; - openFilesDialog(cbeId, vendorId); - } + openCommentSheet(Number(rowAction.row.original.responseId)) + } }, [rowAction]) - async function openCommentSheet(vendorId: number) { + 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: TbeComment[] = await Promise.all( + const commentWithAttachments: CbeComment[] = await Promise.all( comments.map(async (c) => { const attachments = await fetchRfqAttachmentsbyCommentId(c.id) return { ...c, - commentedBy: 1, // DB나 API 응답에 있다고 가정 + commentedBy: currentUserId, // DB나 API 응답에 있다고 가정 attachments, } }) @@ -88,20 +87,22 @@ export function CbeTable({ promises, rfqId }: VendorsTableProps) { setInitialComments(commentWithAttachments) } - setSelectedRfqIdForComments(vendorId) + // if(rfqId){ setSelectedRfqIdForComments(rfqId)} + if(vendorId){ setSelectedVendorId(vendorId)} + setSelectedCbeId(responseId) setCommentSheetOpen(true) + setIsLoadingComments(false) } - const openFilesDialog = (cbeId: number, vendorId: number) => { - setSelectedTbeId(cbeId) + const openVendorContactsDialog = (vendorId: number, vendor: VendorWithCbeFields) => { setSelectedVendorId(vendorId) - setIsFileDialogOpen(true) + setSelectedVendor(vendor) + setIsContactDialogOpen(true) } - // getColumns() 호출 시, router를 주입 const columns = React.useMemo( - () => getColumns({ setRowAction, router, openCommentSheet, openFilesDialog }), + () => getColumns({ setRowAction, router, openCommentSheet, openVendorContactsDialog }), [setRowAction, router] ) @@ -111,18 +112,7 @@ export function CbeTable({ promises, rfqId }: VendorsTableProps) { const advancedFilterFields: DataTableAdvancedFilterField[] = [ { id: "vendorName", label: "Vendor Name", type: "text" }, { id: "vendorCode", label: "Vendor Code", type: "text" }, - { id: "email", label: "Email", type: "text" }, - { id: "country", label: "Country", type: "text" }, - { - id: "vendorStatus", - label: "Vendor Status", - type: "multi-select", - options: vendors.status.enumValues.map((status) => ({ - label: toSentenceCase(status), - value: status, - })), - }, - { id: "rfqVendorUpdated", label: "Updated at", type: "date" }, + { id: "respondedAt", label: "Updated at", type: "date" }, ] @@ -134,32 +124,55 @@ export function CbeTable({ promises, rfqId }: VendorsTableProps) { enablePinning: true, enableAdvancedFilter: true, initialState: { - sorting: [{ id: "rfqVendorUpdated", desc: true }], - columnPinning: { right: ["actions"] }, + sorting: [{ id: "respondedAt", desc: true }], + columnPinning: { right: ["comments"] }, }, - getRowId: (originalRow) => String(originalRow.id), + 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/cbe-table/comments-sheet.tsx b/lib/rfqs/cbe-table/comments-sheet.tsx new file mode 100644 index 00000000..e91a0617 --- /dev/null +++ b/lib/rfqs/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 + +