285 lines
9.4 KiB
Svelte
285 lines
9.4 KiB
Svelte
<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 FormSelect from '$lib/components/form-select.svelte';
|
|
import { industryOptions } from '$lib/constants/industries';
|
|
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 Stepper from '$lib/components/ui/stepper/index.js';
|
|
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
|
let {
|
|
open = $bindable(false),
|
|
createStep = $bindable(0),
|
|
createForm,
|
|
createData,
|
|
enhanceCreate
|
|
}: {
|
|
open: boolean;
|
|
createStep: number;
|
|
createForm: any;
|
|
createData: any;
|
|
enhanceCreate: any;
|
|
} = $props();
|
|
const createSteps = [
|
|
{ title: 'Client', description: 'Client details' },
|
|
{ title: 'Address', description: 'Primary address' },
|
|
{ title: 'Contact', description: 'Primary contact' }
|
|
] as const;
|
|
</script>
|
|
|
|
<Dialog.Root bind:open>
|
|
<Dialog.Trigger>
|
|
{#snippet child({ props })}
|
|
<Button {...props}><PlusIcon data-icon="inline-start" />Create client</Button>
|
|
{/snippet}
|
|
</Dialog.Trigger>
|
|
<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Create client</Dialog.Title>
|
|
<Dialog.Description>Add a new client record.</Dialog.Description>
|
|
</Dialog.Header>
|
|
<form method="POST" action="?/create" class="grid gap-5" use:enhanceCreate>
|
|
<Stepper.Root bind:value={createStep}>
|
|
{#each createSteps as step, index (step.title)}
|
|
<Stepper.Item step={index}>
|
|
<div class="flex flex-col items-center gap-2 text-center">
|
|
<Stepper.Indicator step={index} />
|
|
<div class="grid gap-1">
|
|
<Stepper.Title>{step.title}</Stepper.Title>
|
|
<Stepper.Description>{step.description}</Stepper.Description>
|
|
</div>
|
|
</div>
|
|
{#if index < createSteps.length - 1}
|
|
<Stepper.Separator />
|
|
{/if}
|
|
</Stepper.Item>
|
|
{/each}
|
|
</Stepper.Root>
|
|
|
|
<div class={['grid gap-2', createStep !== 0 && 'hidden']}>
|
|
<FormField form={createForm} name="name">
|
|
<Field.Field>
|
|
<Control id="create-name">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Name</Field.Label>
|
|
<Input {...props} type="text" required bind:value={$createData.name} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="industry">
|
|
<Field.Field>
|
|
<Control id="create-industry">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Industry</Field.Label>
|
|
<FormSelect
|
|
name="industry"
|
|
bind:value={$createData.industry}
|
|
options={industryOptions}
|
|
triggerProps={props}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="website">
|
|
<Field.Field>
|
|
<Control id="create-website">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Website</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="url"
|
|
placeholder="https://example.com"
|
|
bind:value={$createData.website}
|
|
/>
|
|
{/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>
|
|
</div>
|
|
<div class={['grid gap-2', createStep !== 2 && 'hidden']}>
|
|
<FormField form={createForm} name="primaryContactName">
|
|
<Field.Field>
|
|
<Control id="create-primary-contact-name">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Name</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryContactName} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryContactRole">
|
|
<Field.Field>
|
|
<Control id="create-primary-contact-role">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Role</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryContactRole} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryContactEmail">
|
|
<Field.Field>
|
|
<Control id="create-primary-contact-email">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Email</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="email"
|
|
required
|
|
bind:value={$createData.primaryContactEmail}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryContactPhone">
|
|
<Field.Field>
|
|
<Control id="create-primary-contact-phone">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Phone</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryContactPhone} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
</div>
|
|
<div class={['grid gap-2', createStep !== 1 && 'hidden']}>
|
|
<FormField form={createForm} name="primaryAddressLine1">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-line-1">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Address line 1</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="text"
|
|
required
|
|
bind:value={$createData.primaryAddressLine1}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryAddressLine2">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-line-2">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Address line 2</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryAddressLine2} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryAddressLine3">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-line-3">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Address line 3</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryAddressLine3} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<FormField form={createForm} name="primaryAddressCity">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-city">
|
|
{#snippet children({ props })}
|
|
<Field.Label>City</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="text"
|
|
required
|
|
bind:value={$createData.primaryAddressCity}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryAddressRegion">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-region">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Region</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryAddressRegion} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<FormField form={createForm} name="primaryAddressPostcode">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-postcode">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Postcode</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="text"
|
|
required
|
|
bind:value={$createData.primaryAddressPostcode}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="primaryAddressCountry">
|
|
<Field.Field>
|
|
<Control id="create-primary-address-country">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Country</Field.Label>
|
|
<Input {...props} type="text" bind:value={$createData.primaryAddressCountry} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog.Footer>
|
|
<Dialog.Close
|
|
>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
|
|
>{/snippet}</Dialog.Close
|
|
>
|
|
{#if createStep > 0}
|
|
<Button type="button" variant="outline" onclick={() => (createStep -= 1)}>Back</Button>
|
|
{/if}
|
|
{#if createStep < createSteps.length - 1}
|
|
<Button type="button" onclick={() => (createStep += 1)}>Next step</Button>
|
|
{:else}
|
|
<Button type="submit">Create client</Button>
|
|
{/if}
|
|
</Dialog.Footer>
|
|
</form>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|