subman-nextjs/src/app/publication/columns.tsx

84 lines
2.2 KiB
TypeScript
Raw Normal View History

2024-06-20 08:35:25 +00:00
"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trash2, Search } from "lucide-react"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { deletePub } from "app/lib/del"
import Link from "next/link"
import { PubsWithGenres } from "./page"
const columnHelper = createColumnHelper<PubsWithGenres>()
export const columns: ColumnDef<PubsWithGenres>[] = [
{
accessorKey: "title",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Title
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
)
},
},
{
accessorKey: "link",
header: "Link",
},
columnHelper.accessor("genres", {
cell: props => {
const genres = props.getValue()
.map(e => <Badge>{e.name}</Badge>)
return genres
},
filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects
}),
{
id: "actions",
// header: "Actions",
cell: ({ row }) => {
return <div className="flex items-center justify-around">
<Link href={`/publication/${row.original.id}`}><Search /></Link>
<Dialog>
<DialogTrigger asChild>
<Button variant="ghost"><Trash2 color="red" /></Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>
Deleting a publication cannot be undone!
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="destructive"
onClick={() => {
deletePub(row.original.id)
}}>Yes, delete it!
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
}
}
]