Work on making the Entry search query work correctly. Moved things around. Hopefully easier to read and understand.

src/routes/journals/[journal_id]/+page.svelte

@@ -2,14 +2,38 @@
 /** @type {import('./$types').PageData} */
 let log_lvl: number = $state(1);
 
+interface Props {
+    data: any;
+}
+
+let { data }: Props = $props();
+
 // *** Import Svelte specific
 import { browser } from '$app/environment';
 // import { goto } from '$app/navigation';
 
+
 // *** 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 { BookHeart, FilePlus } from '@lucide/svelte';
+// import { Modal } from 'flowbite-svelte';
-import { Modal } from 'flowbite-svelte';
 import { liveQuery } from "dexie";
 
 // *** Import Aether specific variables and functions
@@ -27,13 +51,9 @@ import Journal_view from './../ae_comp__journal_obj_id_view.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_id_edit from './ae_journals_comp__journal_entry_obj_id_edit.svelte';
+// import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
+import Journal_obj_id_edit from '../ae_comp__journal_obj_id_edit.svelte';
 
-interface Props {
-    data: any;
-}
-
-let { data }: Props = $props();
 
 // let ae_promises: key_val = {};
 // let ae_tmp: key_val = {};
@@ -59,9 +79,12 @@ $inspect($journals_slct.journal_entry_id, `$journals_slct.journal_entry_id = ${$
 // });
 
 // 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_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 = [];
 $journals_slct.journal_entry_id = null;
 
 let lq__journal_obj = $derived(liveQuery(async () => {
@@ -74,6 +97,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`lq__journal_obj: results = `, results);
     }
+    // tmp_journal_obj = { ...results };
 
     // Check if results are different than the current session version stored under $journals_slct
     if ($journals_slct.journal_obj && results) {
@@ -95,9 +119,10 @@ let lq__journal_obj = $derived(liveQuery(async () => {
 
 let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
     log_lvl = 1;
+
     if (log_lvl) {
-        console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
+        console.log(`LQ - $lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
-        console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
+        console.log(`LQ - $journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
     }
 
     if ($journals_sess.entry_li_trigger && !$journals_sess?.entry_li) {
@@ -108,6 +133,9 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
     let results;
 
     if ($journals_sess?.entry_li && $journals_sess?.entry_li?.length) {
+        if (log_lvl) {
+            console.log(`LQ - Using $journals_sess.entry_li to get journal entries.`);
+        }
         // $journals_sess.entry_li_trigger = false;
         let journal_entry_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
 
@@ -122,6 +150,9 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
             .bulkGet(journal_entry_id_random_li);
 
     } else if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
+        if (log_lvl) {
+            console.log(`LQ - Using DESC sort for Journal Entry list journal_id: ${$journals_slct?.journal_id}`);
+        }
         results = await db_journals.journal_entry
             // .orderBy('updated_on')
             .where('journal_id')
@@ -133,8 +164,7 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
 
     } else if ($journals_loc.filter__category_code && $journals_loc.filter__category_code.length > 0) {
         if (log_lvl) {
-            // console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
+            console.log(`LQ - Using category filter: ${$journals_loc.filter__category_code}`);
-            console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
         }
         results = await db_journals.journal_entry
             .where('journal_id')
@@ -146,7 +176,7 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
     } else {
         if (log_lvl) {
             // console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
-            console.log(`$journals_slct?.journal_id - default query using journal_id: ${$journals_slct?.journal_id}`);
+            console.log(`LQ - Using default sort for Journal Entry list journal_id: ${$journals_slct?.journal_id}`);
         }
         results = await db_journals.journal_entry
             .where('journal_id')
@@ -174,6 +204,8 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
 }));
 
 
+// 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;
@@ -211,9 +243,15 @@ if ($journals_trig.journal_entry_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, "*");
@@ -245,6 +283,11 @@ if (browser) {
         "
     > -->
 
+
+
+
+
+
 <Journal_view
     lq__journal_obj={lq__journal_obj}
     lq__journal_entry_obj_li={lq__journal_entry_obj_li}
@@ -266,48 +309,13 @@ if (browser) {
 
 
 <!-- Modal: Journal edit ID -->
-<Modal
+<!-- tmp__journal_obj={$journals_slct.journal_obj} -->
-    title="{$lq__journal_obj?.name} - {$lq__journal_obj?.id}"
+<Journal_obj_id_edit
-    bind:open={$journals_sess.show__modal_edit__journal_obj}
+    log_lvl={log_lvl}
-    autoclose={false}
+    lq__journal_obj={lq__journal_obj}
-    placement="top-center"
-    size="xl"
-    class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
-    >
 
-    {#snippet header()}
+    show={$journals_sess.show__modal_edit__journal_obj}
-
+    />
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-lg font-semibold">
-                {#if $ae_loc.trusted_access}
-                <!-- <div class="ae_options"> -->
-                    <button
-                        type="button"
-                        onclick={() => {
-                            $journals_sess.show__modal_view__journal_id = $journals_slct.journal_id;
-                            $journals_sess.show__modal_edit__journal_obj = false;
-                        }}
-                        class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
-                        title={`View journal: ${$lq__journal_obj?.name}`}
-                        >
-                        <span class="fas fa-eye m-1"></span> View
-                    </button>
-                <!-- </div> -->
-                {/if}
-
-                <span class="text-sm text-gray-500">
-                    Edit Journal:
-                </span>
-                {$lq__journal_obj?.name}
-            </h3>
-            </div>
-
-
-    {/snippet}
-
-    NO LONGER USED
-
-</Modal>
 
 {:else}
 <section class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center">

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -1,5 +1,15 @@
 <script lang="ts">
-let log_lvl: number = 0;
+interface Props {
+    log_lvl?: number;
+    lq__journal_obj: any;
+    lq__journal_entry_obj_li: any;
+}
+
+let {
+    log_lvl = $bindable(0),
+    lq__journal_obj,
+    lq__journal_entry_obj_li
+}: Props = $props();
 
 // *** Import Svelte specific
 import { goto, invalidate, pushState, replaceState } from '$app/navigation';
@@ -26,12 +36,6 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
 import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 
-interface Props {
-    lq__journal_obj: any;
-    lq__journal_entry_obj_li: any;
-}
-
-let { lq__journal_obj, lq__journal_entry_obj_li }: Props = $props();
 
 let ae_promises: key_val = $state({});
 // let ae_tmp: key_val = {};
@@ -53,52 +57,6 @@ $effect(() => {
     }
 });
 
-
-// async function update_journal_entry(journal_entry_id) {
-//     if (!$ae_loc.trusted_access) {
-//         alert('You do not have permission to update this journal entry.');
-//         return;
-//     }
-
-//     let data_kv = {
-//         alert: tmp_entry_obj?.alert,
-//         personal: tmp_entry_obj?.personal,
-//         private: tmp_entry_obj?.private,
-//         professional: tmp_entry_obj?.professional,
-//         public: tmp_entry_obj?.public,
-//         template: tmp_entry_obj?.template,
-
-//         hide: tmp_entry_obj?.hide,
-//         priority: tmp_entry_obj?.priority,
-//         enable: tmp_entry_obj?.enable,
-
-//         // alert_msg: $lq__journal_entry_obj?.alert_msg ? false : true
-//         alert_msg: tmp_entry_obj?.alert_msg,
-//         category_code: tmp_entry_obj?.category_code,
-//         content: tmp_entry_obj?.content,
-//         group: tmp_entry_obj?.group,
-//         name: tmp_entry_obj?.name,
-//         tags: tmp_entry_obj?.tags,
-//     };
-
-//     // Call API to save the content
-//     try {
-//         await journals_func.update_ae_obj__journal_entry({
-//             api_cfg: $ae_api,
-//             journal_entry_id: journal_entry_id,
-//             data_kv: data_kv,
-//             log_lvl: 0,
-//         });
-//         // updated_obj = true;
-//         // updated_idb = false;
-//         console.log('Journal entry updated successfully!');
-//     } catch (error) {
-//         console.error('Error updating journal entry:', error);
-//         alert('Failed to update journal entry.');
-//     }
-// }
-
-
 </script>
 
 
@@ -117,7 +75,7 @@ $effect(() => {
     <div
         class="
             container journal journal_entry_obj
-            border border
+            border
             px-2 py-1 space-y-1
             w-full max-w-(--breakpoint-lg)
             flex flex-col items-center justify-center
@@ -407,9 +365,9 @@ $effect(() => {
                 {/if}
 
                 <a
-                    href="/journals/{journals_journal_entry_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
+                    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')}`}
+                    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`}
                     >
                     <NotebookPen class="mx-1 inline-block"/>
                     <span class="hidden md:inline">
@@ -478,34 +436,6 @@ $effect(() => {
             </article>
         {/if}
 
-        <!-- <div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center"> -->
-
-            <!-- <a
-                href="/journals/{journals_journal_entry_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
-                class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary transition"
-                title={`View: ${journals_journal_entry_obj?.name}`}
-                >
-                <NotebookText class="m-1"/> View
-            </a> -->
-
-            <!-- {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
-                <button
-                    type="button"
-                    disabled={!$ae_loc.trusted_access}
-                    onclick={() => {
-                        $journals_slct.journal_entry_id = journals_journal_entry_obj.journal_entry_id;
-                        $journals_slct.journal_entry_obj = journals_journal_entry_obj;
-
-                        $journals_sess.show__modal_view__journal_entry_id = false;
-                        $journals_sess.show__modal_edit__journal_entry_id = $journals_slct.journal_entry_id;
-                    }}
-                    class="novi_btn btn btn-sm variant-glass-warning hover:variant-filled-warning transition"
-                    title={`Edit journal entry: ${journals_journal_entry_obj?.name}`}
-                    >
-                    <span class="fas fa-edit m-1"></span> Edit
-                </button>
-            {/if} -->
-        <!-- </div> -->
 
         <section
             class:hidden={!journals_journal_entry_obj?.original_datetime && !journals_journal_entry_obj?.original_timezone}

src/routes/journals/ae_comp__journal_entry_obj_qry.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+interface Props {
+    log_lvl?: number;
+    lq__journal_obj: any;
+}
+
+let {
+    log_lvl = $bindable(0),
+    lq__journal_obj,
+}: Props = $props();
+
+
+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 { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { journals_loc, journals_sess, journals_slct, journals_prom, journals_trig } from '$lib/ae_journals/ae_journals_stores';
+import { journals_func } from '$lib/ae_journals/ae_journals_functions';
+
+
+// Trigger doing a search query for journal entries
+$effect(async () => {
+if ($journals_trig.journal_entry_qry) {
+    $journals_trig.journal_entry_qry = false;
+
+    if (log_lvl) {
+        console.log(`Triggered: $journals_trig.journal_entry_qry: ${$journals_loc.qry__search_text}`);
+    }
+
+    // $journals_prom.load__journal_entry_obj_qry = journals_func.qry__journal_entry({
+    $journals_prom.load__journal_entry_obj_li = await journals_func.qry__journal_entry({
+        api_cfg: $ae_api,
+        journal_id: $lq__journal_obj?.journal_id ?? '',
+        qry_str: $journals_loc.qry__search_text,
+
+        // qry_created_on: null,
+        // qry_alert: null,
+        // qry_priority: null,
+        // qry_type: and_type,
+
+        // enabled: $journals_loc.recovery_meetings.qry__enabled,
+        // hidden: $journals_loc.recovery_meetings.qry__hidden,
+        // order_by_li: $journals_loc.recovery_meetings.qry__order_by_li,
+        // limit: $journals_loc.recovery_meetings.qry__limit,
+        // try_cache: try_cache,
+        log_lvl: log_lvl,
+    });
+    if ($journals_prom.load__journal_entry_obj_li.length) {
+        $journals_sess.entry_li = $journals_prom.load__journal_entry_obj_li;
+
+        $journals_sess = {
+            ...$journals_sess }; // ensure session is updated
+
+        // $journals_trig.journal_entry_li = true; // trigger the entry list to refresh
+        // $journals_trig.journal_entry_li = $journals_prom.load__journal_entry_obj_li;
+    } else {
+        console.log('Clear the search results: no entries found for that query.');
+        // $journals_sess.entry_li = [''];
+        $journals_sess.entry_li = null;
+        // $journals_trig.journal_entry_li = true;
+        // alert('No journal entries found for that search query.');
+        // $journals_sess = $journals_sess;
+    }
+
+    if (log_lvl) {
+        console.log(`$journals_sess.entry_li = `, $journals_sess.entry_li);
+    }
+}
+});
+
+</script>
+
+
+
+
+<!-- Search input form -->
+<span class="flex flex-row items-center gap-2">
+    <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.qry__search_text}
+        onkeyup={(event) => {
+            if (event.key === 'Enter') {
+                log_lvl = 1;
+
+                $journals_trig.journal_entry_qry = true;
+
+                // $journals_loc.qry__search_text = event.target.value;
+                // $journals_trig.journal_entry_li = true;
+                // console.log('Search query:', $journals_loc.qry__search_text);
+
+                // $journals_prom.load__journal_entry_obj_qry = await journals_func.qry__journal_entry({
+                //     api_cfg: $ae_api,
+                //     journal_id: $lq__journal_obj?.journal_id ?? '',
+                //     qry_str: $journals_loc.qry__search_text,
+
+                //     // qry_created_on: null,
+                //     // qry_alert: null,
+                //     // qry_priority: null,
+                //     // qry_type: and_type,
+
+                //     // enabled: $journals_loc.recovery_meetings.qry__enabled,
+                //     // hidden: $journals_loc.recovery_meetings.qry__hidden,
+                //     // order_by_li: $journals_loc.recovery_meetings.qry__order_by_li,
+                //     // limit: $journals_loc.recovery_meetings.qry__limit,
+                //     // try_cache: try_cache,
+                //     log_lvl: log_lvl,
+                // });
+                // if ($journals_prom.load__journal_entry_obj_qry.length) {
+                //     $journals_sess.entry_li = $journals_prom.load__journal_entry_obj_qry;
+
+                //     $journals_sess = {
+                //         ...$journals_sess }; // ensure session is updated
+
+                //     // $journals_trig.journal_entry_li = true; // trigger the entry list to refresh
+                //     // $journals_trig.journal_entry_li = $journals_prom.load__journal_entry_obj_qry;
+                // } else {
+                //     console.log('Clear the search results: no entries found for that query.');
+                //     // $journals_sess.entry_li = [''];
+                //     $journals_sess.entry_li = null;
+                //     // $journals_trig.journal_entry_li = true;
+                //     // alert('No journal entries found for that search query.');
+                //     // $journals_sess = $journals_sess;
+                // }
+            }
+        }}
+        title="Search Journal Entries"
+        class="input input-sm input-bordered w-44 text-sm md:w-52"
+        class:bg-red-200={$journals_sess.entry_li == null}
+        class:dark:bg-red-800={$journals_sess.entry_li == null}
+        />
+    <!-- Clear search text button -->
+    <button
+    disabled={true}
+        type="button"
+        class:hidden={!$journals_loc.qry__search_text}
+        onclick={() => {
+            // $journals_loc.qry__search_text = '';
+            // $journals_trig.journal_entry_li = true;
+            // console.log('Cleared search query:', $journals_loc.qry__search_text);
+        }}
+        class="btn btn-sm p-1.5 text-sm text-gray-500 preset-tonal-tertiary border border-tertiary-500 hover:preset-filled-tertiary-500 transition"
+        title="Clear search text"
+        >
+        <!-- <X /> -->
+        <RemoveFormatting strokeWidth="1" color="gray" size="1.25em" />
+        <span class="hidden md:inline text-gray-500">
+            Clear
+        </span>
+    </button>
+</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-secondary btn-sm
+        preset-tonal-primary
+        hover:preset-filled-primary-500
+        transition
+        text-xs
+        "
+        bind:value={$journals_loc.qry__category_code}
+        onchange={(event) => {
+            // WARNING: This will cause pages to reset if the journal entry list is being filtered by category. This is a bug that should be fixed.
+            $journals_loc.qry__category_code = event.target.value;
+            $journals_loc.filter__category_code = event.target.value;
+            $journals_trig.journal_entry_li = true;
+            console.log('Selected category:', $journals_loc.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>