boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(app): refactor page create/update forms
All checks were successful
Build and Push Docker Image / tests (push) Successful in 57s
Details
Build and Push Docker Image / build (push) Successful in 4m30s
Details

Browse Source
This commit is contained in:
Lars Hampe 2024-11-11 21:58:38 +01:00
parent 83b615d989
commit 154df360ac
2 changed files with 276 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
apps/app/src/routes/page.$id.edit.lazy.tsx
View File

@ -1,6 +1,10 @@
import { PageUpdateInput } from '@boring.tools/schema' import { PageUpdateInput } from '@boring.tools/schema'
import { import {
Button, Button,
Card,
CardContent,
CardHeader,
CardTitle,
Command, Command,
CommandEmpty, CommandEmpty,
CommandGroup, CommandGroup,
@ -57,129 +61,146 @@ const Component = () => {
return ( return (
<> <>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<h1 className="text-3xl">Edit page</h1>
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} 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 <div className="flex gap-10 w-full">
control={form.control} <Card className="w-full">
name="title" <CardHeader>
render={({ field }) => ( <CardTitle>Details</CardTitle>
<FormItem> </CardHeader>
<FormLabel>Title</FormLabel> <CardContent className="flex flex-col gap-5">
<FormControl> <FormField
<Input placeholder="My page" {...field} autoFocus /> control={form.control}
</FormControl>{' '} name="title"
<FormMessage /> render={({ field }) => (
</FormItem> <FormItem>
)} <FormLabel>Title</FormLabel>
/> <FormControl>
<Input placeholder="My page" {...field} autoFocus />
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="description" name="description"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Description</FormLabel> <FormLabel>Description</FormLabel>
<FormControl> <FormControl>
<Textarea <Textarea
placeholder="Some details about the page..." placeholder="Some details about the page..."
{...field} {...field}
/> />
</FormControl>{' '} </FormControl>{' '}
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</CardContent>
</Card>
<FormField <Card className="w-full">
control={form.control} <CardHeader>
name="changelogIds" <CardTitle>Options</CardTitle>
render={({ field }) => ( </CardHeader>
<FormItem className="flex flex-col"> <CardContent className="flex flex-col gap-5">
<FormLabel>Changelogs</FormLabel> <FormField
<Popover> control={form.control}
<PopoverTrigger asChild> name="changelogIds"
<FormControl> render={({ field }) => (
<Button <FormItem className="flex flex-col">
variant="outline" <FormLabel>Changelogs</FormLabel>
role="combobox" <Popover>
className={cn( <PopoverTrigger asChild>
'w-[200px] justify-between', <FormControl>
!field.value && 'text-muted-foreground', <Button
)} variant="outline"
> role="combobox"
{field?.value?.length === 1 && className={cn(
changelogList.data?.find((changelog) => 'w-[200px] justify-between',
field.value?.includes(changelog.id), !field.value && 'text-muted-foreground',
)?.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 {field?.value?.length === 1 &&
className={cn( changelogList.data?.find((changelog) =>
'mr-2 h-4 w-4', field.value?.includes(changelog.id),
field.value?.includes(changelog.id) )?.title}
? 'opacity-100' {field?.value &&
: 'opacity-0', field.value.length <= 0 &&
)} 'No changelog selected'}
/> {field?.value &&
{changelog.title} field.value.length > 1 &&
</CommandItem> `${field?.value?.length} selected`}
))} <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</CommandGroup> </Button>
</CommandList> </FormControl>
</Command> </PopoverTrigger>
</PopoverContent> <PopoverContent className="w-[200px] p-0">
</Popover> <Command>
<FormDescription> <CommandInput placeholder="Search changelogs..." />
This changelogs are shown on this page. <CommandList>
</FormDescription> <CommandEmpty>No changelog found.</CommandEmpty>
<FormMessage /> <CommandGroup>
</FormItem> {changelogList.data?.map((changelog) => (
)} <CommandItem
/> value={changelog.title}
<div className="flex gap-5"> 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 <Button
type="button" type="button"
variant={'ghost'} variant={'ghost'}
@ -187,7 +208,7 @@ const Component = () => {
> >
Cancel Cancel
</Button> </Button>
<Button type="submit">Update</Button> <Button type="submit">Save</Button>
</div> </div>
</form> </form>
</Form> </Form>

242
apps/app/src/routes/page.create.lazy.tsx
View File

@ -1,6 +1,10 @@
import { PageCreateInput } from '@boring.tools/schema' import { PageCreateInput } from '@boring.tools/schema'
import { import {
Button, Button,
Card,
CardContent,
CardHeader,
CardTitle,
Command, Command,
CommandEmpty, CommandEmpty,
CommandGroup, CommandGroup,
@ -69,115 +73,145 @@ const Component = () => {
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} 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 <div className="flex gap-10 w-full">
control={form.control} <Card className="w-full">
name="title" <CardHeader>
render={({ field }) => ( <CardTitle>Details</CardTitle>
<FormItem> </CardHeader>
<FormLabel>Title</FormLabel>
<FormControl>
<Input placeholder="My page" {...field} autoFocus />
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField <CardContent className="flex flex-col gap-5">
control={form.control} <FormField
name="description" control={form.control}
render={({ field }) => ( name="title"
<FormItem> render={({ field }) => (
<FormLabel>Description</FormLabel> <FormItem>
<FormControl> <FormLabel>Title</FormLabel>
<Textarea <FormControl>
placeholder="Some details about the page..." <Input placeholder="My page" {...field} autoFocus />
{...field} </FormControl>{' '}
/> <FormMessage />
</FormControl>{' '} </FormItem>
<FormMessage /> )}
</FormItem> />
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="changelogIds" name="description"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem>
<FormLabel>Changelogs</FormLabel> <FormLabel>Description</FormLabel>
<Popover> <FormControl>
<PopoverTrigger asChild> <Textarea
<FormControl> placeholder="Some details about the page..."
<Button {...field}
variant="outline" />
role="combobox" </FormControl>{' '}
className={cn( <FormMessage />
'w-[200px] justify-between', </FormItem>
!field.value && 'text-muted-foreground', )}
)} />
> </CardContent>
{field.value.length === 1 && </Card>
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] <Card className="w-full">
} <CardHeader>
form.setValue('changelogIds', getIds()) <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 {field.value.length === 1 &&
className={cn( changelogList.data?.find((changelog) =>
'mr-2 h-4 w-4', field.value?.includes(changelog.id),
field.value.includes(changelog.id) )?.title}
? 'opacity-100' {field.value.length <= 0 &&
: 'opacity-0', 'No changelog selected'}
)} {field.value.length > 1 &&
/> `${field.value.length} selected`}
{changelog.title} <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</CommandItem> </Button>
))} </FormControl>
</CommandGroup> </PopoverTrigger>
</CommandList> <PopoverContent className="w-[200px] p-0">
</Command> <Command>
</PopoverContent> <CommandInput placeholder="Search changelogs..." />
</Popover> <CommandList>
<FormDescription> <CommandEmpty>No changelog found.</CommandEmpty>
This changelogs are shown on this page. <CommandGroup>
</FormDescription> {changelogList.data?.map((changelog) => (
<FormMessage /> <CommandItem
</FormItem> value={changelog.title}
)} key={changelog.id}
/> onSelect={() => {
<Button type="submit">Create</Button> 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>
</Form> </Form>
</div> </div>