diff options
Diffstat (limited to 'lib/rfqs/vendor-table/vendors-table-columns.tsx')
| -rw-r--r-- | lib/rfqs/vendor-table/vendors-table-columns.tsx | 120 |
1 files changed, 66 insertions, 54 deletions
diff --git a/lib/rfqs/vendor-table/vendors-table-columns.tsx b/lib/rfqs/vendor-table/vendors-table-columns.tsx index 1220cb9d..f152cec5 100644 --- a/lib/rfqs/vendor-table/vendors-table-columns.tsx +++ b/lib/rfqs/vendor-table/vendors-table-columns.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { type DataTableRowAction } from "@/types/table" import { type ColumnDef } from "@tanstack/react-table" -import { Ellipsis } from "lucide-react" +import { Ellipsis, MessageSquare } from "lucide-react" import { toast } from "sonner" import { getErrorMessage } from "@/lib/handle-error" @@ -78,10 +78,6 @@ export function getColumns({ setRowAction, router, openCommentSheet }: GetColumn } // ---------------------------------------------------------------- - // 2) actions 컬럼 (Dropdown 메뉴) - // ---------------------------------------------------------------- - - // ---------------------------------------------------------------- // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 // ---------------------------------------------------------------- // 3-1) groupMap: { [groupName]: ColumnDef<MatchedVendorRow>[] } @@ -149,19 +145,76 @@ export function getColumns({ setRowAction, router, openCommentSheet }: GetColumn groupMap[groupName].push(childCol) }) + const commentsColumn: ColumnDef<MatchedVendorRow> = { + id: "comments", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="Comments" /> + ), + cell: ({ row }) => { + const vendor = row.original + const commCount = vendor.comments?.length ?? 0 + + function handleClick() { + // rowAction + openCommentSheet + setRowAction({ row, type: "comments" }) + openCommentSheet(Number(vendor.id) ?? 0) + } + + return ( + <Button + variant="ghost" + size="sm" + className="relative h-8 w-8 p-0 group" + onClick={handleClick} + aria-label={ + commCount > 0 ? `View ${commCount} comments` : "No comments" + } + > + <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" /> + {commCount > 0 && ( + <Badge + variant="secondary" + className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center" + > + {commCount} + </Badge> + )} + <span className="sr-only"> + {commCount > 0 ? `${commCount} Comments` : "No Comments"} + </span> + </Button> + ) + }, + enableSorting: false, + maxSize: 80 + } + const actionsColumn: ColumnDef<MatchedVendorRow> = { id: "actions", - // header: "Actions", cell: ({ row }) => { const rfq = row.original - const commCount = rfq.comments?.length ?? 0 const status = row.original.rfqVendorStatus + const isDisabled = !status || status === 'INVITED' || status === 'ACCEPTED' - // 공통 코멘트 핸들러 - function handleCommentClick() { - setRowAction({ row, type: "comments" }) - openCommentSheet(Number(row.original.id)) + if (isDisabled) { + return ( + <div className="relative group"> + <Button + aria-label="Actions disabled" + variant="ghost" + className="flex size-8 p-0 opacity-50 cursor-not-allowed" + disabled + > + <Ellipsis className="size-4" aria-hidden="true" /> + </Button> + {/* Tooltip explaining why it's disabled */} + <div className="absolute hidden group-hover:block right-0 -bottom-8 bg-popover text-popover-foreground text-xs p-2 rounded shadow-md whitespace-nowrap z-50"> + 초대 상태에서는 사용할 수 없습니다 + </div> + </div> + ) } + return ( <DropdownMenu> @@ -175,21 +228,12 @@ export function getColumns({ setRowAction, router, openCommentSheet }: GetColumn </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end" className="w-40"> - {/* 기존 기능: status가 INVITED일 때만 표시 */} {(!status || status === 'INVITED') && ( <DropdownMenuItem onSelect={() => setRowAction({ row, type: "invite" })}> 발행하기 </DropdownMenuItem> )} - {/* 두 기능 사이 구분선 */} - <DropdownMenuSeparator /> - {/* 코멘트 메뉴 항목 */} - <DropdownMenuItem onSelect={handleCommentClick}> - {commCount > 0 ? `${commCount} Comments` : "Add Comment"} - </DropdownMenuItem> - - </DropdownMenuContent> </DropdownMenu> ) @@ -199,37 +243,6 @@ export function getColumns({ setRowAction, router, openCommentSheet }: GetColumn enableHiding: false, } - - // const commentsColumn: ColumnDef<MatchedVendorRow> = { - // id: "comments", - // header: "Comments", - // cell: ({ row }) => { - // const rfq = row.original - // const commCount = rfq.comments?.length ?? 0 - - // // 공통 클릭 핸들러 - // function handleClick() { - // setRowAction({ row, type: "comments" }) - // openCommentSheet(Number(row.original.id)) - // } - - // return commCount > 0 ? ( - // <a - // href="#" - // onClick={(e) => { - // e.preventDefault() - // handleClick() - // }} - // > - // {commCount} Comments - // </a> - // ) : ( - // <Button size="sm" variant="outline" onClick={handleClick}> - // Add Comment - // </Button> - // ) - // }, - // } // ---------------------------------------------------------------- // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기 // ---------------------------------------------------------------- @@ -252,13 +265,12 @@ export function getColumns({ setRowAction, router, openCommentSheet }: GetColumn }) // ---------------------------------------------------------------- - // 4) 최종 컬럼 배열: select, nestedColumns, actions + // 4) 최종 컬럼 배열: select, nestedColumns, comments, actions // ---------------------------------------------------------------- return [ selectColumn, ...nestedColumns, - // commentsColumn, + commentsColumn, actionsColumn - ] }
\ No newline at end of file |