feat(app): refactor changelog create/update forms
This commit is contained in:
parent
714da23d04
commit
83b615d989
@ -1,5 +1,9 @@
|
|||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
@ -58,66 +62,118 @@ 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 max-w-screen-lg">
|
||||||
control={form.control}
|
<Card className="w-full">
|
||||||
name="title"
|
<CardHeader>
|
||||||
render={({ field }) => (
|
<CardTitle>Details</CardTitle>
|
||||||
<FormItem>
|
</CardHeader>
|
||||||
<FormLabel>Title</FormLabel>
|
<CardContent>
|
||||||
<FormControl>
|
<div className="flex flex-col gap-3 w-full">
|
||||||
<Input placeholder="My changelog" {...field} autoFocus />
|
<FormField
|
||||||
</FormControl>{' '}
|
control={form.control}
|
||||||
<FormMessage />
|
name="title"
|
||||||
</FormItem>
|
render={({ field }) => (
|
||||||
)}
|
<FormItem>
|
||||||
/>
|
<FormLabel>Title</FormLabel>
|
||||||
|
<FormControl>
|
||||||
<FormField
|
<Input
|
||||||
control={form.control}
|
placeholder="My changelog"
|
||||||
name="description"
|
{...field}
|
||||||
render={({ field }) => (
|
autoFocus
|
||||||
<FormItem>
|
/>
|
||||||
<FormLabel>Description</FormLabel>
|
</FormControl>{' '}
|
||||||
<FormControl>
|
<FormMessage />
|
||||||
<Textarea
|
</FormItem>
|
||||||
placeholder="Some details about the changelog..."
|
)}
|
||||||
{...field}
|
|
||||||
/>
|
/>
|
||||||
</FormControl>{' '}
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="isSemver"
|
name="description"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
<FormItem>
|
||||||
<FormControl>
|
<FormLabel>Description</FormLabel>
|
||||||
<Checkbox
|
<FormControl>
|
||||||
checked={field.value}
|
<Textarea
|
||||||
onCheckedChange={field.onChange}
|
placeholder="Some details about the changelog..."
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>{' '}
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
|
||||||
<div className="space-y-1 leading-none">
|
|
||||||
<FormLabel>Using Semver</FormLabel>
|
|
||||||
<FormDescription>
|
|
||||||
If this changelog is following the{' '}
|
|
||||||
<a
|
|
||||||
href="https://semver.org/lang/de/"
|
|
||||||
className="text-emerald-700"
|
|
||||||
>
|
|
||||||
semantic versioning?
|
|
||||||
</a>
|
|
||||||
</FormDescription>
|
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
/>
|
|
||||||
<div className="flex gap-5">
|
<Card className="w-full">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Options</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="w-full flex flex-col gap-5">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="isSemver"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<FormLabel>Using Semver</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
If this changelog is following the{' '}
|
||||||
|
<a
|
||||||
|
href="https://semver.org/lang/de/"
|
||||||
|
className="text-emerald-700"
|
||||||
|
>
|
||||||
|
semantic versioning?
|
||||||
|
</a>
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="isConventional"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<FormLabel>Using Conventional Commits</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
If this changelog is using{' '}
|
||||||
|
<a
|
||||||
|
href="https://www.conventionalcommits.org/en/v1.0.0/"
|
||||||
|
className="text-emerald-700"
|
||||||
|
>
|
||||||
|
conventional commits
|
||||||
|
</a>
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-end justify-end gap-5">
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant={'ghost'}
|
variant={'ghost'}
|
||||||
@ -127,7 +183,8 @@ const Component = () => {
|
|||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit">Update</Button>
|
|
||||||
|
<Button type="submit">Save</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
@ -1,6 +1,10 @@
|
|||||||
import { ChangelogCreateInput } from '@boring.tools/schema'
|
import { ChangelogCreateInput } from '@boring.tools/schema'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
@ -53,97 +57,131 @@ const Component = () => {
|
|||||||
>
|
>
|
||||||
<div className="flex flex-col gap-5">
|
<div className="flex flex-col gap-5">
|
||||||
<h1 className="text-3xl">New changelog</h1>
|
<h1 className="text-3xl">New changelog</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 max-w-screen-lg">
|
||||||
control={form.control}
|
<Card className="w-full">
|
||||||
name="title"
|
<CardHeader>
|
||||||
render={({ field }) => (
|
<CardTitle>Details</CardTitle>
|
||||||
<FormItem>
|
</CardHeader>
|
||||||
<FormLabel>Title</FormLabel>
|
<CardContent>
|
||||||
<FormControl>
|
<div className="flex flex-col gap-3 w-full">
|
||||||
<Input placeholder="My changelog" {...field} autoFocus />
|
<FormField
|
||||||
</FormControl>{' '}
|
control={form.control}
|
||||||
<FormMessage />
|
name="title"
|
||||||
</FormItem>
|
render={({ field }) => (
|
||||||
)}
|
<FormItem>
|
||||||
/>
|
<FormLabel>Title</FormLabel>
|
||||||
|
<FormControl>
|
||||||
<FormField
|
<Input
|
||||||
control={form.control}
|
placeholder="My changelog"
|
||||||
name="description"
|
{...field}
|
||||||
render={({ field }) => (
|
autoFocus
|
||||||
<FormItem>
|
/>
|
||||||
<FormLabel>Description</FormLabel>
|
</FormControl>{' '}
|
||||||
<FormControl>
|
<FormMessage />
|
||||||
<Textarea
|
</FormItem>
|
||||||
placeholder="Some details about the changelog..."
|
)}
|
||||||
{...field}
|
|
||||||
/>
|
/>
|
||||||
</FormControl>{' '}
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="isSemver"
|
name="description"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
<FormItem>
|
||||||
<FormControl>
|
<FormLabel>Description</FormLabel>
|
||||||
<Checkbox
|
<FormControl>
|
||||||
checked={field.value}
|
<Textarea
|
||||||
onCheckedChange={field.onChange}
|
placeholder="Some details about the changelog..."
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>{' '}
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
|
||||||
<div className="space-y-1 leading-none">
|
|
||||||
<FormLabel>Using Semver</FormLabel>
|
|
||||||
<FormDescription>
|
|
||||||
If this changelog is following the{' '}
|
|
||||||
<a
|
|
||||||
href="https://semver.org/lang/de/"
|
|
||||||
className="text-emerald-700"
|
|
||||||
>
|
|
||||||
semantic versioning?
|
|
||||||
</a>
|
|
||||||
</FormDescription>
|
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
<Card className="w-full">
|
||||||
control={form.control}
|
<CardHeader>
|
||||||
name="isConventional"
|
<CardTitle>Options</CardTitle>
|
||||||
render={({ field }) => (
|
</CardHeader>
|
||||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
<CardContent>
|
||||||
<FormControl>
|
<div className="w-full flex flex-col gap-5">
|
||||||
<Checkbox
|
<FormField
|
||||||
checked={field.value}
|
control={form.control}
|
||||||
onCheckedChange={field.onChange}
|
name="isSemver"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<FormLabel>Using Semver</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
If this changelog is following the{' '}
|
||||||
|
<a
|
||||||
|
href="https://semver.org/lang/de/"
|
||||||
|
className="text-emerald-700"
|
||||||
|
>
|
||||||
|
semantic versioning?
|
||||||
|
</a>
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="isConventional"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<FormLabel>Using Conventional Commits</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
If this changelog is using{' '}
|
||||||
|
<a
|
||||||
|
href="https://www.conventionalcommits.org/en/v1.0.0/"
|
||||||
|
className="text-emerald-700"
|
||||||
|
>
|
||||||
|
conventional commits
|
||||||
|
</a>
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
|
||||||
<div className="space-y-1 leading-none">
|
|
||||||
<FormLabel>Using Conventional Commits</FormLabel>
|
|
||||||
<FormDescription>
|
|
||||||
If this changelog is using{' '}
|
|
||||||
<a
|
|
||||||
href="https://www.conventionalcommits.org/en/v1.0.0/"
|
|
||||||
className="text-emerald-700"
|
|
||||||
>
|
|
||||||
conventional commits
|
|
||||||
</a>
|
|
||||||
</FormDescription>
|
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
/>
|
</div>
|
||||||
<Button type="submit">Create</Button>
|
|
||||||
|
<div className="flex items-end justify-end gap-5">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={'ghost'}
|
||||||
|
onClick={() => navigate({ to: '/changelog' })}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button type="submit">Create</Button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user