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

<script lang="ts">
	import type { PageProps } from './$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 { getModelConfig } from '$lib/svelte-admin/registry';
	import UserForm from './UserForm.svelte';

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

	const config = getModelConfig('users')!;
	const 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('');

	$effect(() => {
		if (form && 'success' in (form as any)) {
			const result = form as any;
			if (result.success) {
				toastMessage = 'Saved successfully';
				closeModal();
			} else {
				formError = result.error ?? '';
				fieldErrors = result.fieldErrors ?? {};
			}
		}
	});

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

	function openEdit(record: Record<string, unknown>) {
		editingRecord = record;
		formError = '';
		fieldErrors = {};
		modalOpen = true;
	}

	function closeModal() {
		modalOpen = false;
		editingRecord = null;
		formError = '';
		fieldErrors = {};
	}
</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={config.listOnly ? undefined : openCreate}
	/>
</div>

<AdminModal
	title={editingRecord
		? `Edit ${config.displayNameSingular}`
		: `Create ${config.displayNameSingular}`}
	open={modalOpen}
	onClose={closeModal}
	{canDelete}
	recordId={editingRecord?.id as string | undefined}
>
	<UserForm
		record={editingRecord ?? {}}
		relationOptionsData={data.relationOptionsData}
		{fieldErrors}
		{formError}
		submitLabel={editingRecord ? 'Update' : 'Create'}
	/>
</AdminModal>

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