diff options
Diffstat (limited to 'lib/equip-class/table/equipClass-table-columns.tsx')
| -rw-r--r-- | lib/equip-class/table/equipClass-table-columns.tsx | 143 |
1 files changed, 135 insertions, 8 deletions
diff --git a/lib/equip-class/table/equipClass-table-columns.tsx b/lib/equip-class/table/equipClass-table-columns.tsx index 0dfbf06f..51aacc97 100644 --- a/lib/equip-class/table/equipClass-table-columns.tsx +++ b/lib/equip-class/table/equipClass-table-columns.tsx @@ -9,17 +9,125 @@ import { formatDate } from "@/lib/utils" import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" import { equipclassColumnsConfig } from "@/config/equipClassColumnsConfig" import { ExtendedTagClasses } from "../validation" +import { Badge } from "@/components/ui/badge" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface GetColumnsProps { setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ExtendedTagClasses> | null>> } +// 서브클래스 배열을 렌더링하는 컴포넌트 +const SubclassesCell = ({ subclasses }: { subclasses: { + id: string; + desc: string; +}[] }) => { + if (!subclasses || subclasses.length === 0) { + return <span className="text-muted-foreground">-</span> + } + + if (subclasses.length <= 3) { + return ( + <div className="flex flex-wrap gap-1"> + {subclasses.map((subclass) => ( + <Badge key={subclass.id} variant="secondary" className="text-xs"> + {subclass.desc} + </Badge> + ))} + </div> + ) + } + + return ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <div className="flex flex-wrap gap-1"> + {subclasses.slice(0, 2).map((subclass) => ( + <Badge key={subclass.id} variant="secondary" className="text-xs"> + {subclass.desc} + </Badge> + ))} + <Badge variant="outline" className="text-xs"> + +{subclasses.length - 2} + </Badge> + </div> + </TooltipTrigger> + <TooltipContent> + <div className="max-w-sm"> + <div className="font-semibold mb-2">All Subclasses:</div> + <div className="flex flex-wrap gap-1"> + {subclasses.map((subclass) => ( + <Badge key={subclass.id} variant="secondary" className="text-xs"> + {subclass.desc} + </Badge> + ))} + </div> + </div> + </TooltipContent> + </Tooltip> + </TooltipProvider> + ) +} + +// 서브클래스 리마크를 렌더링하는 컴포넌트 +const SubclassRemarksCell = ({ remarks }: { remarks: Record<string, string> }) => { + if (!remarks || Object.keys(remarks).length === 0) { + return <span className="text-muted-foreground">-</span> + } + + const entries = Object.entries(remarks) + + if (entries.length <= 2) { + return ( + <div className="space-y-1"> + {entries.map(([key, value]) => ( + <div key={key} className="text-sm"> + <span className="font-medium">{key}:</span>{" "} + <span className="text-muted-foreground">{value}</span> + </div> + ))} + </div> + ) + } + + return ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <div className="space-y-1"> + {entries.slice(0, 1).map(([key, value]) => ( + <div key={key} className="text-sm"> + <span className="font-medium">{key}:</span>{" "} + <span className="text-muted-foreground">{value}</span> + </div> + ))} + <div className="text-xs text-muted-foreground"> + +{entries.length - 1} more... + </div> + </div> + </TooltipTrigger> + <TooltipContent> + <div className="max-w-md"> + <div className="font-semibold mb-2">All Remarks:</div> + <div className="space-y-1"> + {entries.map(([key, value]) => ( + <div key={key} className="text-sm"> + <span className="font-medium">{key}:</span>{" "} + <span className="text-muted-foreground">{value}</span> + </div> + ))} + </div> + </div> + </TooltipContent> + </Tooltip> + </TooltipProvider> + ) +} + /** * tanstack table 컬럼 정의 (중첩 헤더 버전) */ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedTagClasses>[] { - - // ---------------------------------------------------------------- // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 // ---------------------------------------------------------------- @@ -47,12 +155,27 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende type: cfg.type, }, cell: ({ row, cell }) => { - - if (cfg.id === "createdAt"||cfg.id === "updatedAt") { + // 날짜 필드 처리 + if (cfg.id === "createdAt" || cfg.id === "updatedAt") { const dateVal = cell.getValue() as Date return formatDate(dateVal, "KR") } + // 서브클래스 배열 처리 + if (cfg.id === "subclasses") { + const subclasses = cell.getValue() as { + id: string; + desc: string; + }[] + return <SubclassesCell subclasses={subclasses} /> + } + + // 서브클래스 리마크 처리 + if (cfg.id === "subclassRemark") { + const remarks = cell.getValue() as Record<string, string> + return <SubclassRemarksCell remarks={remarks} /> + } + return row.getValue(cfg.id) ?? "" }, } @@ -65,9 +188,13 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende // ---------------------------------------------------------------- const nestedColumns: ColumnDef<ExtendedTagClasses>[] = [] - // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함 - // 여기서는 그냥 Object.entries 순서 - Object.entries(groupMap).forEach(([groupName, colDefs]) => { + // 그룹 순서 정의 + const groupOrder = ["Basic Info", "Hierarchy", "Metadata", "_noGroup"] + + groupOrder.forEach((groupName) => { + const colDefs = groupMap[groupName] + if (!colDefs) return + if (groupName === "_noGroup") { // 그룹 없음 → 그냥 최상위 레벨 컬럼 nestedColumns.push(...colDefs) @@ -75,7 +202,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende // 상위 컬럼 nestedColumns.push({ id: groupName, - header: groupName, // "Basic Info", "Metadata" 등 + header: groupName, // "Basic Info", "Hierarchy", "Metadata" 등 columns: colDefs, }) } |