fix added space

This reverts commit 2294d0c0b0.

src/app/publication/columns.tsx

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

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,104 @@
+"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 >
+  )
+}

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

@@ -9,13 +9,14 @@ 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 InputCell(props: CellContext<any, any>) {
+export function TextInputCell(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>>({
@@ -25,10 +26,6 @@ export default function InputCell(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:",
@@ -41,10 +38,11 @@ export default function InputCell(props: CellContext<any, any>) {
     updateField({
       id,
       table,
-      [type]: value[column],
+      string: value[column],
       column,
       pathname
     })
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -65,6 +63,7 @@ export default function InputCell(props: CellContext<any, any>) {
       tabIndex={0}
       onKeyDown={e => {
         if (e.code === "Space" && !isActive) {
+          e.preventDefault()
           setIsActive(true)
         }
       }}
@@ -83,9 +82,8 @@ export default function InputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
-                      type={type}
+                      type="text"
                       autoFocus={true}
-                      step={props.column.columnDef.meta.step}
                       {...field}
                     />
                   </FormControl>
@@ -93,6 +91,7 @@ export default function InputCell(props: CellContext<any, any>) {
                 </FormItem>
               )}
             />
+
           </form>
         </Form>
         : <p>{props.cell.getValue()}</p>