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

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

@ -1,6 +1,10 @@
import { PageCreateInput } from '@boring.tools/schema'
import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Command,
CommandEmpty,
CommandGroup,
@ -69,8 +73,15 @@ 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"
>
<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"
@ -101,7 +112,14 @@ const Component = () => {
</FormItem>
)}
/>
</CardContent>
</Card>
<Card className="w-full">
<CardHeader>
<CardTitle>Options</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-5">
<FormField
control={form.control}
name="changelogIds"
@ -123,7 +141,8 @@ const Component = () => {
changelogList.data?.find((changelog) =>
field.value?.includes(changelog.id),
)?.title}
{field.value.length <= 0 && 'No changelog selected'}
{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" />
@ -142,7 +161,9 @@ const Component = () => {
key={changelog.id}
onSelect={() => {
const getIds = () => {
if (field.value.includes(changelog.id)) {
if (
field.value.includes(changelog.id)
) {
const asd = field.value.filter(
(id) => id !== changelog.id,
)
@ -177,7 +198,20 @@ const Component = () => {
</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>