From 2294d0c0b0edc63cc4368e827b1c41895f4640ec Mon Sep 17 00:00:00 2001 From: andrzej Date: Tue, 2 Jul 2024 19:49:00 +0200 Subject: [PATCH] make form input work with number and string --- 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 +- .../inputs/{numberInput.tsx => input.tsx} | 15 +++-- src/app/ui/tables/inputs/inputContainer.tsx | 20 ------- src/app/ui/tables/inputs/textInput.tsx | 54 ------------------ 8 files changed, 20 insertions(+), 94 deletions(-) rename src/app/ui/tables/inputs/{numberInput.tsx => input.tsx} (88%) delete mode 100644 src/app/ui/tables/inputs/inputContainer.tsx delete mode 100644 src/app/ui/tables/inputs/textInput.tsx diff --git a/prisma/dev.db b/prisma/dev.db index 71e875b931699e464a94108d3b5bfff4f9463727..8f188202b7b560edefcc385d1448b085d7d736cc 100644 GIT binary patch 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 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 diff --git a/src/app/lib/update.ts b/src/app/lib/update.ts index 32713da..db8d627 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({ 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)}`) diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx index 9a4fd41..818f097 100644 --- a/src/app/publication/columns.tsx +++ b/src/app/publication/columns.tsx @@ -17,10 +17,9 @@ 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 NumberInputCell from "app/ui/tables/inputs/numberInput" - +import InputCell from "app/ui/tables/inputs/input" +import { formSchema } from "app/ui/forms/pub" const columnHelper = createColumnHelper() @@ -39,14 +38,16 @@ export const columns: ColumnDef[] = [ ) }, - cell: TextInputCell + cell: InputCell, + meta: { formSchema } }, { accessorKey: "link", header: "Link", - cell: TextInputCell + cell: InputCell, + meta: { formSchema } }, columnHelper.accessor("genres", { @@ -65,7 +66,7 @@ export const columns: ColumnDef[] = [ meta: { step: 10 }, - cell: NumberInputCell + cell: InputCell }, diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx index dca5bdf..b0c02dd 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 NumberInputCell from "app/ui/tables/inputs/numberInput" +import InputCell from "app/ui/tables/inputs/input" import { formSchema } from "app/ui/forms/story" const columnHelper = createColumnHelper() @@ -27,7 +27,7 @@ export const columns: ColumnDef[] = [ ) }, - cell: TextInputCell, + cell: InputCell, meta: { formSchema } }, @@ -45,7 +45,7 @@ export const columns: ColumnDef[] = [ ) }, enableColumnFilter: false, - cell: NumberInputCell, + cell: InputCell, meta: { step: 50, formSchema diff --git a/src/app/ui/forms/pub.tsx b/src/app/ui/forms/pub.tsx index 3709d16..0ad60f6 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" -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), diff --git a/src/app/ui/tables/inputs/numberInput.tsx b/src/app/ui/tables/inputs/input.tsx similarity index 88% rename from src/app/ui/tables/inputs/numberInput.tsx rename to src/app/ui/tables/inputs/input.tsx index a0a8ac8..6b1fd21 100644 --- a/src/app/ui/tables/inputs/numberInput.tsx +++ b/src/app/ui/tables/inputs/input.tsx @@ -3,23 +3,19 @@ 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) { +export default function InputCell(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>({ @@ -29,6 +25,10 @@ export default function NumberInputCell(props: CellContext) { }, }) + const type = typeof props.cell.getValue() + console.log(type) + + function onSubmit(value: z.infer) { toast({ title: "You submitted the following values:", @@ -41,11 +41,10 @@ export default function NumberInputCell(props: CellContext) { updateField({ id, table, - number: value[column], + [type]: value[column], column, pathname }) - setIsActive(false) } function onErrors(errors) { @@ -84,7 +83,7 @@ export default function NumberInputCell(props: CellContext) { & { 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/textInput.tsx b/src/app/ui/tables/inputs/textInput.tsx deleted file mode 100644 index 56c8750..0000000 --- a/src/app/ui/tables/inputs/textInput.tsx +++ /dev/null @@ -1,54 +0,0 @@ -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" - -export const TextInputCell = (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}

- } - - ) -}