98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
"use client"
|
|
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
|
|
import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { PubWithGenres } from "./page"
|
|
import { TextInputCell } from "app/ui/tables/inputs/textInput"
|
|
import { selectCol } from "app/ui/tables/selectColumn"
|
|
import NumberInputCell from "app/ui/tables/inputs/numberInput"
|
|
import { pubSchema } from "app/ui/forms/schemas"
|
|
import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
|
|
import { genrePickerFilterFn } from "app/lib/filterFns"
|
|
|
|
|
|
const columnHelper = createColumnHelper<PubWithGenres>()
|
|
|
|
export const columns: ColumnDef<PubWithGenres>[] = [
|
|
selectCol,
|
|
{
|
|
accessorKey: "title",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
<span className="hidden sm:block">
|
|
Title
|
|
</span>
|
|
<span className="block sm:hidden"><BookType /></span>
|
|
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
|
|
</Button>
|
|
)
|
|
},
|
|
cell: cell => (
|
|
<>
|
|
{/* @ts-ignore */}
|
|
<p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
|
|
<TextInputCell cellContext={cell} className="hidden md:block" />
|
|
</>
|
|
),
|
|
meta: { formSchema: pubSchema }
|
|
},
|
|
|
|
{
|
|
accessorKey: "link",
|
|
header: () => (
|
|
<div className="mx-auto w-fit">
|
|
<span className="hidden sm:block">Link</span>
|
|
<span className="block sm:hidden"><SquareArrowOutUpRight /></span>
|
|
</div>
|
|
),
|
|
cell: cell => (
|
|
<>
|
|
{/* @ts-ignore */}
|
|
<p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
|
|
<TextInputCell cellContext={cell} className="hidden md:block" />
|
|
</>
|
|
),
|
|
meta: { formSchema: pubSchema }
|
|
},
|
|
|
|
columnHelper.accessor("genres", {
|
|
header: () => (
|
|
<div className="w-fit mx-auto">
|
|
<span className="hidden sm:block">Genres</span>
|
|
<span className="sm:hidden"><Drama /></span>
|
|
</div>
|
|
),
|
|
cell: GenrePickerInputCell,
|
|
filterFn: genrePickerFilterFn
|
|
}),
|
|
|
|
|
|
{
|
|
accessorKey: "query_after_days",
|
|
header: () => (
|
|
<div>
|
|
<span className="hidden sm:block">Query After (days)</span>
|
|
<span className="sm:hidden"><Clock /></span>
|
|
</div>
|
|
),
|
|
enableColumnFilter: false,
|
|
cell: cell => (
|
|
<>
|
|
{/* @ts-ignore */}
|
|
<p className="block md:hidden text-center">{cell.getValue()}</p>
|
|
<NumberInputCell cellContext={cell} className="hidden md:block" />
|
|
</>
|
|
),
|
|
meta: {
|
|
step: 10,
|
|
formSchema: pubSchema
|
|
},
|
|
|
|
},
|
|
]
|
|
|