Fix SSR errors, enhance Person activity views, and expand Core CRUD

- Resolved Svelte 5 / SvelteKit SSR errors by adding browser checks for window.postMessage and Dexie database operations
- Prevented side effects on global state during detail page preloading by refactoring people/[person_id]/+page.ts to use shallow copies
- Implemented full V3 CRUD support, detail pages, and editable_fields for Address and Contact modules
- Enhanced Event and Post search to support filtering by person_id, enabling real related data in the Person detail view
- Fixed missing onMount import in Person detail component
This commit is contained in:
Scott Idem
2026-01-06 19:20:27 -05:00
parent 6d0531e227
commit c0fc5052ab
14 changed files with 940 additions and 63 deletions

View File

@@ -2,8 +2,8 @@
import { onMount } from 'svelte';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { MapPin, Plus, Search } from 'lucide-svelte';
import { load_ae_obj_li__address } from '$lib/ae_core/ae_core__address';
import { MapPin, Plus, Search, ExternalLink } from 'lucide-svelte';
import { load_ae_obj_li__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
let address_li: any[] = $state([]);
let loading = $state(true);
@@ -20,6 +20,27 @@
loading = false;
}
async function handle_add() {
const city = prompt('Enter city:');
if (!city) return;
const state_province = prompt('Enter state/province:');
const country = prompt('Enter country:', 'USA');
const result = await create_ae_obj__address({
api_cfg: $ae_api,
account_id: $ae_loc.account_id,
data_kv: { city, state_province, country, enable: true },
log_lvl: 1
});
if (result) {
load_addresses();
if (result.address_id_random) {
goto(`/core/addresses/${result.address_id_random}`);
}
}
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
@@ -35,7 +56,7 @@
<MapPin size={24} />
<h1 class="h2">Address Management</h1>
</div>
<button class="btn variant-filled-primary" disabled>
<button class="btn variant-filled-primary" onclick={handle_add}>
<Plus size={16} class="mr-2" /> Add Address
</button>
</header>
@@ -70,7 +91,9 @@
</span>
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" disabled>Manage</button>
<a class="btn btn-sm variant-soft-primary" href="/core/addresses/{addr.address_id_random}">
Manage <ExternalLink size={12} class="ml-2" />
</a>
</td>
</tr>
{/each}

View File

@@ -0,0 +1,159 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
import {
load_ae_obj_id__address,
update_ae_obj__address,
delete_ae_obj_id__address
} from '$lib/ae_core/ae_core__address';
import { editable_fields__address } from '$lib/ae_core/ae_core__address.editable_fields';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Save, Trash2, ArrowLeft, MapPin } from 'lucide-svelte';
let address_id = $page.params.address_id;
let address: any = $state(null);
let loading = $state(true);
let saving = $state(false);
async function load_data() {
loading = true;
address = await load_ae_obj_id__address({
api_cfg: $ae_api,
address_id,
log_lvl: 1
});
loading = false;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
load_data();
});
async function handle_save() {
saving = true;
const data_kv: any = {};
editable_fields__address.forEach(field => {
if (address[field] !== undefined) {
data_kv[field] = address[field];
}
});
await update_ae_obj__address({
api_cfg: $ae_api,
address_id,
data_kv,
log_lvl: 1
});
saving = false;
}
async function handle_delete() {
if (!confirm('Permanently delete this address?')) return;
await delete_ae_obj_id__address({
api_cfg: $ae_api,
address_id,
method: 'delete',
log_lvl: 1
});
goto('/core/addresses');
}
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft" href="/core/addresses">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-2">
<MapPin size={24} />
<h1 class="h2">{address ? `${address.city}, ${address.state_province}` : 'Loading Address...'}</h1>
</div>
</div>
<div class="flex gap-2">
<button class="btn variant-soft-error" onclick={handle_delete} disabled={loading || saving}>
<Trash2 size={16} class="mr-2" /> Delete
</button>
<button class="btn variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
<Save size={16} class="mr-2" /> Save Changes
</button>
</div>
</header>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></div>
{:else if address}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Address Details</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>City</span>
<input class="input" type="text" bind:value={address.city} />
</label>
<label class="label">
<span>State / Province</span>
<input class="input" type="text" bind:value={address.state_province} />
</label>
<label class="label md:col-span-2">
<span>Country</span>
<input class="input" type="text" bind:value={address.country} />
</label>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Internal Metadata</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>Group</span>
<input class="input" type="text" bind:value={address.group} />
</label>
<label class="label">
<span>Sort Priority</span>
<input class="input" type="number" bind:value={address.sort} />
</label>
<label class="label md:col-span-2">
<span>Internal Notes</span>
<textarea class="textarea" rows="3" bind:value={address.notes}></textarea>
</label>
</div>
</div>
</div>
<div class="space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Status & Visibility</h3>
<div class="space-y-4">
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={address.enable} />
<p>Enabled</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={address.hide} />
<p>Hidden from Public</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={address.priority} />
<p>High Priority</p>
</label>
</div>
</div>
<div class="card p-4 space-y-2 opacity-60 text-sm font-mono">
<p>ID: {address.address_id_random}</p>
<p>Created: {new Date(address.created_on).toLocaleString()}</p>
{#if address.updated_on}
<p>Updated: {new Date(address.updated_on).toLocaleString()}</p>
{/if}
</div>
</div>
</div>
{/if}
</div>

View File

@@ -2,8 +2,8 @@
import { onMount } from 'svelte';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Phone, Plus, Search, Mail, User } from 'lucide-svelte';
import { load_ae_obj_li__contact } from '$lib/ae_core/ae_core__contact';
import { Phone, Plus, Search, Mail, User, ExternalLink } from 'lucide-svelte';
import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
let contact_li: any[] = $state([]);
let loading = $state(true);
@@ -20,6 +20,27 @@
loading = false;
}
async function handle_add() {
const name = prompt('Enter contact name:');
if (!name) return;
const email = prompt('Enter email address:');
const phone = prompt('Enter phone number:');
const result = await create_ae_obj__contact({
api_cfg: $ae_api,
account_id: $ae_loc.account_id,
data_kv: { name, email, phone, enable: true },
log_lvl: 1
});
if (result) {
load_contacts();
if (result.contact_id_random) {
goto(`/core/contacts/${result.contact_id_random}`);
}
}
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
@@ -35,7 +56,7 @@
<Phone size={24} />
<h1 class="h2">Contact Management</h1>
</div>
<button class="btn variant-filled-primary" disabled>
<button class="btn variant-filled-primary" onclick={handle_add}>
<Plus size={16} class="mr-2" /> Add Contact
</button>
</header>
@@ -80,7 +101,9 @@
</span>
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" disabled>Manage</button>
<a class="btn btn-sm variant-soft-primary" href="/core/contacts/{con.contact_id_random}">
Manage <ExternalLink size={12} class="ml-2" />
</a>
</td>
</tr>
{/each}

View File

@@ -0,0 +1,159 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
import {
load_ae_obj_id__contact,
update_ae_obj__contact,
delete_ae_obj_id__contact
} from '$lib/ae_core/ae_core__contact';
import { editable_fields__contact } from '$lib/ae_core/ae_core__contact.editable_fields';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Save, Trash2, ArrowLeft, UserRound } from 'lucide-svelte';
let contact_id = $page.params.contact_id;
let contact: any = $state(null);
let loading = $state(true);
let saving = $state(false);
async function load_data() {
loading = true;
contact = await load_ae_obj_id__contact({
api_cfg: $ae_api,
contact_id,
log_lvl: 1
});
loading = false;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
load_data();
});
async function handle_save() {
saving = true;
const data_kv: any = {};
editable_fields__contact.forEach(field => {
if (contact[field] !== undefined) {
data_kv[field] = contact[field];
}
});
await update_ae_obj__contact({
api_cfg: $ae_api,
contact_id,
data_kv,
log_lvl: 1
});
saving = false;
}
async function handle_delete() {
if (!confirm('Permanently delete this contact?')) return;
await delete_ae_obj_id__contact({
api_cfg: $ae_api,
contact_id,
method: 'delete',
log_lvl: 1
});
goto('/core/contacts');
}
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft" href="/core/contacts">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-2">
<UserRound size={24} />
<h1 class="h2">{contact?.name ?? 'Loading Contact...'}</h1>
</div>
</div>
<div class="flex gap-2">
<button class="btn variant-soft-error" onclick={handle_delete} disabled={loading || saving}>
<Trash2 size={16} class="mr-2" /> Delete
</button>
<button class="btn variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
<Save size={16} class="mr-2" /> Save Changes
</button>
</div>
</header>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></div>
{:else if contact}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Contact Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label md:col-span-2">
<span>Display Name</span>
<input class="input" type="text" bind:value={contact.name} />
</label>
<label class="label">
<span>Email Address</span>
<input class="input" type="email" bind:value={contact.email} />
</label>
<label class="label">
<span>Phone Number</span>
<input class="input" type="tel" bind:value={contact.phone} />
</label>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Internal Metadata</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>Group</span>
<input class="input" type="text" bind:value={contact.group} />
</label>
<label class="label">
<span>Sort Priority</span>
<input class="input" type="number" bind:value={contact.sort} />
</label>
<label class="label md:col-span-2">
<span>Internal Notes</span>
<textarea class="textarea" rows="3" bind:value={contact.notes}></textarea>
</label>
</div>
</div>
</div>
<div class="space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Status & Visibility</h3>
<div class="space-y-4">
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={contact.enable} />
<p>Enabled</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={contact.hide} />
<p>Hidden from Public</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={contact.priority} />
<p>High Priority</p>
</label>
</div>
</div>
<div class="card p-4 space-y-2 opacity-60 text-sm font-mono">
<p>ID: {contact.contact_id_random}</p>
<p>Created: {new Date(contact.created_on).toLocaleString()}</p>
{#if contact.updated_on}
<p>Updated: {new Date(contact.updated_on).toLocaleString()}</p>
{/if}
</div>
</div>
</div>
{/if}
</div>

View File

@@ -3,6 +3,7 @@
// import { page } from '$app/stores';
// Imports
import { onMount } from 'svelte';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api';
@@ -29,7 +30,7 @@
import { load_ae_obj_li__user } from '$lib/ae_core/ae_core__user';
import { update_ae_obj__person } from '$lib/ae_core/ae_core__person';
import { qry_ae_obj_li__event } from '$lib/ae_events/ae_events__event';
import { load_ae_obj_li__post } from '$lib/ae_posts/ae_posts__post';
import { qry__post } from '$lib/ae_posts/ae_posts__post';
import { Users, Link, Unlink, UserPlus, ShieldCheck, User, Calendar, MessageSquare, History } from 'lucide-svelte';
interface Props {
@@ -65,18 +66,17 @@
loading_activity = true;
// Load related data using search queries
// Assuming person_id_random is the field name in these objects
const [events, posts] = await Promise.all([
qry_ae_obj_li__event({
api_cfg: $ae_api,
for_obj_id: $ae_loc.account_id,
params: { person_id_random: $slct.person_id },
qry_person_id: $slct.person_id,
log_lvl: 1
}),
load_ae_obj_li__post({
qry__post({
api_cfg: $ae_api,
for_obj_id: $ae_loc.account_id,
params: { person_id_random: $slct.person_id },
account_id: $ae_loc.account_id,
qry_person_id: $slct.person_id,
log_lvl: 1
})
]);

View File

@@ -13,7 +13,11 @@ export async function load({ params, parent }) {
data.log_lvl = log_lvl;
const account_id = data.account_id;
const ae_acct = data[account_id];
// Use spread syntax to create a shallow copy and avoid mutating the shared parent data structure.
// We specifically clone 'slct' because we will be mutating it below.
const ae_acct = { ...data[account_id] };
ae_acct.slct = { ...ae_acct.slct };
console.log(`ae_acct = `, ae_acct);
const person_id = params.person_id;
@@ -37,8 +41,8 @@ export async function load({ params, parent }) {
ae_acct.slct.person_obj = load_person_obj;
// WARNING: Precaution against shared data between sites and presentations.
data[account_id] = ae_acct;
return data;
return {
...data,
[account_id]: ae_acct
};
}