context menu -- keyboard navigation

src/app/lib/del.ts

@@ -3,28 +3,34 @@ import { revalidatePath } from "next/cache";
 import prisma from "./db";
 import { redirect } from "next/navigation";
 
-export async function deleteStory(id: number) {
-	const res = await prisma.story.delete({
+export async function deleteRecord(id: number, pathname: "/story" | "/publication" | "/submission") {
+	let res = {}
+	switch (pathname) {
+		case "/story":
+			res = await prisma.story.delete({
 				where: { id }
 			})
 			console.log(`deleted: ${res}`)
-	revalidatePath("/story")
-	redirect("/story")
-}
-export async function deletePub(id: number) {
-	const res = await prisma.pub.delete({
+			break;
+		case "/publication":
+			res = await prisma.pub.delete({
 				where: { id }
 			})
 			console.log(`deleted: ${res}`)
-	revalidatePath("/publication")
-	redirect("/publication")
+			break;
+		case "/submission":
+			res = await prisma.sub.delete({
+				where: { id }
+			})
+			console.log(`deleted: ${res}`)
+			break;
+		default:
+			break;
+	}
+	console.log("revalidating: " + pathname)
+	revalidatePath(pathname)
+	redirect(pathname)
 }
 
-export async function deleteSub(id: number) {
-	const res = await prisma.sub.delete({
-		where: { id }
-	})
-	console.log(`deleted: ${res}`)
-	revalidatePath("/submission")
-	redirect("/submission")
-}
+
+

src/app/publication/columns.tsx

@@ -13,7 +13,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import { deletePub } from "app/lib/del"
 import Link from "next/link"
 import { PubsWithGenres } from "./page"
 import { DialogClose } from "@radix-ui/react-dialog"
@@ -58,7 +57,6 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     accessorKey: "query_after_days",
     header: "Query After (days)"
   },
-  actions({ pathname: "/publication", deleteFn: deletePub })
 
 
 ]

src/app/story/columns.tsx

@@ -3,7 +3,6 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { deleteStory } from "app/lib/del"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 
@@ -49,7 +48,5 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
-  //this is a function so that the actions column can be uniform across tables
-  actions({ pathname: "/story", deleteFn: deleteStory })
 ]
 

src/app/submission/columns.tsx

@@ -2,7 +2,6 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { deleteSub } from "app/lib/del"
 import { SubComplete } from "./page"
 import { actions } from "app/ui/tables/actions"
 
@@ -76,7 +75,6 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "story",
     header: "Story"
   },
-  actions({ pathname: "/submission", deleteFn: deleteSub })
 
 ]
 

src/app/tailwind.css

@@ -1283,6 +1283,10 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
+.bg-border {
+  background-color: hsl(var(--border));
+}
+
 .bg-card {
   background-color: hsl(var(--card));
 }
@@ -1324,10 +1328,6 @@ body {
   background-color: transparent;
 }
 
-.bg-border {
-  background-color: hsl(var(--border));
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -2174,14 +2174,14 @@ body {
   color: hsl(var(--primary-foreground));
 }
 
-.data-\[state\=open\]\:text-muted-foreground[data-state=open] {
-  color: hsl(var(--muted-foreground));
-}
-
 .data-\[state\=open\]\:text-accent-foreground[data-state=open] {
   color: hsl(var(--accent-foreground));
 }
 
+.data-\[state\=open\]\:text-muted-foreground[data-state=open] {
+  color: hsl(var(--muted-foreground));
+}
+
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }

src/app/ui/tables/contextMenu.tsx

@@ -0,0 +1,42 @@
+import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { ContextMenuContent, ContextMenuItem } from "@/components/ui/context-menu"
+import { deleteRecord } from "app/lib/del"
+import { Trash2 } from "lucide-react"
+import Link from "next/link"
+import { ContextMenuSeparator } from "@radix-ui/react-context-menu"
+
+export default function FormContextMenu({ pathname, row }) {
+
+  return (
+    <Dialog>
+      <ContextMenuContent >
+        <Link href={`${pathname}/${row.original.id}`}>
+          <ContextMenuItem>Inspect</ContextMenuItem>
+        </Link>
+        <ContextMenuSeparator />
+        <DialogTrigger asChild>
+          <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>
+        </DialogTrigger>
+      </ContextMenuContent>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>
+            Deleting a {pathname.slice(1)} cannot be undone!
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="destructive"
+              onClick={() => {
+                deleteRecord(row.original.id, pathname)
+              }}>Yes, delete it!
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+  )
+}

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

@@ -39,6 +39,7 @@ import {
 } from "@/components/ui/table"
 import { EyeIcon } from "lucide-react"
 import { usePathname } from "next/navigation"
+import FormContextMenu from "./contextMenu"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -144,6 +145,7 @@ export function DataTable<TData, TValue>({
       </DropdownMenu>
     </div>
     <div className="rounded-md border">
+
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -166,23 +168,22 @@ export function DataTable<TData, TValue>({
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
+              <ContextMenu>
+                <ContextMenuTrigger asChild>
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
+                    tabIndex={0}
                   >
                     {row.getVisibleCells().map((cell) => (
-                  <ContextMenu>
-                    <ContextMenuTrigger asChild>
                       <TableCell key={cell.id}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
-                    </ContextMenuTrigger>
-                    <ContextMenuContent>
-                      <ContextMenuItem>Delete</ContextMenuItem>
-                    </ContextMenuContent>
-                  </ContextMenu>
                     ))}
+                    <FormContextMenu pathname={pathname} row={row} />
                   </TableRow>
+                </ContextMenuTrigger>
+              </ContextMenu>
             ))
           ) : (
             <TableRow>