src/app/publication/columns.tsx

@@ -17,12 +17,10 @@ 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/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
-import NumberInputCell from "app/ui/tables/inputs/numberInput"
+import InputCell from "app/ui/tables/inputs/input"
 import { formSchema } from "app/ui/forms/pub"
 
-
 const columnHelper = createColumnHelper<PubsWithGenres>()
 
 export const columns: ColumnDef<PubsWithGenres>[] = [
@@ -40,14 +38,15 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         </Button>
       )
     },
-    cell: TextInputCell,
+    cell: InputCell,
     meta: { formSchema }
+
   },
 
   {
     accessorKey: "link",
     header: "Link",
-    cell: TextInputCell,
+    cell: InputCell,
     meta: { formSchema }
   },
 
@@ -64,12 +63,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
   {
     accessorKey: "query_after_days",
     header: "Query After (days)",
-    cell: NumberInputCell,
     meta: {
-      step: 10,
+      step: 10
-      formSchema
+    },
+    cell: InputCell
   },
 
-  },
+
 ]
 

src/app/story/columns.tsx

@@ -7,7 +7,7 @@ import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
-import NumberInputCell from "app/ui/tables/inputs/numberInput"
+import InputCell from "app/ui/tables/inputs/input"
 import { formSchema } from "app/ui/forms/story"
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -27,7 +27,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    cell: TextInputCell,
+    cell: InputCell,
     meta: { formSchema }
 
   },
@@ -45,7 +45,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       )
     },
     enableColumnFilter: false,
-    cell: NumberInputCell,
+    cell: InputCell,
     meta: {
       step: 50,
       formSchema

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

@@ -9,14 +9,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 
-export function TextInputCell(props: CellContext<any, any>) {
+export default function InputCell(props: CellContext<any, any>) {
   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
-  const value = props.cell.getValue()
   const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -26,6 +25,10 @@ export function TextInputCell(props: CellContext<any, any>) {
     },
   })
 
+  const type = typeof props.cell.getValue()
+  console.log(type)
+
+
   function onSubmit(value: z.infer<typeof formSchema>) {
     toast({
       title: "You submitted the following values:",
@@ -38,11 +41,10 @@ export function TextInputCell(props: CellContext<any, any>) {
     updateField({
       id,
       table,
-      string: value[column],
+      [type]: value[column],
       column,
       pathname
     })
-    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -63,7 +65,6 @@ export function TextInputCell(props: CellContext<any, any>) {
       tabIndex={0}
       onKeyDown={e => {
         if (e.code === "Space" && !isActive) {
-          e.preventDefault()
           setIsActive(true)
         }
       }}
@@ -82,8 +83,9 @@ export function TextInputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
-                      type="text"
+                      type={type}
                       autoFocus={true}
+                      step={props.column.columnDef.meta.step}
                       {...field}
                     />
                   </FormControl>
@@ -91,7 +93,6 @@ export function TextInputCell(props: CellContext<any, any>) {
                 </FormItem>
               )}
             />
-
           </form>
         </Form>
         : <p>{props.cell.getValue()}</p>

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

@@ -1,20 +0,0 @@
-"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

@@ -1,104 +0,0 @@
-"use client"
-import { Input } from "@/components/ui/input";
-import { CellContext } from "@tanstack/react-table";
-import { updateField } from "app/lib/update";
-import { useState } from "react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@/components/ui/use-toast";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
-
-export default function NumberInputCell(props: CellContext<any, any>) {
-  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
-  const value = props.cell.getValue()
-  console.log(`|${value}|`)
-  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      [column]: props.cell.getValue()
-    },
-
-  })
-
-  function onSubmit(value: z.infer<typeof formSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
-        </pre>
-      ),
-    })
-    updateField({
-      id,
-      table,
-      number: value[column],
-      column,
-      pathname
-    })
-    setIsActive(false)
-  }
-
-  function onErrors(errors) {
-    toast({
-      title: "You have errors",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-        </pre>
-      ),
-    })
-    console.log(JSON.stringify(errors))
-  }
-  return (
-    <div
-      onDoubleClick={() => setIsActive(prev => !prev)}
-      className="w-full h-fit flex items-center justify-center"
-      tabIndex={0}
-      onKeyDown={e => {
-        if (e.code === "Space" && !isActive) {
-          e.preventDefault()
-          setIsActive(true)
-        }
-      }}
-    >
-      {isActive ?
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit, onErrors)}
-          >
-            <FormField
-              control={form.control}
-              name={column}
-              render={({ field }) => (
-                <FormItem
-                  onBlur={() => setIsActive(false)}
-                >
-                  <FormControl
-                  >
-                    <Input
-                      type="number"
-                      autoFocus={true}
-                      step={props.column.columnDef.meta?.step}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-          </form>
-        </Form>
-        : <p>{props.cell.getValue()}</p>
-      }
-    </div >
-  )
-}