From 5ad03054a9d1578a4da5dfa97bbb623b9e4dae58 Mon Sep 17 00:00:00 2001 From: andrzej Date: Fri, 14 Jun 2024 22:41:41 +0200 Subject: [PATCH] make checkboxes submit correct data --- src/app/tailwind.css | 218 ++++++++++++++++++------------------- src/app/test/page.tsx | 7 ++ src/app/ui/forms/story.tsx | 52 +++++++-- src/app/ui/forms/sub.tsx | 89 +++++++++++++-- 4 files changed, 241 insertions(+), 125 deletions(-) create mode 100644 src/app/test/page.tsx diff --git a/src/app/tailwind.css b/src/app/tailwind.css index 52b9544..10ec6f4 100644 --- a/src/app/tailwind.css +++ b/src/app/tailwind.css @@ -620,10 +620,18 @@ body { position: relative; } +.left-1 { + left: 0.25rem; +} + .left-2 { left: 0.5rem; } +.right-1 { + right: 0.25rem; +} + .right-2 { right: 0.5rem; } @@ -636,14 +644,6 @@ body { top: 0.5rem; } -.left-1 { - left: 0.25rem; -} - -.right-1 { - right: 0.25rem; -} - .z-50 { z-index: 50; } @@ -739,6 +739,14 @@ body { height: 1rem; } +.h-7 { + height: 1.75rem; +} + +.h-8 { + height: 2rem; +} + .h-9 { height: 2.25rem; } @@ -751,14 +759,6 @@ body { height: 1px; } -.h-8 { - height: 2rem; -} - -.h-7 { - height: 1.75rem; -} - .max-h-96 { max-height: 24rem; } @@ -775,6 +775,10 @@ body { width: 0.5rem; } +.w-2\/3 { + width: 66.666667%; +} + .w-3 { width: 0.75rem; } @@ -787,26 +791,14 @@ body { width: 1rem; } -.w-\[340px\] { - width: 340px; -} - -.w-full { - width: 100%; -} - -.w-2\/3 { - width: 66.666667%; +.w-7 { + width: 1.75rem; } .w-72 { width: 18rem; } -.w-7 { - width: 1.75rem; -} - .w-9 { width: 2.25rem; } @@ -815,10 +807,18 @@ body { width: 240px; } +.w-\[340px\] { + width: 340px; +} + .w-auto { width: auto; } +.w-full { + width: 100%; +} + .min-w-\[8rem\] { min-width: 8rem; } @@ -889,6 +889,12 @@ body { gap: 0.25rem; } +.space-x-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -901,40 +907,16 @@ body { margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); -} - .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-6 > :not([hidden]) ~ :not([hidden]) { +.space-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); -} - -.space-x-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]) { @@ -943,12 +925,30 @@ body { margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } +.space-y-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + .overflow-auto { overflow: auto; } @@ -981,6 +981,10 @@ body { border-top-width: 1px; } +.border-destructive { + border-color: hsl(var(--destructive)); +} + .border-input { border-color: hsl(var(--input)); } @@ -989,8 +993,8 @@ body { border-color: hsl(var(--primary)); } -.border-destructive { - border-color: hsl(var(--destructive)); +.bg-accent { + background-color: hsl(var(--accent)); } .bg-background { @@ -1030,18 +1034,22 @@ body { background-color: transparent; } -.bg-accent { - background-color: hsl(var(--accent)); -} - .fill-current { fill: currentColor; } +.p-0 { + padding: 0px; +} + .p-1 { padding: 0.25rem; } +.p-3 { + padding: 0.75rem; +} + .p-4 { padding: 1rem; } @@ -1050,14 +1058,6 @@ body { padding: 1.5rem; } -.p-0 { - padding: 0px; -} - -.p-3 { - padding: 0.75rem; -} - .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1103,6 +1103,10 @@ body { padding-bottom: 1rem; } +.pl-3 { + padding-left: 0.75rem; +} + .pl-8 { padding-left: 2rem; } @@ -1119,10 +1123,6 @@ body { padding-top: 0.25rem; } -.pl-3 { - padding-left: 0.75rem; -} - .text-left { text-align: left; } @@ -1140,6 +1140,10 @@ body { line-height: 2.25rem; } +.text-\[0\.8rem\] { + font-size: 0.8rem; +} + .text-base { font-size: 1rem; line-height: 1.5rem; @@ -1155,10 +1159,6 @@ body { line-height: 1rem; } -.text-\[0\.8rem\] { - font-size: 0.8rem; -} - .font-black { font-weight: 900; } @@ -1187,6 +1187,10 @@ body { letter-spacing: 0.1em; } +.text-accent-foreground { + color: hsl(var(--accent-foreground)); +} + .text-current { color: currentColor; } @@ -1199,6 +1203,14 @@ body { color: hsl(var(--destructive-foreground)); } +.text-foreground { + color: hsl(var(--foreground)); +} + +.text-foreground\/50 { + color: hsl(var(--foreground) / 0.5); +} + .text-muted-foreground { color: hsl(var(--muted-foreground)); } @@ -1224,18 +1236,6 @@ body { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-foreground { - color: hsl(var(--foreground)); -} - -.text-foreground\/50 { - color: hsl(var(--foreground) / 0.5); -} - -.text-accent-foreground { - color: hsl(var(--accent-foreground)); -} - .underline { text-decoration-line: underline; } @@ -1244,6 +1244,10 @@ body { text-underline-offset: 4px; } +.opacity-0 { + opacity: 0; +} + .opacity-50 { opacity: 0.5; } @@ -1252,10 +1256,6 @@ body { opacity: 0.6; } -.opacity-0 { - opacity: 0; -} - .opacity-90 { opacity: 0.9; } @@ -1289,14 +1289,14 @@ body { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; +.transition-all { + transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-all { - transition-property: all; +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -1366,20 +1366,20 @@ body { background-color: hsl(var(--muted) / 0.5); } -.hover\:bg-primary\/90:hover { - background-color: hsl(var(--primary) / 0.9); +.hover\:bg-primary:hover { + background-color: hsl(var(--primary)); } -.hover\:bg-secondary\/80:hover { - background-color: hsl(var(--secondary) / 0.8); +.hover\:bg-primary\/90:hover { + background-color: hsl(var(--primary) / 0.9); } .hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); } -.hover\:bg-primary:hover { - background-color: hsl(var(--primary)); +.hover\:bg-secondary\/80:hover { + background-color: hsl(var(--secondary) / 0.8); } .hover\:text-accent-foreground:hover { @@ -1644,14 +1644,14 @@ body { --tw-exit-opacity: 0; } -.data-\[state\=open\]\:fade-in-0[data-state=open] { - --tw-enter-opacity: 0; -} - .data-\[state\=closed\]\:fade-out-80[data-state=closed] { --tw-exit-opacity: 0.8; } +.data-\[state\=open\]\:fade-in-0[data-state=open] { + --tw-enter-opacity: 0; +} + .data-\[state\=closed\]\:zoom-out-95[data-state=closed] { --tw-exit-scale: .95; } diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx new file mode 100644 index 0000000..7ebf44c --- /dev/null +++ b/src/app/test/page.tsx @@ -0,0 +1,7 @@ +import { CheckboxReactHookFormMultiple } from "app/ui/forms/Checkboxdemo"; + +export default function Page() { + return ( + + ) +} diff --git a/src/app/ui/forms/story.tsx b/src/app/ui/forms/story.tsx index 3bf8da6..cb73093 100644 --- a/src/app/ui/forms/story.tsx +++ b/src/app/ui/forms/story.tsx @@ -16,14 +16,15 @@ import { } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" +import { toast } from "@/components/ui/use-toast" +import * as Popover from '@radix-ui/react-popover'; const formSchema = z.object({ title: z.string().min(2).max(50), - word_count: z.number(), - genres: z.object({ id: z.number(), name: z.string() }).array() + word_count: z.coerce.number(), + genres: z.array(z.number()) }) - export default function StoryForm({ genres }) { // 1. Define your form. const form = useForm>({ @@ -31,18 +32,40 @@ export default function StoryForm({ genres }) { defaultValues: { title: "", word_count: 0, - genres: genres + genres: [] }, }) // 2. Define a submit handler. function onSubmit(values: z.infer) { // Do something with the form values. // ✅ This will be type-safe and validated. + toast({ + title: "You submitted the following values:", + description: ( + 
+					{JSON.stringify(values, null, 2)}
+
+ ), + }) console.log(values) } + + + function onErrors(errors) { + toast({ + title: "You have errors", + description: ( + 
+					{JSON.stringify(errors, null, 2)}
+
+ ), + }) + console.log(JSON.stringify(errors)) + } + return (
- + + )} /> + { + // + // + // Genres + // + // + } ( + render={() => (
Genres - genres baby + Specify relevant genres
{genres.map((item) => ( ))} + )} - /> + { + // + // + } + diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx index 8c574f9..5e8a415 100644 --- a/src/app/ui/forms/sub.tsx +++ b/src/app/ui/forms/sub.tsx @@ -31,21 +31,26 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select" -import { ItemText, SelectItemIndicator, SelectItemText } from "@radix-ui/react-select" +import { useState } from "react" const FormSchema = z.object({ - storyId: z.string(), - pubId: z.string(), + storyId: z.coerce.number(), + pubId: z.coerce.number(), submitted: z.date(), - // responded: z.date(), - // responseId: z.string() + responded: z.date().optional(), + responseId: z.number() }) export default function SubmissionForm({ stories, pubs, responses }) { const form = useForm>({ resolver: zodResolver(FormSchema), + defaultValues: { + responseId: responses[0].id + } }) + const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false); + const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false); const storiesSelectItems = stories.map(e => ( {e.title} @@ -146,8 +151,8 @@ export default function SubmissionForm({ stories, pubs, responses }) { name="submitted" render={({ field }) => ( - Date of birth - + Date of submission + + + + + { field.onChange(e); setIsRespCalendarOpen(false); }} + disabled={(date) => + date > new Date() || date < new Date("1900-01-01") + } + initialFocus + /> + + + + The date they wrote back + + + + )} + /> + ( + + Response + + The market you sent it to + + + )} + /> +