edit submission functionality (partial)

src/app/submission/columns.tsx

@@ -1,13 +1,28 @@
 "use client"
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { actions } from "app/ui/tables/actions"
 import { selectCol } from "app/ui/tables/selectColumn"
+import EditSubmissionDialog from "./edit"
 
 
-const columnHelper = createColumnHelper<SubComplete>()
+const EditSubCell = (props: CellContext<any, any>) => {
+  return <EditSubmissionDialog
+    stories={props.table.options.meta.stories}
+    pubs={props.table.options.meta.pubs}
+    responses={props.table.options.meta.responses}
+    defaults={props.row.original}
+  >{
+      props.getValue() instanceof Date ?
+        <p className="w-full text-center">
+          {props.getValue().toLocaleDateString()}
+        </p>
+        : <p className="w-full text-left">{props.getValue()}</p>
+
+    }</EditSubmissionDialog>
+}
 
 export const columns: ColumnDef<SubComplete>[] = [
   selectCol,
@@ -19,7 +34,8 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "story",
-    header: "Story"
+    header: "Story",
+    cell: EditSubCell
   },
   {
     accessorFn: row => {
@@ -29,7 +45,8 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "pub",
-    header: "Publication"
+    header: "Publication",
+    cell: EditSubCell
   },
   {
     accessorFn: row => new Date(row.submitted),
@@ -47,7 +64,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => { return props.getValue().toLocaleDateString() }
+    cell: EditSubCell
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -65,7 +82,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-'
+    cell: EditSubCell
   },
   {
     accessorFn: row => {
@@ -75,7 +92,8 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "response",
-    header: "Response"
+    header: "Response",
+    cell: EditSubCell
   },
 
 ]

src/app/submission/create.tsx

@@ -8,7 +8,16 @@ import { Pub, Response, Story } from "@prisma/client";
 import SubmissionForm from "app/ui/forms/sub";
 
 
-export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[] }) {
+type CreateSubDefaults = {
+  subId?: number,
+  storyId: number,
+  pubId: number,
+  submitted: Date,
+  responded: Date,
+  respoonseId: number
+}
+
+export default function CreateSubmissionDialog({ stories, pubs, responses, defaults }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: CreateSubDefaults }) {
 
   return (
     <Dialog>
@@ -20,7 +29,7 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
           <DialogTitle>New submission</DialogTitle>
           <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
         </DialogHeader>
-        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
+        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
         <DialogFooter>
           <DialogClose asChild>
           </DialogClose>

src/app/submission/edit.tsx

@@ -0,0 +1,40 @@
+"use client"
+import { createSub } from "app/lib/create"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Pub, Response, Story } from "@prisma/client";
+import SubmissionForm from "app/ui/forms/sub";
+
+
+type CreateSubDefaults = {
+  subId?: number,
+  storyId: number,
+  pubId: number,
+  submitted: Date,
+  responded: Date,
+  respoonseId: number
+}
+
+export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: CreateSubDefaults }) {
+
+  return (
+    <Dialog>
+      <DialogTrigger className="w-full h-full">
+        {children}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Submission</DialogTitle>
+          <DialogDescription>Change response status, edit dates etc</DialogDescription>
+        </DialogHeader>
+        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+        <DialogFooter>
+          <DialogClose asChild>
+          </DialogClose>
+          <Button form="subform">Submit</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/submission/page.tsx

@@ -17,7 +17,11 @@ export default async function Page() {
   const responses = await getResponses()
   return (
     <div className="container">
-      <DataTable data={subs} columns={columns} tableName="sub">
+      <DataTable data={subs} columns={columns} tableName="sub"
+        stories={stories}
+        pubs={pubs}
+        responses={responses}
+      >
         <CreateSubmissionDialog
           stories={stories}
           pubs={pubs}

src/app/tailwind.css

@@ -870,6 +870,10 @@ body {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }

src/app/ui/forms/sub.tsx

@@ -33,7 +33,7 @@ import {
 } from "@/components/ui/select"
 import { useState } from "react"
 
-const FormSchema = z.object({
+export const formSchema = z.object({
 	storyId: z.coerce.number(),
 	pubId: z.coerce.number(),
 	submitted: z.date().transform((date) => date.toString()),
@@ -66,11 +66,12 @@ const FormSchema = z.object({
 	)
 
 
-export default function SubmissionForm({ stories, pubs, responses, createSub }) {
-	const form = useForm<z.infer<typeof FormSchema>>({
-		resolver: zodResolver(FormSchema),
+export default function SubmissionForm({ stories, pubs, responses, createSub, defaults }) {
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
 		defaultValues: {
-			responseId: responses[0].id
+			responseId: responses[0].id,
+			...defaults
 		}
 	})
 	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
@@ -94,7 +95,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 
 	// 2. Define a submit handler.
-	function onSubmit(values: z.infer<typeof FormSchema>) {
+	function onSubmit(values: z.infer<typeof formSchema>) {
 		// Do something with the form values.
 		// ✅ This will be type-safe and validated.
 		toast({

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

@@ -46,6 +46,8 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import pluralize from "app/lib/pluralize"
 import { updateField } from "app/lib/update"
 import { tableNameToItemName } from "app/lib/nameMaps"
+import { Pub, Response, Story } from "@prisma/client"
+import { response } from "express"
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -57,8 +59,11 @@ export function DataTable<TData, TValue>({
   columns,
   data,
   children,
-  tableName
-}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { tableName: string }) {
+  tableName,
+  stories,
+  pubs,
+  responses
+}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { tableName: string, stories?: Story[], pubs?: Pub[], responses?: Response[] }) {
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -89,7 +94,10 @@ export function DataTable<TData, TValue>({
     meta: {
       updateTextField: updateField,
       tableName,
-      pathname
+      pathname,
+      stories,
+      pubs,
+      responses
     }
   })