kdaniel2410/clearity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add runed-backed list search

Browse Source
This commit is contained in:
Daniel Kirby
2026-06-24 13:40:09 +01:00
parent 1ea8ce2135
commit 4fd81c923b
19 changed files with 369 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/dashboard/clients/[id]/addresses/+page.svelte
+28 -39
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { createListSearch } from '$lib/list-search.svelte';
import ListSearch from '$lib/components/list-search.svelte';
import CreateAddressDialog from './create-address-dialog.svelte';
import AddressesTable from './addresses-table.svelte';
import EditAddressDialog from './edit-address-dialog.svelte';
@@ -7,11 +9,20 @@
import { superForm } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters';
import { archiveSchema } from '$lib/schemas/shared.schema';
import {
formatValue,
recordName as getRecordName,
relationLabel as getRelationLabel
} from '$lib/record-utils';
import { handleFormToast } from '$lib/form-feedback';
import { addressCreateSchema, addressEditSchema } from '$lib/schemas/addresses.schema';
import type { PageData } from './$types';
type RecordRow = PageData['records'][number];
let { data }: { data: PageData } = $props();
const listSearch = createListSearch(() => data.records);
const listData = $derived({ ...data, records: listSearch.filtered });
let createOpen = $state(false);
let editingId = $state<string | null>(null);
let archivingId = $state<string | null>(null);
@@ -44,36 +55,8 @@
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;
return getRelationLabel(data.options, value, optionsKey);
}
function openEdit(record: RecordRow) {
@@ -87,15 +70,7 @@
}
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 address'
);
return getRecordName(record, 'this address');
}
</script>
@@ -113,7 +88,21 @@
<CreateAddressDialog bind:open={createOpen} {createForm} {createData} {enhanceCreate} />
</div>
<AddressesTable {data} {openEdit} {openArchive} {formatValue} {relationLabel} {recordName} />
<ListSearch
bind:value={listSearch.params.q}
placeholder="Search addresses..."
totalCount={data.records.length}
resultCount={listSearch.filtered.length}
/>
<AddressesTable
data={listData}
{openEdit}
{openArchive}
{formatValue}
{relationLabel}
{recordName}
/>
</div>
<EditAddressDialog
src/routes/dashboard/clients/[id]/bookings/+page.svelte
+22 -51
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { createListSearch } from '$lib/list-search.svelte';
import ListSearch from '$lib/components/list-search.svelte';
import CreateBookingDialog from './create-booking-dialog.svelte';
import BookingsTable from './bookings-table.svelte';
import EditBookingDialog from './edit-booking-dialog.svelte';
@@ -7,11 +9,21 @@
import { superForm } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters';
import { archiveSchema } from '$lib/schemas/shared.schema';
import {
formatValue,
formatDate,
recordName as getRecordName,
relationLabel as getRelationLabel
} from '$lib/record-utils';
import { handleFormToast } from '$lib/form-feedback';
import { bookingCreateSchema, bookingEditSchema } from '$lib/schemas/bookings.schema';
import type { PageData } from './$types';
type RecordRow = PageData['records'][number];
let { data }: { data: PageData } = $props();
const listSearch = createListSearch(() => data.records);
const listData = $derived({ ...data, records: listSearch.filtered });
let createOpen = $state(false);
let editingId = $state<string | null>(null);
let archivingId = $state<string | null>(null);
@@ -44,48 +56,8 @@
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' | 'rooms' | 'services') {
if (typeof value !== 'string') return 'Not set';
return data.options[optionsKey].find((option) => option.value === value)?.label ?? value;
}
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);
return getRelationLabel(data.options, value, optionsKey);
}
function openEdit(record: RecordRow) {
@@ -99,15 +71,7 @@
}
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 booking'
);
return getRecordName(record, 'this booking');
}
</script>
@@ -127,8 +91,15 @@
<CreateBookingDialog bind:open={createOpen} {data} {createForm} {createData} {enhanceCreate} />
</div>
<ListSearch
bind:value={listSearch.params.q}
placeholder="Search bookings..."
totalCount={data.records.length}
resultCount={listSearch.filtered.length}
/>
<BookingsTable
{data}
data={listData}
{openEdit}
{openArchive}
{formatValue}
src/routes/dashboard/clients/[id]/contacts/+page.svelte
+28 -39
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { createListSearch } from '$lib/list-search.svelte';
import ListSearch from '$lib/components/list-search.svelte';
import CreateContactDialog from './create-contact-dialog.svelte';
import ContactsTable from './contacts-table.svelte';
import EditContactDialog from './edit-contact-dialog.svelte';
@@ -7,11 +9,20 @@
import { superForm } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters';
import { archiveSchema } from '$lib/schemas/shared.schema';
import {
formatValue,
recordName as getRecordName,
relationLabel as getRelationLabel
} from '$lib/record-utils';
import { handleFormToast } from '$lib/form-feedback';
import { contactCreateSchema, contactEditSchema } from '$lib/schemas/contacts.schema';
import type { PageData } from './$types';
type RecordRow = PageData['records'][number];
let { data }: { data: PageData } = $props();
const listSearch = createListSearch(() => data.records);
const listData = $derived({ ...data, records: listSearch.filtered });
let createOpen = $state(false);
let editingId = $state<string | null>(null);
let archivingId = $state<string | null>(null);
@@ -44,36 +55,8 @@
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;
return getRelationLabel(data.options, value, optionsKey);
}
function openEdit(record: RecordRow) {
@@ -87,15 +70,7 @@
}
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 contact'
);
return getRecordName(record, 'this contact');
}
</script>
@@ -113,7 +88,21 @@
<CreateContactDialog bind:open={createOpen} {createForm} {createData} {enhanceCreate} />
</div>
<ContactsTable {data} {openEdit} {openArchive} {formatValue} {relationLabel} {recordName} />
<ListSearch
bind:value={listSearch.params.q}
placeholder="Search contacts..."
totalCount={data.records.length}
resultCount={listSearch.filtered.length}
/>
<ContactsTable
data={listData}
{openEdit}
{openArchive}
{formatValue}
{relationLabel}
{recordName}
/>
</div>
<EditContactDialog
src/routes/dashboard/clients/[id]/contracts/+page.svelte
+23 -56
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { createListSearch } from '$lib/list-search.svelte';
import ListSearch from '$lib/components/list-search.svelte';
import CreateContractDialog from './create-contract-dialog.svelte';
import ContractsTable from './contracts-table.svelte';
import EditContractDialog from './edit-contract-dialog.svelte';
@@ -7,11 +9,22 @@
import { superForm } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters';
import { archiveSchema } from '$lib/schemas/shared.schema';
import {
formatValue,
formatMoney,
formatDate,
recordName as getRecordName,
relationLabel as getRelationLabel
} from '$lib/record-utils';
import { handleFormToast } from '$lib/form-feedback';
import { contractCreateSchema, contractEditSchema } from '$lib/schemas/contracts.schema';
import type { PageData } from './$types';
type RecordRow = PageData['records'][number];
let { data }: { data: PageData } = $props();
const listSearch = createListSearch(() => data.records);
const listData = $derived({ ...data, records: listSearch.filtered });
let createOpen = $state(false);
let editingId = $state<string | null>(null);
let archivingId = $state<string | null>(null);
@@ -44,53 +57,8 @@
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);
return getRelationLabel(data.options, value, optionsKey);
}
function openEdit(record: RecordRow) {
@@ -104,15 +72,7 @@
}
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'
);
return getRecordName(record, 'this contract');
}
</script>
@@ -130,8 +90,15 @@
<CreateContractDialog bind:open={createOpen} {createForm} {createData} {enhanceCreate} />
</div>
<ListSearch
bind:value={listSearch.params.q}
placeholder="Search contracts..."
totalCount={data.records.length}
resultCount={listSearch.filtered.length}
/>
<ContractsTable
{data}
data={listData}
{openEdit}
{openArchive}
{formatValue}
src/routes/dashboard/clients/[id]/invoices/+page.svelte
+23 -56
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { createListSearch } from '$lib/list-search.svelte';
import ListSearch from '$lib/components/list-search.svelte';
import CreateInvoiceDialog from './create-invoice-dialog.svelte';
import InvoicesTable from './invoices-table.svelte';
import EditInvoiceDialog from './edit-invoice-dialog.svelte';
@@ -7,11 +9,22 @@
import { superForm } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters';
import { archiveSchema } from '$lib/schemas/shared.schema';
import {
formatValue,
formatMoney,
formatDate,
recordName as getRecordName,
relationLabel as getRelationLabel
} from '$lib/record-utils';
import { handleFormToast } from '$lib/form-feedback';
import { invoiceCreateSchema, invoiceEditSchema } from '$lib/schemas/invoices.schema';
import type { PageData } from './$types';
type RecordRow = PageData['records'][number];
let { data }: { data: PageData } = $props();
const listSearch = createListSearch(() => data.records);
const listData = $derived({ ...data, records: listSearch.filtered });
let createOpen = $state(false);
let editingId = $state<string | null>(null);
let archivingId = $state<string | null>(null);
@@ -44,53 +57,8 @@
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);
return getRelationLabel(data.options, value, optionsKey);
}
function openEdit(record: RecordRow) {
@@ -104,15 +72,7 @@
}
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 invoice'
);
return getRecordName(record, 'this invoice');
}
</script>
@@ -130,8 +90,15 @@
<CreateInvoiceDialog bind:open={createOpen} {createForm} {createData} {enhanceCreate} />
</div>
<ListSearch
bind:value={listSearch.params.q}
placeholder="Search invoices..."
totalCount={data.records.length}
resultCount={listSearch.filtered.length}
/>
<InvoicesTable
{data}
data={listData}
{openEdit}
{openArchive}
{formatValue}