Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/ae_api/api_post_object.ts
View File

@@ -145,20 +145,22 @@ export const post_object = async function post_object({
// Post a message to the window indicating the upload is complete
try {
window.postMessage(
{
type: 'api_post_json_form',
status: 'complete',
task_id: task_id,
endpoint: endpoint,
size_total: 0,
size_loaded: 0,
percent_completed: 100,
progress: 100,
rate: 0
},
'*'
);
if (typeof window !== 'undefined') {
window.postMessage(
{
type: 'api_post_json_form',
status: 'complete',
task_id: task_id,
endpoint: endpoint,
size_total: 0,
size_loaded: 0,
percent_completed: 100,
progress: 100,
rate: 0
},
'*'
);
}
} catch (error) {
console.error('Error posting message to window:', error);
}

11
src/lib/ae_core/ae_core__address.editable_fields.ts Normal file
View File

@@ -0,0 +1,11 @@
export const editable_fields__address = [
'city',
'state_province',
'country',
'enable',
'hide',
'priority',
'sort',
'group',
'notes'
];

265
src/lib/ae_core/ae_core__address.ts
View File

@@ -30,19 +30,72 @@ export interface Address {
updated_on?: null | Date;
}
// Updated 2026-01-06
export async function load_ae_obj_id__address({
api_cfg,
address_id,
view = 'default',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
address_id: string;
view?: string;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
ae_promises.load__address_obj = await api.get_ae_obj_v3({
api_cfg,
obj_type: 'address',
obj_id: address_id,
view,
params,
log_lvl
}).then(async (result) => {
if (result) {
if (try_cache) {
const processed = await process_ae_obj__address_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'address',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
return null;
});
return ae_promises.load__address_obj;
}
// Updated 2026-01-06
export async function load_ae_obj_li__address({
api_cfg,
for_obj_type,
for_obj_type = 'account',
for_obj_id,
enabled = 'enabled',
hidden = 'not_hidden',
view = 'default',
limit = 99,
offset = 0,
order_by_li = { city: 'ASC' },
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
for_obj_type?: string;
for_obj_id?: string;
for_obj_id: string;
enabled?: 'all' | 'enabled' | 'not_enabled';
hidden?: 'all' | 'hidden' | 'not_hidden';
view?: string;
limit?: number;
offset?: number;
order_by_li?: Record<string, 'ASC' | 'DESC'>;
try_cache?: boolean;
log_lvl?: number;
}) {
ae_promises.load__address_obj_li = await api.get_ae_obj_li_v3({
@@ -52,17 +105,23 @@ export async function load_ae_obj_li__address({
for_obj_id,
enabled,
hidden,
view,
limit,
offset,
order_by_li,
log_lvl
}).then(async (result) => {
if (result && Array.isArray(result)) {
const processed = await process_ae_obj__address_props({ obj_li: result, log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'address',
obj_li: processed,
properties_to_save: ['id', 'address_id', 'address_id_random', 'city', 'state_province', 'country', 'enable'],
log_lvl
});
if (try_cache) {
const processed = await process_ae_obj__address_props({ obj_li: result, log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'address',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
return [];
@@ -70,10 +129,186 @@ export async function load_ae_obj_li__address({
return ae_promises.load__address_obj_li;
}
export async function process_ae_obj__address_props({ obj_li, log_lvl = 0 }: { obj_li: any[], log_lvl?: number }) {
return obj_li.map(obj => {
const new_obj = { ...obj };
new_obj.id = obj.address_id_random;
return new_obj;
// Updated 2026-01-06
export async function create_ae_obj__address({
api_cfg,
account_id,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
account_id: string;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.create_ae_obj_v3({
api_cfg,
obj_type: 'address',
fields: {
account_id_random: account_id,
...data_kv
},
params,
log_lvl
});
if (result && try_cache) {
const processed = await process_ae_obj__address_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'address',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function update_ae_obj__address({
api_cfg,
address_id,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
address_id: string;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.update_ae_obj_v3({
api_cfg,
obj_type: 'address',
obj_id: address_id,
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed = await process_ae_obj__address_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'address',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function delete_ae_obj_id__address({
api_cfg,
address_id,
method = 'delete',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
address_id: string;
method?: 'delete' | 'soft_delete' | 'disable' | 'hide';
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.delete_ae_obj_v3({
api_cfg,
obj_type: 'address',
obj_id: address_id,
method,
params,
log_lvl
});
if (try_cache) {
await db_core.address.delete(address_id);
}
return result;
}
export const properties_to_save = [
'id',
'address_id',
'address_id_random',
'account_id',
'account_id_random',
'for_type',
'for_id',
'for_id_random',
'city',
'state_province',
'country',
'enable',
'hide',
'priority',
'sort',
'group',
'notes',
'created_on',
'updated_on'
];
async function _process_generic_props<T extends Record<string, any>>({
obj_li,
obj_type,
log_lvl = 0,
specific_processor
}: {
obj_li: T[];
obj_type: string;
log_lvl?: number;
specific_processor?: (obj: T) => Promise<T> | T;
}): Promise<T[]> {
if (!obj_li || obj_li.length === 0) return [];
const processed_obj_li: T[] = [];
for (const original_obj of obj_li) {
let processed_obj = { ...original_obj };
for (const key in processed_obj) {
if (key.endsWith('_random')) {
const newKey = key.slice(0, -7);
(processed_obj as any)[newKey] = processed_obj[key];
}
}
const randomIdKey = `${obj_type}_id_random`;
if (processed_obj[randomIdKey]) {
(processed_obj as any).id = processed_obj[randomIdKey];
}
if (specific_processor) {
processed_obj = await Promise.resolve(specific_processor(processed_obj));
}
processed_obj_li.push(processed_obj as T);
}
return processed_obj_li;
}
export async function process_ae_obj__address_props({
obj_li,
log_lvl = 0
}: {
obj_li: any[];
log_lvl?: number;
}) {
return _process_generic_props({
obj_li,
obj_type: 'address',
log_lvl
});
}

11
src/lib/ae_core/ae_core__contact.editable_fields.ts Normal file
View File

@@ -0,0 +1,11 @@
export const editable_fields__contact = [
'name',
'email',
'phone',
'enable',
'hide',
'priority',
'sort',
'group',
'notes'
];

265
src/lib/ae_core/ae_core__contact.ts
View File

@@ -30,19 +30,72 @@ export interface Contact {
updated_on?: null | Date;
}
// Updated 2026-01-06
export async function load_ae_obj_id__contact({
api_cfg,
contact_id,
view = 'default',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
contact_id: string;
view?: string;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
ae_promises.load__contact_obj = await api.get_ae_obj_v3({
api_cfg,
obj_type: 'contact',
obj_id: contact_id,
view,
params,
log_lvl
}).then(async (result) => {
if (result) {
if (try_cache) {
const processed = await process_ae_obj__contact_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'contact',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
return null;
});
return ae_promises.load__contact_obj;
}
// Updated 2026-01-06
export async function load_ae_obj_li__contact({
api_cfg,
for_obj_type,
for_obj_type = 'account',
for_obj_id,
enabled = 'enabled',
hidden = 'not_hidden',
view = 'default',
limit = 99,
offset = 0,
order_by_li = { name: 'ASC' },
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
for_obj_type?: string;
for_obj_id?: string;
for_obj_id: string;
enabled?: 'all' | 'enabled' | 'not_enabled';
hidden?: 'all' | 'hidden' | 'not_hidden';
view?: string;
limit?: number;
offset?: number;
order_by_li?: Record<string, 'ASC' | 'DESC'>;
try_cache?: boolean;
log_lvl?: number;
}) {
ae_promises.load__contact_obj_li = await api.get_ae_obj_li_v3({
@@ -52,17 +105,23 @@ export async function load_ae_obj_li__contact({
for_obj_id,
enabled,
hidden,
view,
limit,
offset,
order_by_li,
log_lvl
}).then(async (result) => {
if (result && Array.isArray(result)) {
const processed = await process_ae_obj__contact_props({ obj_li: result, log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'contact',
obj_li: processed,
properties_to_save: ['id', 'contact_id', 'contact_id_random', 'name', 'email', 'phone', 'enable'],
log_lvl
});
if (try_cache) {
const processed = await process_ae_obj__contact_props({ obj_li: result, log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'contact',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
return [];
@@ -70,10 +129,186 @@ export async function load_ae_obj_li__contact({
return ae_promises.load__contact_obj_li;
}
export async function process_ae_obj__contact_props({ obj_li, log_lvl = 0 }: { obj_li: any[], log_lvl?: number }) {
return obj_li.map(obj => {
const new_obj = { ...obj };
new_obj.id = obj.contact_id_random;
return new_obj;
// Updated 2026-01-06
export async function create_ae_obj__contact({
api_cfg,
account_id,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
account_id: string;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.create_ae_obj_v3({
api_cfg,
obj_type: 'contact',
fields: {
account_id_random: account_id,
...data_kv
},
params,
log_lvl
});
if (result && try_cache) {
const processed = await process_ae_obj__contact_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'contact',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function update_ae_obj__contact({
api_cfg,
contact_id,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
contact_id: string;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.update_ae_obj_v3({
api_cfg,
obj_type: 'contact',
obj_id: contact_id,
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed = await process_ae_obj__contact_props({ obj_li: [result], log_lvl });
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'contact',
obj_li: processed,
properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function delete_ae_obj_id__contact({
api_cfg,
contact_id,
method = 'delete',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
contact_id: string;
method?: 'delete' | 'soft_delete' | 'disable' | 'hide';
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.delete_ae_obj_v3({
api_cfg,
obj_type: 'contact',
obj_id: contact_id,
method,
params,
log_lvl
});
if (try_cache) {
await db_core.contact.delete(contact_id);
}
return result;
}
export const properties_to_save = [
'id',
'contact_id',
'contact_id_random',
'account_id',
'account_id_random',
'for_type',
'for_id',
'for_id_random',
'name',
'email',
'phone',
'enable',
'hide',
'priority',
'sort',
'group',
'notes',
'created_on',
'updated_on'
];
async function _process_generic_props<T extends Record<string, any>>({
obj_li,
obj_type,
log_lvl = 0,
specific_processor
}: {
obj_li: T[];
obj_type: string;
log_lvl?: number;
specific_processor?: (obj: T) => Promise<T> | T;
}): Promise<T[]> {
if (!obj_li || obj_li.length === 0) return [];
const processed_obj_li: T[] = [];
for (const original_obj of obj_li) {
let processed_obj = { ...original_obj };
for (const key in processed_obj) {
if (key.endsWith('_random')) {
const newKey = key.slice(0, -7);
(processed_obj as any)[newKey] = processed_obj[key];
}
}
const randomIdKey = `${obj_type}_id_random`;
if (processed_obj[randomIdKey]) {
(processed_obj as any).id = processed_obj[randomIdKey];
}
if (specific_processor) {
processed_obj = await Promise.resolve(specific_processor(processed_obj));
}
processed_obj_li.push(processed_obj as T);
}
return processed_obj_li;
}
export async function process_ae_obj__contact_props({
obj_li,
log_lvl = 0
}: {
obj_li: any[];
log_lvl?: number;
}) {
return _process_generic_props({
obj_li,
obj_type: 'contact',
log_lvl
});
}

3
src/lib/ae_core/core__idb_dexie.ts
View File

@@ -1,4 +1,5 @@
import type { Dexie, Table } from 'dexie';
import { browser } from '$app/environment';
/**
* Extracts the primary key from an object using a prioritized list of possible key names.
@@ -61,6 +62,8 @@ export async function db_save_ae_obj_li__ae_obj<T extends Record<string, any>>({
properties_to_save: (keyof T)[];
log_lvl?: number;
}) {
if (!browser) return [];
if (log_lvl > 0) {
console.log(
`*** db_save_ae_obj_li__ae_obj: Attempting to save ${obj_li.length} objects to table "${table_name}" ***`

6
src/lib/ae_events/ae_events__event.ts
View File

@@ -321,6 +321,7 @@ export async function qry_ae_obj_li__event({
for_obj_type = 'account',
for_obj_id,
qry_str,
qry_person_id = null,
enabled = 'enabled',
hidden = 'not_hidden',
view = 'default',
@@ -333,6 +334,7 @@ export async function qry_ae_obj_li__event({
for_obj_type?: string;
for_obj_id: string;
qry_str?: string;
qry_person_id?: string | null;
enabled?: 'enabled' | 'all' | 'not_enabled';
hidden?: 'hidden' | 'all' | 'not_hidden';
view?: string;
@@ -344,6 +346,10 @@ export async function qry_ae_obj_li__event({
const search_query: any = { and: [] };
if (qry_str) search_query.q = qry_str;
if (qry_person_id) {
search_query.and.push({ field: 'external_person_id', op: 'eq', value: qry_person_id });
}
return await api.search_ae_obj_v3({
api_cfg,
obj_type: 'event',

6
src/lib/ae_posts/ae_posts__post.ts
View File

@@ -322,6 +322,7 @@ export async function qry__post({
api_cfg,
account_id,
qry_str,
qry_person_id = null,
enabled = 'enabled',
hidden = 'not_hidden',
view = 'default',
@@ -338,6 +339,7 @@ export async function qry__post({
api_cfg: any;
account_id: string;
qry_str?: string;
qry_person_id?: string | null;
enabled?: 'enabled' | 'all' | 'not_enabled' | undefined;
hidden?: 'hidden' | 'all' | 'not_hidden' | undefined;
view?: string;
@@ -356,6 +358,10 @@ export async function qry__post({
search_query.q = qry_str;
}
if (qry_person_id) {
search_query.and.push({ field: 'external_person_id', op: 'eq', value: qry_person_id });
}
ae_promises.load__post_obj_li = await api.search_ae_obj_v3({
api_cfg,
obj_type: 'post',

31
src/routes/core/addresses/+page.svelte
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}

159
src/routes/core/addresses/[address_id]/+page.svelte Normal file
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>

31
src/routes/core/contacts/+page.svelte
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}

159
src/routes/core/contacts/[contact_id]/+page.svelte Normal file
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>

12
src/routes/core/people/[person_id]/+page.svelte
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
})
]);

14
src/routes/core/people/[person_id]/+page.ts
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
};
}