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

refactor(journals): standardize high-performance reactive search and stabilize results stream

Browse Source 
- 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
2026-01-27 15:20:17 -05:00
parent 07e13ea5f2
commit 6055fc3408
7 changed files with 367 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,36 +10,13 @@
// *** Import Svelte specific
import { browser } from '$app/environment';
// import { goto } from '$app/navigation';
import { untrack } from 'svelte';
// *** Import other supporting libraries
// import {
// ArrowDown01, ArrowDown10, ArrowDownUp,
// BetweenVerticalEnd, BetweenVerticalStart,
// BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
// Check, Copy,
// Expand, Eye, EyeOff,
// Flag, FlagOff, FilePlus, Fingerprint,
// Globe,
// Library,
// MessageSquareWarning, Minus,
// Notebook,
// Pencil, Plus,
// RemoveFormatting,
// SquareLibrary,
// Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
// Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
// X
// } from '@lucide/svelte';
// import * as icons from '@lucide/svelte';
// import { Modal } from 'flowbite-svelte';
import { liveQuery } from 'dexie';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import {
ae_snip,
ae_loc,
@@ -59,361 +36,201 @@
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// import Journal_obj_id_edit from './ae_journals_comp__journal_obj_id_edit.svelte';
import AeCompJournalObjIdView from './../ae_comp__journal_obj_id_view.svelte';
// import Journal_page_menu from './session_page_menu.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Journal_entry_obj_li from './../ae_comp__journal_entry_obj_li.svelte';
// import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
import Journal_entry_obj_li_wrapper from './../ae_comp__journal_entry_obj_li_wrapper.svelte';
import Journal_obj_id_edit from '../ae_comp__journal_obj_id_edit.svelte';
import AeCompModalJournalExport from '../ae_comp__modal_journal_export.svelte';
import AeCompModalJournalImport from '../ae_comp__modal_journal_import.svelte';
import { FileDown } from 'lucide-svelte';
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
// Variables
// *** Quickly pull out data from parent(s)
let ae_acct = data[$slct.account_id];
let show_export_modal = $state(false);
let show_import_modal = $state(false);
let search_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
function handle_import_complete() {
// Trigger a refresh of the journal entry list
$journals_trig.journal_entry_li = true;
if ($journals_loc.entry.search_version === undefined) $journals_loc.entry.search_version = 0;
$journals_loc.entry.search_version++;
}
$effect(() => {
if (log_lvl > 1) {
console.log(`ae_acct = `, ae_acct);
}
});
$inspect(log_lvl, `log_lvl = ${log_lvl}`);
$inspect($journals_slct.journal_id, `$journals_slct.journal_id = ${$journals_slct.journal_id}`);
$inspect(
$journals_slct.journal_entry_id,
`$journals_slct.journal_entry_id = ${$journals_slct.journal_entry_id}`
);
// $inspect($journals_slct.journal_entry_id).with((type, val) => {
// if (type === 'update') {
// // debugger; // or `console.trace`, or whatever you want
// console.log('$journals_slct.journal_entry_id updated:', val);
// }
// });
// For some reason data.params.journal_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
// $journals_slct.journal_id = ae_acct.slct.journal_id;
// $journals_slct.journal_obj = ae_acct.slct.journal_obj;
$journals_slct.journal_id = ae_acct.slct.journal_id;
$journals_sess.entry_li = null;
$journals_slct.journal_entry_id = null;
let lq__journal_obj = $derived(
liveQuery(async () => {
let results = await db_journals.journal.get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
// Check if results are different than the current session version stored under $journals_slct
let results = await db_journals.journal.get($journals_slct?.journal_id ?? '');
if ($journals_slct.journal_obj && results) {
if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
$journals_slct.journal_obj = { ...results };
}
}
return results;
})
);
// Standardized Reactive Search Pattern (Aether UI V3)
$effect(() => {
if (log_lvl) {
console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
console.log(`lq__journal_obj: results = `, lq__journal_obj);
if ($journals_slct.journal_obj && lq__journal_obj) {
if (
JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(lq__journal_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`
);
}
}
}
});
// 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
};
// Trigger load of entries when the journal_id changes
$effect(() => {
if ($journals_slct.journal_id) {
// 2. Debounce Logic
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
// 3. Execution (Untracked to prevent loops)
untrack(() => {
if (log_lvl) console.log(`Triggering load for journal_id: ${$journals_slct.journal_id}`);
$journals_trig.journal_entry_li = true;
handle_search_refresh();
});
}
}, 250);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
let lq__journal_entry_obj_li = $derived(
liveQuery(async () => {
let results: any[] = [];
async function handle_search_refresh() {
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;
if (log_lvl) console.log(`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`);
$journals_sess.entry.qry__status = 'loading';
if (remote_first) {
search_id_li = [];
}
const qry_str = ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim();
const cat_code = $journals_loc.entry.qry__category_code;
// If we have a specific list in the session (e.g. from a search), use it.
if ($journals_sess?.entry_li !== null && $journals_sess?.entry_li !== undefined) {
if ($journals_sess.entry_li.length === 0) {
if (log_lvl) {
console.log(`LQ - Using empty $journals_sess.entry_li to get journal entries.`);
let local_ids: string[] = [];
// 1. FAST PATH: Local IDB Search
if (!remote_first) {
try {
if (journal_id) {
let query = db_journals.journal_entry.where('journal_id').equals(journal_id);
let local_results = await query
.filter(entry => {
if (cat_code && entry.category_code !== cat_code) return false;
if (qry_str) {
const name = (entry.name ?? '').toLowerCase();
const content = (entry.content ?? '').toLowerCase();
return name.includes(qry_str) || content.includes(qry_str);
}
return true;
})
.toArray();
local_results.sort((a, b) => {
const dateA = a.updated_on ? new Date(a.updated_on).getTime() : 0;
const dateB = b.updated_on ? new Date(b.updated_on).getTime() : 0;
return dateB - dateA;
});
local_ids = local_results.map(e => e.id || e.journal_entry_id_random).filter(Boolean);
if (current_search_id === last_search_id) {
if (log_lvl) console.log(`[Journal Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`);
search_id_li = local_ids;
if (local_ids.length > 0) $journals_sess.entry.qry__status = 'done';
}
results = [];
} else {
if (log_lvl) {
console.log(`LQ - Using $journals_sess.entry_li to get journal entries.`);
}
let journal_entry_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
for (let i = 0; i < $journals_sess?.entry_li.length; i++) {
let journal_entry_obj = $journals_sess?.entry_li[i];
// Robust ID extraction: try id, then journal_entry_id_random, then journal_entry_id
let target_id = journal_entry_obj.id || journal_entry_obj.journal_entry_id_random || journal_entry_obj.journal_entry_id;
if (target_id) {
journal_entry_id_random_li.push(target_id);
}
}
results = await db_journals.journal_entry.bulkGet(journal_entry_id_random_li);
// Filter out any undefined results (e.g. if ID not found in local DB yet)
results = results.filter(item => item !== undefined);
}
} else {
if (log_lvl) {
console.log(`LQ - No $journals_sess.entry_li set. Querying local DB for journal entries for journal_id: ${$journals_slct?.journal_id}`);
}
// Otherwise, query the local database based on the current journal context and filters.
let collection = db_journals.journal_entry
.where('journal_id')
.equals($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
// Apply Category Filter
if (
$journals_loc.entry.qry__category_code &&
$journals_loc.entry.qry__category_code.length > 0
) {
collection = collection.and(
(entry) => entry.category_code === $journals_loc.entry.qry__category_code
);
}
// Apply Enabled Filter
if ($journals_loc.entry.qry__enabled === 'enabled') {
collection = collection.and((entry) => entry.enable === true || entry.enable === null || entry.enable === undefined);
} else if ($journals_loc.entry.qry__enabled === 'not_enabled') {
collection = collection.and((entry) => entry.enable === false);
}
// Apply Hidden Filter
if ($journals_loc.entry.qry__hidden === 'hidden') {
collection = collection.and((entry) => entry.hide === true);
} else if ($journals_loc.entry.qry__hidden === 'not_hidden') {
collection = collection.and((entry) => entry.hide === false || entry.hide === null || entry.hide === undefined);
}
// Apply Sorting
if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
results = await collection.reverse().sortBy('updated_on');
} else {
results = await collection.reverse().sortBy('tmp_sort_1');
}
// Apply Limit (after sorting)
if ($journals_loc.entry.qry__limit && $journals_loc.entry.qry__limit > 0) {
results = results.slice(0, $journals_loc.entry.qry__limit);
}
} catch (e) {
if (log_lvl) console.warn('Journal Fast Path failed.', e);
}
}
// Check if results are different than the current session version stored under $journals_slct
if (
$journals_slct.journal_entry_obj_li &&
JSON.stringify($journals_slct.journal_entry_obj_li) !== JSON.stringify(results)
) {
$journals_slct.journal_entry_obj_li = [...results];
// 2. REVALIDATE: API Request
try {
const results = await journals_func.qry__journal_entry({
api_cfg: $ae_api,
journal_id: journal_id,
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,
log_lvl: 0
});
if (current_search_id === last_search_id) {
const api_results = results || [];
const api_ids = api_results.map((e: any) => e.id || e.journal_entry_id_random).filter(Boolean);
if (api_ids.length === 0 && local_ids.length > 0 && !remote_first && !qry_str) {
$journals_sess.entry.qry__status = 'done';
return;
}
$journals_sess.entry_li = api_results;
search_id_li = api_ids;
$journals_sess.entry.qry__status = 'done';
if (log_lvl) console.log(`[Journal Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`);
}
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(`LQ - $lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
console.log(
`LQ - $journals_loc.entry.qry__category_code = `,
$journals_loc.entry.qry__category_code
);
if ($journals_sess?.entry_li !== null) {
console.log(`LQ - Using $journals_sess.entry_li to get journal entries.`);
} else if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
console.log(
`LQ - Using DESC sort for Journal Entry list journal_id: ${$journals_slct?.journal_id}`
);
} else if (
$journals_loc.entry.qry__category_code &&
$journals_loc.entry.qry__category_code.length > 0
) {
console.log(`LQ - Using category filter: ${$journals_loc.entry.qry__category_code}`);
} else {
console.log(
`LQ - Using default sort for Journal Entry list journal_id: ${$journals_slct?.journal_id}`
);
}
if (
$journals_slct.journal_entry_obj_li &&
JSON.stringify($journals_slct.journal_entry_obj_li) !==
JSON.stringify(lq__journal_entry_obj_li)
) {
console.log(
`Session slct li stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_entry_obj_li
);
} else {
if (log_lvl > 1) {
console.log(
`Session slct li stored version has not changed for ID = ${$journals_slct.journal_id}`
);
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Journal revalidation failed:', error);
$journals_sess.entry.qry__status = 'error';
if (search_id_li.length === 0 && local_ids.length > 0) {
search_id_li = local_ids;
}
}
}
});
// Trigger doing a basic load of journal entries
// NOTE: Categories are (currently) filtered at the CSS style level.
$effect(() => {
if ($journals_trig.journal_entry_li) {
$journals_trig.journal_entry_li = false;
// if ($journals_trig?.journal_entry_li.length > 0) {
// $journals_sess.entry_li = $journals_trig.journal_entry_li;
// console.log('TEST TEST TEST');
// return ;
// }
if (log_lvl) {
console.log(`Triggered: $journals_trig.journal_entry_li`);
}
if ($journals_loc.entry.qry__enabled !== 'all' || $journals_loc.entry.qry__hidden !== 'all') {
if (log_lvl) {
console.log(
`Not set to all for enabled or hidden. Clearing all journal entries to be safe.`
);
console.log(`$journals_loc.entry.qry__enabled = ${$journals_loc.entry.qry__enabled}`);
console.log(`$journals_loc.entry.qry__hidden = ${$journals_loc.entry.qry__hidden}`);
}
let results = db_journals.journal_entry.clear();
if (log_lvl) {
console.log(`Cleared all journal entries in the database.`, results);
}
}
$journals_prom.load__journal_entry_obj_li = journals_func.load_ae_obj_li__journal_entry(
{
api_cfg: $ae_api,
for_obj_type: 'journal',
for_obj_id: $journals_slct.journal_id,
enabled: $journals_loc.entry.qry__enabled,
hidden: $journals_loc.entry.qry__hidden,
limit: $journals_loc.entry.qry__limit,
order_by_li: $journals_loc.entry.qry__order_by_li,
try_cache: true,
log_lvl: log_lvl
}
);
// Should we reset the entry list???
// $journals_sess.entry_li = null;
}
});
}
if (browser) {
let message = { journal_id: $journals_slct?.journal_id ?? null };
window.parent.postMessage(message, '*');
window.parent.postMessage({ journal_id: $journals_slct?.journal_id ?? null }, '*');
}
</script>
<svelte:head>
<title>
Æ Journals:
{$lq__journal_obj?.name
? ae_util.shorten_string({
string: $lq__journal_obj?.name,
max_length: 20,
begin_length: 10,
end_length: 4
})
: ''}
- {$ae_loc?.title}
Æ Journals: {$lq__journal_obj?.name ?? ''} - {$ae_loc?.title}
</title>
</svelte:head>
{#if $ae_loc.person_id == $lq__journal_obj?.person_id}
<!-- Svelte Page for a Journal ID page -->
<!-- <section
class="
ae_journals__journal
container h-full mx-auto
flex flex-col gap-1
py-1 px-2 pb-16
items-center
min-w-full
max-w-max
"
> -->
<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 {lq__journal_obj} {lq__journal_entry_obj_li} />
<Journal_entry_obj_li_wrapper
{lq__journal_obj}
{search_id_li}
{log_lvl}
/>
<!-- {#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li?.length}
<Journal_entry_obj_li {lq__journal_obj} {lq__journal_entry_obj_li} />
{:else}
<section class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center">
<p>No Journal Entry available to show. Please check the query filters or create a new Entry.</p>
</section>
{/if} -->
<!-- </section> -->
<!-- Modal: Journal edit ID -->
<!-- tmp__journal_obj={$journals_slct.journal_obj} -->
<Journal_obj_id_edit
{log_lvl}
{lq__journal_obj}
show={$journals_sess.show__modal_edit__journal_obj}
/>
<!-- Modal: Bulk Export -->
<AeCompModalJournalExport
bind:open={show_export_modal}
entries={$lq__journal_entry_obj_li ?? []}
journal={$lq__journal_obj}
on_close={() => show_export_modal = false}
/>
<!-- Modal: Bulk Import -->
<AeCompModalJournalImport
bind:open={show_import_modal}
on_close={() => show_import_modal = false}