71 lines
2.5 KiB
Svelte
71 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
|
|
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,
|
|
openArchive,
|
|
formatValue,
|
|
relationLabel,
|
|
recordName
|
|
}: { data: any; openArchive: any; formatValue: 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>Client</Table.Head>
|
|
<Table.Head>Name</Table.Head>
|
|
<Table.Head>Role</Table.Head>
|
|
<Table.Head>Email</Table.Head>
|
|
<Table.Head>Phone</Table.Head>
|
|
<Table.Head>Primary</Table.Head>
|
|
<Table.Head>Invoices</Table.Head>
|
|
<Table.Head>Contracts</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">{relationLabel(record.clientId, 'clients')}</Table.Cell>
|
|
<Table.Cell class="">{formatValue(record.name)}</Table.Cell>
|
|
<Table.Cell class="">{formatValue(record.role)}</Table.Cell>
|
|
<Table.Cell class="">{formatValue(record.email)}</Table.Cell>
|
|
<Table.Cell class="">{formatValue(record.phone)}</Table.Cell>
|
|
<Table.Cell class="">{record.isPrimary ? 'Yes' : 'No'}</Table.Cell>
|
|
<Table.Cell>{record.receivesInvoices ? 'Yes' : 'No'}</Table.Cell>
|
|
<Table.Cell>{record.receivesContracts ? 'Yes' : 'No'}</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 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 contacts have been created yet.
|
|
</div>
|
|
{/if}
|