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

33
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,13 +61,17 @@ 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"
> >
<div className="flex gap-10 w-full">
<Card className="w-full">
<CardHeader>
<CardTitle>Details</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="title" name="title"
@ -94,7 +102,14 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
</CardContent>
</Card>
<Card className="w-full">
<CardHeader>
<CardTitle>Options</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="changelogIds" name="changelogIds"
@ -142,7 +157,9 @@ const Component = () => {
return [changelog.id] return [changelog.id]
} }
if (field.value?.includes(changelog.id)) { if (
field.value?.includes(changelog.id)
) {
return field.value.filter( return field.value.filter(
(id) => id !== changelog.id, (id) => id !== changelog.id,
) )
@ -179,7 +196,11 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
<div className="flex gap-5"> </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>

40
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,8 +73,15 @@ 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"
> >
<div className="flex gap-10 w-full">
<Card className="w-full">
<CardHeader>
<CardTitle>Details</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="title" name="title"
@ -101,7 +112,14 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
</CardContent>
</Card>
<Card className="w-full">
<CardHeader>
<CardTitle>Options</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="changelogIds" name="changelogIds"
@ -123,7 +141,8 @@ const Component = () => {
changelogList.data?.find((changelog) => changelogList.data?.find((changelog) =>
field.value?.includes(changelog.id), field.value?.includes(changelog.id),
)?.title} )?.title}
{field.value.length <= 0 && 'No changelog selected'} {field.value.length <= 0 &&
'No changelog selected'}
{field.value.length > 1 && {field.value.length > 1 &&
`${field.value.length} selected`} `${field.value.length} selected`}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@ -142,7 +161,9 @@ const Component = () => {
key={changelog.id} key={changelog.id}
onSelect={() => { onSelect={() => {
const getIds = () => { const getIds = () => {
if (field.value.includes(changelog.id)) { if (
field.value.includes(changelog.id)
) {
const asd = field.value.filter( const asd = field.value.filter(
(id) => id !== changelog.id, (id) => id !== changelog.id,
) )
@ -177,7 +198,20 @@ const Component = () => {
</FormItem> </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> <Button type="submit">Create</Button>
</div>
</form> </form>
</Form> </Form>
</div> </div>