partially implement multi-delete button

src/app/lib/del.ts

@@ -2,6 +2,7 @@
 import { revalidatePath } from "next/cache";
 import prisma from "./db";
 import { redirect } from "next/navigation";
+import { Pathname } from "app/types";
 
 const tableMap = {
 	"/story": "story",
@@ -9,7 +10,7 @@ const tableMap = {
 	"/submission": "sub"
 }
 
-export async function deleteRecord(id: number, pathname: "/story" | "/publication" | "/submission") {
+export async function deleteRecord(id: number, pathname: Pathname) {
 	const table = tableMap[pathname]
 	const res = await prisma[table].delete({ where: { id } })
 	console.log(`deleted from ${table}: ${res.id}`)

src/app/submission/page.tsx

@@ -3,6 +3,7 @@ import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
 import { Pub, Response, Story, Sub } from "@prisma/client"
 import CreateSubmissionDialog from "./create"
+import { Trash2 } from "lucide-react"
 
 export type SubComplete = Sub & {
   pub: Pub,

src/app/tailwind.css

@@ -1055,6 +1055,10 @@ video {
   align-items: baseline;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }

src/app/types.ts

@@ -0,0 +1 @@
+export type Pathname = "/story" | "/publication" | "/submission"

src/app/ui/tables/data-table.tsx

@@ -37,9 +37,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { EyeIcon } from "lucide-react"
+import { EyeIcon, Trash2 } from "lucide-react"
 import { usePathname } from "next/navigation"
 import FormContextMenu from "./contextMenu"
+import { deleteRecords } from "app/lib/del"
+import { Pathname } from "app/types"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -78,10 +80,10 @@ export function DataTable<TData, TValue>({
       columnVisibility,
     }
   })
-  const pathname = usePathname()
+  const pathname: Pathname = usePathname()
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   return (<>
-    <div className="flex justify-between py-4">
+    <div className="flex justify-between items-center py-4">
       <div className="flex gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -116,6 +118,17 @@ export function DataTable<TData, TValue>({
 
       {children}
 
+      <Button variant="destructive" disabled={!table.getIsSomeRowsSelected()}
+        onClick={() => {
+          const selectedRows = table.getState().rowSelection
+          const rowIds = Object.keys(selectedRows)
+          const recordIds = rowIds.map(id => Number(table.getRow(id).original.id))
+          console.table(recordIds)
+          deleteRecords(recordIds, pathname)
+        }}
+      >
+        <Trash2 />
+      </Button>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>