refactor(journals): stabilize reactive search and synchronize result counts
- 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:
@@ -72,26 +72,63 @@
|
||||
})
|
||||
);
|
||||
|
||||
// Standardized Reactive Search Pattern (Aether UI V3)
|
||||
$effect(() => {
|
||||
// 1. Reactive Dependencies
|
||||
const qry_params = {
|
||||
v: $journals_loc.entry.search_version,
|
||||
str: $journals_loc.entry.qry__search_text,
|
||||
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
|
||||
};
|
||||
// Stable LiveQuery Pattern (Aether UI V3)
|
||||
// Shared across ID view and List Wrapper
|
||||
let lq__journal_entry_obj_li = $derived.by(() => {
|
||||
// 1. Capture dependencies for Svelte tracking
|
||||
const ids = search_id_li;
|
||||
const journal_id = $lq__journal_obj?.journal_id;
|
||||
const search_text = $journals_loc.entry.qry__search_text;
|
||||
const cat_code = $journals_loc.entry.qry__category_code;
|
||||
|
||||
// 2. Return the observable
|
||||
return liveQuery(async () => {
|
||||
// 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);
|
||||
search_debounce_timer = setTimeout(() => {
|
||||
// 3. Execution (Untracked to prevent loops)
|
||||
// Execution MUST be untracked to prevent circular triggers
|
||||
untrack(() => {
|
||||
handle_search_refresh();
|
||||
handle_search_refresh(params);
|
||||
});
|
||||
}, 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 journal_id = $journals_slct.journal_id;
|
||||
const person_id = $ae_loc.person_id;
|
||||
const remote_first = $journals_loc.entry.qry__remote_first;
|
||||
const journal_id = params.journal_id;
|
||||
const remote_first = params.remote_first;
|
||||
|
||||
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 = [];
|
||||
}
|
||||
|
||||
const qry_str = ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim();
|
||||
const cat_code = $journals_loc.entry.qry__category_code;
|
||||
const qry_str = params.str;
|
||||
const cat_code = params.cat;
|
||||
|
||||
let local_ids: string[] = [];
|
||||
|
||||
@@ -164,9 +200,9 @@
|
||||
person_id: null,
|
||||
qry_str: qry_str || null,
|
||||
qry_category_code: cat_code || null,
|
||||
enabled: $journals_loc.entry.qry__enabled,
|
||||
hidden: $journals_loc.entry.qry__hidden,
|
||||
limit: $journals_loc.entry.qry__limit,
|
||||
enabled: params.enabled,
|
||||
hidden: params.hidden,
|
||||
limit: params.limit,
|
||||
log_lvl: 0
|
||||
});
|
||||
|
||||
@@ -198,6 +234,8 @@
|
||||
if (browser) {
|
||||
window.parent.postMessage({ journal_id: $journals_slct?.journal_id ?? null }, '*');
|
||||
}
|
||||
|
||||
import { LoaderCircle } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -206,16 +244,23 @@
|
||||
</title>
|
||||
</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
|
||||
{lq__journal_obj}
|
||||
{lq__journal_entry_obj_li}
|
||||
on_show_export={() => show_export_modal = true}
|
||||
on_show_import={() => show_import_modal = true}
|
||||
/>
|
||||
|
||||
<Journal_entry_obj_li_wrapper
|
||||
{lq__journal_obj}
|
||||
{search_id_li}
|
||||
{lq__journal_entry_obj_li}
|
||||
show_found_header={false}
|
||||
{log_lvl}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user