refactor: centralize form and record helpers
This commit is contained in:
@@ -2,12 +2,12 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/state';
|
||||
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 { toast } from 'svelte-sonner';
|
||||
import { superForm } from 'sveltekit-superforms';
|
||||
import { zod4Client } from 'sveltekit-superforms/adapters';
|
||||
import { clientEditSchema } from '$lib/schemas/clients.schema';
|
||||
import { handleFormToast } from '$lib/form-feedback';
|
||||
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';
|
||||
@@ -50,28 +50,6 @@
|
||||
|
||||
const { form: editData, enhance: enhanceEdit } = editForm;
|
||||
|
||||
function handleFormToast(
|
||||
form: { valid: boolean; message?: string; errors: Record<string, unknown> },
|
||||
id: string,
|
||||
onSuccess: () => void
|
||||
) {
|
||||
if (form.valid) {
|
||||
if (form.message) toast.success(form.message, { id });
|
||||
onSuccess();
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error(form.message ?? firstError(form.errors), { id });
|
||||
}
|
||||
|
||||
function firstError(errors: Record<string, unknown>) {
|
||||
for (const value of Object.values(errors)) {
|
||||
if (Array.isArray(value) && typeof value[0] === 'string') return value[0];
|
||||
}
|
||||
|
||||
return 'Check the highlighted fields.';
|
||||
}
|
||||
|
||||
function navigateToTab(tab: TabValue) {
|
||||
goto(resolve(`/dashboard/clients/[id]/${tab}`, { id: data.client.id }));
|
||||
}
|
||||
@@ -103,76 +81,66 @@
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="/dashboard/clients?/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-client-name">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Name</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.name} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="type">
|
||||
<Field.Field>
|
||||
<Control id="edit-client-type">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Type</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.type}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="business">Business</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sport">Sport</NativeSelect.Option>
|
||||
<NativeSelect.Option value="individual">Individual</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="edit-client-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="prospect">Prospect</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paused">Paused</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="website">
|
||||
<Field.Field>
|
||||
<Control id="edit-client-website">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Website</Field.Label>
|
||||
<Input
|
||||
{...props}
|
||||
type="url"
|
||||
placeholder="https://example.com"
|
||||
bind:value={$editData.website}
|
||||
/>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="edit-client-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="name">
|
||||
<Form.Control id="edit-client-name">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.name} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="type">
|
||||
<Form.Control id="edit-client-type">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Type</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.type}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="business">Business</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sport">Sport</NativeSelect.Option>
|
||||
<NativeSelect.Option value="individual">Individual</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="status">
|
||||
<Form.Control id="edit-client-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="prospect">Prospect</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paused">Paused</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="website">
|
||||
<Form.Control id="edit-client-website">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Website</Form.Label>
|
||||
<Input
|
||||
{...props}
|
||||
type="url"
|
||||
placeholder="https://example.com"
|
||||
bind:value={$editData.website}
|
||||
/>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="notes">
|
||||
<Form.Control id="edit-client-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
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';
|
||||
@@ -32,98 +31,82 @@
|
||||
<Dialog.Description>Add a new address record.</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
||||
<FormField form={createForm} name="label">
|
||||
<Field.Field>
|
||||
<Control id="create-label">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Label</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.label} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="line1">
|
||||
<Field.Field>
|
||||
<Control id="create-line1">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Address line 1</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.line1} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="line2">
|
||||
<Field.Field>
|
||||
<Control id="create-line2">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Address line 2</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.line2} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="city">
|
||||
<Field.Field>
|
||||
<Control id="create-city">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>City</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.city} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="region">
|
||||
<Field.Field>
|
||||
<Control id="create-region">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Region / county</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.region} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="postcode">
|
||||
<Field.Field>
|
||||
<Control id="create-postcode">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Postcode</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.postcode} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="country">
|
||||
<Field.Field>
|
||||
<Control id="create-country">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Country</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.country} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="isPrimary">
|
||||
<Field.Field>
|
||||
<Control id="create-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Primary address</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="label">
|
||||
<Form.Control id="create-label">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.label} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="line1">
|
||||
<Form.Control id="create-line1">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Address line 1</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.line1} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="line2">
|
||||
<Form.Control id="create-line2">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Address line 2</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.line2} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="city">
|
||||
<Form.Control id="create-city">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>City</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.city} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="region">
|
||||
<Form.Control id="create-region">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Region / county</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.region} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="postcode">
|
||||
<Form.Control id="create-postcode">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Postcode</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.postcode} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="country">
|
||||
<Form.Control id="create-country">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Country</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.country} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="isPrimary">
|
||||
<Form.Control id="create-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Primary address</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -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,98 +29,82 @@
|
||||
{#if editingRecord}
|
||||
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
||||
<input type="hidden" name="id" value={$editData.id} />
|
||||
<FormField form={editForm} name="label">
|
||||
<Field.Field>
|
||||
<Control id="edit-label">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Label</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.label} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="line1">
|
||||
<Field.Field>
|
||||
<Control id="edit-line1">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Address line 1</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.line1} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="line2">
|
||||
<Field.Field>
|
||||
<Control id="edit-line2">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Address line 2</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.line2} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="city">
|
||||
<Field.Field>
|
||||
<Control id="edit-city">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>City</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.city} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="region">
|
||||
<Field.Field>
|
||||
<Control id="edit-region">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Region / county</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.region} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="postcode">
|
||||
<Field.Field>
|
||||
<Control id="edit-postcode">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Postcode</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.postcode} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="country">
|
||||
<Field.Field>
|
||||
<Control id="edit-country">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Country</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.country} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="isPrimary">
|
||||
<Field.Field>
|
||||
<Control id="edit-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Primary address</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="label">
|
||||
<Form.Control id="edit-label">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Label</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.label} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="line1">
|
||||
<Form.Control id="edit-line1">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Address line 1</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.line1} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="line2">
|
||||
<Form.Control id="edit-line2">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Address line 2</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.line2} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="city">
|
||||
<Form.Control id="edit-city">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>City</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.city} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="region">
|
||||
<Form.Control id="edit-region">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Region / county</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.region} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="postcode">
|
||||
<Form.Control id="edit-postcode">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Postcode</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.postcode} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="country">
|
||||
<Form.Control id="edit-country">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Country</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.country} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="isPrimary">
|
||||
<Form.Control id="edit-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Primary address</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
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';
|
||||
@@ -35,87 +34,75 @@
|
||||
<Dialog.Description>Add a new booking record.</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
||||
<FormField form={createForm} name="roomId">
|
||||
<Field.Field>
|
||||
<Control id="create-roomId">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Room</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.roomId}>
|
||||
{#each data.options.rooms as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="serviceId">
|
||||
<Field.Field>
|
||||
<Control id="create-serviceId">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Service</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.serviceId}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
{#each data.options.services as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="startsAt">
|
||||
<Field.Field>
|
||||
<Control id="create-startsAt">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Starts at</Field.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$createData.startsAt} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="endsAt">
|
||||
<Field.Field>
|
||||
<Control id="create-endsAt">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Ends at</Field.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$createData.endsAt} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="booked">Booked</NativeSelect.Option>
|
||||
<NativeSelect.Option value="confirmed">Confirmed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="completed">Completed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="roomId">
|
||||
<Form.Control id="create-roomId">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Room</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.roomId}>
|
||||
{#each data.options.rooms as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="serviceId">
|
||||
<Form.Control id="create-serviceId">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Service</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.serviceId}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
{#each data.options.services as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="startsAt">
|
||||
<Form.Control id="create-startsAt">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Starts at</Form.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$createData.startsAt} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="endsAt">
|
||||
<Form.Control id="create-endsAt">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Ends at</Form.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$createData.endsAt} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="status">
|
||||
<Form.Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="booked">Booked</NativeSelect.Option>
|
||||
<NativeSelect.Option value="confirmed">Confirmed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="completed">Completed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="notes">
|
||||
<Form.Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -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';
|
||||
@@ -33,87 +32,75 @@
|
||||
{#if editingRecord}
|
||||
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
||||
<input type="hidden" name="id" value={$editData.id} />
|
||||
<FormField form={editForm} name="roomId">
|
||||
<Field.Field>
|
||||
<Control id="edit-roomId">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Room</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.roomId}>
|
||||
{#each data.options.rooms as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="serviceId">
|
||||
<Field.Field>
|
||||
<Control id="edit-serviceId">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Service</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.serviceId}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
{#each data.options.services as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="startsAt">
|
||||
<Field.Field>
|
||||
<Control id="edit-startsAt">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Starts at</Field.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$editData.startsAt} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="endsAt">
|
||||
<Field.Field>
|
||||
<Control id="edit-endsAt">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Ends at</Field.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$editData.endsAt} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="booked">Booked</NativeSelect.Option>
|
||||
<NativeSelect.Option value="confirmed">Confirmed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="completed">Completed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="roomId">
|
||||
<Form.Control id="edit-roomId">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Room</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.roomId}>
|
||||
{#each data.options.rooms as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="serviceId">
|
||||
<Form.Control id="edit-serviceId">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Service</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.serviceId}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
{#each data.options.services as option (option.value)}
|
||||
<NativeSelect.Option value={option.value}>{option.label}</NativeSelect.Option>
|
||||
{/each}
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="startsAt">
|
||||
<Form.Control id="edit-startsAt">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Starts at</Form.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$editData.startsAt} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="endsAt">
|
||||
<Form.Control id="edit-endsAt">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Ends at</Form.Label>
|
||||
<Input {...props} type="datetime-local" bind:value={$editData.endsAt} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="status">
|
||||
<Form.Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="booked">Booked</NativeSelect.Option>
|
||||
<NativeSelect.Option value="confirmed">Confirmed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="completed">Completed</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="notes">
|
||||
<Form.Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
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';
|
||||
@@ -33,76 +32,64 @@
|
||||
<Dialog.Description>Add a new contact record.</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
||||
<FormField form={createForm} name="name">
|
||||
<Field.Field>
|
||||
<Control id="create-name">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Name</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.name} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="role">
|
||||
<Field.Field>
|
||||
<Control id="create-role">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Role</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.role} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="email">
|
||||
<Field.Field>
|
||||
<Control id="create-email">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Email</Field.Label>
|
||||
<Input {...props} type="email" bind:value={$createData.email} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="phone">
|
||||
<Field.Field>
|
||||
<Control id="create-phone">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Phone</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.phone} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="isPrimary">
|
||||
<Field.Field>
|
||||
<Control id="create-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Primary contact</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="name">
|
||||
<Form.Control id="create-name">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.name} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="role">
|
||||
<Form.Control id="create-role">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Role</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.role} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="email">
|
||||
<Form.Control id="create-email">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Email</Form.Label>
|
||||
<Input {...props} type="email" bind:value={$createData.email} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="phone">
|
||||
<Form.Control id="create-phone">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Phone</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.phone} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="isPrimary">
|
||||
<Form.Control id="create-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Primary contact</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="notes">
|
||||
<Form.Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -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';
|
||||
@@ -31,76 +30,64 @@
|
||||
{#if editingRecord}
|
||||
<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} type="text" bind:value={$editData.name} />
|
||||
{/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>
|
||||
<Input {...props} type="text" bind:value={$editData.role} />
|
||||
{/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" bind:value={$editData.email} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="phone">
|
||||
<Field.Field>
|
||||
<Control id="edit-phone">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Phone</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.phone} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="isPrimary">
|
||||
<Field.Field>
|
||||
<Control id="edit-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Primary contact</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/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} type="text" bind:value={$editData.name} />
|
||||
{/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>
|
||||
<Input {...props} type="text" bind:value={$editData.role} />
|
||||
{/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" bind:value={$editData.email} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="phone">
|
||||
<Form.Control id="edit-phone">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Phone</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.phone} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="isPrimary">
|
||||
<Form.Control id="edit-isPrimary">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Primary contact</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.isPrimary}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="false">No</NativeSelect.Option>
|
||||
<NativeSelect.Option value="true">Yes</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="notes">
|
||||
<Form.Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
import * as Form from '$lib/components/ui/form/index.js';
|
||||
import MoneyField from '$lib/components/money-field.svelte';
|
||||
import * as Field from '$lib/components/ui/field/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';
|
||||
@@ -34,56 +33,48 @@
|
||||
<Dialog.Description>Add a new contract record.</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
||||
<FormField form={createForm} name="title">
|
||||
<Field.Field>
|
||||
<Control id="create-title">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Title</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.title} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="startDate">
|
||||
<Field.Field>
|
||||
<Control id="create-startDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Start date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.startDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="endDate">
|
||||
<Field.Field>
|
||||
<Control id="create-endDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>End date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.endDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="expired">Expired</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="title">
|
||||
<Form.Control id="create-title">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Title</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.title} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="startDate">
|
||||
<Form.Control id="create-startDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Start date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.startDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="endDate">
|
||||
<Form.Control id="create-endDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>End date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.endDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="status">
|
||||
<Form.Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="expired">Expired</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<MoneyField
|
||||
form={createForm}
|
||||
data={createData}
|
||||
@@ -91,17 +82,15 @@
|
||||
label="Value"
|
||||
id="create-valueGbp"
|
||||
/>
|
||||
<FormField form={createForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="notes">
|
||||
<Form.Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
import * as Form from '$lib/components/ui/form/index.js';
|
||||
import MoneyField from '$lib/components/money-field.svelte';
|
||||
import * as Field from '$lib/components/ui/field/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';
|
||||
@@ -32,56 +31,48 @@
|
||||
{#if editingRecord}
|
||||
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
||||
<input type="hidden" name="id" value={$editData.id} />
|
||||
<FormField form={editForm} name="title">
|
||||
<Field.Field>
|
||||
<Control id="edit-title">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Title</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.title} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="startDate">
|
||||
<Field.Field>
|
||||
<Control id="edit-startDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Start date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.startDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="endDate">
|
||||
<Field.Field>
|
||||
<Control id="edit-endDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>End date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.endDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="expired">Expired</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="title">
|
||||
<Form.Control id="edit-title">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Title</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.title} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="startDate">
|
||||
<Form.Control id="edit-startDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Start date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.startDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="endDate">
|
||||
<Form.Control id="edit-endDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>End date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.endDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="status">
|
||||
<Form.Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="active">Active</NativeSelect.Option>
|
||||
<NativeSelect.Option value="expired">Expired</NativeSelect.Option>
|
||||
<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<MoneyField
|
||||
form={editForm}
|
||||
data={editData}
|
||||
@@ -89,17 +80,15 @@
|
||||
label="Value"
|
||||
id="edit-valueGbp"
|
||||
/>
|
||||
<FormField form={editForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="notes">
|
||||
<Form.Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
import * as Form from '$lib/components/ui/form/index.js';
|
||||
import MoneyField from '$lib/components/money-field.svelte';
|
||||
import * as Field from '$lib/components/ui/field/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';
|
||||
@@ -34,57 +33,49 @@
|
||||
<Dialog.Description>Add a new invoice record.</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
||||
<FormField form={createForm} name="invoiceNumber">
|
||||
<Field.Field>
|
||||
<Control id="create-invoiceNumber">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Invoice number</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.invoiceNumber} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="issueDate">
|
||||
<Field.Field>
|
||||
<Control id="create-issueDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Issue date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.issueDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="dueDate">
|
||||
<Field.Field>
|
||||
<Control id="create-dueDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Due date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.dueDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={createForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sent">Sent</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paid">Paid</NativeSelect.Option>
|
||||
<NativeSelect.Option value="overdue">Overdue</NativeSelect.Option>
|
||||
<NativeSelect.Option value="void">Void</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="invoiceNumber">
|
||||
<Form.Control id="create-invoiceNumber">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Invoice number</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$createData.invoiceNumber} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="issueDate">
|
||||
<Form.Control id="create-issueDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Issue date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.issueDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="dueDate">
|
||||
<Form.Control id="create-dueDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Due date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$createData.dueDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={createForm} name="status">
|
||||
<Form.Control id="create-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$createData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sent">Sent</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paid">Paid</NativeSelect.Option>
|
||||
<NativeSelect.Option value="overdue">Overdue</NativeSelect.Option>
|
||||
<NativeSelect.Option value="void">Void</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<MoneyField
|
||||
form={createForm}
|
||||
data={createData}
|
||||
@@ -106,17 +97,15 @@
|
||||
label="Total"
|
||||
id="create-totalGbp"
|
||||
/>
|
||||
<FormField form={createForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={createForm} name="notes">
|
||||
<Form.Control id="create-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$createData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
import * as Form from '$lib/components/ui/form/index.js';
|
||||
import MoneyField from '$lib/components/money-field.svelte';
|
||||
import * as Field from '$lib/components/ui/field/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';
|
||||
@@ -32,57 +31,49 @@
|
||||
{#if editingRecord}
|
||||
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
||||
<input type="hidden" name="id" value={$editData.id} />
|
||||
<FormField form={editForm} name="invoiceNumber">
|
||||
<Field.Field>
|
||||
<Control id="edit-invoiceNumber">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Invoice number</Field.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.invoiceNumber} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="issueDate">
|
||||
<Field.Field>
|
||||
<Control id="edit-issueDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Issue date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.issueDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="dueDate">
|
||||
<Field.Field>
|
||||
<Control id="edit-dueDate">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Due date</Field.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.dueDate} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<FormField form={editForm} name="status">
|
||||
<Field.Field>
|
||||
<Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Status</Field.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sent">Sent</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paid">Paid</NativeSelect.Option>
|
||||
<NativeSelect.Option value="overdue">Overdue</NativeSelect.Option>
|
||||
<NativeSelect.Option value="void">Void</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="invoiceNumber">
|
||||
<Form.Control id="edit-invoiceNumber">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Invoice number</Form.Label>
|
||||
<Input {...props} type="text" bind:value={$editData.invoiceNumber} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="issueDate">
|
||||
<Form.Control id="edit-issueDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Issue date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.issueDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="dueDate">
|
||||
<Form.Control id="edit-dueDate">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Due date</Form.Label>
|
||||
<Input {...props} type="date" bind:value={$editData.dueDate} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field form={editForm} name="status">
|
||||
<Form.Control id="edit-status">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Status</Form.Label>
|
||||
<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
|
||||
<NativeSelect.Option value="">Not set</NativeSelect.Option>
|
||||
<NativeSelect.Option value="draft">Draft</NativeSelect.Option>
|
||||
<NativeSelect.Option value="sent">Sent</NativeSelect.Option>
|
||||
<NativeSelect.Option value="paid">Paid</NativeSelect.Option>
|
||||
<NativeSelect.Option value="overdue">Overdue</NativeSelect.Option>
|
||||
<NativeSelect.Option value="void">Void</NativeSelect.Option>
|
||||
</NativeSelect.Root>
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<MoneyField
|
||||
form={editForm}
|
||||
data={editData}
|
||||
@@ -98,17 +89,15 @@
|
||||
label="Total"
|
||||
id="edit-totalGbp"
|
||||
/>
|
||||
<FormField form={editForm} name="notes">
|
||||
<Field.Field>
|
||||
<Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Field.Label>Notes</Field.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Control>
|
||||
<Field.Error><FieldErrors /></Field.Error>
|
||||
</Field.Field>
|
||||
</FormField>
|
||||
<Form.Field form={editForm} name="notes">
|
||||
<Form.Control id="edit-notes">
|
||||
{#snippet children({ props })}
|
||||
<Form.Label>Notes</Form.Label>
|
||||
<Textarea {...props} bind:value={$editData.notes} />
|
||||
{/snippet}
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
|
||||
Reference in New Issue
Block a user