move edit submission dialog to context menu

src/app/submission/columns.tsx

@@ -9,19 +9,19 @@ import EditSubmissionDialog from "./edit"
 
 
 const EditSubCell = (props: CellContext<any, any>) => {
-  return <EditSubmissionDialog
+  // return <EditSubmissionDialog
-    stories={props.table.options.meta.stories}
+  //   stories={props.table.options.meta.stories}
-    pubs={props.table.options.meta.pubs}
+  //   pubs={props.table.options.meta.pubs}
-    responses={props.table.options.meta.responses}
+  //   responses={props.table.options.meta.responses}
-    defaults={props.row.original}
+  //   defaults={props.row.original}
-  >{
+  // >{
-      props.getValue() instanceof Date ?
+  //     props.getValue() instanceof Date ?
-        <p className="w-full text-center">
+  //       <p className="w-full text-center">
-          {props.getValue().toLocaleDateString()}
+  //         {props.getValue().toLocaleDateString()}
-        </p>
+  //       </p>
-        : <p className="w-full text-left">{props.getValue()}</p>
+  //       : <p className="w-full text-left">{props.getValue()}</p>
-
+  //
-    }</EditSubmissionDialog>
+  //   }</EditSubmissionDialog>
 }
 
 export const columns: ColumnDef<SubComplete>[] = [
@@ -35,7 +35,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     id: "story",
     header: "Story",
-    cell: EditSubCell
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-left">{props.getValue()}</p>)
   },
   {
     accessorFn: row => {
@@ -46,7 +46,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     id: "pub",
     header: "Publication",
-    cell: EditSubCell
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-left">{props.getValue()}</p>)
   },
   {
     accessorFn: row => new Date(row.submitted),
@@ -64,7 +64,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: EditSubCell
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -82,7 +82,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: EditSubCell
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
   },
   {
     accessorFn: row => {
@@ -93,7 +93,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     id: "response",
     header: "Response",
-    cell: EditSubCell
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
   },
 
 ]

src/app/submission/edit.tsx

@@ -11,22 +11,17 @@ import SubmissionForm, { SubForm } from "app/ui/forms/sub";
 export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: SubForm }) {
 
   return (
-    <Dialog>
+    <>
-      <DialogTrigger className="w-full h-full">
+      <DialogHeader>
-        {children}
+        <DialogTitle>Edit Submission</DialogTitle>
-      </DialogTrigger>
+        <DialogDescription>Change response status, edit dates etc</DialogDescription>
-      <DialogContent>
+      </DialogHeader>
-        <DialogHeader>
+      <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
-          <DialogTitle>Edit Submission</DialogTitle>
+      <DialogFooter>
-          <DialogDescription>Change response status, edit dates etc</DialogDescription>
+        <DialogClose asChild>
-        </DialogHeader>
+        </DialogClose>
-        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+        <Button form="subform">Submit</Button>
-        <DialogFooter>
+      </DialogFooter>
-          <DialogClose asChild>
+    </>
-          </DialogClose>
-          <Button form="subform">Submit</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
   )
 }

src/app/tailwind.css

@@ -862,6 +862,10 @@ body {
   height: fit-content;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-px {
   height: 1px;
 }
@@ -870,10 +874,6 @@ body {
   height: 100vh;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }

src/app/ui/tables/contextMenu.tsx

@@ -2,16 +2,18 @@ import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, D
 import { Button } from "@/components/ui/button"
 import { ContextMenuContent, ContextMenuItem, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent } from "@/components/ui/context-menu"
 import { deleteRecord } from "app/lib/del"
-import { Trash2 } from "lucide-react"
 import Link from "next/link"
-import { ComponentProps } from "react"
+import { ComponentProps, useState } from "react"
 import { Row, Table, TableState } from "@tanstack/react-table"
-import { letterCase } from "app/lib/functions"
 import { tableNameToItemName } from "app/lib/nameMaps"
+import EditSubmissionDialog from "app/submission/edit"
 
 export default function FormContextMenu({ table, row }: ComponentProps<"div"> & { table: Table<any>, row: Row<any> }) {
   const pathname = table.options.meta.pathname
   const selectedRows = table.getSelectedRowModel().flatRows
+
+  const [dialog, setDialog] = useState<"edit" | "delete" | null>("delete")
+
   return (
     <Dialog modal={true}>
       <ContextMenuContent >
@@ -24,6 +26,18 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
           : ""
         }
 
+        {
+          pathname === "/submission" ?
+            <>
+              <DialogTrigger asChild>
+                <ContextMenuItem onClick={() => setDialog("edit")}>
+                  Edit
+                </ContextMenuItem>
+              </DialogTrigger>
+            </>
+            : ""
+        }
+
         {
           selectedRows.length > 0 ?
             <ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
@@ -31,25 +45,41 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
         }
         <ContextMenuSeparator />
         <DialogTrigger asChild>
-          <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>
+          <ContextMenuItem className="text-destructive" onClick={() => setDialog("delete")}>Delete</ContextMenuItem>
         </DialogTrigger>
       </ContextMenuContent>
       <DialogContent>
-        <DialogHeader>
+        {
-          <DialogTitle>Are you sure?</DialogTitle>
+          dialog === "delete" ?
-          <DialogDescription>
+            <>
-            Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone!
+              <DialogHeader>
-          </DialogDescription>
+                <DialogTitle>Are you sure?</DialogTitle>
-        </DialogHeader>
+                <DialogDescription>
-        <DialogFooter>
+                  Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone!
-          <DialogClose asChild>
+                </DialogDescription>
-            <Button variant="destructive"
+              </DialogHeader>
-              onClick={() => {
+              <DialogFooter>
-                deleteRecord(row.original.id, pathname)
+                <DialogClose asChild>
-              }}>Yes, delete it!
+                  <Button variant="destructive"
-            </Button>
+                    onClick={() => {
-          </DialogClose>
+                      deleteRecord(row.original.id, pathname)
-        </DialogFooter>
+                    }}>Yes, delete it!
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </>
+            : dialog === "edit" ?
+              <EditSubmissionDialog
+                stories={table.options.meta.stories}
+                pubs={table.options.meta.pubs}
+                responses={table.options.meta.responses}
+                defaults={row.original}
+              />
+              :
+              <>
+                <DialogTitle>Edit/delete dialog</DialogTitle>
+              </>
+        }
       </DialogContent>
     </Dialog>