implement inline text input

src/app/lib/update.ts

@@ -21,12 +21,15 @@ export async function updateStory(data: Story & { genres: number[] }) {
 	redirect("/story")
 }
 
-export async function updateTextField({ text, table, column, id }: { text: string, table: string, column: string, id: number }) {
+export async function updateTextField({ text, table, column, id, pathname }: { text: string, table: string, column: string, id: number, pathname: string }) {
-	const res = prisma[table].update({
+	const res = await prisma[table].update({
 		where: { id },
 		data: {
 			[column]: text
 		}
 	})
+	console.log(`updated record in ${table}: ${res}`)
+	revalidatePath(pathname)
+	redirect(pathname)
 }
 

src/app/publication/columns.tsx

@@ -17,6 +17,7 @@ import Link from "next/link"
 import { PubsWithGenres } from "./page"
 import { DialogClose } from "@radix-ui/react-dialog"
 import { actions } from "app/ui/tables/actions"
+import { TextInputCell } from "app/ui/inputs/textInput"
 
 
 const columnHelper = createColumnHelper<PubsWithGenres>()
@@ -35,12 +36,14 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         </Button>
       )
     },
+    cell: TextInputCell
 
   },
 
   {
     accessorKey: "link",
     header: "Link",
+    cell: TextInputCell
   },
 
   columnHelper.accessor("genres", {

src/app/publication/page.tsx

@@ -13,7 +13,7 @@ export default async function Page() {
   const pubs = await getPubsWithGenres()
   return (
     <div className="container mx-auto">
-      <DataTable data={pubs} columns={columns} type="publication">
+      <DataTable data={pubs} columns={columns} tableName="pub">
         <CreatePubDialog genres={genres} />
       </DataTable>
 

src/app/story/page.tsx

@@ -21,7 +21,7 @@ export default async function Page() {
 
   return (
     <div className="container mx-auto">
-      <DataTable columns={columns} data={storiesWithGenres} type="story">
+      <DataTable columns={columns} data={storiesWithGenres} tableName="story">
         <CreateStoryDialog genres={genres} />
         {/* TODO - EDIT STORY DIALOG */}
       </DataTable>

src/app/submission/create.tsx

@@ -1,13 +1,11 @@
 
 "use client"
-import { createStory, createSub } from "app/lib/create"
+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 { Genre, Pub, Story } from "@prisma/client";
+import { Pub, Response, Story } from "@prisma/client";
-import StoryForm from "app/ui/forms/story";
 import SubmissionForm from "app/ui/forms/sub";
-import { getPubs, getResponses, getStories } from "app/lib/get";
 
 
 export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[] }) {
@@ -24,9 +22,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
         </DialogHeader>
         <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
         <DialogFooter>
+          <DialogClose asChild>
+          </DialogClose>
           <Button form="subform">Submit</Button>
         </DialogFooter>
-
       </DialogContent>
     </Dialog>
   )

src/app/submission/page.tsx

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

src/app/tailwind.css

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

src/app/ui/inputs/textInput.tsx

@@ -1,31 +1,57 @@
-import { Cell, Table } from "@tanstack/react-table"
+import { Cell, CellContext, Table } from "@tanstack/react-table"
 import { useState, useEffect } from "react"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Check, CircleX } from "lucide-react"
+import { updateTextField } from "app/lib/update"
 
-export const TextInputCell = ({ getValue, row }) => {
+export const TextInputCell = (props: CellContext<any, any>) => {
-  const initialValue = getValue()
+  let initialValue = props.getValue()
-  useEffect(() => {
+  const [value, setValue] = useState(initialValue)
-    setValue(initialValue)
-  }, [initialValue])
-  const [value, setValue] = useState("")
   const [isActive, setIsActive] = useState(false)
 
+  const table = props.table.options.meta.tableName
+  const id = props.row.original.id
+  const column = props.column.id
+  const pathname = props.table.options.meta.pathname
+
+  function handleConfirm() {
+    updateTextField({
+      id,
+      table,
+      text: value,
+      column,
+      pathname
+    })
+    initialValue = value
+    handleClose()
+  }
+  function handleClose() {
+    setValue(initialValue)
+    setIsActive(false)
+  }
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.code === "Enter") {
+      handleConfirm()
+    }
+  }
+
+
   return (<div
     onDoubleClick={() => setIsActive(prev => !prev)}
+    className="w-full h-fit flex items-center justify-center"
   >
     {isActive ?
       <div className="flex flex-col">
         <Input
           value={value}
-          onChange={e => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
-          onBlur={() => setIsActive(false)}
           autoFocus={true}
+          onKeyDown={handleKeyDown}
         />
         <div className="flex flex-row justify-end gap-1 w-full pt-2">
-          <Button variant="outline"><Check /></Button>
+          <Button variant="outline" className="p-2 h-fit" onClick={handleConfirm}><Check size="1rem" /></Button>
-          <Button variant="outline"><CircleX /></Button>
+          <Button variant="outline" className="p-2 h-fit" onClick={handleClose}><CircleX size="1rem" /></Button>
         </div>
       </div>
       : <p>{value}</p>

src/app/ui/tables/contextMenu.tsx

@@ -1,14 +1,16 @@
 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 { 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 { ContextMenuSeparator } from "@radix-ui/react-context-menu"
+import { ComponentProps } from "react"
-
+import { Row, Table, TableState } from "@tanstack/react-table"
-export default function FormContextMenu({ pathname, row, selectedRows, deselect }) {
+import { letterCase } from "app/lib/functions"
-
 
+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
   return (
     <Dialog modal={true}>
       <ContextMenuContent >
@@ -17,13 +19,25 @@ export default function FormContextMenu({ pathname, row, selectedRows, deselect
             <Link href={`${pathname}/${row.original.id}`}>
               <ContextMenuItem>Inspect</ContextMenuItem>
             </Link>
-            <ContextMenuItem>Edit</ContextMenuItem>
           </>
           : ""
         }
+        {
+          selectedRows.length <= 1 ?
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Edit</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                {Object.keys(row.original).map(e => {
+                  if (e !== "id") {
+                    return <ContextMenuItem>{letterCase(e)}</ContextMenuItem>
+                  }
+                })}
+              </ContextMenuSubContent>
+            </ContextMenuSub> : ""
+        }
         {
           selectedRows ?
-            <ContextMenuItem onClick={deselect}>Deselect</ContextMenuItem>
+            <ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
             : ""
         }
         <ContextMenuSeparator />

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

@@ -55,8 +55,9 @@ export interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-  children
+  children,
-}: DataTableProps<TData, TValue> & ComponentProps<"div">) {
+  tableName
+}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { tableName: string }) {
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -65,6 +66,7 @@ export function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>({})
   //
+  const pathname: Pathname = usePathname()
   const table = useReactTable({
     data,
     columns,
@@ -85,13 +87,14 @@ export function DataTable<TData, TValue>({
     //this is where you put arbitrary functions etc to make them accessible via the table api
     meta: {
       updateTextField,
+      tableName,
+      pathname
     }
   })
 
 
 
 
-  const pathname: Pathname = usePathname()
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
@@ -227,10 +230,8 @@ export function DataTable<TData, TValue>({
                       </TableCell>
                     ))}
                     <FormContextMenu
-                      pathname={pathname}
                       row={row}
-                      selectedRows={table.getSelectedRowModel().flatRows}
+                      table={table}
-                      deselect={table.resetRowSelection}
                     />
                   </TableRow>
                 </ContextMenuTrigger>