From 712c8da4650d91c7fba87fdab44b3244f9eb5dec Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 25 Sep 2024 18:48:03 +0200 Subject: [PATCH] controlled create dialogs --- prisma/dev.db | Bin 69632 -> 69632 bytes src/app/publication/create.tsx | 14 +++++++++----- src/app/story/create.tsx | 10 +++++----- src/app/submission/create.tsx | 12 ++++++++---- src/app/submission/edit.tsx | 7 +++---- src/app/tailwind.css | 22 ++++------------------ src/app/ui/forms/editSub.tsx | 3 ++- src/app/ui/forms/pub.tsx | 9 ++++----- src/app/ui/forms/story.tsx | 15 ++++++--------- src/app/ui/forms/sub.tsx | 13 ++++++------- src/app/ui/tables/contextMenu.tsx | 5 ----- src/app/ui/tables/data-table.tsx | 29 ++++++++++++++++------------- 12 files changed, 63 insertions(+), 76 deletions(-) diff --git a/prisma/dev.db b/prisma/dev.db index 9c0bb04bb2dfc87c6bef19f07213eec5934f12e3..37afdb8b8d5375f5ea6c9b42f81f810bbd6a77fb 100644 GIT binary patch delta 688 zcmY+APe@cz6vpp)cg8pG_U^susEv(|Pi1s49JD_gY9uK(LzJ3QSfo9hM;bCu9Zd>? zkyb*E=EE*1m>=S(4;9~}5T&N&~P<*nWGvzpboXRd5kpH4;N+JYi5p#mAs?)Es#bl_~Z@`&eIr^`)&KK-h}HH`opz z<`>yMKgD0Nb+*DkvquNm+0{2$h?k;J5e0L|h~Meg;{iweswnj7@&5=|D?Le-`zef@ z;}4CIM8K-)eIg-bt@WPpX6L(68HLzk1?>G^MUy&;El;vEhp%U#v;VM5v}@FwotpFU zVpJ&w-5;9=&4i(~4CsUAUB}C}&!_G|@H9GWuimI73*V_jp0)@clBHFaW{KrOj$#M1iYnY0#P6=-*{bJDJ8BH;W5;h>lz zkb>Z9;Su-+d6&vP2w;LD2;kO{fy^<{LEx-tBtRe}QYu^!lLRO*F|9iJI|Q0@;dExJ eSnlc{OK(;Gjhtj~#R)?5;sZ-ZqRS%0VfPP7nz4=m delta 643 zcmY*TO=uHg5dCI%ll{r=_ccvZleD3mwoBC5kRT{p!9q19h8oc*DA*XuLMt^%leFS3 zv4~XE)-LUW7lRNB9xSrZ9(xD~^&q)L@F4USMf6he5_Dq(>AYcPnD=-yr3zE3Fe`nq z^}K%^w%*;Ejt>osJne6!~2qpre!>Ok~F7-XD%b_bLi;weAu zr-gG2qMUSdAv=>U$kFJ%EcuB<%E{IX>9qE7SrNJ@FWt<|s;a8BmVqWNb<$^1 zEDjog@-y8u4}S6ii9jjl#}?3DyVO?- z!|-+ew(27+yr68Z?OhgFkjgd>j{udWvIJgzhrn2;+~h%m0UbnmpnvBf&cxgt(#Hgd z>Te~G^mPFqLVmm72ERZr3BcpB*mi=B6ZhXr5D}shZ35{z8;px=8N2@}?Yht03?!!K z<(6QP$arZVYNKCLfeNHDP>^PA5YqD*YioDLKC F^aqo2qn`i( diff --git a/src/app/publication/create.tsx b/src/app/publication/create.tsx index 91ef6ed..a50db64 100644 --- a/src/app/publication/create.tsx +++ b/src/app/publication/create.tsx @@ -6,12 +6,18 @@ import { Genre } from "@prisma/client"; import { createPub } from "app/lib/create"; import PubForm from "app/ui/forms/pub"; import { Plus } from "lucide-react"; +import { useState } from "react"; export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) { + const [isOpen, setIsOpen] = useState(false) + function closeDialog() { + setIsOpen(false) + } + return ( - + - + diff --git a/src/app/story/create.tsx b/src/app/story/create.tsx index 487719e..d3cba95 100644 --- a/src/app/story/create.tsx +++ b/src/app/story/create.tsx @@ -11,6 +11,9 @@ import { Plus } from "lucide-react"; export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) { const [isOpen, setIsOpen] = useState(false) + function closeDialog() { + setIsOpen(false) + } return ( @@ -25,12 +28,9 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { New story Create an entry for a new story i.e. a thing you intend to submit for publication. - + - - {/* TODO: pass setIsOpen to form as prop, to be handled post-verification */} - - + diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx index 59bfa95..dd27e33 100644 --- a/src/app/submission/create.tsx +++ b/src/app/submission/create.tsx @@ -7,6 +7,7 @@ import { ComponentProps } from "react"; import { Pub, Response, Story } from "@prisma/client"; import SubmissionForm from "app/ui/forms/sub"; import { Plus } from "lucide-react"; +import { useState } from "react"; type CreateSubDefaults = { @@ -20,8 +21,13 @@ type CreateSubDefaults = { export default function CreateSubmissionDialog({ stories, pubs, responses, defaults }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults?: CreateSubDefaults }) { + const [isOpen, setIsOpen] = useState(false) + function closeDialog() { + setIsOpen(false) + } + return ( - + diff --git a/src/app/submission/edit.tsx b/src/app/submission/edit.tsx index 0d951b0..ec8d272 100644 --- a/src/app/submission/edit.tsx +++ b/src/app/submission/edit.tsx @@ -6,10 +6,11 @@ import { ComponentProps } from "react"; import { Pub, Response, Story } from "@prisma/client"; import SubmissionForm, { SubForm } from "app/ui/forms/sub"; import EditSubmissionForm from "app/ui/forms/editSub"; +import { useState } from "react"; +export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children, closeDialog }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: SubForm, closeDialog: () => void }) { -export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: SubForm }) { return ( <> @@ -17,10 +18,8 @@ export default function EditSubmissionDialog({ stories, pubs, responses, default Edit Submission Change response status, edit dates etc - + - - diff --git a/src/app/tailwind.css b/src/app/tailwind.css index d2566ce..d3db459 100644 --- a/src/app/tailwind.css +++ b/src/app/tailwind.css @@ -1097,10 +1097,6 @@ body { justify-content: space-between; } -.justify-around { - justify-content: space-around; -} - .gap-1 { gap: 0.25rem; } @@ -1202,6 +1198,10 @@ body { white-space: nowrap; } +.rounded-3xl { + border-radius: 1.5rem; +} + .rounded-full { border-radius: 9999px; } @@ -1214,25 +1214,11 @@ body { border-radius: calc(var(--radius) - 4px); } -.rounded-3xl { - border-radius: 1.5rem; -} - -.rounded-l-3xl { - border-top-left-radius: 1.5rem; - border-bottom-left-radius: 1.5rem; -} - .rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } -.rounded-l { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; -} - .rounded-tl-3xl { border-top-left-radius: 1.5rem; } diff --git a/src/app/ui/forms/editSub.tsx b/src/app/ui/forms/editSub.tsx index 2bd23c8..6248460 100644 --- a/src/app/ui/forms/editSub.tsx +++ b/src/app/ui/forms/editSub.tsx @@ -40,7 +40,7 @@ import { useRouter } from "next/navigation" export type SubForm = z.infer -export default function EditSubmissionForm({ stories, pubs, responses, defaults }) { +export default function EditSubmissionForm({ stories, pubs, responses, defaults, closeDialog }) { const form = useForm>({ resolver: zodResolver(subSchema), defaultValues: { @@ -76,6 +76,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults if (res === undefined) throw new Error("something went wrong") toast({ title: "Successfully created new submission!" }) router.refresh() + closeDialog() } catch (error) { toast({ title: "UH-OH", diff --git a/src/app/ui/forms/pub.tsx b/src/app/ui/forms/pub.tsx index 3c75149..139df87 100644 --- a/src/app/ui/forms/pub.tsx +++ b/src/app/ui/forms/pub.tsx @@ -21,8 +21,9 @@ import { Genre } from "@prisma/client" import GenrePicker from "./genrePicker" import { pubSchema } from "./schemas" import { useRouter } from "next/navigation" +import { Ban } from "lucide-react" -export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array, createPub: (data: any) => void }) { +export default function PubForm({ genres, createPub, className, closeDialog }: ComponentProps<"div"> & { genres: Array, createPub: (data: any) => void, closeDialog: () => void }) { const form = useForm>({ resolver: zodResolver(pubSchema), defaultValues: { @@ -41,6 +42,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps if (!res) throw new Error("something went wrong") toast({ title: "Successfully submitted:", description: values.title }) router.refresh() + closeDialog() } catch (error) { toast({ title: "Oh dear... ", @@ -51,11 +53,8 @@ export default function PubForm({ genres, createPub, className }: ComponentProps function onErrors(errors) { toast({ - title: "You have errors", description: ( - 
-					{JSON.stringify(errors, null, 2)}
-
+ ), }) console.log(JSON.stringify(errors)) diff --git a/src/app/ui/forms/story.tsx b/src/app/ui/forms/story.tsx index 37db8de..e5e1a52 100644 --- a/src/app/ui/forms/story.tsx +++ b/src/app/ui/forms/story.tsx @@ -15,11 +15,12 @@ import { import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" -import { ComponentProps } from "react" +import { ComponentProps, SetStateAction } from "react" import { Genre, Story } from "@prisma/client" import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator" import GenrePicker from "./genrePicker" import { useRouter } from "next/navigation" +import { Ban, Cross } from "lucide-react" export const formSchema = z.object({ id: z.number().optional(), @@ -28,7 +29,7 @@ export const formSchema = z.object({ genres: z.array(z.number()) }) -export default function StoryForm({ genres, createStory, className }: ComponentProps<"div"> & { genres: Array, createStory: (data: any) => void, className: string }) { +export default function StoryForm({ genres, createStory, className, closeDialog }: ComponentProps<"div"> & { genres: Array, createStory: (data: any) => void, className: string, closeDialog: () => void }) { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { @@ -46,6 +47,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP if (!res) throw new Error("something went wrong") toast({ title: "Sucessfully submitted:", description: values.title }) router.refresh() + closeDialog() } catch (error) { toast({ title: "Oh dear... ", @@ -58,12 +60,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP function onErrors(errors) { toast({ - title: "You have errors", - description: ( - 
-					{JSON.stringify(errors, null, 2)}
-
- ), + description: () }) console.log(JSON.stringify(errors)) } @@ -100,7 +97,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP Word count - + diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx index c8dbf41..b578a12 100644 --- a/src/app/ui/forms/sub.tsx +++ b/src/app/ui/forms/sub.tsx @@ -35,11 +35,12 @@ import { useState } from "react" import { createSub } from "app/lib/create" import { subSchema } from "./schemas" import { useRouter } from "next/navigation" +import { Ban } from "lucide-react" export type SubForm = z.infer -export default function SubmissionForm({ stories, pubs, responses, defaults }) { +export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: any, pubs: any, responses: any, defaults: any, closeDialog: () => void }) { const form = useForm>({ resolver: zodResolver(subSchema), defaultValues: { @@ -71,24 +72,22 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) { async function onSubmit(values: z.infer) { try { const res = await createSub(values) - if (res === undefined) throw new Error("something went wrong") + if (!res) throw new Error("something went wrong") toast({ title: "Successfully created new submission!" }) + router.refresh() + closeDialog() } catch (error) { toast({ title: "UH-OH", description: error.message }) } - router.refresh() } function onErrors(errors) { toast({ - title: "You have errors", description: ( - 
-					{JSON.stringify(errors, null, 2)}
-
+ ), }) console.log(JSON.stringify(errors)) diff --git a/src/app/ui/tables/contextMenu.tsx b/src/app/ui/tables/contextMenu.tsx index feb46ec..c12e13c 100644 --- a/src/app/ui/tables/contextMenu.tsx +++ b/src/app/ui/tables/contextMenu.tsx @@ -1,12 +1,7 @@ -import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog" -import { Button } from "@/components/ui/button" import { ContextMenuContent, ContextMenuItem, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent } from "@/components/ui/context-menu" -import { deleteRecord } from "app/lib/del" import Link from "next/link" import { ComponentProps, useState } from "react" import { Row, Table, TableState } from "@tanstack/react-table" -import { tableNameToItemName } from "app/lib/nameMaps" -import EditSubmissionDialog from "app/submission/edit" export default function FormContextMenu({ table, row, openEditDialog, openDeleteDialog }: ComponentProps<"div"> & { table: Table, row: Row, openEditDialog: (row: Row) => void, openDeleteDialog: (row: Row) => void }) { const pathname = table.options.meta.pathname diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx index 8833fa6..70dec7e 100644 --- a/src/app/ui/tables/data-table.tsx +++ b/src/app/ui/tables/data-table.tsx @@ -119,6 +119,9 @@ export function DataTable({ setIsDeleteDialogVisible(true) SetDialogRow(row) } + function closeEditDialog() { + setIsEditDialogVisible(false) + } @@ -169,6 +172,7 @@ export function DataTable({ pubs={pubs} responses={responses} defaults={dialogRow?.original} + closeDialog={closeEditDialog} /> @@ -212,19 +216,18 @@ export function DataTable({ {`Deleting ${pluralize(tableNameToItemName(table.options.meta.tableName))} cannot be undone!`} - - - +