112 lines
3.8 KiB
Svelte
112 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import * as Form from '$lib/components/ui/form/index.js';
|
|
import MoneyField from '$lib/components/money-field.svelte';
|
|
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';
|
|
import * as NativeSelect from '$lib/components/ui/native-select/index.js';
|
|
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
|
let {
|
|
editingRecord,
|
|
editForm,
|
|
editData,
|
|
enhanceEdit,
|
|
onClose
|
|
}: {
|
|
editingRecord: any;
|
|
editForm: any;
|
|
editData: any;
|
|
enhanceEdit: any;
|
|
onClose: () => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<Dialog.Root open={!!editingRecord} onOpenChange={(open) => !open && onClose()}>
|
|
<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Edit invoice</Dialog.Title>
|
|
<Dialog.Description>Update this invoice record.</Dialog.Description>
|
|
</Dialog.Header>
|
|
{#if editingRecord}
|
|
<form method="POST" action="?/edit" class="grid gap-2" use:enhanceEdit>
|
|
<input type="hidden" name="id" value={$editData.id} />
|
|
<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}
|
|
name="subtotalGbp"
|
|
label="Subtotal"
|
|
id="edit-subtotalGbp"
|
|
/>
|
|
<MoneyField form={editForm} data={editData} name="taxGbp" label="Tax" id="edit-taxGbp" />
|
|
<MoneyField
|
|
form={editForm}
|
|
data={editData}
|
|
name="totalGbp"
|
|
label="Total"
|
|
id="edit-totalGbp"
|
|
/>
|
|
<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
|
|
>{/snippet}</Dialog.Close
|
|
>
|
|
<Button type="submit">Save changes</Button>
|
|
</Dialog.Footer>
|
|
</form>
|
|
{/if}
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|