From 356c487ed73eef70aec0b0b2bdd7ca1f55ab6965 Mon Sep 17 00:00:00 2001 From: andrzej Date: Tue, 2 Jul 2024 22:16:17 +0200 Subject: [PATCH] Revert "make form input work with number and string" This reverts commit 2294d0c0b0edc63cc4368e827b1c41895f4640ec. --- prisma/dev.db | Bin 69632 -> 69632 bytes src/app/lib/update.ts | 4 +- src/app/publication/columns.tsx | 13 ++--- src/app/story/columns.tsx | 6 +- src/app/ui/forms/pub.tsx | 2 +- src/app/ui/tables/inputs/inputContainer.tsx | 20 +++++++ .../inputs/{input.tsx => numberInput.tsx} | 15 ++--- src/app/ui/tables/inputs/textInput.tsx | 54 ++++++++++++++++++ 8 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 src/app/ui/tables/inputs/inputContainer.tsx rename src/app/ui/tables/inputs/{input.tsx => numberInput.tsx} (88%) create mode 100644 src/app/ui/tables/inputs/textInput.tsx diff --git a/prisma/dev.db b/prisma/dev.db index 8f188202b7b560edefcc385d1448b085d7d736cc..71e875b931699e464a94108d3b5bfff4f9463727 100644 GIT binary patch delta 125 zcmZozz|ydQWr7qF!@r3#PC#;F!s>d)j?Fv`V*IiS9F8FwsR~Xx`AG`t`KiSUCHV?L znPsVYDXBR*lkNK@Eax$ZFVyIvYAYo-a&YdIhm<>#R~ap V3ciU&#Ue~VIZfu4%@g_y8UWOMCY=BP delta 125 zcmZozz|ydQWr7qFBg;e?Cm^{oVRb#D`evR6F@9MN4#$uTF(wuUCS4}A;DW^DRE4m_ z+=9%a)M5pr$@cvcmK_XYOxCP-!V)DISr|A>-81rwOBAGlY$j92FA$z%PG)Leu|j^D Wf^T9`G5>i6OD0VwwapXy3mO3XBqBWk diff --git a/src/app/lib/update.ts b/src/app/lib/update.ts index db8d627..32713da 100644 --- a/src/app/lib/update.ts +++ b/src/app/lib/update.ts @@ -6,11 +6,11 @@ import { revalidatePath } from "next/cache" import { redirect } from "next/navigation" -export async function updateField({ string: string, number, table, column, id, pathname }: { string?: string, number?: number, table: string, column: string, id: number, pathname: string }) { +export async function updateField({ text, number, table, column, id, pathname }: { text?: string, number?: number, table: string, column: string, id: number, pathname: string }) { const res = await prisma[table].update({ where: { id }, data: { - [column]: string ?? number + [column]: text ?? number } }) console.log(`updated record in ${table}: ${JSON.stringify(res)}`) diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx index 818f097..9a4fd41 100644 --- a/src/app/publication/columns.tsx +++ b/src/app/publication/columns.tsx @@ -17,9 +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 InputCell from "app/ui/tables/inputs/input" -import { formSchema } from "app/ui/forms/pub" +import NumberInputCell from "app/ui/tables/inputs/numberInput" + const columnHelper = createColumnHelper() @@ -38,16 +39,14 @@ export const columns: ColumnDef[] = [ ) }, - cell: InputCell, - meta: { formSchema } + cell: TextInputCell }, { accessorKey: "link", header: "Link", - cell: InputCell, - meta: { formSchema } + cell: TextInputCell }, columnHelper.accessor("genres", { @@ -66,7 +65,7 @@ export const columns: ColumnDef[] = [ meta: { step: 10 }, - cell: InputCell + cell: NumberInputCell }, diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx index b0c02dd..dca5bdf 100644 --- a/src/app/story/columns.tsx +++ b/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() @@ -27,7 +27,7 @@ export const columns: ColumnDef[] = [ ) }, - cell: InputCell, + cell: TextInputCell, meta: { formSchema } }, @@ -45,7 +45,7 @@ export const columns: ColumnDef[] = [ ) }, enableColumnFilter: false, - cell: InputCell, + cell: NumberInputCell, meta: { step: 50, formSchema diff --git a/src/app/ui/forms/pub.tsx b/src/app/ui/forms/pub.tsx index 0ad60f6..3709d16 100644 --- a/src/app/ui/forms/pub.tsx +++ b/src/app/ui/forms/pub.tsx @@ -27,7 +27,7 @@ import { ComponentProps } from "react" import { Genre } from "@prisma/client" import GenrePicker from "./genrePicker" -export const formSchema = z.object({ +const formSchema = z.object({ title: z.string().min(2).max(50), link: z.string(), query_after_days: z.coerce.number().min(30), diff --git a/src/app/ui/tables/inputs/inputContainer.tsx b/src/app/ui/tables/inputs/inputContainer.tsx new file mode 100644 index 0000000..f23367d --- /dev/null +++ b/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> }) { + 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) + } + }} + > + {children} +
+ ) +} diff --git a/src/app/ui/tables/inputs/input.tsx b/src/app/ui/tables/inputs/numberInput.tsx similarity index 88% rename from src/app/ui/tables/inputs/input.tsx rename to src/app/ui/tables/inputs/numberInput.tsx index 6b1fd21..a0a8ac8 100644 --- a/src/app/ui/tables/inputs/input.tsx +++ b/src/app/ui/tables/inputs/numberInput.tsx @@ -3,19 +3,23 @@ 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 InputCell(props: CellContext) { +export default function NumberInputCell(props: CellContext) { 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>({ @@ -25,10 +29,6 @@ export default function InputCell(props: CellContext) { }, }) - const type = typeof props.cell.getValue() - console.log(type) - - function onSubmit(value: z.infer) { toast({ title: "You submitted the following values:", @@ -41,10 +41,11 @@ export default function InputCell(props: CellContext) { updateField({ id, table, - [type]: value[column], + number: value[column], column, pathname }) + setIsActive(false) } function onErrors(errors) { @@ -83,7 +84,7 @@ export default function InputCell(props: CellContext) { ) => { + let initialValue = props.getValue() + const [value, setValue] = useState(initialValue) + 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 + + function handleConfirm() { + if (value === initialValue) { + setIsActive(false) + return + } + updateField({ + id, + table, + text: value, + column, + pathname + }) + initialValue = value + setIsActive(false) + } + function handleExit() { + setValue(initialValue) + setIsActive(false) + } + + return ( + + {isActive ? + setValue(e.target.value)} + autoFocus={true} + onBlur={handleExit} + onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }} + className="w-full" + /> + :

{value}

+ } + + ) +}