fix added space

src/app/lib/update.ts

@@ -6,11 +6,11 @@ import { revalidatePath } from "next/cache"
 import { redirect } from "next/navigation"
 
 
-export async function updateField({ text, number, table, column, id, pathname }: { text?: string, number?: number, table: string, column: string, id: number, pathname: string }) {
+export async function updateField({ string: string, number, table, column, id, pathname }: { string?: string, number?: number, table: string, column: string, id: number, pathname: string }) {
 	const res = await prisma[table].update({
 		where: { id },
 		data: {
-			[column]: text ?? number
+			[column]: string ?? number
 		}
 	})
 	console.log(`updated record in ${table}: ${JSON.stringify(res)}`)

src/app/publication/columns.tsx

@@ -20,6 +20,7 @@ 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 { formSchema } from "app/ui/forms/pub"
 
 
 const columnHelper = createColumnHelper<PubsWithGenres>()
@@ -39,14 +40,15 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         </Button>
       )
     },
-    cell: TextInputCell
-
+    cell: TextInputCell,
+    meta: { formSchema }
   },
 
   {
     accessorKey: "link",
     header: "Link",
-    cell: TextInputCell
+    cell: TextInputCell,
+    meta: { formSchema }
   },
 
   columnHelper.accessor("genres", {
@@ -62,12 +64,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
   {
     accessorKey: "query_after_days",
     header: "Query After (days)",
+    cell: NumberInputCell,
     meta: {
-      step: 10
-    },
-    cell: NumberInputCell
+      step: 10,
+      formSchema
     },
 
-
+  },
 ]
 

src/app/ui/forms/pub.tsx

@@ -27,7 +27,7 @@ import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"
 import GenrePicker from "./genrePicker"
 
-const formSchema = z.object({
+export const formSchema = z.object({
 	title: z.string().min(2).max(50),
 	link: z.string(),
 	query_after_days: z.coerce.number().min(30),

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

@@ -3,14 +3,11 @@ 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";
 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";
-import { Button } from "@/components/ui/button";
-import { useFormState } from "react-dom";
 
 export default function NumberInputCell(props: CellContext<any, any>) {
   const [isActive, setIsActive] = useState(false)
@@ -20,6 +17,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
   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>>({
@@ -27,6 +25,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
     defaultValues: {
       [column]: props.cell.getValue()
     },
+
   })
 
   function onSubmit(value: z.infer<typeof formSchema>) {
@@ -66,6 +65,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
       tabIndex={0}
       onKeyDown={e => {
         if (e.code === "Space" && !isActive) {
+          e.preventDefault()
           setIsActive(true)
         }
       }}
@@ -86,7 +86,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                     <Input
                       type="number"
                       autoFocus={true}
-                      step={props.column.columnDef.meta.step}
+                      step={props.column.columnDef.meta?.step}
                       {...field}
                     />
                   </FormControl>
@@ -94,6 +94,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                 </FormItem>
               )}
             />
+
           </form>
         </Form>
         : <p>{props.cell.getValue()}</p>

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

@@ -1,54 +1,101 @@
-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"
+"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 const TextInputCell = (props: CellContext<any, any>) => {
-  let initialValue = props.getValue()
-  const [value, setValue] = useState(initialValue)
+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 })
 
-  function handleConfirm() {
-    if (value === initialValue) {
-      setIsActive(false)
-      return
-    }
+  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,
-      text: value,
+      string: value[column],
       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)}
-          autoFocus={true}
-          onBlur={handleExit}
-          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
-          className="w-full"
-        />
-        : <p>{value}</p>
+  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))
   }
-    </TableInputContainer>
+  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="text"
+                      autoFocus={true}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+          </form>
+        </Form>
+        : <p>{props.cell.getValue()}</p>
+      }
+    </div >
   )
 }