diff --git a/prisma/dev.db b/prisma/dev.db index dffa6de..06cb063 100644 Binary files a/prisma/dev.db and b/prisma/dev.db differ 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) { const [isActive, setIsActive] = useState(false) @@ -18,18 +19,17 @@ export default function NumberInputCell(props: CellContext) { 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>({ resolver: zodResolver(formSchema), defaultValues: { [column]: props.cell.getValue() - } + }, + // mode: "onChange" }) - + const isDirty = form.formState.isDirty function onSubmit(value: z.infer) { toast({ @@ -40,14 +40,14 @@ export default function NumberInputCell(props: CellContext) { ), }) - // 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) { console.log(JSON.stringify(errors)) } return ( - +
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 ?
- + { + e.preventDefault() + if (isDirty) { + console.log("SUBMIT") + form.handleSubmit(onSubmit, onErrors) + } + }} > ( - - + setIsActive(false)} + > + { if (e.code === "Enter") { form.handleSubmit(onSubmit, onErrors) } }} {...field} /> + )} /> @@ -87,6 +105,6 @@ export default function NumberInputCell(props: CellContext) { :

{props.cell.getValue()}

} - +
) } 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) => { {isActive ? setValue(e.target.value)} // onBlur={handleClose} + onChange={e => setValue(e.target.value)} autoFocus={true} onBlur={handleExit} onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}