feat(app): refactor page create/update forms
This commit is contained in:
parent
83b615d989
commit
154df360ac
@ -1,6 +1,10 @@
|
||||
import { PageUpdateInput } from '@boring.tools/schema'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
@ -57,129 +61,146 @@ const Component = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-5">
|
||||
<h1 className="text-3xl">Edit page</h1>
|
||||
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-8 max-w-screen-md"
|
||||
className="flex flex-col gap-10 w-full max-w-screen-lg"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My page" {...field} autoFocus />
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex gap-10 w-full">
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My page" {...field} autoFocus />
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Some details about the page..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Some details about the page..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="changelogIds"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Changelogs</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
'w-[200px] justify-between',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{field?.value?.length === 1 &&
|
||||
changelogList.data?.find((changelog) =>
|
||||
field.value?.includes(changelog.id),
|
||||
)?.title}
|
||||
{field?.value &&
|
||||
field.value.length <= 0 &&
|
||||
'No changelog selected'}
|
||||
{field?.value &&
|
||||
field.value.length > 1 &&
|
||||
`${field?.value?.length} selected`}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search changelogs..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No changelog found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{changelogList.data?.map((changelog) => (
|
||||
<CommandItem
|
||||
value={changelog.title}
|
||||
key={changelog.id}
|
||||
onSelect={() => {
|
||||
const getIds = () => {
|
||||
if (!field.value) {
|
||||
return [changelog.id]
|
||||
}
|
||||
|
||||
if (field.value?.includes(changelog.id)) {
|
||||
return field.value.filter(
|
||||
(id) => id !== changelog.id,
|
||||
)
|
||||
}
|
||||
|
||||
return [
|
||||
...(field?.value as string[]),
|
||||
changelog.id,
|
||||
]
|
||||
}
|
||||
form.setValue('changelogIds', getIds())
|
||||
}}
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Options</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="changelogIds"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Changelogs</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
'w-[200px] justify-between',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
field.value?.includes(changelog.id)
|
||||
? 'opacity-100'
|
||||
: 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{changelog.title}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
This changelogs are shown on this page.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex gap-5">
|
||||
{field?.value?.length === 1 &&
|
||||
changelogList.data?.find((changelog) =>
|
||||
field.value?.includes(changelog.id),
|
||||
)?.title}
|
||||
{field?.value &&
|
||||
field.value.length <= 0 &&
|
||||
'No changelog selected'}
|
||||
{field?.value &&
|
||||
field.value.length > 1 &&
|
||||
`${field?.value?.length} selected`}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search changelogs..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No changelog found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{changelogList.data?.map((changelog) => (
|
||||
<CommandItem
|
||||
value={changelog.title}
|
||||
key={changelog.id}
|
||||
onSelect={() => {
|
||||
const getIds = () => {
|
||||
if (!field.value) {
|
||||
return [changelog.id]
|
||||
}
|
||||
|
||||
if (
|
||||
field.value?.includes(changelog.id)
|
||||
) {
|
||||
return field.value.filter(
|
||||
(id) => id !== changelog.id,
|
||||
)
|
||||
}
|
||||
|
||||
return [
|
||||
...(field?.value as string[]),
|
||||
changelog.id,
|
||||
]
|
||||
}
|
||||
form.setValue('changelogIds', getIds())
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
field.value?.includes(changelog.id)
|
||||
? 'opacity-100'
|
||||
: 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{changelog.title}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
This changelogs are shown on this page.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-end gap-5">
|
||||
<Button
|
||||
type="button"
|
||||
variant={'ghost'}
|
||||
@ -187,7 +208,7 @@ const Component = () => {
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">Update</Button>
|
||||
<Button type="submit">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { PageCreateInput } from '@boring.tools/schema'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
@ -69,115 +73,145 @@ const Component = () => {
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-8 max-w-screen-md"
|
||||
className="flex flex-col gap-10 w-full max-w-screen-lg"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My page" {...field} autoFocus />
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex gap-10 w-full">
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Details</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Some details about the page..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My page" {...field} autoFocus />
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="changelogIds"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Changelogs</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
'w-[200px] justify-between',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{field.value.length === 1 &&
|
||||
changelogList.data?.find((changelog) =>
|
||||
field.value?.includes(changelog.id),
|
||||
)?.title}
|
||||
{field.value.length <= 0 && 'No changelog selected'}
|
||||
{field.value.length > 1 &&
|
||||
`${field.value.length} selected`}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search changelogs..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No changelog found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{changelogList.data?.map((changelog) => (
|
||||
<CommandItem
|
||||
value={changelog.title}
|
||||
key={changelog.id}
|
||||
onSelect={() => {
|
||||
const getIds = () => {
|
||||
if (field.value.includes(changelog.id)) {
|
||||
const asd = field.value.filter(
|
||||
(id) => id !== changelog.id,
|
||||
)
|
||||
return asd
|
||||
}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Some details about the page..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>{' '}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
return [...field.value, changelog.id]
|
||||
}
|
||||
form.setValue('changelogIds', getIds())
|
||||
}}
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Options</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="changelogIds"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Changelogs</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
'w-[200px] justify-between',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
field.value.includes(changelog.id)
|
||||
? 'opacity-100'
|
||||
: 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{changelog.title}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
This changelogs are shown on this page.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit">Create</Button>
|
||||
{field.value.length === 1 &&
|
||||
changelogList.data?.find((changelog) =>
|
||||
field.value?.includes(changelog.id),
|
||||
)?.title}
|
||||
{field.value.length <= 0 &&
|
||||
'No changelog selected'}
|
||||
{field.value.length > 1 &&
|
||||
`${field.value.length} selected`}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search changelogs..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No changelog found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{changelogList.data?.map((changelog) => (
|
||||
<CommandItem
|
||||
value={changelog.title}
|
||||
key={changelog.id}
|
||||
onSelect={() => {
|
||||
const getIds = () => {
|
||||
if (
|
||||
field.value.includes(changelog.id)
|
||||
) {
|
||||
const asd = field.value.filter(
|
||||
(id) => id !== changelog.id,
|
||||
)
|
||||
return asd
|
||||
}
|
||||
|
||||
return [...field.value, changelog.id]
|
||||
}
|
||||
form.setValue('changelogIds', getIds())
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
field.value.includes(changelog.id)
|
||||
? 'opacity-100'
|
||||
: 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{changelog.title}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
This changelogs are shown on this page.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="flex items-end justify-end gap-5">
|
||||
<Button
|
||||
type="button"
|
||||
variant={'ghost'}
|
||||
onClick={() => navigate({ to: '/page' })}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button type="submit">Create</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user