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
@@ -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}
|
||||
|
||||
159
src/routes/core/addresses/[address_id]/+page.svelte
Normal file
159
src/routes/core/addresses/[address_id]/+page.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user