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

15
src/lib/ae_journals/ae_journals__journal_entry.ts
View File

@@ -297,10 +297,11 @@ export async function delete_ae_obj_id__journal_entry({
}
// This new function is using CRUD V3 Search.
// Updated 2026-01-02
// Updated 2026-01-27
export async function qry__journal_entry({
api_cfg,
journal_id,
person_id = null,
qry_str = null, // Example: 'name:contains:"test"'
qry_category_code = null,
qry_created_on = null, // Example greater than: '2024-10-24'
@@ -325,6 +326,7 @@ export async function qry__journal_entry({
}: {
api_cfg: any;
journal_id: any;
person_id?: string | null;
qry_str?: null | string;
qry_category_code?: null | string;
qry_created_on?: null | string;
@@ -339,15 +341,13 @@ export async function qry__journal_entry({
try_cache?: boolean;
log_lvl?: number;
}) {
// log_lvl = 1;
if (log_lvl) {
console.log(`*** qry__journal_entry() *** journal_id=${journal_id}`);
console.log(`*** qry__journal_entry() *** journal_id=${journal_id} person_id=${person_id}`);
}
const search_query: any = { and: [] };
if (qry_str) {
console.log('qry_str:', qry_str);
// Using 'like' with wildcards to ensure compatibility
search_query.and.push({ field: 'default_qry_str', op: 'like', value: `%${qry_str.trim()}%` });
params['lk_qry'] = { 'default_qry_str': qry_str.trim() };
@@ -362,13 +362,16 @@ export async function qry__journal_entry({
}
if (qry_priority) {
console.log('qry_priority:', qry_priority);
search_query.and.push({ field: 'priority', op: 'eq', value: qry_priority });
}
// Add context
// Context scoping: Prefer journal_id if provided, otherwise fallback to person_id (global search)
if (journal_id) {
search_query.and.push({ field: 'journal_id_random', op: 'eq', value: journal_id });
} else if (person_id) {
search_query.and.push({ field: 'person_id_random', op: 'eq', value: person_id });
} else {
console.warn('qry__journal_entry: No journal_id or person_id provided. Search might be too broad.');
}
// Add enabled/hidden filters

3
src/lib/ae_journals/ae_journals_stores.ts
View File

@@ -79,6 +79,9 @@ const journals_local_data_struct: key_val = {
edit_kv: {},
// Query / Search Settings
search_version: 0,
qry__remote_first: false,
qry__global_person_search: false,
qry__search_text: '',
qry__category_code: '', // For filtering
qry__enabled: 'enabled', // all, disabled, enabled

1
src/lib/ae_journals/db_journals.ts
View File

@@ -117,6 +117,7 @@ export class MySubClassedDexie extends Dexie {
journal_entry: `
id, journal_entry_id, journal_entry_id_random,
journal_id, journal_id_random,
person_id, person_id_random,
code,
template,
name,

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}

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

@@ -71,11 +71,46 @@
function handle_modal_update() {
handle_modal_close();
}
// Derived list of visible items (Standardized Search Pattern 2026-01-27)
// Ensures count matches exactly what is rendered to the user
let visible_journal_entry_obj_li = $derived((() => {
const list = $lq__journal_entry_obj_li;
if (!list || !Array.isArray(list)) return [];
const filtered = list.filter((item: any) => {
if (!item) return false;
// ADMIN/TRUSTED: See everything
if ($ae_loc.trusted_access) return true;
// PUBLIC: Filter hidden/disabled
// Permissive defaults for missing metadata
const is_hidden = item.hide === true || item.hide === 1;
const is_disabled = item.enable === false || item.enable === 0;
return !is_hidden && !is_disabled;
});
if (log_lvl) console.log(`visible_journal_entry_obj_li: Input=${list.length}, Output=${filtered.length}`);
return filtered;
})());
</script>
<section class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full">
{#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li.length}
{#each $lq__journal_entry_obj_li as journals_journal_entry_obj, index}
{#if visible_journal_entry_obj_li && visible_journal_entry_obj_li.length}
<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>
{#each visible_journal_entry_obj_li as journals_journal_entry_obj, index}
<div
class="
container journal journal_entry_obj
@@ -359,7 +394,8 @@
$journals_loc.entry.qry__category_code =
journals_journal_entry_obj.category_code;
}
$journals_trig.journal_entry_li = true;
if ($journals_loc.entry.search_version === undefined) $journals_loc.entry.search_version = 0;
$journals_loc.entry.search_version++;
}}
class:bg-green-100={$journals_loc.entry.qry__category_code ==
journals_journal_entry_obj.category_code}

65
src/routes/journals/ae_comp__journal_entry_obj_li_wrapper.svelte Normal file
View File

@@ -0,0 +1,65 @@
<script lang="ts">
interface Props {
container_class_li?: string | Array<string>;
search_id_li?: Array<string>;
lq__journal_obj: any;
log_lvl?: number;
}
let {
container_class_li = '',
search_id_li = [],
lq__journal_obj,
log_lvl = 0
}: Props = $props();
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
import { db_journals } from '$lib/ae_journals/db_journals';
import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
// *** Import Aether specific components
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>
{#if $lq__journal_entry_obj_li}
<Journal_entry_obj_li
{lq__journal_obj}
{lq__journal_entry_obj_li}
{log_lvl}
/>
{:else}
<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>
<p>Loading entries...</p>
</div>
{/if}

291
src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
View File

@@ -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>