portal/src/routes/(protected)/admin/profiles/+page.svelte

<script lang="ts">
	import type { PageProps } from './$types';
	import type { ActionResult } from '$lib/svelte-admin/types';
	import AdminTable from '$lib/components/admin/AdminTable.svelte';
	import AdminModal from '$lib/components/admin/AdminModal.svelte';
	import Toast from '$lib/components/admin/Toast.svelte';
	import { enhance } from '$app/forms';
	import { getModelConfig } from '$lib/svelte-admin/registry';

	let { data, form }: PageProps = $props();

	const config = getModelConfig('profiles')!;
	let canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);

	let modalOpen = $state(false);
	let editingRecord = $state<Record<string, unknown> | null>(null);
	let toastMessage = $state('');
	let fieldErrors = $state<Record<string, string>>({});
	let formError = $state('');
	let addressFormOpen = $state(false);
	let userFormOpen = $state(false);
	let addressError = $state('');
	let userError = $state('');

	let addressFields = $state<Record<string, string>>({
		street: '',
		city: '',
		state: '',
		postalCode: '',
		country: '',
		isDefaultMailing: 'false',
		isDefaultBilling: 'false',
		isDefaultShipping: 'false'
	});

	let userEmail = $state('');
	let userName = $state('');

	$effect(() => {
		if (form) {
			if ((form as any).addressError) {
				addressError = (form as any).addressError;
			} else if ((form as any).userError) {
				userError = (form as any).userError;
			} else if (form.success) {
				if ((form as any).address) {
					toastMessage = 'Address saved';
					const addr = (form as any).address as Record<string, unknown>;
					if (editingRecord) {
						const addrs = (editingRecord.addresses as Record<string, unknown>[]) ?? [];
						editingRecord = {
							...editingRecord,
							addresses: [...addrs, addr]
						};
					}
					addressFormOpen = false;
					addressError = '';
				} else {
					toastMessage = 'Saved successfully';
					closeModal();
				}
			} else if (!(form as any).addressError && !(form as any).userError) {
				formError = (form as ActionResult).error ?? '';
				fieldErrors = (form as ActionResult).fieldErrors ?? {};
			}
		}
	});

	function openCreate() {
		editingRecord = null;
		formError = '';
		fieldErrors = {};
		addressFormOpen = false;
		userFormOpen = false;
		modalOpen = true;
	}

	function openEdit(record: Record<string, unknown>) {
		editingRecord = record;
		formError = '';
		fieldErrors = {};
		addressFormOpen = false;
		userFormOpen = false;
		addressError = '';
		userError = '';
		userEmail = ((record.user as Record<string, unknown>)?.email as string) ?? '';
		userName = ((record.user as Record<string, unknown>)?.name as string) ?? '';
		modalOpen = true;
	}

	function closeModal() {
		modalOpen = false;
		editingRecord = null;
		formError = '';
		fieldErrors = {};
		addressFormOpen = false;
		userFormOpen = false;
		addressError = '';
		userError = '';
	}

	function toggleAddressForm() {
		addressFormOpen = !addressFormOpen;
		addressError = '';
	}

	function toggleUserForm() {
		userFormOpen = !userFormOpen;
		userError = '';
	}
</script>

<div>
	<h1>{config.displayName}</h1>
	<AdminTable
		records={data.records}
		listFields={config.listFields}
		searchFields={config.searchFields}
		fieldTypes={config.fieldTypes}
		singular={config.displayNameSingular}
		onRowClick={openEdit}
		onNew={openCreate}
	/>
</div>

<AdminModal
	title={editingRecord
		? `Edit ${config.displayNameSingular}`
		: `Create ${config.displayNameSingular}`}
	open={modalOpen}
	onClose={closeModal}
	{canDelete}
	recordId={editingRecord?.id as string | undefined}
