Commit 2: Delete AdminForm.svelte and AdminPage.svelte
This commit is contained in:
NeilClack
@@ -1,327 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type { PrismaScalarType } from '$lib/svelte-admin/types';
|
|
||||||
import { fieldNameToLabel } from '$lib/svelte-admin/introspect';
|
|
||||||
import { enhance } from '$app/forms';
|
|
||||||
import TipTap from '$lib/components/tiptap/TipTap.svelte';
|
|
||||||
|
|
||||||
let {
|
|
||||||
fields = [],
|
|
||||||
fieldTypes = {} as Record<string, PrismaScalarType>,
|
|
||||||
relationOptions = {} as Record<
|
|
||||||
string,
|
|
||||||
{ model: string; labelField: string; valueField: string }
|
|
||||||
>,
|
|
||||||
relationOptionsData = {} as Record<string, { label: string; value: string | number }[]>,
|
|
||||||
record = {} as Record<string, unknown>,
|
|
||||||
readonlyFields = [] as string[],
|
|
||||||
action = '?/upsert',
|
|
||||||
submitLabel = 'Save',
|
|
||||||
fieldErrors = {} as Record<string, string>,
|
|
||||||
formError = '',
|
|
||||||
cascadeFields = {} as Record<string, { parentField: string }>,
|
|
||||||
cascadeOptionParentMap = {} as Record<
|
|
||||||
string,
|
|
||||||
Record<string | number, string | number>
|
|
||||||
>
|
|
||||||
}: {
|
|
||||||
fields: string[];
|
|
||||||
fieldTypes: Record<string, PrismaScalarType>;
|
|
||||||
relationOptions?: Record<string, { model: string; labelField: string; valueField: string }>;
|
|
||||||
relationOptionsData?: Record<string, { label: string; value: string | number }[]>;
|
|
||||||
record?: Record<string, unknown>;
|
|
||||||
readonlyFields?: string[];
|
|
||||||
action?: string;
|
|
||||||
submitLabel?: string;
|
|
||||||
fieldErrors?: Record<string, string>;
|
|
||||||
formError?: string;
|
|
||||||
cascadeFields?: Record<string, { parentField: string }>;
|
|
||||||
cascadeOptionParentMap?: Record<string, Record<string | number, string | number>>;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
let dirty = $state(false);
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
dirty = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
function markDirty() {
|
|
||||||
if (record?.id) dirty = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isCascadeParent(field: string): boolean {
|
|
||||||
return Object.values(cascadeFields).some(
|
|
||||||
(c: { parentField: string }) => c.parentField === field
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getChildFieldName(parentField: string): string | null {
|
|
||||||
for (const [child, cascade] of Object.entries(cascadeFields)) {
|
|
||||||
const cfg = cascade as { parentField: string };
|
|
||||||
if (cfg.parentField === parentField) return child;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFilteredChildOptions(
|
|
||||||
childField: string,
|
|
||||||
parentValue: string | number | undefined
|
|
||||||
): { label: string; value: string | number }[] {
|
|
||||||
const all = relationOptionsData[childField] ?? [];
|
|
||||||
if (parentValue == null || parentValue === '') return [];
|
|
||||||
const parentMap = cascadeOptionParentMap[childField] ?? {};
|
|
||||||
const parentNum = Number(parentValue);
|
|
||||||
return all.filter(
|
|
||||||
(opt: { label: string; value: string | number }) => parentMap[opt.value] === parentNum
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatReadonly(value: unknown, type: string): string {
|
|
||||||
if (value == null) return '';
|
|
||||||
if (type === 'DateTime') {
|
|
||||||
if (value instanceof Date) return value.toLocaleString();
|
|
||||||
return new Date(value as string).toLocaleString();
|
|
||||||
}
|
|
||||||
if (type === 'Boolean') return value ? 'Active' : 'Inactive';
|
|
||||||
if (type === 'Int') {
|
|
||||||
const n = Number(value);
|
|
||||||
return Number.isNaN(n) ? String(value) : String(n);
|
|
||||||
}
|
|
||||||
if (type === 'Float') {
|
|
||||||
const n = Number(value);
|
|
||||||
return Number.isNaN(n) ? String(value) : n.toFixed(2);
|
|
||||||
}
|
|
||||||
return String(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDateTimeValue(value: unknown): string {
|
|
||||||
if (value == null) return '';
|
|
||||||
const d = value instanceof Date ? value : new Date(value as string);
|
|
||||||
if (isNaN(d.getTime())) return '';
|
|
||||||
const pad = (n: number) => String(n).padStart(2, '0');
|
|
||||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|
||||||
}
|
|
||||||
</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">
|
|
||||||
{#each fields as field (field)}
|
|
||||||
{@const type = fieldTypes[field] ?? 'String'}
|
|
||||||
{@const ro = readonlyFields.includes(field)}
|
|
||||||
{@const rel = relationOptions[field]}
|
|
||||||
{@const value = record?.[field]}
|
|
||||||
{@const err = fieldErrors[field]}
|
|
||||||
{@const isCascadeParentField = isCascadeParent(field)}
|
|
||||||
{@const isChildField = getChildFieldName(field) != null}
|
|
||||||
|
|
||||||
{#if isCascadeParentField}
|
|
||||||
{@const childField = getChildFieldName(field)!}
|
|
||||||
{@const childVal = record?.[childField]}
|
|
||||||
{@const childErr = fieldErrors[childField]}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
value={value != null ? String(value) : ''}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {err
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
>
|
|
||||||
<option value="">-- Select {fieldNameToLabel(field)} --</option>
|
|
||||||
{#each relationOptionsData[field] ?? [] as opt (String(opt.value))}
|
|
||||||
<option value={opt.value}>{opt.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{childField}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(childField)}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="field-{childField}"
|
|
||||||
name={childField}
|
|
||||||
value={childVal != null ? String(childVal) : ''}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {childErr
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
>
|
|
||||||
<option value="">-- Select {fieldNameToLabel(childField)} --</option>
|
|
||||||
{#each getFilteredChildOptions(childField, value as string | number | undefined) as opt (String(opt.value))}
|
|
||||||
<option value={opt.value}>{opt.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{#if childErr}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{childErr}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if isChildField}
|
|
||||||
<!-- child fields rendered inline with parent -->
|
|
||||||
{:else if ro}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<p
|
|
||||||
class="border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
{formatReadonly(value, type)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{:else if type === 'Tiptap'}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<div id="field-{field}">
|
|
||||||
<TipTap initialContent={typeof value === 'string' ? value : ''} name={field} />
|
|
||||||
</div>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if rel}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
value={value != null ? String(value) : ''}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {err
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
>
|
|
||||||
<option value="">-- Select {fieldNameToLabel(field)} --</option>
|
|
||||||
{#each relationOptionsData[field] ?? [] as opt (String(opt.value))}
|
|
||||||
<option value={opt.value}>{opt.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if type === 'Boolean'}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
checked={!!value}
|
|
||||||
class="h-4 w-4 border-gray-300 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else if type === 'DateTime'}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
value={formatDateTimeValue(value)}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {err
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
/>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if type === 'Int' || type === 'Float'}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
value={value != null ? String(value) : ''}
|
|
||||||
step={type === 'Int' ? '1' : '0.01'}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {err
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
/>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="field-{field}"
|
|
||||||
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{fieldNameToLabel(field)}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="field-{field}"
|
|
||||||
name={field}
|
|
||||||
value={value != null ? String(value) : ''}
|
|
||||||
class="w-full border px-3 py-1.5 text-sm {err
|
|
||||||
? 'border-red-400'
|
|
||||||
: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
|
|
||||||
/>
|
|
||||||
{#if err}
|
|
||||||
<p class="mt-1 text-xs text-red-600">{err}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<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,104 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type { ActionResult } from '$lib/svelte-admin/types';
|
|
||||||
import AdminTable from './AdminTable.svelte';
|
|
||||||
import AdminModal from './AdminModal.svelte';
|
|
||||||
import AdminForm from './AdminForm.svelte';
|
|
||||||
import Toast from './Toast.svelte';
|
|
||||||
import { getModelConfig } from '$lib/svelte-admin/registry';
|
|
||||||
|
|
||||||
let {
|
|
||||||
data,
|
|
||||||
form = null as ActionResult | null,
|
|
||||||
modelSlug,
|
|
||||||
adminRoleId = 4
|
|
||||||
}: {
|
|
||||||
data: any;
|
|
||||||
form?: ActionResult | null;
|
|
||||||
modelSlug: string;
|
|
||||||
adminRoleId?: number;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
let config = $derived(getModelConfig(modelSlug)!);
|
|
||||||
let canDelete = $derived(adminRoleId <= 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 && form.success) {
|
|
||||||
toastMessage = 'Saved successfully';
|
|
||||||
toastType = 'success';
|
|
||||||
closeModal();
|
|
||||||
} else if (form && !form.success) {
|
|
||||||
formError = form.error ?? '';
|
|
||||||
fieldErrors = form.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 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}
|
|
||||||
>
|
|
||||||
<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}
|
|
||||||
cascadeFields={config.cascadeFields ?? {}}
|
|
||||||
cascadeOptionParentMap={data.cascadeOptionParentMap ?? {}}
|
|
||||||
/>
|
|
||||||
</AdminModal>
|
|
||||||
|
|
||||||
{#if toastMessage}
|
|
||||||
<Toast message={toastMessage} type={toastType} />
|
|
||||||
{/if}
|
|
||||||
Reference in New Issue
Block a user