diff options
Diffstat (limited to 'lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx')
| -rw-r--r-- | lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx | 221 |
1 files changed, 107 insertions, 114 deletions
diff --git a/lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx b/lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx index bdf583bc..88c8107b 100644 --- a/lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx +++ b/lib/evaluation-criteria/table/reg-eval-criteria-columns.tsx @@ -10,14 +10,16 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuShortcut, + DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; -import { Ellipsis } from 'lucide-react'; +import { Ellipsis, Eye, Edit, Trash2 } from 'lucide-react'; import { REG_EVAL_CRITERIA_CATEGORY, REG_EVAL_CRITERIA_CATEGORY2, REG_EVAL_CRITERIA_ITEM, - type RegEvalCriteriaView, + type RegEvalCriteria, // RegEvalCriteriaView 대신 RegEvalCriteria 사용 } from '@/db/schema'; import { type ColumnDef } from '@tanstack/react-table'; import { type DataTableRowAction } from '@/types/table'; @@ -26,16 +28,16 @@ import { type DataTableRowAction } from '@/types/table'; /* TYPES */ interface GetColumnsProps { - setRowAction: Dispatch<SetStateAction<DataTableRowAction<RegEvalCriteriaView> | null>>, + setRowAction: Dispatch<SetStateAction<DataTableRowAction<RegEvalCriteria> | null>>, }; // ---------------------------------------------------------------------------------------------------- /* FUNCTION FOR GETTING COLUMNS SETTING */ -function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteriaView>[] { +function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteria>[] { // [1] SELECT COLUMN - CHECKBOX - const selectColumn: ColumnDef<RegEvalCriteriaView> = { + const selectColumn: ColumnDef<RegEvalCriteria> = { id: 'select', header: ({ table }) => ( <Checkbox @@ -58,11 +60,11 @@ function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteri ), enableSorting: false, enableHiding: false, - size:40, + size: 40, }; // [2] CRITERIA COLUMNS - const criteriaColumns: ColumnDef<RegEvalCriteriaView>[] = [ + const criteriaColumns: ColumnDef<RegEvalCriteria>[] = [ { accessorKey: 'category', header: ({ column }) => ( @@ -146,149 +148,129 @@ function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteri { accessorKey: 'range', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="범위" /> + <DataTableColumnHeaderSimple column={column} title="평가명" /> ), cell: ({ row }) => ( - <div className="font-regular"> + <div className="font-medium"> {row.getValue('range') || '-'} </div> ), enableSorting: true, enableHiding: false, meta: { - excelHeader: 'Range', + excelHeader: 'Evaluation Name', type: 'text', }, }, { - accessorKey: 'detail', + accessorKey: 'scoreType', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="평가내용" /> - ), - cell: ({ row }) => ( - <div className="font-bold"> - {row.getValue('detail')} - </div> - ), - enableSorting: true, - enableHiding: false, - meta: { - excelHeader: 'Detail', - type: 'text', - }, - }, - ]; - - // [3] SCORE COLUMNS - const scoreEquipColumns: ColumnDef<RegEvalCriteriaView>[] = [ - { - accessorKey: 'scoreEquipShip', - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="조선" /> + <DataTableColumnHeaderSimple column={column} title="점수유형" /> ), cell: ({ row }) => { - const value = row.getValue<string>('scoreEquipShip'); - const displayValue = typeof value === 'string' - ? parseFloat(parseFloat(value).toFixed(2)).toString() - : '-'; + const value = row.getValue<string>('scoreType'); return ( - <div className="font-bold"> - {displayValue} - </div> + <Badge variant={value === 'fixed' ? 'default' : 'secondary'}> + {value === 'fixed' ? '고정점수' : '변동점수'} + </Badge> ); }, enableSorting: true, enableHiding: false, meta: { - excelHeader: 'Equipment-Shipbuilding Score', - group: 'Equipment Score', - type: 'number', + excelHeader: 'Score Type', + type: 'select', }, }, + ]; + + // [3] VARIABLE SCORE COLUMNS (변동점수 관련 컬럼들) + const variableScoreColumns: ColumnDef<RegEvalCriteria>[] = [ { - accessorKey: 'scoreEquipMarine', + accessorKey: 'variableScoreMin', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="해양" /> + <DataTableColumnHeaderSimple column={column} title="최소점수" /> ), cell: ({ row }) => { - const value = row.getValue<string>('scoreEquipMarine'); + const value = row.getValue<string>('variableScoreMin'); + const scoreType = row.getValue<string>('scoreType'); + if (scoreType !== 'variable') return <div className="text-gray-400">-</div>; + const displayValue = typeof value === 'string' ? parseFloat(parseFloat(value).toFixed(2)).toString() : '-'; return ( - <div className="font-bold"> + <div className="font-regular text-center"> {displayValue} </div> ); }, enableSorting: true, - enableHiding: false, + enableHiding: true, meta: { - excelHeader: 'Equipment-Marine Engineering Score', - group: 'Equipment Score', + excelHeader: 'Min Score', type: 'number', }, }, - ]; - const scoreBulkColumns: ColumnDef<RegEvalCriteriaView>[] = [ { - accessorKey: 'scoreBulkShip', + accessorKey: 'variableScoreMax', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="조선" /> + <DataTableColumnHeaderSimple column={column} title="최대점수" /> ), cell: ({ row }) => { - const value = row.getValue<string>('scoreBulkShip'); + const value = row.getValue<string>('variableScoreMax'); + const scoreType = row.getValue<string>('scoreType'); + if (scoreType !== 'variable') return <div className="text-gray-400">-</div>; + const displayValue = typeof value === 'string' ? parseFloat(parseFloat(value).toFixed(2)).toString() : '-'; return ( - <div className="font-bold"> + <div className="font-regular text-center"> {displayValue} </div> ); }, enableSorting: true, - enableHiding: false, + enableHiding: true, meta: { - excelHeader: 'Bulk-Shipbuilding Score', - group: 'Bulk Score', + excelHeader: 'Max Score', type: 'number', }, }, { - accessorKey: 'scoreBulkMarine', + accessorKey: 'variableScoreUnit', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="해양" /> + <DataTableColumnHeaderSimple column={column} title="점수단위" /> ), cell: ({ row }) => { - const value = row.getValue<string>('scoreBulkMarine'); - const displayValue = typeof value === 'string' - ? parseFloat(parseFloat(value).toFixed(2)).toString() - : '-'; + const value = row.getValue<string>('variableScoreUnit'); + const scoreType = row.getValue<string>('scoreType'); + if (scoreType !== 'variable') return <div className="text-gray-400">-</div>; + return ( - <div className="font-bold"> - {displayValue} + <div className="font-regular text-center"> + {value || '-'} </div> ); }, enableSorting: true, - enableHiding: false, + enableHiding: true, meta: { - excelHeader: 'Bulk-Marine Engineering Score', - group: 'Bulk Score', - type: 'number', + excelHeader: 'Score Unit', + type: 'text', }, }, ]; // [4] REMARKS COLUMN - const remarksColumn: ColumnDef<RegEvalCriteriaView> = { + const remarksColumn: ColumnDef<RegEvalCriteria> = { accessorKey: 'remarks', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="비고" /> ), cell: ({ row }) => ( - <div className="font-regular"> + <div className="font-regular max-w-[150px] truncate" title={row.getValue('remarks')}> {row.getValue('remarks') || '-'} </div> ), @@ -300,8 +282,8 @@ function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteri }, }; - // [5] HIDDEN ID COLUMN - const hiddenColumns: ColumnDef<RegEvalCriteriaView>[] = [ + // [5] HIDDEN ID COLUMNS + const hiddenColumns: ColumnDef<RegEvalCriteria>[] = [ { accessorKey: 'id', header: ({ column }) => ( @@ -321,66 +303,86 @@ function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteri }, }, { - accessorKey: 'criteriaId', + accessorKey: 'createdAt', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="기준 ID" /> - ), - cell: ({ row }) => ( - <div className="font-regular"> - {row.getValue('criteriaId')} - </div> + <DataTableColumnHeaderSimple column={column} title="생성일시" /> ), + cell: ({ row }) => { + const date = row.getValue<Date>('createdAt'); + return ( + <div className="font-regular"> + {date ? new Date(date).toLocaleDateString('ko-KR') : '-'} + </div> + ); + }, enableSorting: true, enableHiding: true, meta: { - excelHeader: 'Criteria ID', + excelHeader: 'Created At', group: 'Meta Data', - type: 'criteriaId', + type: 'date', }, }, { - accessorKey: 'orderIndex', + accessorKey: 'updatedAt', header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="정렬 순서" /> - ), - cell: ({ row }) => ( - <div className="font-regular"> - {row.getValue('orderIndex')} - </div> + <DataTableColumnHeaderSimple column={column} title="수정일시" /> ), + cell: ({ row }) => { + const date = row.getValue<Date>('updatedAt'); + return ( + <div className="font-regular"> + {date ? new Date(date).toLocaleDateString('ko-KR') : '-'} + </div> + ); + }, enableSorting: true, enableHiding: true, meta: { - excelHeader: 'Order Index', + excelHeader: 'Updated At', group: 'Meta Data', - type: 'number', + type: 'date', }, }, ]; - // [6] ACTIONS COLUMN - DROPDOWN MENU - const actionsColumn: ColumnDef<RegEvalCriteriaView> = { + // [6] ACTIONS COLUMN - DROPDOWN MENU WITH VIEW ACTION + const actionsColumn: ColumnDef<RegEvalCriteria> = { id: 'actions', enableHiding: false, cell: function Cell({ row }) { return ( <DropdownMenu> <DropdownMenuTrigger asChild> - <Button variant="ghost" size="icon"> - <Ellipsis className="size-4" aria-hidden="true" /> + <Button + aria-label="Open menu" + variant="ghost" + className="flex size-8 p-0 data-[state=open]:bg-muted" + > + <Ellipsis className="size-4" aria-hidden="true" /> </Button> </DropdownMenuTrigger> - <DropdownMenuContent align="end"> + <DropdownMenuContent align="end" className="w-40"> + <DropdownMenuItem + onSelect={() => setRowAction({ row, type: "view" })} + > + <Eye className="mr-2 size-4" /> + 상세보기 + </DropdownMenuItem> + <DropdownMenuSeparator /> <DropdownMenuItem - onClick={() => setRowAction({ row, type: 'update' })} + onSelect={() => setRowAction({ row, type: "update" })} > - Modify Criteria + <Edit className="mr-2 size-4" /> + 수정하기 </DropdownMenuItem> + <DropdownMenuSeparator /> <DropdownMenuItem - onClick={() => setRowAction({ row, type: 'delete' })} - className="text-destructive" + onSelect={() => setRowAction({ row, type: "delete" })} > - Delete Criteria + <Trash2 className="mr-2 size-4" /> + 삭제하기 + <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> @@ -392,18 +394,9 @@ function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RegEvalCriteri return [ selectColumn, ...criteriaColumns, - { - id: 'scoreEquip', - header: '기자재', - columns: scoreEquipColumns, - }, - { - id: 'scoreBulk', - header: '벌크', - columns: scoreBulkColumns, - }, - ...hiddenColumns, + ...variableScoreColumns, remarksColumn, + ...hiddenColumns, actionsColumn, ]; }; |