feat: add client workspace management
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
import { and, asc, eq, isNull } from 'drizzle-orm';
|
||||
import { message, superValidate } from 'sveltekit-superforms/server';
|
||||
import { zod4 } from 'sveltekit-superforms/adapters';
|
||||
import { db } from '$lib/server/db';
|
||||
import { contracts, clients } from '$lib/server/db/schema';
|
||||
import { archiveSchema } from '$lib/schemas/shared.schema';
|
||||
import { contractCreateSchema, contractEditSchema } from '$lib/schemas/contracts.schema';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
|
||||
async function loadOptions() {
|
||||
const clientRows = await db
|
||||
.select({ id: clients.id, name: clients.name })
|
||||
.from(clients)
|
||||
.where(isNull(clients.archivedAt))
|
||||
.orderBy(asc(clients.name));
|
||||
|
||||
return {
|
||||
clients: clientRows.map((client) => ({ label: client.name, value: client.id }))
|
||||
};
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = async ({ params }) => {
|
||||
const records = await db
|
||||
.select()
|
||||
.from(contracts)
|
||||
.where(and(eq(contracts.clientId, params.id), isNull(contracts.archivedAt)))
|
||||
.orderBy(asc(contracts.title));
|
||||
|
||||
return {
|
||||
records: records.map((record) => ({
|
||||
...record,
|
||||
formValues: {
|
||||
id: record.id,
|
||||
clientId: record.clientId ?? '',
|
||||
title: record.title ?? '',
|
||||
startDate: record.startDate ?? '',
|
||||
endDate: record.endDate ?? '',
|
||||
status: record.status ?? '',
|
||||
valueGbp: record.valueGbp ?? '',
|
||||
notes: record.notes ?? ''
|
||||
}
|
||||
})),
|
||||
options: await loadOptions(),
|
||||
createForm: await superValidate({ clientId: params.id }, zod4(contractCreateSchema), {
|
||||
id: 'contracts-create'
|
||||
}),
|
||||
editForm: await superValidate(zod4(contractEditSchema), { id: 'contracts-edit' }),
|
||||
archiveForm: await superValidate(zod4(archiveSchema), { id: 'contracts-archive' })
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
create: async ({ params, request }) => {
|
||||
const formData = await request.formData();
|
||||
formData.set('clientId', params.id);
|
||||
const form = await superValidate(formData, zod4(contractCreateSchema), {
|
||||
id: 'contracts-create'
|
||||
});
|
||||
|
||||
if (!form.valid) return message(form, 'Check the highlighted fields.', { status: 400 });
|
||||
|
||||
try {
|
||||
await db.insert(contracts).values({
|
||||
id: crypto.randomUUID(),
|
||||
clientId: form.data.clientId,
|
||||
title: form.data.title,
|
||||
startDate: form.data.startDate,
|
||||
endDate: form.data.endDate || null,
|
||||
status: form.data.status,
|
||||
valueGbp: form.data.valueGbp,
|
||||
notes: form.data.notes || null,
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date()
|
||||
});
|
||||
} catch {
|
||||
return message(form, 'Unable to create contract.', { status: 400 });
|
||||
}
|
||||
|
||||
return message(form, 'Contract created.');
|
||||
},
|
||||
|
||||
edit: async ({ params, request }) => {
|
||||
const formData = await request.formData();
|
||||
formData.set('clientId', params.id);
|
||||
const form = await superValidate(formData, zod4(contractEditSchema), {
|
||||
id: 'contracts-edit'
|
||||
});
|
||||
|
||||
if (!form.valid) return message(form, 'Check the highlighted fields.', { status: 400 });
|
||||
|
||||
try {
|
||||
await db
|
||||
.update(contracts)
|
||||
.set({
|
||||
clientId: form.data.clientId,
|
||||
title: form.data.title,
|
||||
startDate: form.data.startDate,
|
||||
endDate: form.data.endDate || null,
|
||||
status: form.data.status,
|
||||
valueGbp: form.data.valueGbp,
|
||||
notes: form.data.notes || null,
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(and(eq(contracts.id, form.data.id), eq(contracts.clientId, params.id)));
|
||||
} catch {
|
||||
return message(form, 'Unable to update contract.', { status: 400 });
|
||||
}
|
||||
|
||||
return message(form, 'Contract updated.');
|
||||
},
|
||||
|
||||
archive: async ({ params, request }) => {
|
||||
const form = await superValidate(await request.formData(), zod4(archiveSchema), {
|
||||
id: 'contracts-archive'
|
||||
});
|
||||
|
||||
if (!form.valid) return message(form, 'Contract id is required.', { status: 400 });
|
||||
|
||||
await db
|
||||
.update(contracts)
|
||||
.set({ archivedAt: new Date(), updatedAt: new Date() })
|
||||
.where(and(eq(contracts.id, form.data.id), eq(contracts.clientId, params.id)));
|
||||
|
||||
return message(form, 'Contract archived.');
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
<script lang="ts">
|
||||
import CreateContractDialog from './create-contract-dialog.svelte';
|
||||
import ContractsTable from './contracts-table.svelte';
|
||||
import EditContractDialog from './edit-contract-dialog.svelte';
|
||||
import ArchiveContractDialog from './archive-contract-dialog.svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { superForm } from 'sveltekit-superforms';
|
||||
import { zod4Client } from 'sveltekit-superforms/adapters';
|
||||
import { archiveSchema } from '$lib/schemas/shared.schema';
|
||||
import { contractCreateSchema, contractEditSchema } from '$lib/schemas/contracts.schema';
|
||||
import type { PageData } from './$types';
|
||||
type RecordRow = PageData['records'][number];
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
let createOpen = $state(false);
|
||||
let editingId = $state<string | null>(null);
|
||||
let archivingId = $state<string | null>(null);
|
||||
|
||||
const editingRecord = $derived(data.records.find((record) => record.id === editingId));
|
||||
const archivingRecord = $derived(data.records.find((record) => record.id === archivingId));
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
const createForm = superForm(data.createForm, {
|
||||
validators: zod4Client(contractCreateSchema),
|
||||
onUpdated: ({ form }) => handleFormToast(form, 'contracts-create', () => (createOpen = false)),
|
||||
onError: ({ result }) => toast.error(result.error.message, { id: 'contracts-create' })
|
||||
});
|
||||
// svelte-ignore state_referenced_locally
|
||||
const editForm = superForm(data.editForm, {
|
||||
validators: zod4Client(contractEditSchema),
|
||||
resetForm: false,
|
||||
onUpdated: ({ form }) => handleFormToast(form, 'contracts-edit', () => (editingId = null)),
|
||||
onError: ({ result }) => toast.error(result.error.message, { id: 'contracts-edit' })
|
||||
});
|
||||
// svelte-ignore state_referenced_locally
|
||||
const archiveForm = superForm(data.archiveForm, {
|
||||
validators: zod4Client(archiveSchema),
|
||||
resetForm: false,
|
||||
onUpdated: ({ form }) => handleFormToast(form, 'contracts-archive', () => (archivingId = null)),
|
||||
onError: ({ result }) => toast.error(result.error.message, { id: 'contracts-archive' })
|
||||
});
|
||||
|
||||
const { form: createData, enhance: enhanceCreate } = createForm;
|
||||
const { form: editData, enhance: enhanceEdit } = editForm;
|
||||
const { form: archiveData, enhance: enhanceArchive } = archiveForm;
|
||||
|
||||
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 formatValue(value: unknown) {
|
||||
if (value === null || value === undefined || value === '') return 'Not set';
|
||||
return String(value);
|
||||
}
|
||||
|
||||
function relationLabel(value: unknown, optionsKey: 'clients') {
|
||||
if (typeof value !== 'string') return 'Not set';
|
||||
return data.options[optionsKey].find((option) => option.value === value)?.label ?? value;
|
||||
}
|
||||
|
||||
function formatMoney(value: unknown) {
|
||||
const amount = typeof value === 'number' ? value : Number(value ?? 0);
|
||||
return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(amount);
|
||||
}
|
||||
|
||||
function formatDate(value: unknown, withTime = false) {
|
||||
if (!value || typeof value !== 'string') return 'Not set';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return new Intl.DateTimeFormat('en-GB', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
...(withTime ? { hour: '2-digit', minute: '2-digit' } : {})
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function openEdit(record: RecordRow) {
|
||||
editForm.reset({ data: record.formValues as never });
|
||||
editingId = record.id;
|
||||
}
|
||||
|
||||
function openArchive(record: RecordRow) {
|
||||
archiveForm.reset({ data: { id: record.id } });
|
||||
archivingId = record.id;
|
||||
}
|
||||
|
||||
function recordName(record: Partial<RecordRow> | undefined) {
|
||||
const item = record as Partial<RecordRow> & {
|
||||
name?: unknown;
|
||||
title?: unknown;
|
||||
invoiceNumber?: unknown;
|
||||
label?: unknown;
|
||||
};
|
||||
return String(
|
||||
item?.name ?? item?.title ?? item?.invoiceNumber ?? item?.label ?? 'this contract'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contracts | Clearity</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Contracts</h1>
|
||||
<p class="text-sm text-muted-foreground">Manage client agreements and commercial terms.</p>
|
||||
</div>
|
||||
|
||||
<CreateContractDialog bind:open={createOpen} {createForm} {createData} {enhanceCreate} />
|
||||
</div>
|
||||
|
||||
<ContractsTable
|
||||
{data}
|
||||
{openEdit}
|
||||
{openArchive}
|
||||
{formatValue}
|
||||
{formatDate}
|
||||
{formatMoney}
|
||||
{relationLabel}
|
||||
{recordName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EditContractDialog
|
||||
{editingRecord}
|
||||
{editForm}
|
||||
{editData}
|
||||
{enhanceEdit}
|
||||
onClose={() => (editingId = null)}
|
||||
/>
|
||||
|
||||
<ArchiveContractDialog
|
||||
{archivingRecord}
|
||||
{archiveData}
|
||||
{enhanceArchive}
|
||||
{recordName}
|
||||
onClose={() => (archivingId = null)}
|
||||
/>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
|
||||
let {
|
||||
archivingRecord,
|
||||
archiveData,
|
||||
enhanceArchive,
|
||||
onClose,
|
||||
recordName
|
||||
}: {
|
||||
archivingRecord: any;
|
||||
archiveData: any;
|
||||
enhanceArchive: any;
|
||||
onClose: () => void;
|
||||
recordName: any;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialog.Root open={!!archivingRecord} onOpenChange={(open) => !open && onClose()}>
|
||||
<AlertDialog.Content>
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>Archive contract?</AlertDialog.Title>
|
||||
<AlertDialog.Description
|
||||
>This will hide {recordName(archivingRecord)} from active contracts. The record will remain in
|
||||
the database.</AlertDialog.Description
|
||||
>
|
||||
</AlertDialog.Header>
|
||||
<AlertDialog.Footer>
|
||||
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
||||
{#if archivingRecord}
|
||||
<form method="POST" action="?/archive" use:enhanceArchive>
|
||||
<input type="hidden" name="id" value={$archiveData.id} />
|
||||
<AlertDialog.Action type="submit" variant="destructive"
|
||||
>Archive contract</AlertDialog.Action
|
||||
>
|
||||
</form>
|
||||
{/if}
|
||||
</AlertDialog.Footer>
|
||||
</AlertDialog.Content>
|
||||
</AlertDialog.Root>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
|
||||
import { Badge } from '$lib/components/ui/badge/index.js';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
let {
|
||||
data,
|
||||
openEdit,
|
||||
openArchive,
|
||||
formatValue,
|
||||
formatDate,
|
||||
formatMoney,
|
||||
relationLabel,
|
||||
recordName
|
||||
}: {
|
||||
data: any;
|
||||
openEdit: any;
|
||||
openArchive: any;
|
||||
formatValue: any;
|
||||
formatDate: any;
|
||||
formatMoney: any;
|
||||
relationLabel: any;
|
||||
recordName: any;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if data.records.length > 0}
|
||||
<div class="overflow-hidden rounded-lg border border-border">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Title</Table.Head>
|
||||
<Table.Head>Client</Table.Head>
|
||||
<Table.Head>Starts</Table.Head>
|
||||
<Table.Head>Ends</Table.Head>
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Value</Table.Head>
|
||||
<Table.Head class="w-12"><span class="sr-only">Actions</span></Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data.records as record (record.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-medium">{formatValue(record.title)}</Table.Cell>
|
||||
<Table.Cell class="">{relationLabel(record.clientId, 'clients')}</Table.Cell>
|
||||
<Table.Cell class="">{formatDate(record.startDate)}</Table.Cell>
|
||||
<Table.Cell class="">{formatDate(record.endDate)}</Table.Cell>
|
||||
<Table.Cell class=""
|
||||
><Badge variant="secondary" class="capitalize">{formatValue(record.status)}</Badge
|
||||
></Table.Cell
|
||||
>
|
||||
<Table.Cell class="">{formatMoney(record.valueGbp)}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
>{#snippet child({ props })}<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={`Open actions for ${recordName(record)}`}
|
||||
{...props}><EllipsisVerticalIcon /></Button
|
||||
>{/snippet}</DropdownMenu.Trigger
|
||||
>
|
||||
<DropdownMenu.Content align="end" class="w-36">
|
||||
<DropdownMenu.Item onclick={() => openEdit(record)}>Edit</DropdownMenu.Item>
|
||||
<DropdownMenu.Item variant="destructive" onclick={() => openArchive(record)}
|
||||
>Archive</DropdownMenu.Item
|
||||
>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-lg border p-8 text-center text-sm text-muted-foreground">
|
||||
No contracts have been created yet.
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,114 @@
|
||||
<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 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';
|
||||
import * as NativeSelect from '$lib/components/ui/native-select/index.js';
|
||||
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
||||
let {
|
||||
open = $bindable(false),
|
||||
createForm,
|
||||
createData,
|
||||
enhanceCreate
|
||||
}: {
|
||||
open: boolean;
|
||||
createForm: any;
|
||||
createData: any;
|
||||
enhanceCreate: any;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props}><PlusIcon data-icon="inline-start" />Create contract</Button>
|
||||
{/snippet}
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Create contract</Dialog.Title>
|
||||
<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>
|
||||
<MoneyField
|
||||
form={createForm}
|
||||
data={createData}
|
||||
name="valueGbp"
|
||||
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>
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close
|
||||
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
||||
>{/snippet}</Dialog.Close
|
||||
>
|
||||
<Button type="submit">Create contract</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
||||
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';
|
||||
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 contract</Dialog.Title>
|
||||
<Dialog.Description>Update this contract 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} />
|
||||
<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>
|
||||
<MoneyField
|
||||
form={editForm}
|
||||
data={editData}
|
||||
name="valueGbp"
|
||||
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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user