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

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

@@ -3,9 +3,15 @@
log_lvl?: number;
lq__journal_obj: 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 { goto } from '$app/navigation';
@@ -30,7 +36,9 @@
Siren,
Tags,
TypeOutline,
X
X,
LoaderCircle,
BookOpenText
} from 'lucide-svelte';
// *** Import Aether specific variables and functions
@@ -75,10 +83,13 @@
// 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((() => {
// Subscribe to the observable
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) => {
if (!item) return false;
@@ -100,15 +111,23 @@
</script>
<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}
<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>
{#if visible_journal_entry_obj_li === null}
<!-- Loading state -->
<div class="flex flex-col items-center justify-center p-10 opacity-50">
<LoaderCircle size="2em" class="animate-spin mb-2" />
<p>Loading visible entries...</p>
</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}
<div
@@ -411,7 +430,10 @@
href="/journals/{journals_journal_entry_obj?.journal_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"
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" />
<span class="hidden md:inline"> View </span>
@@ -527,8 +549,8 @@
)}
</span>
<span
class="journal_entry__updated_on"
class:hidden={!journals_journal_entry_obj.updated_on}
class="journal_entry__updated_on"
>
Last update:
{ae_util.iso_datetime_formatter(
@@ -595,6 +617,9 @@
/>
{/if}
{: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}
</section>