From f3dbd2cb9eec490b2109888511d5216771293fbf Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Tue, 2 Jul 2024 16:59:55 +0200
Subject: [PATCH] fix enter key buy (partially)

---
 prisma/dev.db                            | Bin 69632 -> 69632 bytes
 src/app/ui/tables/inputs/numberInput.tsx |  60 +++++++++++++++--------
 src/app/ui/tables/inputs/textInput.tsx   |   2 +-
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/prisma/dev.db b/prisma/dev.db
index dffa6de499f2914a8dc9569b949350f431c34ba2..06cb063331a50dabfac5e0998467aeb2267844b5 100644
GIT binary patch
delta 232
zcmZozz|ydQWr8&0pNTTgjDI#JEUf3}`^mt;cafDphrfgW9{;?}0u3+uSoq}`L?{34
zQ)1x{V^El^+;38Uo<WSsn)Oatq68xg1Ba=5Mt*ULf)tR=WXkvj!gI{YOwB7+$WK%7
zO)M%FVFJo&GPeX5BqpaSgeB${WEQ0sE6TDkFuJDr7AZjVxaX%9E0p9bKvX%VCuZiA
z=X0q7wTiM|C{9T!W?*38XHwVH0@)PI_}g7U2FP$^>I%t7RdCA5Pf|#Snh=y(mYSE6
Knv=6=LIVKNIz&tW

delta 232
zcmZozz|ydQWr8&0*NHODj9)h<EUf3}4`blqyU5C)!1t41p1*3dK*LKu7GWk9hRJ{X
zlvw0sfDGk+llplKTuj!icft}S7+DxNOx-i`i%S$7b23x&iWTzH6nqnlij`zp7?@m{
zU-%X&K&0LCQ;QW!@)d#$5|dLE9Mcms^Z3s*C^M;ZD?x<95_1bOi&7N~xzvDKMH#=8
vq!yQy=X0roc<dL7Q&Nf<7#Iwh)HSt$wlW1X{)XBs1>%~*xhT$9G@$_i4AetN

diff --git a/src/app/ui/tables/inputs/numberInput.tsx b/src/app/ui/tables/inputs/numberInput.tsx
index b5e0d90..52a10a1 100644
--- a/src/app/ui/tables/inputs/numberInput.tsx
+++ b/src/app/ui/tables/inputs/numberInput.tsx
@@ -8,8 +8,9 @@ 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 } from "@/components/ui/form";
+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)
@@ -18,18 +19,17 @@ export default function NumberInputCell(props: CellContext<any, any>) {
   const id = props.row.original.id
   const column = props.column.id
   const pathname = props.table.options.meta.pathname
-  let formSchema = props.column.columnDef.meta.formSchema
-
-
-  formSchema = formSchema.pick({ [column]: true })
+  const value = props.cell.getValue()
+  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()
-    }
+    },
+    // mode: "onChange"
   })
-
+  const isDirty = form.formState.isDirty
 
   function onSubmit(value: z.infer<typeof formSchema>) {
     toast({
@@ -40,14 +40,14 @@ export default function NumberInputCell(props: CellContext<any, any>) {
         </pre>
       ),
     })
-    // updateField({
-    //   id,
-    //   table,
-    //   number: value[column],
-    //   column,
-    //   pathname
-    // })
-    // setIsActive(false)
+    updateField({
+      id,
+      table,
+      number: value[column],
+      column,
+      pathname
+    })
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -62,24 +62,42 @@ export default function NumberInputCell(props: CellContext<any, any>) {
     console.log(JSON.stringify(errors))
   }
   return (
-    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
+    <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 ?
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit, onErrors)}>
+          <form onSubmit={e => {
+            e.preventDefault()
+            if (isDirty) {
+              console.log("SUBMIT")
+              form.handleSubmit(onSubmit, onErrors)
+            }
+          }} >
             <FormField
               control={form.control}
               name={column}
               render={({ field }) => (
-                <FormItem>
-                  <FormControl>
+                <FormItem
+                  onBlur={() => setIsActive(false)}
+                >
+                  <FormControl
+                  >
                     <Input
                       type="number"
                       autoFocus={true}
                       step={props.column.columnDef.meta.step}
-                      onKeyDown={e => { if (e.code === "Enter") { form.handleSubmit(onSubmit, onErrors) } }}
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -87,6 +105,6 @@ export default function NumberInputCell(props: CellContext<any, any>) {
         </Form>
         : <p>{props.cell.getValue()}</p>
       }
-    </TableInputContainer>
+    </div >
   )
 }
diff --git a/src/app/ui/tables/inputs/textInput.tsx b/src/app/ui/tables/inputs/textInput.tsx
index 4a33cbf..56c8750 100644
--- a/src/app/ui/tables/inputs/textInput.tsx
+++ b/src/app/ui/tables/inputs/textInput.tsx
@@ -41,7 +41,7 @@ export const TextInputCell = (props: CellContext<any, any>) => {
       {isActive ?
         <Input
           value={value}
-          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
+          onChange={e => setValue(e.target.value)}
           autoFocus={true}
           onBlur={handleExit}
           onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}