implement inline number input

src/app/lib/nameMaps.ts

@@ -0,0 +1,8 @@
+export function tableNameToItemName(tableName: string) {
+	const map = {
+		subs: "submission",
+		pubs: "publication",
+		story: "story"
+	}
+	return map[tableName]
+}

src/app/lib/update.ts

@@ -13,7 +13,7 @@ export async function updateField({ text, number, table, column, id, pathname }:
 			[column]: text ?? number
 		}
 	})
-	console.log(`updated record in ${table}: ${res}`)
+	console.log(`updated record in ${table}: ${JSON.stringify(res)}`)
 	revalidatePath(pathname)
 	redirect(pathname)
 }

src/app/publication/columns.tsx

@@ -17,8 +17,9 @@ 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"
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
+import NumberInputCell from "app/ui/tables/inputs/numberInput"
 
 
 const columnHelper = createColumnHelper<PubsWithGenres>()
@@ -60,7 +61,11 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
 
   {
     accessorKey: "query_after_days",
-    header: "Query After (days)"
+    header: "Query After (days)",
+    meta: {
+      step: 10
+    },
+    cell: NumberInputCell
   },
 
 

src/app/story/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function Page({ params }: { params: { id: string } }) {
       <PageHeader>{story?.title ?? ""}</PageHeader>
       <GenreBadges genres={story.genres} className="my-6" />
       <PageSubHeader>Submissions:</PageSubHeader>
-      <DataTable columns={columns} data={storySubs} type="submission" />
+      <DataTable columns={columns} data={storySubs} tableName="subs" />
 
     </div>
 

src/app/story/columns.tsx

@@ -5,8 +5,9 @@ import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
-import { TextInputCell } from "app/ui/inputs/textInput"
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
+import NumberInputCell from "app/ui/tables/inputs/numberInput"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -42,7 +43,11 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    enableColumnFilter: false
+    enableColumnFilter: false,
+    cell: NumberInputCell,
+    meta: {
+      step: 50
+    }
   },
   columnHelper.accessor("genres", {
     cell: props => {
@@ -52,5 +57,6 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
+
 ]
 

src/app/submission/columns.tsx

@@ -4,11 +4,13 @@ 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"
 
 
 const columnHelper = createColumnHelper<SubComplete>()
 
 export const columns: ColumnDef<SubComplete>[] = [
+  selectCol,
   {
     accessorFn: row => new Date(row.submitted),
     id: "submitted",

src/app/tailwind.css

@@ -870,14 +870,6 @@ body {
   height: 100vh;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-1 {
-  height: 0.25rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1104,10 +1096,6 @@ body {
   justify-content: space-around;
 }
 
-.justify-items-center {
-  justify-items: center;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1439,10 +1427,6 @@ body {
   padding-top: 0.25rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }

src/app/ui/inputs/textInput.tsx

@@ -1,65 +0,0 @@
-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 = (props: CellContext<any, any>) => {
-  let initialValue = props.getValue()
-  const [value, setValue] = useState(initialValue)
-  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 handleOpen() {
-    setIsActive(true)
-  }
-  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"
-    tabIndex={0}
-    onKeyDown={e => {
-      if (e.code === "Enter" && !isActive) {
-        setIsActive(true)
-      }
-    }}
-  >
-    {isActive ?
-      <Input
-        value={value}
-        onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
-        autoFocus={true}
-        onBlur={handleClose}
-        onKeyDown={handleKeyDown}
-        className="w-full"
-      />
-      : <p>{value}</p>
-    }
-  </div>)
-}

src/app/ui/tables/contextMenu.tsx

@@ -7,6 +7,7 @@ import Link from "next/link"
 import { ComponentProps } from "react"
 import { Row, Table, TableState } from "@tanstack/react-table"
 import { letterCase } from "app/lib/functions"
+import { tableNameToItemName } from "app/lib/nameMaps"
 
 export default function FormContextMenu({ table, row }: ComponentProps<"div"> & { table: Table<any>, row: Row<any> }) {
   const pathname = table.options.meta.pathname
@@ -37,7 +38,7 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
         <DialogHeader>
           <DialogTitle>Are you sure?</DialogTitle>
           <DialogDescription>
-            Deleting a {pathname.slice(1)} cannot be undone!
+            Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone!
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>

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

@@ -44,7 +44,8 @@ import { deleteRecords } from "app/lib/del"
 import { Pathname } from "app/types"
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
 import pluralize from "app/lib/pluralize"
-import { updateTextField } from "app/lib/update"
+import { updateField } from "app/lib/update"
+import { tableNameToItemName } from "app/lib/nameMaps"
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -86,7 +87,7 @@ export function DataTable<TData, TValue>({
     },
     //this is where you put arbitrary functions etc to make them accessible via the table api
     meta: {
-      updateTextField,
+      updateTextField: updateField,
       tableName,
       pathname
     }
@@ -144,7 +145,7 @@ export function DataTable<TData, TValue>({
             {`Delete ${Object.keys(table.getState().rowSelection).length} ${pluralize(pathname.slice(1))}?`}
           </DialogHeader>
           <DialogDescription>
-            {`Deleting ${pluralize(pathname.slice(1))} cannot be undone!`}
+            {`Deleting ${pluralize(tableNameToItemName(table.options.meta.tableName))} cannot be undone!`}
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>

src/app/ui/tables/inputs/inputContainer.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { ComponentProps, Dispatch, SetStateAction } from "react"
+
+export function TableInputContainer({ isActive, setIsActive, children }: ComponentProps<"div"> & { isActive: boolean, setIsActive: Dispatch<SetStateAction<boolean>> }) {
+  return (
+    <div
+      onDoubleClick={() => setIsActive(prev => !prev)}
+      className="w-full h-fit flex items-center justify-center"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.code === "Enter" && !isActive) {
+          setIsActive(true)
+        }
+      }}
+    >
+      {children}
+    </div>
+  )
+}

src/app/ui/tables/inputs/numberInput.tsx

@@ -0,0 +1,53 @@
+import { Input } from "@/components/ui/input";
+import { CellContext } from "@tanstack/react-table";
+import { updateField } from "app/lib/update";
+import { useState } from "react";
+import { TableInputContainer } from "./inputContainer";
+
+
+export default function NumberInputCell(props: CellContext<any, any>) {
+  let initialValue = props.getValue()
+  const [value, setValue] = useState(initialValue)
+  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() {
+    if (value === initialValue) {
+      setIsActive(false)
+      return
+    }
+    updateField({
+      id,
+      table,
+      number: Number(value),
+      column,
+      pathname
+    })
+    initialValue = value
+    setIsActive(false)
+  }
+  function handleExit() {
+    setValue(initialValue)
+    setIsActive(false)
+  }
+
+  return (
+    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
+      {isActive ?
+        <Input type="number"
+          onBlur={handleExit}
+          value={value}
+          autoFocus={true}
+          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
+          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
+          step={props.column.columnDef.meta.step}
+        />
+        : <p>{value}</p>
+      }
+    </TableInputContainer>
+  )
+}

src/app/ui/tables/inputs/textInput.tsx

@@ -0,0 +1,54 @@
+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 { updateField } from "app/lib/update"
+import { TableInputContainer } from "./inputContainer"
+
+export const TextInputCell = (props: CellContext<any, any>) => {
+  let initialValue = props.getValue()
+  const [value, setValue] = useState(initialValue)
+  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() {
+    if (value === initialValue) {
+      setIsActive(false)
+      return
+    }
+    updateField({
+      id,
+      table,
+      text: value,
+      column,
+      pathname
+    })
+    initialValue = value
+    setIsActive(false)
+  }
+  function handleExit() {
+    setValue(initialValue)
+    setIsActive(false)
+  }
+
+  return (
+    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
+      {isActive ?
+        <Input
+          value={value}
+          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
+          autoFocus={true}
+          onBlur={handleExit}
+          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
+          className="w-full"
+        />
+        : <p>{value}</p>
+      }
+    </TableInputContainer>
+  )
+}