make checkboxes submit correct data
This commit is contained in:
parent
7539b8a577
commit
5ad03054a9
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import { CheckboxReactHookFormMultiple } from "app/ui/forms/Checkboxdemo";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<CheckboxReactHookFormMultiple />
|
||||
)
|
||||
}
|
||||
|
|
@ -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<z.infer<typeof formSchema>>({
|
||||
|
|
@ -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<typeof formSchema>) {
|
||||
// Do something with the form values.
|
||||
// ✅ This will be type-safe and validated.
|
||||
toast({
|
||||
title: "You submitted the following values:",
|
||||
description: (
|
||||
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white">{JSON.stringify(values, null, 2)}</code>
|
||||
</pre>
|
||||
),
|
||||
})
|
||||
console.log(values)
|
||||
}
|
||||
|
||||
|
||||
function onErrors(errors) {
|
||||
toast({
|
||||
title: "You have errors",
|
||||
description: (
|
||||
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
|
||||
</pre>
|
||||
),
|
||||
})
|
||||
console.log(JSON.stringify(errors))
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
|
|
@ -65,17 +88,25 @@ export default function StoryForm({ genres }) {
|
|||
<FormControl>
|
||||
<Input type="number" step={500} min={0} {...field}></Input>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{
|
||||
// <Popover.Root>
|
||||
// <Popover.Trigger>
|
||||
// Genres
|
||||
// </Popover.Trigger>
|
||||
// <Popover.Content>
|
||||
}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="genres"
|
||||
render={({ field }) => (
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<div className="mb-4">
|
||||
<FormLabel>Genres</FormLabel>
|
||||
<FormDescription>genres baby</FormDescription>
|
||||
<FormDescription>Specify relevant genres</FormDescription>
|
||||
</div>
|
||||
{genres.map((item) => (
|
||||
<FormField
|
||||
|
|
@ -110,10 +141,15 @@ export default function StoryForm({ genres }) {
|
|||
}}
|
||||
/>
|
||||
))}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
/>
|
||||
{
|
||||
// </Popover.Content>
|
||||
// </Popover.Root>
|
||||
}
|
||||
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -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<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
responseId: responses[0].id
|
||||
}
|
||||
})
|
||||
const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
|
||||
const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
|
||||
const storiesSelectItems = stories.map(e => (
|
||||
<SelectItem value={e.id.toString()} key={e.title}>
|
||||
{e.title}
|
||||
|
|
@ -146,8 +151,8 @@ export default function SubmissionForm({ stories, pubs, responses }) {
|
|||
name="submitted"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Date of birth</FormLabel>
|
||||
<Popover>
|
||||
<FormLabel>Date of submission</FormLabel>
|
||||
<Popover open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
|
|
@ -170,7 +175,7 @@ export default function SubmissionForm({ stories, pubs, responses }) {
|
|||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
|
||||
disabled={(date) =>
|
||||
date > new Date() || date < new Date("1900-01-01")
|
||||
}
|
||||
|
|
@ -186,8 +191,76 @@ export default function SubmissionForm({ stories, pubs, responses }) {
|
|||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="responded"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Date of response</FormLabel>
|
||||
<Popover open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[240px] pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(field.value, "PPP")
|
||||
) : (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
|
||||
disabled={(date) =>
|
||||
date > new Date() || date < new Date("1900-01-01")
|
||||
}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
The date they wrote back
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="responseId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Response</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue>
|
||||
<p>{responses?.find(e => e.id === Number(field.value))?.response ?? null}</p>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{reponsesSelectItems}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>The market you sent it to</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue