Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

give each genrePicker cell a unique form id

This commit is contained in:
andrzej 2024-07-24 22:01:20 +02:00
parent cd90c92c6d
commit 71f5a44c8e
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
prisma/dev.db
View File

Binary file not shown.

41
src/app/ui/tables/inputs/genrePickerInput.tsx
View File

@ -24,25 +24,25 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
const genres = props.table.options.meta.genres const genres = props.table.options.meta.genres
const [isActive, setIsActive] = useState(false) const [isActive, setIsActive] = useState(false)
async function onSubmit({ genres }: { genres: number[] }, event: Event) { async function onSubmit({ genres }: { genres: number[] }) {
event.preventDefault() event.preventDefault()
const genresArray = genres.map((e) => { return { id: e } }) const genresArray = genres.map((e) => { return { id: e } })
console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`) console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
// toast({ toast({
// title: "You submitted the following values:", title: "You submitted the following values:",
// description: ( description: (
// <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4"> <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
// <code className="text-white">{JSON.stringify(genres)}</code> <code className="text-white">{JSON.stringify(genres)}</code>
// </pre> </pre>
// ), ),
// }) })
// const res = await updateGenres({ const res = await updateGenres({
// id, id,
// table, table,
// genres: genresArray, genres: genresArray,
// pathname pathname
// }) })
// setIsActive(false) setIsActive(false)
} }
function onErrors(errors) { function onErrors(errors) {
@ -65,11 +65,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
genres: value.map(e => e.id) genres: value.map(e => e.id)
} }
}) })
const formId = "editGenresForm" + props.cell.id
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm"> <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
<Popover modal={true}> <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
<FormField <FormField
control={form.control} control={form.control}
name="genres" name="genres"
@ -119,7 +122,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
}} }}
/> />
))} ))}
<Button variant="ghost" form="editGenresForm">Submit</Button> <Button variant="ghost" form={formId}>Submit</Button>
<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button> <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
</PopoverContent> </PopoverContent>
<FormMessage /> <FormMessage />