Commit 1: Create individual form components per route, remove generic AdminForm dependency
- Add per-route form components: UserRoleForm, UserForm, ProclamationForm (with category cascade), CategoryForm, FreqForm, LevelForm - Update all admin +page.svelte files to use AdminTable + AdminModal + their specific form component instead of AdminPage - Update profiles page to inline fields instead of using AdminForm - Add custom Proclamation server action with category fallback logic (categoryId falls back to parentCategoryId when no sub-category) - Remove cascade/were/fieldLabels logic from generic crud.ts - Remove outdated cascade/where tests from crud.spec.ts - Remove fieldLabels from AdminModelConfig type
This commit is contained in:
NeilClack
@@ -1,8 +1,91 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import CategoryForm from './CategoryForm.svelte';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
const config = getModelConfig('proclamation-categories')!;
|
||||
const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
let editingRecord = $state<Record<string, unknown> | null>(null);
|
||||
let toastMessage = $state('');
|
||||
let toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="proclamation-categories" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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}
|
||||
>
|
||||
<CategoryForm
|
||||
record={editingRecord ?? {}}
|
||||
relationOptionsData={data.relationOptionsData}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
/>
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
relationOptionsData = {} as Record<string, { label: string; value: string | number }[]>,
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
relationOptionsData?: Record<string, { label: string; value: string | number }[]>;
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let name = $state(String(record.name ?? ''));
|
||||
let parentId = $state(String(record.parentId ?? ''));
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-name"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.name}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-parentId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Parent Category
|
||||
</label>
|
||||
<select
|
||||
id="field-parentId"
|
||||
name="parentId"
|
||||
bind:value={parentId}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.parentId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- No Parent --</option>
|
||||
{#each relationOptionsData.parentId ?? [] as opt (String(opt.value))}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.parentId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.parentId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,16 +1,73 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import { loadRecords, upsertRecord, deleteRecord } from '$lib/svelte-admin/crud';
|
||||
import { loadRecords, deleteRecord, superFormErrorsToFieldErrors } from '$lib/svelte-admin/crud';
|
||||
import { prisma } from '$lib/db';
|
||||
import { superValidate } from 'sveltekit-superforms/server';
|
||||
import { zod4 } from 'sveltekit-superforms/adapters';
|
||||
import * as Schemas from '$lib/svelte-admin/schemas';
|
||||
|
||||
const config = getModelConfig('proclamations')!;
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
return loadRecords(locals, config);
|
||||
const base = await loadRecords(locals, config);
|
||||
|
||||
const categories = await prisma.proclamationCategory.findMany({
|
||||
select: { id: true, name: true, parentId: true },
|
||||
orderBy: { name: 'asc' }
|
||||
});
|
||||
|
||||
return { ...base, categories };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
upsert: async ({ request, locals }) => {
|
||||
return upsertRecord(request, config, locals);
|
||||
if (!locals.user) {
|
||||
return { success: false, error: 'Unauthorized' };
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const form = await superValidate(formData, zod4(Schemas.Proclamation));
|
||||
if (!form.valid) {
|
||||
const { error, fieldErrors } = superFormErrorsToFieldErrors(
|
||||
form.errors as Record<string, unknown>
|
||||
);
|
||||
return { success: false, error, fieldErrors };
|
||||
}
|
||||
|
||||
const rawId = formData.get('id')?.toString();
|
||||
const { parentCategoryId, ...rest } = form.data;
|
||||
|
||||
const data: Record<string, unknown> = {
|
||||
...rest,
|
||||
categoryId: rest.categoryId ?? parentCategoryId
|
||||
};
|
||||
|
||||
try {
|
||||
if (rawId) {
|
||||
const existing = await prisma.proclamation.findUnique({
|
||||
where: { id: rawId }
|
||||
});
|
||||
if (!existing) {
|
||||
return { success: false, error: 'Record not found' };
|
||||
}
|
||||
await prisma.proclamation.update({
|
||||
where: { id: rawId },
|
||||
data: data as any
|
||||
});
|
||||
} else {
|
||||
await prisma.proclamation.create({ data: data as any });
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e && typeof e === 'object' && 'code' in e && (e as { code: string }).code === 'P2002') {
|
||||
return {
|
||||
success: false,
|
||||
error: 'A record with this name already exists.'
|
||||
};
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
delete: async ({ request, locals }) => {
|
||||
return deleteRecord(request, config, locals);
|
||||
|
||||
@@ -1,8 +1,92 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import ProclamationForm from './ProclamationForm.svelte';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
const config = getModelConfig('proclamations')!;
|
||||
const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
let editingRecord = $state<Record<string, unknown> | null>(null);
|
||||
let toastMessage = $state('');
|
||||
let toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="proclamations" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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}
|
||||
>
|
||||
<ProclamationForm
|
||||
record={editingRecord ?? {}}
|
||||
relationOptionsData={data.relationOptionsData}
|
||||
categories={data.categories}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
/>
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import TipTap from '$lib/components/tiptap/TipTap.svelte';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
relationOptionsData = {} as Record<string, { label: string; value: string | number }[]>,
|
||||
categories = [] as { id: number; name: string; parentId: number | null }[],
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
relationOptionsData?: Record<string, { label: string; value: string | number }[]>;
|
||||
categories?: { id: number; name: string; parentId: number | null }[];
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
|
||||
let name = $state(String(record.name ?? ''));
|
||||
let solfeggioFrequencyId = $state(String(record.solfeggioFrequencyId ?? ''));
|
||||
let subscriptionLevelId = $state(String(record.subscriptionLevelId ?? ''));
|
||||
|
||||
let parentCategoryId = $state(
|
||||
String(
|
||||
record.parentCategoryId ??
|
||||
(record.category as Record<string, unknown> | undefined)?.parentId ??
|
||||
''
|
||||
)
|
||||
);
|
||||
let categoryId = $state(String(record.categoryId ?? ''));
|
||||
|
||||
let parentOptions = $derived(categories.filter((c) => c.parentId === null));
|
||||
|
||||
let childOptions = $derived(
|
||||
parentCategoryId ? categories.filter((c) => c.parentId === Number(parentCategoryId)) : []
|
||||
);
|
||||
|
||||
function handleParentChange(e: Event) {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
parentCategoryId = target.value;
|
||||
categoryId = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-name"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.name}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-solfeggioFrequencyId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Frequency
|
||||
</label>
|
||||
<select
|
||||
id="field-solfeggioFrequencyId"
|
||||
name="solfeggioFrequencyId"
|
||||
bind:value={solfeggioFrequencyId}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.solfeggioFrequencyId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- Select Frequency --</option>
|
||||
{#each relationOptionsData.solfeggioFrequencyId ?? [] as opt (String(opt.value))}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.solfeggioFrequencyId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.solfeggioFrequencyId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-parentCategoryId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Category
|
||||
</label>
|
||||
<select
|
||||
id="field-parentCategoryId"
|
||||
name="parentCategoryId"
|
||||
value={parentCategoryId}
|
||||
onchange={handleParentChange}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.parentCategoryId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- Select Category --</option>
|
||||
{#each parentOptions as cat (String(cat.id))}
|
||||
<option value={cat.id}>{cat.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.parentCategoryId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.parentCategoryId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-categoryId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Sub-Category
|
||||
</label>
|
||||
<select
|
||||
id="field-categoryId"
|
||||
name="categoryId"
|
||||
bind:value={categoryId}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.categoryId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- Select Sub-Category --</option>
|
||||
{#each childOptions as cat (String(cat.id))}
|
||||
<option value={cat.id}>{cat.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.categoryId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.categoryId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-subscriptionLevelId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Subscription Level
|
||||
</label>
|
||||
<select
|
||||
id="field-subscriptionLevelId"
|
||||
name="subscriptionLevelId"
|
||||
bind:value={subscriptionLevelId}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.subscriptionLevelId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- Select Level --</option>
|
||||
{#each relationOptionsData.subscriptionLevelId ?? [] as opt (String(opt.value))}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.subscriptionLevelId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.subscriptionLevelId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-content"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Content
|
||||
</label>
|
||||
<div id="field-content">
|
||||
<TipTap
|
||||
initialContent={typeof record.content === 'string' ? record.content : ''}
|
||||
name="content"
|
||||
/>
|
||||
</div>
|
||||
{#if fieldErrors.content}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.content}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -3,14 +3,13 @@
|
||||
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 AdminForm from '$lib/components/admin/AdminForm.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();
|
||||
|
||||
let config = $derived(getModelConfig('profiles')!);
|
||||
const config = getModelConfig('profiles')!;
|
||||
let canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
@@ -135,18 +134,110 @@
|
||||
{canDelete}
|
||||
recordId={editingRecord?.id as string | undefined}
|
||||
>
|
||||
<AdminForm
|
||||
fields={config.formFields}
|
||||
fieldTypes={config.fieldTypes}
|
||||
relationOptions={config.relationOptions}
|
||||
relationOptionsData={data.relationOptionsData}
|
||||
record={editingRecord ?? {}}
|
||||
readonlyFields={config.readonlyFields ?? []}
|
||||
action="?/upsert"
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
/>
|
||||
<form method="POST" action="?/upsert" use:enhance>
|
||||
{#if editingRecord?.id}
|
||||
<input type="hidden" name="id" value={String(editingRecord.id)} />
|
||||
{/if}
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-userId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
User
|
||||
</label>
|
||||
<select
|
||||
id="field-userId"
|
||||
name="userId"
|
||||
value={String(editingRecord?.userId ?? '')}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.userId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<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 class="mt-1 text-xs text-red-600">{fieldErrors.userId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="field-firstName"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-firstName"
|
||||
name="firstName"
|
||||
value={String(editingRecord?.firstName ?? '')}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.firstName
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.firstName}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.firstName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="field-lastName"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-lastName"
|
||||
name="lastName"
|
||||
value={String(editingRecord?.lastName ?? '')}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.lastName
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.lastName}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.lastName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="field-phoneNumber"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-phoneNumber"
|
||||
name="phoneNumber"
|
||||
value={String(editingRecord?.phoneNumber ?? '')}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.phoneNumber
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.phoneNumber}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.phoneNumber}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{editingRecord ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if editingRecord}
|
||||
{@const user = editingRecord.user as Record<string, unknown> | undefined}
|
||||
|
||||
@@ -1,8 +1,90 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import FreqForm from './FreqForm.svelte';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
const config = getModelConfig('solfeggio-frequencies')!;
|
||||
const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
let editingRecord = $state<Record<string, unknown> | null>(null);
|
||||
let toastMessage = $state('');
|
||||
let toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="solfeggio-frequencies" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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}
|
||||
>
|
||||
<FreqForm
|
||||
record={editingRecord ?? {}}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
/>
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let name = $state(String(record.name ?? ''));
|
||||
let value = $state(String(record.value ?? ''));
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-name"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.name}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-value"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Value
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="field-value"
|
||||
name="value"
|
||||
bind:value
|
||||
step="1"
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.value
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.value}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.value}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,8 +1,90 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import LevelForm from './LevelForm.svelte';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
const config = getModelConfig('subscription-levels')!;
|
||||
const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
let editingRecord = $state<Record<string, unknown> | null>(null);
|
||||
let toastMessage = $state('');
|
||||
let toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="subscription-levels" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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}
|
||||
>
|
||||
<LevelForm
|
||||
record={editingRecord ?? {}}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
/>
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let name = $state(String(record.name ?? ''));
|
||||
let description = $state(String(record.description ?? ''));
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-name"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.name}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="field-description"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-description"
|
||||
name="description"
|
||||
bind:value={description}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.description
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.description}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,8 +1,90 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import UserRoleForm from './UserRoleForm.svelte';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
const config = getModelConfig('user-roles')!;
|
||||
const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);
|
||||
|
||||
let modalOpen = $state(false);
|
||||
let editingRecord = $state<Record<string, unknown> | null>(null);
|
||||
let toastMessage = $state('');
|
||||
let toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="user-roles" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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}
|
||||
>
|
||||
<UserRoleForm
|
||||
record={editingRecord ?? {}}
|
||||
{fieldErrors}
|
||||
{formError}
|
||||
submitLabel={editingRecord ? 'Update' : 'Create'}
|
||||
/>
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let name = $state(String(record.name ?? ''));
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-name"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{#if fieldErrors.name}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,8 +1,91 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte';
|
||||
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 { 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 toastType = $state<'success' | 'error'>('success');
|
||||
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';
|
||||
toastType = 'success';
|
||||
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>
|
||||
|
||||
<AdminPage modelSlug="users" {data} {form} adminRoleId={data.adminUser?.roleId ?? 4} />
|
||||
<div class="p-6">
|
||||
<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{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} type={toastType} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
record = {} as Record<string, unknown>,
|
||||
fieldErrors = {} as Record<string, string>,
|
||||
formError = '',
|
||||
relationOptionsData = {} as Record<string, { label: string; value: string | number }[]>,
|
||||
action = '?/upsert',
|
||||
submitLabel = 'Save'
|
||||
}: {
|
||||
record?: Record<string, unknown>;
|
||||
fieldErrors?: Record<string, string>;
|
||||
formError?: string;
|
||||
relationOptionsData?: Record<string, { label: string; value: string | number }[]>;
|
||||
action?: string;
|
||||
submitLabel?: string;
|
||||
} = $props();
|
||||
|
||||
let roleId = $state(String(record.roleId ?? ''));
|
||||
let dirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
dirty = false;
|
||||
});
|
||||
|
||||
function markDirty() {
|
||||
if (record.id) dirty = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<form {action} method="POST" use:enhance oninput={markDirty}>
|
||||
{#if record?.id}
|
||||
<input type="hidden" name="id" value={String(record.id)} />
|
||||
{/if}
|
||||
|
||||
{#if formError}
|
||||
<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="field-roleId"
|
||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Role
|
||||
</label>
|
||||
<select
|
||||
id="field-roleId"
|
||||
name="roleId"
|
||||
bind:value={roleId}
|
||||
class="w-full border px-3 py-1.5 text-sm {fieldErrors.roleId
|
||||
? 'border-red-400'
|
||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="">-- Select Role --</option>
|
||||
{#each relationOptionsData.roleId ?? [] as opt (String(opt.value))}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if fieldErrors.roleId}
|
||||
<p class="mt-1 text-xs text-red-600">{fieldErrors.roleId}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!!record?.id && !dirty}
|
||||
class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
Reference in New Issue
Block a user