refactor: centralize form and record helpers
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
import * as Field from '$lib/components/ui/field/index.js';
|
||||
import * as Form from '$lib/components/ui/form/index.js';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
@@ -30,59 +29,51 @@
|
||||
{#if editingUser}
|
||||
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
||||
<input type="hidden" name="id" value={$editData.id} />
|
||||
<FormField form={editForm} name="name">
|
||||
<Field.Field>
|
||||
<Control id="edit-name">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Name</Field.Label>
|
||||
<Input {...props} autocomplete="name" bind:value={$editData.name} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="email">
|
||||
<Field.Field>
|
||||
<Control id="edit-email">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Email</Field.Label>
|
||||
<Input {...props} type="email" autocomplete="email" bind:value={$editData.email} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="password">
|
||||
<Field.Field>
|
||||
<Control id="edit-password">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>New password</Field.Label>
|
||||
<Input
|
||||
{...props}
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Leave blank to keep current password"
|
||||
bind:value={$editData.password}
|
||||
/>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="role">
|
||||
<Field.Field>
|
||||
<Control id="edit-role">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Role</Field.Label>
|
||||
<NativeSelect.Root {...props} bind:value={$editData.role} class="w-full">
|
||||
<NativeSelect.Option value="admin">Admin</NativeSelect.Option>
|
||||
<NativeSelect.Option value="user">User</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="name">
|
||||
<Form.Control id="edit-name">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Input {...props} autocomplete="name" bind:value={$editData.name} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="email">
|
||||
<Form.Control id="edit-email">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Email</Form.Label>
|
||||
<Input {...props} type="email" autocomplete="email" bind:value={$editData.email} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="password">
|
||||
<Form.Control id="edit-password">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>New password</Form.Label>
|
||||
<Input
|
||||
{...props}
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Leave blank to keep current password"
|
||||
bind:value={$editData.password}
|
||||
/>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="role">
|
||||
<Form.Control id="edit-role">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Role</Form.Label>
|
||||
<NativeSelect.Root {...props} bind:value={$editData.role} class="w-full">
|
||||
<NativeSelect.Option value="admin">Admin</NativeSelect.Option>
|
||||
<NativeSelect.Option value="user">User</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close>
|
||||
{#snippet child({ props })}
|
||||
|
||||
Reference in New Issue
Block a user