profiles: add address management, user edit, fix form redirect
- Add type (Mailing/Billing/Shipping) and isDefault fields to Address schema with migration. Unique default enforced server-side. - Rewrite profiles page with inline address creation form and editable user name/email within the profile modal. - Add upsertAddress and updateUser form actions. - Fix form redirect by adding use:enhance to AdminForm. - Disable Update button in AdminForm until a field is changed (prevents accidental submissions).
This commit is contained in:
NeilClack
@@ -0,0 +1,3 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "Address" ADD COLUMN "isDefault" BOOLEAN NOT NULL DEFAULT false,
|
||||
ADD COLUMN "type" TEXT NOT NULL DEFAULT 'Mailing';
|
||||
@@ -55,6 +55,8 @@ model Address {
|
||||
state String
|
||||
postalCode String
|
||||
country String
|
||||
type String @default("Mailing")
|
||||
isDefault Boolean @default(false)
|
||||
}
|
||||
|
||||
model Session {
|
||||
@@ -119,7 +121,6 @@ model Proclamation {
|
||||
solfeggioFrequency SolfeggioFrequency @relation(fields: [solfeggioFrequencyId], references: [id])
|
||||
categoryId Int
|
||||
category ProclamationCategory @relation(fields: [categoryId], references: [id])
|
||||
price Float @default(0.99)
|
||||
userProclamations UserProclamations[]
|
||||
subscriptionLevelId Int @default(1)
|
||||
subscriptionLevel SubscriptionLevel @relation(fields: [subscriptionLevelId], references: [id])
|
||||
@@ -141,7 +142,7 @@ model UserProclamations {
|
||||
model SolfeggioFrequency {
|
||||
id Int @id @default(autoincrement())
|
||||
name String @unique
|
||||
value Float @unique
|
||||
value Int @unique
|
||||
proclamations Proclamation[]
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
<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>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
open = false,
|
||||
title = '',
|
||||
onClose,
|
||||
children,
|
||||
canDelete = false,
|
||||
recordId,
|
||||
deleteAction = '?/delete'
|
||||
}: {
|
||||
open?: boolean;
|
||||
title?: string;
|
||||
onClose?: () => void;
|
||||
children: import('svelte').Snippet;
|
||||
canDelete?: boolean;
|
||||
recordId?: string;
|
||||
deleteAction?: string;
|
||||
} = $props();
|
||||
|
||||
function handleBackdrop(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) onClose?.();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose?.();
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
if (!recordId) return;
|
||||
if (confirm('Are you sure you want to delete this record? This cannot be undone.')) {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = deleteAction;
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'id';
|
||||
input.value = recordId;
|
||||
form.appendChild(input);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
role="presentation"
|
||||
class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 pt-12"
|
||||
onclick={handleBackdrop}
|
||||
onkeydown={handleKeydown}
|
||||
>
|
||||
<div
|
||||
class="my-8 w-full max-w-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if canDelete && recordId}
|
||||
<button
|
||||
type="button"
|
||||
onclick={confirmDelete}
|
||||
class="px-3 py-1 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={onClose}
|
||||
class="px-2 py-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>×</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,104 @@
|
||||
<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}
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import type { PrismaScalarType } from '$lib/svelte-admin/types';
|
||||
import { fieldNameToLabel, resolveFieldValue } from '$lib/svelte-admin/introspect';
|
||||
|
||||
let {
|
||||
records = [],
|
||||
listFields = [],
|
||||
searchFields = [],
|
||||
fieldTypes = {} as Record<string, PrismaScalarType>,
|
||||
singular = 'record',
|
||||
onRowClick,
|
||||
onNew
|
||||
}: {
|
||||
records: Record<string, unknown>[];
|
||||
listFields: string[];
|
||||
searchFields?: string[];
|
||||
fieldTypes?: Record<string, PrismaScalarType>;
|
||||
singular?: string;
|
||||
onRowClick?: (record: Record<string, unknown>) => void;
|
||||
onNew?: () => void;
|
||||
} = $props();
|
||||
|
||||
let search = $state('');
|
||||
let sortCol = $state<string | null>(null);
|
||||
let sortAsc = $state(true);
|
||||
|
||||
let filtered = $derived(
|
||||
search
|
||||
? records.filter((r) =>
|
||||
searchFields.some((f) => {
|
||||
const v = resolveFieldValue(r, f);
|
||||
return v != null && String(v).toLowerCase().includes(search.toLowerCase());
|
||||
})
|
||||
)
|
||||
: records
|
||||
);
|
||||
|
||||
let sorted = $derived(
|
||||
sortCol
|
||||
? [...filtered].sort((a, b) => {
|
||||
const va = resolveFieldValue(a, sortCol!);
|
||||
const vb = resolveFieldValue(b, sortCol!);
|
||||
if (va == null) return 1;
|
||||
if (vb == null) return -1;
|
||||
const cmp = String(va).localeCompare(String(vb), undefined, { numeric: true });
|
||||
return sortAsc ? cmp : -cmp;
|
||||
})
|
||||
: filtered
|
||||
);
|
||||
|
||||
function toggleSort(field: string) {
|
||||
if (sortCol === field) {
|
||||
sortAsc = !sortAsc;
|
||||
} else {
|
||||
sortCol = field;
|
||||
sortAsc = true;
|
||||
}
|
||||
}
|
||||
|
||||
function formatCellValue(v: unknown, field: string): string {
|
||||
if (v == null) return '';
|
||||
const ft = fieldTypes[field];
|
||||
if (ft === 'DateTime') {
|
||||
if (v instanceof Date) return v.toLocaleString();
|
||||
return new Date(v as string).toLocaleString();
|
||||
}
|
||||
if (ft === 'Boolean') return v ? 'Active' : 'Inactive';
|
||||
if (ft === 'Float') {
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? String(v) : n.toFixed(2);
|
||||
}
|
||||
return String(v);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
{#if searchFields.length > 0}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search {singular}s..."
|
||||
bind:value={search}
|
||||
class="max-w-xs border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
{:else}
|
||||
<div></div>
|
||||
{/if}
|
||||
{#if onNew}
|
||||
<button
|
||||
type="button"
|
||||
onclick={onNew}
|
||||
class="border border-gray-300 px-3 py-1.5 text-sm font-medium dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||
>
|
||||
New {singular} +
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto border border-gray-200 dark:border-gray-700">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800">
|
||||
{#each listFields as field (field)}
|
||||
<th
|
||||
scope="col"
|
||||
onclick={() => toggleSort(field)}
|
||||
class="cursor-pointer px-4 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
{fieldNameToLabel(field)}
|
||||
{#if sortCol === field}
|
||||
<span class="ml-1">{sortAsc ? '\u25B2' : '\u25BC'}</span>
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each sorted as record, i ((record['id'] as string) ?? (record['key'] as string) ?? i)}
|
||||
<tr
|
||||
onclick={() => onRowClick?.(record)}
|
||||
class="cursor-pointer border-b border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{#each listFields as field (field)}
|
||||
<td class="px-4 py-2 text-sm">
|
||||
{formatCellValue(resolveFieldValue(record, field), field)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td
|
||||
colspan={listFields.length}
|
||||
class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
No {singular}s found.
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
message = '',
|
||||
type = 'success' as 'success' | 'error'
|
||||
}: {
|
||||
message?: string;
|
||||
type?: 'success' | 'error';
|
||||
} = $props();
|
||||
|
||||
let remaining = $state(5);
|
||||
let visible = $state(true);
|
||||
|
||||
$effect(() => {
|
||||
remaining = 5;
|
||||
const timer = setInterval(() => {
|
||||
remaining -= 1;
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (remaining <= 0) {
|
||||
visible = false;
|
||||
}
|
||||
});
|
||||
|
||||
function dismiss() {
|
||||
visible = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div
|
||||
role="alert"
|
||||
class="fixed bottom-4 left-4 z-50 flex min-w-64 items-center gap-3 border px-4 py-3 text-sm shadow-lg {type === 'success'
|
||||
? 'border-green-600 bg-green-50 text-green-800'
|
||||
: 'border-red-600 bg-red-50 text-red-800'}"
|
||||
>
|
||||
<span class="flex-1">{message}</span>
|
||||
<span class="tabular-nums text-xs opacity-70">{remaining}s</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={dismiss}
|
||||
class="ml-1 font-bold leading-none hover:opacity-70">×</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -73,7 +73,7 @@ const models: AdminModelConfig[] = [
|
||||
relationKey: 'addresses',
|
||||
label: 'Addresses',
|
||||
type: 'has-many',
|
||||
displayFields: ['street', 'city', 'state', 'zip']
|
||||
displayFields: ['type', 'street', 'city', 'state', 'postalCode', 'country', 'isDefault']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { getModelConfig } from '$lib/svelte-admin/registry';
|
||||
import { loadRecords, upsertRecord, deleteRecord } from '$lib/svelte-admin/crud';
|
||||
import { prisma } from '$lib/db';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
const config = getModelConfig('profiles')!;
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
return loadRecords(locals, config);
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
upsert: async ({ request, locals }) => {
|
||||
const formData = await request.formData();
|
||||
return upsertRecord(formData, config, locals);
|
||||
},
|
||||
delete: async ({ request, locals }) => {
|
||||
const formData = await request.formData();
|
||||
return deleteRecord(formData, config, locals);
|
||||
},
|
||||
upsertAddress: async ({ request, locals }) => {
|
||||
if (!locals.user) throw error(401, 'Unauthorized');
|
||||
|
||||
const formData = await request.formData();
|
||||
const id = formData.get('id')?.toString();
|
||||
const profileId = formData.get('profileId')?.toString();
|
||||
if (!profileId) {
|
||||
return { success: false, addressError: 'Missing profile ID' };
|
||||
}
|
||||
|
||||
const type = formData.get('type')?.toString() || 'Mailing';
|
||||
const street = formData.get('street')?.toString() || '';
|
||||
const city = formData.get('city')?.toString() || '';
|
||||
const state = formData.get('state')?.toString() || '';
|
||||
const postalCode = formData.get('postalCode')?.toString() || '';
|
||||
const country = formData.get('country')?.toString() || '';
|
||||
const isDefault = formData.get('isDefault') === 'on';
|
||||
|
||||
if (!street || !city || !state || !postalCode || !country) {
|
||||
return {
|
||||
success: false,
|
||||
addressError: 'All address fields are required'
|
||||
};
|
||||
}
|
||||
|
||||
if (isDefault) {
|
||||
await prisma.address.updateMany({
|
||||
where: { profileId, type, isDefault: true },
|
||||
data: { isDefault: false }
|
||||
});
|
||||
}
|
||||
|
||||
if (id) {
|
||||
const updated = await prisma.address.update({
|
||||
where: { id },
|
||||
data: { type, street, city, state, postalCode, country, isDefault }
|
||||
});
|
||||
return { success: true, address: updated };
|
||||
}
|
||||
|
||||
const created = await prisma.address.create({
|
||||
data: { profileId, type, street, city, state, postalCode, country, isDefault }
|
||||
});
|
||||
return { success: true, address: created };
|
||||
},
|
||||
updateUser: async ({ request, locals }) => {
|
||||
if (!locals.user) throw error(401, 'Unauthorized');
|
||||
|
||||
const formData = await request.formData();
|
||||
const userId = formData.get('id')?.toString();
|
||||
const email = formData.get('email')?.toString();
|
||||
const name = formData.get('name')?.toString();
|
||||
|
||||
if (!userId) {
|
||||
return { success: false, userError: 'Missing user ID' };
|
||||
}
|
||||
|
||||
const data: Record<string, string> = {};
|
||||
if (email) data.email = email;
|
||||
if (name) data.name = name;
|
||||
if (Object.keys(data).length === 0) {
|
||||
return { success: false, userError: 'No fields to update' };
|
||||
}
|
||||
|
||||
await prisma.user.update({ where: { id: userId }, data });
|
||||
return { success: true };
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,364 @@
|
||||
<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 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')!);
|
||||
let 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('');
|
||||
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: '',
|
||||
type: 'Mailing',
|
||||
isDefault: '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) {
|
||||
toastMessage = (form as any).addressError
|
||||
? 'Address saved'
|
||||
: 'Saved successfully';
|
||||
toastType = 'success';
|
||||
if ((form as any).address) {
|
||||
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 if (!(form as any).addressError && !(form as any).userError) {
|
||||
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 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}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
|
||||
{#if editingRecord}
|
||||
{@const user = editingRecord.user as Record<string, unknown> | undefined}
|
||||
<div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">User</h3>
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleUserForm}
|
||||
class="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
|
||||
>
|
||||
{userFormOpen ? 'Cancel' : 'Edit User'}
|
||||
</button>
|
||||
</div>
|
||||
<p class="mb-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{user?.name as string ?? ''} ({user?.email as string ?? ''})
|
||||
</p>
|
||||
|
||||
{#if userFormOpen}
|
||||
<form method="POST" action="?/updateUser" use:enhance class="mt-3 rounded border border-gray-200 p-3 dark:border-gray-700">
|
||||
<input type="hidden" name="id" value={String(user?.id ?? '')} />
|
||||
{#if userError}
|
||||
<div class="mb-2 border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">
|
||||
{userError}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2">
|
||||
<div>
|
||||
<label for="user-name" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="user-name"
|
||||
name="name"
|
||||
value={userName}
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="user-email" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="user-email"
|
||||
name="email"
|
||||
value={userEmail}
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
class="border border-gray-300 bg-gray-100 px-3 py-1 text-xs font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
Save User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editingRecord}
|
||||
{@const addresses = (editingRecord.addresses as Record<string, unknown>[]) ?? []}
|
||||
<div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Addresses</h3>
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleAddressForm}
|
||||
class="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
|
||||
>
|
||||
{addressFormOpen ? 'Cancel' : 'Add Address +'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if addressFormOpen}
|
||||
<form method="POST" action="?/upsertAddress" use:enhance class="mb-3 rounded border border-gray-200 p-3 dark:border-gray-700">
|
||||
<input type="hidden" name="profileId" value={String(editingRecord.id)} />
|
||||
{#if addressError}
|
||||
<div class="mb-2 border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">
|
||||
{addressError}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label for="addr-type" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="addr-type"
|
||||
name="type"
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
<option value="Mailing">Mailing</option>
|
||||
<option value="Billing">Billing</option>
|
||||
<option value="Shipping">Shipping</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-street" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Street
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="addr-street"
|
||||
name="street"
|
||||
required
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-city" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="addr-city"
|
||||
name="city"
|
||||
required
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-state" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
State
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="addr-state"
|
||||
name="state"
|
||||
required
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-postal" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Postal Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="addr-postal"
|
||||
name="postalCode"
|
||||
required
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-country" class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="addr-country"
|
||||
name="country"
|
||||
required
|
||||
class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label class="mt-2 flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" name="isDefault" class="h-3.5 w-3.5" />
|
||||
Set as default for this type
|
||||
</label>
|
||||
<div class="mt-2 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
class="border border-gray-300 bg-gray-100 px-3 py-1 text-xs font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
Save Address
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if addresses.length > 0}
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Street</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">City</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">State</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Zip</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Country</th>
|
||||
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each addresses as addr}
|
||||
<tr class="border-b border-gray-100 dark:border-gray-800">
|
||||
<td class="px-2 py-1 text-xs">{addr.type as string}</td>
|
||||
<td class="px-2 py-1">{addr.street as string}</td>
|
||||
<td class="px-2 py-1">{addr.city as string}</td>
|
||||
<td class="px-2 py-1">{addr.state as string}</td>
|
||||
<td class="px-2 py-1">{addr.postalCode as string}</td>
|
||||
<td class="px-2 py-1">{addr.country as string}</td>
|
||||
<td class="px-2 py-1">{addr.isDefault ? 'Yes' : ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<p class="text-sm text-gray-500">No addresses on file.</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</AdminModal>
|
||||
|
||||
{#if toastMessage}
|
||||
<Toast message={toastMessage} type={toastType} />
|
||||
{/if}
|
||||
Reference in New Issue
Block a user