diff options
Diffstat (limited to 'lib/email-template/table/template-table-columns.tsx')
| -rw-r--r-- | lib/email-template/table/template-table-columns.tsx | 187 |
1 files changed, 84 insertions, 103 deletions
diff --git a/lib/email-template/table/template-table-columns.tsx b/lib/email-template/table/template-table-columns.tsx index a678a20a..9c3e69c2 100644 --- a/lib/email-template/table/template-table-columns.tsx +++ b/lib/email-template/table/template-table-columns.tsx @@ -1,41 +1,46 @@ -"use client" +'use client'; -import * as React from "react" -import { type ColumnDef } from "@tanstack/react-table" -import { ArrowUpDown, Copy, MoreHorizontal, Edit, Trash, Eye } from "lucide-react" -import Link from "next/link" - -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" +/* IMPORT */ +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Checkbox } from '@/components/ui/checkbox'; +import { Copy, Eye, MoreHorizontal, Trash } from 'lucide-react'; +import { DataTableColumnHeaderSimple } from '@/components/data-table/data-table-column-simple-header'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { toast } from "sonner" -import { formatDate } from "@/lib/utils" -import { type TemplateListView } from "@/db/schema" -import { type DataTableRowAction } from "@/types/table" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { getCategoryDisplayName, getCategoryVariant } from "../validations" +} from '@/components/ui/dropdown-menu'; +import { formatDate } from '@/lib/utils'; +import { getCategoryDisplayName, getCategoryVariant } from '../validations'; +import Link from 'next/link'; +import { type ColumnDef } from '@tanstack/react-table'; +import { type Dispatch, type SetStateAction } from 'react'; +import { type DataTableRowAction } from '@/types/table'; +import { type TemplateListView } from '@/db/schema'; + +// ---------------------------------------------------------------------------------------------------- +/* TYPES */ interface GetColumnsProps { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TemplateListView> | null>> + setRowAction: Dispatch<SetStateAction<DataTableRowAction<TemplateListView> | null>>; } +// ---------------------------------------------------------------------------------------------------- + +/* FUNCTION FOR GETTING COLUMNS SETTING */ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TemplateListView>[] { return [ - // 체크박스 컬럼 + // [1] Checkbox Column { - id: "select", + id: 'select', header: ({ table }) => ( <Checkbox checked={ table.getIsAllPageRowsSelected() || - (table.getIsSomePageRowsSelected() && "indeterminate") + (table.getIsSomePageRowsSelected() && 'indeterminate') } onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -53,10 +58,9 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat enableSorting: false, enableHiding: false, }, - - // 템플릿 이름 컬럼 (클릭 시 세부 페이지로) + // [2] Template Name Column { - accessorKey: "name", + accessorKey: 'name', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="템플릿 이름" /> ), @@ -80,34 +84,33 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat }, enableSorting: true, enableHiding: false, - size:200 + size: 200, }, - + // [3] Email Subject Column { - accessorKey: "subject", - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="이메일 제목" /> - ), - cell: ({ getValue }) => { - const subject = getValue() as string - return ( - <div className="text-sm text-muted-foreground"> - {subject} - </div> - ) - }, - enableSorting: true, - size:250 + accessorKey: 'subject', + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="이메일 제목" /> + ), + cell: ({ getValue }) => { + const subject = getValue() as string; + return ( + <div className="text-sm text-muted-foreground"> + {subject} + </div> + ) }, - - // Slug 컬럼 + enableSorting: true, + size: 250, + }, + // [4] Slug Column { - accessorKey: "slug", + accessorKey: 'slug', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="Slug" /> ), cell: ({ getValue }) => { - const slug = getValue() as string + const slug = getValue() as string; return ( <div className="font-mono text-sm text-muted-foreground"> {slug} @@ -115,44 +118,40 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:120 - + size: 120, }, - - // 카테고리 컬럼 + // [5] Category Column { - accessorKey: "category", + accessorKey: 'category', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="카테고리" /> ), cell: ({ row }) => { - const category = row.original.category - const displayName = getCategoryDisplayName(category) - const variant = getCategoryVariant(category) + const category = row.original.category; + const displayName = getCategoryDisplayName(category); + const variant = getCategoryVariant(category); return ( <Badge variant={variant}> {displayName} </Badge> - ) + ); }, - enableSorting: true, filterFn: (row, id, value) => { - return value.includes(row.getValue(id)) + return value.includes(row.getValue(id)); }, - size:120 - + enableSorting: true, + size: 120, }, - - // 변수 개수 컬럼 + // [6] Variable Count Column { - accessorKey: "variableCount", + accessorKey: 'variableCount', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="변수" /> ), cell: ({ row }) => { - const variableCount = row.original.variableCount - const requiredCount = row.original.requiredVariableCount + const variableCount = row.original.variableCount; + const requiredCount = row.original.requiredVariableCount; return ( <div className="text-center"> @@ -163,21 +162,20 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat </div> )} </div> - ) + ); }, enableSorting: true, - size:80 - + size: 80, }, - - // 버전 컬럼 + // [7] Version Column { - accessorKey: "version", + accessorKey: 'version', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="버전" /> ), cell: ({ getValue }) => { - const version = getValue() as number + const version = getValue() as number; + return ( <div className="text-center"> <Badge variant="outline" className="font-mono text-xs"> @@ -187,18 +185,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:80 - + size: 80, }, - - // 생성일 컬럼 + // [8] Created At Column { - accessorKey: "createdAt", + accessorKey: 'createdAt', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="생성일" /> ), cell: ({ cell }) => { - const date = cell.getValue() as Date + const date = cell.getValue() as Date; + return ( <div className="text-sm text-muted-foreground"> {formatDate(date)} @@ -206,18 +203,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:200 - + size: 150, }, - - // 수정일 컬럼 + // [9] Updated At Column { - accessorKey: "updatedAt", + accessorKey: 'updatedAt', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="수정일" /> ), cell: ({ cell }) => { - const date = cell.getValue() as Date + const date = cell.getValue() as Date; + return ( <div className="text-sm text-muted-foreground"> {formatDate(date)} @@ -225,15 +221,13 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:200 - + size: 150, }, - - // Actions 컬럼 + // [10] Actions Column { - id: "actions", + id: 'actions', cell: ({ row }) => { - const template = row.original + const template = row.original; return ( <DropdownMenu> @@ -253,30 +247,18 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat 상세 보기 </Link> </DropdownMenuItem> - - {/* <DropdownMenuItem - onClick={() => { - setRowAction({ type: "update", row }) - }} - > - <Edit className="mr-2 size-4" aria-hidden="true" /> - 업데이트 - </DropdownMenuItem> */} - <DropdownMenuItem onClick={() => { - setRowAction({ type: "duplicate", row }) + setRowAction({ type: 'duplicate', row }) }} > <Copy className="mr-2 size-4" aria-hidden="true" /> 복제하기 </DropdownMenuItem> - <DropdownMenuSeparator /> - <DropdownMenuItem onClick={() => { - setRowAction({ type: "delete", row }) + setRowAction({ type: 'delete', row }) }} className="text-destructive focus:text-destructive" > @@ -290,7 +272,6 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat enableSorting: false, enableHiding: false, size:80 - }, - ] -}
\ No newline at end of file + ]; +} |