>
	<form method="POST" action="?/upsert" use:enhance>
		{#if editingRecord?.id}
			<input type="hidden" name="id" value={String(editingRecord.id)} />
		{/if}
		{#if formError}
			<div>
				{formError}
			</div>
		{/if}
		<div>
			<div>
				<label for="field-userId"> User </label>
				<select id="field-userId" name="userId" value={String(editingRecord?.userId ?? '')}>
					<option value="">-- Select User --</option>
					{#each data.relationOptionsData.userId ?? [] as opt (String(opt.value))}
						<option value={opt.value}>{opt.label}</option>
					{/each}
				</select>
				{#if fieldErrors.userId}
					<p>{fieldErrors.userId}</p>
				{/if}
			</div>
			<div>
				<label for="field-email"> Email (for unregistered users) </label>
				<input
					type="text"
					id="field-email"
					name="email"
					value={String(editingRecord?.email ?? '')}
					placeholder="user@example.com"
				/>
				{#if fieldErrors.email}
					<p>{fieldErrors.email}</p>
				{/if}
			</div>
			<div>
				<label for="field-firstName"> First Name </label>
				<input
					type="text"
					id="field-firstName"
					name="firstName"
					value={String(editingRecord?.firstName ?? '')}
				/>
				{#if fieldErrors.firstName}
					<p>{fieldErrors.firstName}</p>
				{/if}
			</div>
			<div>
				<label for="field-lastName"> Last Name </label>
				<input
					type="text"
					id="field-lastName"
					name="lastName"
					value={String(editingRecord?.lastName ?? '')}
				/>
				{#if fieldErrors.lastName}
					<p>{fieldErrors.lastName}</p>
				{/if}
			</div>
			<div>
				<label for="field-phoneNumber"> Phone Number </label>
				<input
					type="text"
					id="field-phoneNumber"
					name="phoneNumber"
					value={String(editingRecord?.phoneNumber ?? '')}
				/>
				{#if fieldErrors.phoneNumber}
					<p>{fieldErrors.phoneNumber}</p>
				{/if}
			</div>
			<div>
				<button type="submit">
					{editingRecord ? 'Update' : 'Create'}
				</button>
			</div>
		</div>
	</form>

	{#if editingRecord}
		{@const user = editingRecord.user as Record<string, unknown> | undefined}
		<div>
			<div>
				<h3>User</h3>
				<button type="button" onclick={toggleUserForm}>
					{userFormOpen ? 'Cancel' : 'Edit User'}
				</button>
			</div>
			<p>
				{(user?.name as string) ?? ''} ({(user?.email as string) ?? ''})
			</p>

			{#if userFormOpen}
				<form method="POST" action="?/updateUser" use:enhance>
					<input type="hidden" name="id" value={String(user?.id ?? '')} />
					{#if userError}
						<div>
							{userError}
						</div>
					{/if}
					<div>
						<div>
							<label for="user-name"> Name </label>
							<input type="text" id="user-name" name="name" value={userName} />
						</div>
						<div>
							<label for="user-email"> Email </label>
							<input type="email" id="user-email" name="email" value={userEmail} />
						</div>
						<div>
							<button type="submit"> Save User </button>
						</div>
					</div>
				</form>
			{/if}
		</div>
	{/if}

	{#if editingRecord}
		{@const addresses = (editingRecord.addresses as Record<string, unknown>[]) ?? []}
		<div>
			<div>
				<h3>Addresses</h3>
				<button type="button" onclick={toggleAddressForm}>
					{addressFormOpen ? 'Cancel' : 'Add Address +'}
				</button>
			</div>

			{#if addressFormOpen}
				<form method="POST" action="?/upsertAddress" use:enhance>
					<input type="hidden" name="profileId" value={String(editingRecord.id)} />
					{#if addressError}
						<div>
							{addressError}
						</div>
					{/if}
					<div>
						<div>
							<label for="addr-street"> Street </label>
							<input type="text" id="addr-street" name="street" required />
						</div>
						<div>
							<label for="addr-city"> City </label>
							<input type="text" id="addr-city" name="city" required />
						</div>
						<div>
							<label for="addr-state"> State </label>
							<input type="text" id="addr-state" name="state" required />
						</div>
						<div>
							<label for="addr-postal"> Postal Code </label>
							<input type="text" id="addr-postal" name="postalCode" required />
						</div>
						<div>
							<label for="addr-country"> Country </label>
							<input type="text" id="addr-country" name="country" required />
						</div>
					</div>
					<div>
						<label>
							<input type="checkbox" name="isDefaultMailing" />
							Default Mailing
						</label>
						<label>
							<input type="checkbox" name="isDefaultBilling" />
							Default Billing
						</label>
						<label>
							<input type="checkbox" name="isDefaultShipping" />
							Default Shipping
						</label>
					</div>
					<div>
						<button type="submit"> Save Address </button>
					</div>
				</form>
			{/if}

			{#if addresses.length > 0}
				<table>
					<thead>
						<tr>
							<th>Street</th>
							<th>City</th>
							<th>State</th>
							<th>Zip</th>
							<th>Country</th>
							<th>M</th>
							<th>B</th>
							<th>S</th>
						</tr>
					</thead>
					<tbody>
						{#each addresses as addr}
							<tr>
								<td>{addr.street as string}</td>
								<td>{addr.city as string}</td>
								<td>{addr.state as string}</td>
								<td>{addr.postalCode as string}</td>
								<td>{addr.country as string}</td>
								<td>{addr.isDefaultMailing ? '✓' : ''}</td>
								<td>{addr.isDefaultBilling ? '✓' : ''}</td>
								<td>{addr.isDefaultShipping ? '✓' : ''}</td>
							</tr>
						{/each}
					</tbody>
				</table>
			{:else}
				<p>No addresses on file.</p>
			{/if}
		</div>
	{/if}
</AdminModal>

{#if toastMessage}
	<Toast message={toastMessage} />
{/if}