summaryrefslogtreecommitdiff
path: root/lib/email-log/table/email-log-table.tsx
blob: db627af5cdb2a6af91db126cb062189fd47f537a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
"use client"

import * as React from "react"
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
} from "@/types/table"

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 { getColumns } from "./email-log-table-columns"
import { getEmailLogList } from "../service"
import { type InferSelectModel } from "drizzle-orm"
import { emailLogs } from "@/db/schema/emailLogs"

interface EmailLogTableProps {
  promises: Promise<[
    Awaited<ReturnType<typeof getEmailLogList>>,
  ]>
}

export function EmailLogTable({ promises }: EmailLogTableProps) {
  const [{ data, pageCount }] = React.use(promises)

  type EmailLog = InferSelectModel<typeof emailLogs>

  const columns = React.useMemo(() => getColumns<EmailLog>(), [])

  const filterFields: DataTableFilterField<EmailLog>[] = []

  const advancedFilterFields: DataTableAdvancedFilterField<EmailLog>[] = [
    { id: "from", label: "From", type: "text" },
    { id: "to", label: "To", type: "text" },
    { id: "subject", label: "Subject", type: "text" },
    { id: "createdAt", label: "발송시간", type: "date" },
  ]

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
    },
    getRowId: (row) => String(row.id),
    shallow: false,
    clearOnDefault: true,
  })

  return (
    <DataTable table={table}>
      <DataTableAdvancedToolbar
        table={table}
        filterFields={advancedFilterFields}
        shallow={false}
      />
    </DataTable>
  )
}