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

refactor(journals): stabilize reactive search and synchronize result counts

Browse Source 
- Refactored 'src/routes/journals/[journal_id]/+page.svelte' to use a singleton 'liveQuery' observable, eliminating the search subscription loop.
- Synchronized entry counts in 'ae_comp__journal_obj_id_view.svelte' with the shared entries observable, ensuring accurate header feedback.
- Cleaned up 'ae_comp__journal_entry_obj_li.svelte' by removing redundant script blocks and hardening visibility filters.
- Restricted the result count badge to Edit Mode for a cleaner standard user interface.
- Improved initial load UX with localized spinners and proper undefined-state guards.
This commit is contained in:
Scott Idem
2026-01-27 16:17:46 -05:00
parent 6055fc3408
commit 4f8c482cf3
4 changed files with 137 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/routes/journals/[journal_id]/+page.svelte
View File

@@ -72,26 +72,63 @@
}) })
); );
// Standardized Reactive Search Pattern (Aether UI V3) // Stable LiveQuery Pattern (Aether UI V3)
$effect(() => { // Shared across ID view and List Wrapper
// 1. Reactive Dependencies let lq__journal_entry_obj_li = $derived.by(() => {
const qry_params = { // 1. Capture dependencies for Svelte tracking
v: $journals_loc.entry.search_version, const ids = search_id_li;
str: $journals_loc.entry.qry__search_text, const journal_id = $lq__journal_obj?.journal_id;
cat: $journals_loc.entry.qry__category_code, const search_text = $journals_loc.entry.qry__search_text;
limit: $journals_loc.entry.qry__limit, const cat_code = $journals_loc.entry.qry__category_code;
enabled: $journals_loc.entry.qry__enabled,
hidden: $journals_loc.entry.qry__hidden, // 2. Return the observable
journal_id: $journals_slct.journal_id, return liveQuery(async () => {
person_id: $ae_loc.person_id // SCENARIO 1: Specific IDs provided (Search Results)
}; if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl) console.log(`Journal Page LQ: bulkGet ${ids.length} IDs`);
const results = await db_journals.journal_entry.bulkGet(ids);
return results.filter(item => item !== undefined);
}
// SCENARIO 2: Fallback to broad search (Default view)
// Only if search is empty and we have a journal context
if (journal_id && !search_text && !cat_code) {
if (log_lvl) console.log(`Journal Page LQ: Fallback search for journal: ${journal_id}`);
return await db_journals.journal_entry
.where('journal_id')
.equals(journal_id)
.reverse()
.sortBy('tmp_sort_1');
}
return [];
});
});
// Standardized Reactive Search Pattern (Aether UI V3)
// 1. Isolate dependencies into a stable derived object
let search_params = $derived({
v: $journals_loc.entry.search_version,
str: ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim(),
cat: $journals_loc.entry.qry__category_code,
limit: $journals_loc.entry.qry__limit,
enabled: $journals_loc.entry.qry__enabled,
hidden: $journals_loc.entry.qry__hidden,
journal_id: $journals_slct.journal_id,
person_id: $ae_loc.person_id,
remote_first: $journals_loc.entry.qry__remote_first
});
// 2. Controlled effect for triggering searches
$effect(() => {
// Track specifically the isolated search params
const params = search_params;
// 2. Debounce Logic
if (search_debounce_timer) clearTimeout(search_debounce_timer); if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => { search_debounce_timer = setTimeout(() => {
// 3. Execution (Untracked to prevent loops) // Execution MUST be untracked to prevent circular triggers
untrack(() => { untrack(() => {
handle_search_refresh(); handle_search_refresh(params);
}); });
}, 250); }, 250);
@@ -100,11 +137,10 @@
}; };
}); });
async function handle_search_refresh() { async function handle_search_refresh(params: any) {
const current_search_id = ++last_search_id; const current_search_id = ++last_search_id;
const journal_id = $journals_slct.journal_id; const journal_id = params.journal_id;
const person_id = $ae_loc.person_id; const remote_first = params.remote_first;
const remote_first = $journals_loc.entry.qry__remote_first;
if (log_lvl) console.log(`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`); if (log_lvl) console.log(`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`);
@@ -114,8 +150,8 @@
search_id_li = []; search_id_li = [];
} }
const qry_str = ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim(); const qry_str = params.str;
const cat_code = $journals_loc.entry.qry__category_code; const cat_code = params.cat;
let local_ids: string[] = []; let local_ids: string[] = [];
@@ -164,9 +200,9 @@
person_id: null, person_id: null,
qry_str: qry_str || null, qry_str: qry_str || null,
qry_category_code: cat_code || null, qry_category_code: cat_code || null,
enabled: $journals_loc.entry.qry__enabled, enabled: params.enabled,
hidden: $journals_loc.entry.qry__hidden, hidden: params.hidden,
limit: $journals_loc.entry.qry__limit, limit: params.limit,
log_lvl: 0 log_lvl: 0
}); });
@@ -198,6 +234,8 @@
if (browser) { if (browser) {
window.parent.postMessage({ journal_id: $journals_slct?.journal_id ?? null }, '*'); window.parent.postMessage({ journal_id: $journals_slct?.journal_id ?? null }, '*');
} }
import { LoaderCircle } from 'lucide-svelte';
</script> </script>
<svelte:head> <svelte:head>
@@ -206,16 +244,23 @@
</title> </title>
</svelte:head> </svelte:head>
{#if $ae_loc.person_id == $lq__journal_obj?.person_id} {#if $lq__journal_obj === undefined}
<div class="flex flex-col items-center justify-center p-20 opacity-50">
<LoaderCircle size="3em" class="animate-spin mb-4" />
<p class="text-xl">Loading Journal...</p>
</div>
{:else if $ae_loc.person_id == $lq__journal_obj?.person_id}
<AeCompJournalObjIdView <AeCompJournalObjIdView
{lq__journal_obj} {lq__journal_obj}
{lq__journal_entry_obj_li}
on_show_export={() => show_export_modal = true} on_show_export={() => show_export_modal = true}
on_show_import={() => show_import_modal = true} on_show_import={() => show_import_modal = true}
/> />
<Journal_entry_obj_li_wrapper <Journal_entry_obj_li_wrapper
{lq__journal_obj} {lq__journal_obj}
{search_id_li} {lq__journal_entry_obj_li}
show_found_header={false}
{log_lvl} {log_lvl}
/> />

57
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -3,9 +3,15 @@
log_lvl?: number; log_lvl?: number;
lq__journal_obj: any; lq__journal_obj: any;
lq__journal_entry_obj_li: any; lq__journal_entry_obj_li: any;
show_found_header?: boolean;
} }
let { log_lvl = $bindable(0), lq__journal_obj, lq__journal_entry_obj_li }: Props = $props(); let {
log_lvl = $bindable(0),
lq__journal_obj,
lq__journal_entry_obj_li,
show_found_header = true
}: Props = $props();
// *** Import Svelte specific // *** Import Svelte specific
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@@ -30,7 +36,9 @@
Siren, Siren,
Tags, Tags,
TypeOutline, TypeOutline,
X X,
LoaderCircle,
BookOpenText
} from 'lucide-svelte'; } from 'lucide-svelte';
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
@@ -75,10 +83,13 @@
// Derived list of visible items (Standardized Search Pattern 2026-01-27) // Derived list of visible items (Standardized Search Pattern 2026-01-27)
// Ensures count matches exactly what is rendered to the user // Ensures count matches exactly what is rendered to the user
let visible_journal_entry_obj_li = $derived((() => { let visible_journal_entry_obj_li = $derived((() => {
// Subscribe to the observable
const list = $lq__journal_entry_obj_li; const list = $lq__journal_entry_obj_li;
if (!list || !Array.isArray(list)) return []; // Return null to signify 'loading' vs [] for 'empty'
if (list === undefined || list === null) return null;
if (!Array.isArray(list)) return [];
const filtered = list.filter((item: any) => { const filtered = list.filter((item: any) => {
if (!item) return false; if (!item) return false;
@@ -100,15 +111,23 @@
</script> </script>
<section class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full"> <section class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full">
{#if visible_journal_entry_obj_li && visible_journal_entry_obj_li.length} {#if visible_journal_entry_obj_li === null}
<div class="w-full max-w-(--breakpoint-lg) mb-2"> <!-- Loading state -->
<h2 class="h4 flex items-center gap-2 px-2"> <div class="flex flex-col items-center justify-center p-10 opacity-50">
<span class="text-sm text-gray-500 font-normal"> Found: </span> <LoaderCircle size="2em" class="animate-spin mb-2" />
<span class="badge preset-tonal-success font-bold text-lg px-3 py-1"> <p>Loading visible entries...</p>
{visible_journal_entry_obj_li.length}<span class="text-gray-400 dark:text-gray-600">&times;</span>
</span>
</h2>
</div> </div>
{:else if visible_journal_entry_obj_li.length > 0}
{#if show_found_header}
<div class="w-full max-w-(--breakpoint-lg) mb-2">
<h2 class="h4 flex items-center gap-2 px-2">
<span class="text-sm text-gray-500 font-normal"> Found: </span>
<span class="badge preset-tonal-success font-bold text-lg px-3 py-1">
{visible_journal_entry_obj_li.length}<span class="text-gray-400 dark:text-gray-600">&times;</span>
</span>
</h2>
</div>
{/if}
{#each visible_journal_entry_obj_li as journals_journal_entry_obj, index} {#each visible_journal_entry_obj_li as journals_journal_entry_obj, index}
<div <div
@@ -411,7 +430,10 @@
href="/journals/{journals_journal_entry_obj?.journal_id ?? href="/journals/{journals_journal_entry_obj?.journal_id ??
$lq__journal_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}" $lq__journal_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
class="btn preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition" class="btn preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
title={`View ID: ${journals_journal_entry_obj?.id}\n${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}\nJournal ID: ${journals_journal_entry_obj?.journal_id}\n`} title={`View ID: ${journals_journal_entry_obj?.id}
${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
Journal ID: ${journals_journal_entry_obj?.journal_id}
`}
> >
<NotebookPen class="mx-1 inline-block" /> <NotebookPen class="mx-1 inline-block" />
<span class="hidden md:inline"> View </span> <span class="hidden md:inline"> View </span>
@@ -527,8 +549,8 @@
)} )}
</span> </span>
<span <span
class="journal_entry__updated_on"
class:hidden={!journals_journal_entry_obj.updated_on} class:hidden={!journals_journal_entry_obj.updated_on}
class="journal_entry__updated_on"
> >
Last update: Last update:
{ae_util.iso_datetime_formatter( {ae_util.iso_datetime_formatter(
@@ -595,6 +617,9 @@
/> />
{/if} {/if}
{:else} {:else}
<p>No &AElig; Journal Entry available to show. Please check the query filters or create a new Entry.</p> <div class="flex flex-col items-center justify-center p-10 opacity-50 text-center">
<BookOpenText size="3em" class="mb-2 opacity-20 mx-auto" />
<p>No Journal Entry available to show. Please check the query filters or create a new Entry.</p>
</div>
{/if} {/if}
</section> </section>

42
src/routes/journals/ae_comp__journal_entry_obj_li_wrapper.svelte
View File

@@ -1,65 +1,37 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
container_class_li?: string | Array<string>; container_class_li?: string | Array<string>;
search_id_li?: Array<string>;
lq__journal_obj: any; lq__journal_obj: any;
lq__journal_entry_obj_li: any;
show_found_header?: boolean;
log_lvl?: number; log_lvl?: number;
} }
let { let {
container_class_li = '', container_class_li = '',
search_id_li = [],
lq__journal_obj, lq__journal_obj,
lq__journal_entry_obj_li,
show_found_header = true,
log_lvl = 0 log_lvl = 0
}: Props = $props(); }: Props = $props();
// *** Import other supporting libraries // *** Import other supporting libraries
import { liveQuery } from 'dexie'; import { LoaderCircle } from 'lucide-svelte';
import { db_journals } from '$lib/ae_journals/db_journals';
import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
// *** Import Aether specific components // *** Import Aether specific components
import Journal_entry_obj_li from './ae_comp__journal_entry_obj_li.svelte'; import Journal_entry_obj_li from './ae_comp__journal_entry_obj_li.svelte';
// Stable LiveQuery Pattern (Aether UI V3)
// Wrapped in $derived to ensure the query refreshes when IDs or filters change
let lq__journal_entry_obj_li = $derived(
liveQuery(async () => {
const ids = search_id_li;
const journal_id = $lq__journal_obj?.journal_id;
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl) console.log(`Journal Wrapper LQ: bulkGet ${ids.length} IDs`);
const results = await db_journals.journal_entry.bulkGet(ids);
return results.filter(item => item !== undefined);
}
// SCENARIO 2: Fallback to broad search (Default view)
// Only if search is empty and we have a journal context
if (journal_id && !$journals_loc.entry.qry__search_text && !$journals_loc.entry.qry__category_code) {
if (log_lvl) console.log(`Journal Wrapper LQ: Fallback search for journal: ${journal_id}`);
return await db_journals.journal_entry
.where('journal_id')
.equals(journal_id)
.reverse()
.sortBy('tmp_sort_1');
}
return [];
})
);
</script> </script>
{#if $lq__journal_entry_obj_li} {#if $lq__journal_entry_obj_li}
<Journal_entry_obj_li <Journal_entry_obj_li
{lq__journal_obj} {lq__journal_obj}
{lq__journal_entry_obj_li} {lq__journal_entry_obj_li}
{show_found_header}
{log_lvl} {log_lvl}
/> />
{:else} {:else}
<div class="flex flex-col items-center justify-center p-10 opacity-50"> <div class="flex flex-col items-center justify-center p-10 opacity-50">
<span class="fas fa-spinner fa-spin fa-2x mb-2"></span> <LoaderCircle size="2em" class="animate-spin mb-2" />
<p>Loading entries...</p> <p>Loading entries...</p>
</div> </div>
{/if} {/if}

29
src/routes/journals/ae_comp__journal_obj_id_view.svelte
View File

@@ -3,7 +3,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
// *** Import other supporting libraries // *** Import other supporting libraries
import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings } from 'lucide-svelte'; import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings, LoaderCircle } from 'lucide-svelte';
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -68,11 +68,11 @@
} }
return; return;
} }
// Use journal.passcode_timeout (assuming it's in minutes, default to 5) // Use journal.passcode_timeout (assuming it's in minutes, default to 5)
const timeout_minutes = $lq__journal_obj?.passcode_timeout ?? 5; const timeout_minutes = $lq__journal_obj?.passcode_timeout ?? 5;
const timeout_ms = 1000 * 60 * timeout_minutes; const timeout_ms = 1000 * 60 * timeout_minutes;
if (log_lvl) { if (log_lvl) {
console.log(`Setting passcode timer for ${timeout_minutes} minutes (${timeout_ms}ms)`); console.log(`Setting passcode timer for ${timeout_minutes} minutes (${timeout_ms}ms)`);
} }
@@ -86,11 +86,11 @@
if (!$journals_sess?.journal_kv[$lq__journal_obj?.id]) { if (!$journals_sess?.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {}; $journals_sess.journal_kv[$lq__journal_obj?.id] = {};
} }
// Reset verification and decryption flags // Reset verification and decryption flags
$journals_sess.journal_kv[$lq__journal_obj?.id].journal_passcode_verified = false; $journals_sess.journal_kv[$lq__journal_obj?.id].journal_passcode_verified = false;
$journals_sess.journal_kv[$lq__journal_obj?.id].journal_passcode_decrypted = false; $journals_sess.journal_kv[$lq__journal_obj?.id].journal_passcode_decrypted = false;
passcode_timer = null; passcode_timer = null;
}, },
timeout_ms timeout_ms
@@ -127,7 +127,7 @@
if ($journals_loc.entry.qry__category_code) { if ($journals_loc.entry.qry__category_code) {
data_kv.category_code = $journals_loc.entry.qry__category_code; data_kv.category_code = $journals_loc.entry.qry__category_code;
} }
try { try {
const results = await journals_func.create_ae_obj__journal_entry({ const results = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -135,7 +135,7 @@
data_kv: data_kv, data_kv: data_kv,
log_lvl: log_lvl log_lvl: log_lvl
}); });
if (results?.journal_entry_id_random) { if (results?.journal_entry_id_random) {
$journals_slct.journal_entry_id = results.journal_entry_id_random; $journals_slct.journal_entry_id = results.journal_entry_id_random;
$journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] = 'current'; $journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] = 'current';
@@ -163,13 +163,18 @@
<h2 class="journal__name h3 text-center"> <h2 class="journal__name h3 text-center">
<BookOpenText class="inline-block text-neutral-800/60" /> <BookOpenText class="inline-block text-neutral-800/60" />
{@html $lq__journal_obj?.name ?? 'Loading...'} {@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
({$lq__journal_entry_obj_li?.length ?? '0'}×) {#if $ae_loc.edit_mode}
<span
class="badge preset-tonal-success font-bold text-lg px-2 ml-2"
title="Entries matching current filters"
>
{$lq__journal_entry_obj_li?.length ?? '0'}<span class="text-xs opacity-50 ml-0.5">&times;</span>
</span>
{/if} {/if}
{#await $journals_prom.load__journal_entry_obj_li} {#await $journals_prom.load__journal_entry_obj_li}
<span class="fas fa-spinner fa-spin"></span> <LoaderCircle size="1em" class="inline-block animate-spin ml-1 text-primary-500" />
{:then}
<!-- done -->
{/await} {/await}
</h2> </h2>