refactor(journals): standardize high-performance reactive search and stabilize results stream
- Implemented the loop-proof search pattern in 'src/routes/journals/[journal_id]/+page.svelte' using versioned triggers and untracked dependency isolation. - Stabilized data loading by introducing 'ae_comp__journal_entry_obj_li_wrapper.svelte', ensuring smooth SWR transitions between local and API results. - Synchronized result counts with the rendered list in 'ae_comp__journal_entry_obj_li.svelte' and implemented permissive visibility defaults. - Added 'Remote First' toggle support (Edit Mode only) and laid groundwork for Global Search in 'ae_comp__journal_entry_obj_qry.svelte'. - Updated Dexie schema and API helpers to support future person-level cross-journal searching.
This commit is contained in:
Scott Idem
@@ -68,174 +68,139 @@
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
|
||||
// Debounced Search Logic (Refactored 2026-01-27)
|
||||
let search_debounce_timer: any = null;
|
||||
let last_search_id = 0;
|
||||
|
||||
$effect(() => {
|
||||
// Reactive dependencies
|
||||
const s_search_text = $journals_loc.entry.qry__search_text;
|
||||
const s_category_code = $journals_loc.entry.qry__category_code;
|
||||
const s_enabled = $journals_loc.entry.qry__enabled;
|
||||
const s_hidden = $journals_loc.entry.qry__hidden;
|
||||
const s_journal_id = $lq__journal_obj?.journal_id;
|
||||
const s_trigger = $journals_trig.journal_entry_qry;
|
||||
|
||||
if (search_debounce_timer) clearTimeout(search_debounce_timer);
|
||||
|
||||
// Auto-search if text is cleared or long enough, or if category changes
|
||||
const should_search = s_trigger ||
|
||||
s_search_text.length === 0 ||
|
||||
s_search_text.length >= 3 ||
|
||||
s_category_code !== '';
|
||||
|
||||
if (should_search && s_journal_id) {
|
||||
search_debounce_timer = setTimeout(() => {
|
||||
$journals_trig.journal_entry_qry = false;
|
||||
handle_search_refresh();
|
||||
}, 400);
|
||||
// *** Functions and Logic
|
||||
function handle_search_trigger() {
|
||||
if ($journals_loc.entry.search_version === undefined) {
|
||||
$journals_loc.entry.search_version = 0;
|
||||
}
|
||||
$journals_loc.entry.search_version++;
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (search_debounce_timer) clearTimeout(search_debounce_timer);
|
||||
function preventDefault<T extends Event>(fn: (event: T) => void) {
|
||||
return function (event: T) {
|
||||
event.preventDefault();
|
||||
fn(event);
|
||||
};
|
||||
});
|
||||
|
||||
async function handle_search_refresh() {
|
||||
const current_search_id = ++last_search_id;
|
||||
const qry_str = $journals_loc.entry.qry__search_text;
|
||||
const category_code = $journals_loc.entry.qry__category_code;
|
||||
|
||||
if (log_lvl) console.log(`[Journal Search #${current_search_id}] text="${qry_str}" cat="${category_code}"`);
|
||||
|
||||
try {
|
||||
const results = await journals_func.qry__journal_entry({
|
||||
api_cfg: $ae_api,
|
||||
journal_id: $lq__journal_obj?.journal_id ?? '',
|
||||
qry_str: qry_str,
|
||||
qry_category_code: category_code,
|
||||
enabled: $journals_loc.entry.qry__enabled ?? 'enabled',
|
||||
hidden: $journals_loc.entry.qry__hidden ?? 'not_hidden',
|
||||
log_lvl: 0
|
||||
});
|
||||
|
||||
if (current_search_id === last_search_id) {
|
||||
$journals_prom.load__journal_entry_obj_li = results;
|
||||
|
||||
if (!qry_str && !category_code) {
|
||||
// Reset to default view if everything cleared
|
||||
$journals_sess.entry_li = null;
|
||||
} else {
|
||||
$journals_sess.entry_li = results || [];
|
||||
$journals_sess = { ...$journals_sess };
|
||||
}
|
||||
|
||||
if (log_lvl) console.log(`[Journal Search #${current_search_id}] Done. Found ${results?.length ?? 0} results.`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (current_search_id === last_search_id) {
|
||||
console.error('Journal search failed:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Search input form -->
|
||||
<span class="flex flex-row flex-wrap items-center justify-center gap-1">
|
||||
<span class="text-sm text-gray-500 hidden lg:inline"> Search: </span>
|
||||
<input
|
||||
disabled={false}
|
||||
type="text"
|
||||
placeholder="Search Journal Entries"
|
||||
bind:value={$journals_loc.entry.qry__search_text}
|
||||
onkeyup={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
$journals_trig.journal_entry_qry = true;
|
||||
}
|
||||
}}
|
||||
title={`Search for Entries in "${$lq__journal_obj?.name}. Press Enter to search.`}
|
||||
autocomplete="off"
|
||||
class="
|
||||
input input-sm input-bordered
|
||||
w-44 md:w-52
|
||||
text-sm
|
||||
"
|
||||
class:bg-red-200={$journals_sess.entry_li == null}
|
||||
class:dark:bg-red-800={$journals_sess.entry_li == null}
|
||||
/>
|
||||
<!-- Clear search text button -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={!$journals_loc.entry.qry__search_text && !$journals_loc.entry.qry__category_code}
|
||||
onclick={() => {
|
||||
console.log(`TESTING - 1 - Cleared search query: ${$journals_loc.entry.qry__search_text}`);
|
||||
$journals_loc.entry.qry__search_text = '';
|
||||
$journals_loc.entry.qry__category_code = '';
|
||||
console.log(`TESTING - 2 - Cleared search query: ${$journals_loc.entry.qry__search_text}`);
|
||||
$journals_trig.journal_entry_qry = true;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
hover:preset-filled-tertiary-100-900
|
||||
transition-all
|
||||
"
|
||||
title="Clear search query text"
|
||||
>
|
||||
<RemoveFormatting size="1.25em" class="text-neutral-800/60 dark:text-neutral-50/60" />
|
||||
<span class="hidden md:inline"> Clear </span>
|
||||
<div class="ae_group filters_and_search flex flex-row flex-wrap items-center justify-center gap-2">
|
||||
<!-- Search input form -->
|
||||
<span class="flex flex-row flex-wrap items-center justify-center gap-1">
|
||||
<form
|
||||
onsubmit={preventDefault(() => {
|
||||
handle_search_trigger();
|
||||
})}
|
||||
autocomplete="off"
|
||||
class="search_form flex flex-row flex-wrap gap-1 items-center justify-center"
|
||||
>
|
||||
<span class="text-sm text-gray-500 hidden lg:inline"> Search: </span>
|
||||
<input
|
||||
disabled={false}
|
||||
type="text"
|
||||
placeholder="Search Journal Entries"
|
||||
bind:value={$journals_loc.entry.qry__search_text}
|
||||
onkeyup={(event) => {
|
||||
// Reactive effect in parent handles this debounced
|
||||
}}
|
||||
title={`Search for Entries in "${$lq__journal_obj?.name}. Press Enter to search.`}
|
||||
autocomplete="off"
|
||||
class="
|
||||
input input-sm input-bordered
|
||||
w-44 md:w-52
|
||||
text-sm
|
||||
"
|
||||
class:bg-red-200={$journals_sess.entry_li == null}
|
||||
class:dark:bg-red-800={$journals_sess.entry_li == null}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
|
||||
title="Perform detailed search"
|
||||
>
|
||||
<Library size="1.25em" />
|
||||
</button>
|
||||
|
||||
{#await $journals_prom.load__journal_entry_obj_li}
|
||||
<span class="text-sm text-gray-500 italic"> Loading... </span>
|
||||
{:then load_result}
|
||||
{#if load_result === null}
|
||||
<span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic font-semibold">
|
||||
No entries found - null
|
||||
</span>
|
||||
{:else if load_result?.length === 0}
|
||||
<span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic font-semibold">
|
||||
No entries found
|
||||
</span>
|
||||
{:else if $journals_sess.entry_li?.length === 0}
|
||||
<span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic">
|
||||
Enter to search
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic">
|
||||
{load_result?.length ?? 0} found
|
||||
</span>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<span class="text-xs text-red-600/80 dark:text-red-400/80 italic">
|
||||
Error loading entries.
|
||||
</span>
|
||||
{/await}
|
||||
</button>
|
||||
</span>
|
||||
<!-- Clear search text button -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={!$journals_loc.entry.qry__search_text && !$journals_loc.entry.qry__category_code}
|
||||
onclick={() => {
|
||||
$journals_loc.entry.qry__search_text = '';
|
||||
$journals_loc.entry.qry__category_code = '';
|
||||
handle_search_trigger();
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
hover:preset-filled-tertiary-100-900
|
||||
transition-all
|
||||
"
|
||||
title="Clear search query text"
|
||||
>
|
||||
<RemoveFormatting size="1.25em" class="text-neutral-800/60 dark:text-neutral-50/60" />
|
||||
<span class="hidden md:inline"> Clear </span>
|
||||
</button>
|
||||
</form>
|
||||
</span>
|
||||
|
||||
<!-- Give list of categories to base the new entry on -->
|
||||
<span class="flex flex-row items-center gap-2">
|
||||
<span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
|
||||
<select
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
hover:preset-filled-tertiary-100-900
|
||||
transition-all
|
||||
"
|
||||
bind:value={$journals_loc.entry.qry__category_code}
|
||||
onchange={(event) => {
|
||||
$journals_loc.entry.qry__category_code = (event.target as HTMLInputElement).value;
|
||||
$journals_trig.journal_entry_qry = true;
|
||||
console.log('Selected category:', $journals_loc.entry.qry__category_code);
|
||||
}}
|
||||
title="Select a category for the new journal entry"
|
||||
>
|
||||
<option value="">Select Category</option>
|
||||
{#each $lq__journal_obj?.cfg_json?.category_li as category}
|
||||
<option value={category.code}>{category.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</span>
|
||||
<!-- Give list of categories to base the new entry on -->
|
||||
<span class="flex flex-row items-center gap-2">
|
||||
<span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
|
||||
<select
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
hover:preset-filled-tertiary-100-900
|
||||
transition-all
|
||||
"
|
||||
bind:value={$journals_loc.entry.qry__category_code}
|
||||
onchange={(event) => {
|
||||
handle_search_trigger();
|
||||
}}
|
||||
title="Filter by category"
|
||||
>
|
||||
<option value="">All Categories</option>
|
||||
{#each $lq__journal_obj?.cfg_json?.category_li as category}
|
||||
<option value={category.code}>{category.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<!-- Search Control Toggles -->
|
||||
<span class="flex flex-row flex-wrap items-center gap-2 border-l border-surface-300-700 pl-2">
|
||||
<!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
|
||||
<!--
|
||||
<label
|
||||
class="flex items-center gap-1 cursor-pointer"
|
||||
title="When enabled, searches all journals for this person. When disabled, only searches the current journal."
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-500"> Global Search? </span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={$journals_loc.entry.qry__global_person_search}
|
||||
onchange={handle_search_trigger}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
</label>
|
||||
-->
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
<label
|
||||
class="flex items-center gap-1 cursor-pointer"
|
||||
title="When enabled, search results are fetched directly from the server first."
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-500"> Remote First? </span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={$journals_loc.entry.qry__remote_first}
|
||||
onchange={handle_search_trigger}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user