From 29ab837aca3297415ab21540115257d7b9001511 Mon Sep 17 00:00:00 2001 From: andrzej Date: Tue, 2 Jul 2024 22:52:10 +0200 Subject: [PATCH] fix added space --- prisma/dev.db | Bin 69632 -> 69632 bytes src/app/lib/update.ts | 4 +- src/app/publication/columns.tsx | 16 ++-- src/app/ui/forms/pub.tsx | 2 +- src/app/ui/tables/inputs/numberInput.tsx | 9 +- src/app/ui/tables/inputs/textInput.tsx | 111 ++++++++++++++++------- 6 files changed, 96 insertions(+), 46 deletions(-) diff --git a/prisma/dev.db b/prisma/dev.db index 71e875b931699e464a94108d3b5bfff4f9463727..9edcab751a023cfef1fcbcb20798f9152487a4c9 100644 GIT binary patch delta 115 zcmZozz|ydQWr7qFBlAQVCm^{o;b0uQn=&&igSO`6h4E6Xddc~@Hj~}sH5qLt7XnGQ z&9me46d02>b2a$$>+vvIv)&0ylwee0WMN?PWP0bGkzZV*;Fyz{npdolpQhlOSX8W# Rn3tjumYP?(xxK%#0RTLJB6t7* delta 115 zcmZozz|ydQWr7qF!@r3#PC#;F!ofIp4P|Cl25rsB3*)6&^^)^*qb9q@Ycgs~E(DRA zXUFF$Fy?ILYVhaR6JxSwy%Uxw!N|hEVd|cdUtFRf1!OasGQETF9CI>L^NJPn(-eFY Li#E6SS2h3u*6bq^ 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..5ae5a63 100644 --- a/src/app/publication/columns.tsx +++ b/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() @@ -39,14 +40,15 @@ export const columns: ColumnDef[] = [ ) }, - 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[] = [ { accessorKey: "query_after_days", header: "Query After (days)", + cell: NumberInputCell, meta: { - step: 10 + step: 10, + formSchema }, - cell: NumberInputCell + }, - - ] 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/numberInput.tsx index a0a8ac8..0a8517d 100644 --- a/src/app/ui/tables/inputs/numberInput.tsx +++ b/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) { const [isActive, setIsActive] = useState(false) @@ -20,6 +17,7 @@ export default function NumberInputCell(props: CellContext) { 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>({ @@ -27,6 +25,7 @@ export default function NumberInputCell(props: CellContext) { defaultValues: { [column]: props.cell.getValue() }, + }) function onSubmit(value: z.infer) { @@ -66,6 +65,7 @@ export default function NumberInputCell(props: CellContext) { tabIndex={0} onKeyDown={e => { if (e.code === "Space" && !isActive) { + e.preventDefault() setIsActive(true) } }} @@ -86,7 +86,7 @@ export default function NumberInputCell(props: CellContext) { @@ -94,6 +94,7 @@ 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 56c8750..3782a11 100644 --- a/src/app/ui/tables/inputs/textInput.tsx +++ b/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) => { - let initialValue = props.getValue() - const [value, setValue] = useState(initialValue) +export function TextInputCell(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 }) - function handleConfirm() { - if (value === initialValue) { - setIsActive(false) - return - } + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + [column]: props.cell.getValue() + }, + }) + + function onSubmit(value: z.infer) { + toast({ + title: "You submitted the following values:", + description: ( + 
+          {JSON.stringify(value, null, 2)}
+
+ ), + }) updateField({ id, table, - text: value, + string: value[column], column, pathname }) - initialValue = value - setIsActive(false) - } - function handleExit() { - setValue(initialValue) setIsActive(false) } + function onErrors(errors) { + toast({ + title: "You have errors", + description: ( + 
+          {JSON.stringify(errors, null, 2)}
+
+ ), + }) + 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 === "Space" && !isActive) { + e.preventDefault() + setIsActive(true) + } + }} + > {isActive ? - setValue(e.target.value)} - autoFocus={true} - onBlur={handleExit} - onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }} - className="w-full" - /> - :

{value}

+
+ + ( + setIsActive(false)} + > + + + + + + )} + /> + + + + :

{props.cell.getValue()}

} - +
) }