Work on the new Journals. Just saving things while they are working well.

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-let log_lvl: number = 1;
+let log_lvl: number = 0;
 
 // *** Import Svelte specific
 import { browser } from '$app/environment';
@@ -59,9 +59,12 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     return results;
 }));
 
+let force_refresh = false; // Set to true to force a refresh of the data
 let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
+        console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
+        console.log(`force_refresh = `, force_refresh);
     }
     if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
         let results = await db_journals.journal_entry
@@ -73,6 +76,26 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
             .sortBy('updated_on');
             // .sortBy('title');
 
+        return results;
+    // } else if (force_refresh) {
+    //     force_refresh = false;
+    //     console.log(`lq__journal_entry_obj_li - force refresh`);
+    //     let results = await db_journals.journal_entry
+    //         .where('journal_id')
+    //         .equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
+    //         // .reverse()
+    //         .sortBy('updated_on');
+
+    //     return results;
+    } else if ($journals_loc.filter__category_code && $journals_loc.filter__category_code.length > 0) {
+        console.log(`lq__journal_entry_obj_li - filtering by category_code: ${$journals_loc.filter__category_code}`);
+        let results = await db_journals.journal_entry
+            .where('journal_id')
+            .equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
+            .and(entry => entry.category_code === $journals_loc.filter__category_code)
+            // .reverse()
+            .sortBy('updated_on');
+
         return results;
     } else {
         console.log(`lq__journal_entry_obj_li - default query using journal_id: ${$journals_slct?.journal_id}`);
@@ -105,50 +128,83 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
 
 
 $effect(() => {
-        if ($journals_trig.journal_entry_li) {
-        $journals_trig.journal_entry_li = false;
+    if ($journals_trig.journal_entry_li) {
+    $journals_trig.journal_entry_li = false;
 
-        if (log_lvl) {
-            console.log(`Triggered: $journals_trig.journal_entry_li`);
-        }
+    if (log_lvl) {
+        console.log(`Triggered: $journals_trig.journal_entry_li`);
+    }
 
-        if ($journals_loc.qry__enabled !== 'all' || $journals_loc.qry__hidden !== 'all') {
-            console.log(`Deleting disabled or hidden journal entry.`);
-            // let results = db_journals.journal_entry
-            //     .where('enable')
-            //     .notEqual(true)
-            //     .delete();
-            let results = db_journals.journal_entry
-                .clear();
-            console.log(`Deleted ${results} disabled journal entry.`);
-
-        }
-        // if ($journals_loc.qry__hidden !== 'all') {
-        //     console.log(`Deleting hidden journal entry.`);
-        //     let results = db_journals.journal_entry
-        //         .clear();
-        //     console.log(`Deleted ${results} hidden journal entry.`);
-
-        // }
+    if ($journals_loc.qry__enabled !== 'all' || $journals_loc.qry__hidden !== 'all') {
+        console.log(`Deleting disabled or hidden journal entry.`);
         // let results = db_journals.journal_entry
         //     .where('enable')
-        //     .equals('false')
+        //     .notEqual(true)
         //     .delete();
-        // console.log(`Deleted ${results} disabled journal entry.`);
+        let results = db_journals.journal_entry
+            .clear();
+        console.log(`Deleted ${results} disabled journal entry.`);
 
-        $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.qry__enabled,
-            hidden: $journals_loc.qry__hidden,
-            limit: $journals_loc.qry__limit,
-            order_by_li: $journals_loc.qry__order_by_li,
-            try_cache: true,
-            log_lvl: log_lvl,
-        });
     }
+
+    // if ($journals_loc.qry__hidden !== 'all') {
+    //     console.log(`Deleting hidden journal entry.`);
+    //     let results = db_journals.journal_entry
+    //         .clear();
+    //     console.log(`Deleted ${results} hidden journal entry.`);
+
+    // }
+    // let results = db_journals.journal_entry
+    //     .where('enable')
+    //     .equals('false')
+    //     .delete();
+    // console.log(`Deleted ${results} disabled journal entry.`);
+
+    $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.qry__enabled,
+        hidden: $journals_loc.qry__hidden,
+        limit: $journals_loc.qry__limit,
+        order_by_li: $journals_loc.qry__order_by_li,
+        try_cache: true,
+        log_lvl: log_lvl,
     });
+}
+});
+
+// $effect(() => {
+//     if ($journals_loc.filter__category_code) {
+//         console.log(`Filtering journal entry by category_code: ${$journals_loc.filter__category_code}`);
+
+//         $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.qry__enabled,
+//             hidden: $journals_loc.qry__hidden,
+//             limit: $journals_loc.qry__limit,
+//             order_by_li: $journals_loc.qry__order_by_li,
+//             try_cache: true,
+//             log_lvl: log_lvl,
+//         });
+//     } else {
+//         console.log(`No category_code filter applied.`);
+//         // force_refresh = true;
+//         $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.qry__enabled,
+//             hidden: $journals_loc.qry__hidden,
+//             limit: $journals_loc.qry__limit,
+//             order_by_li: $journals_loc.qry__order_by_li,
+//             try_cache: true,
+//             log_lvl: log_lvl,
+//         });
+//     }
+// });
 
 if (browser) {
     console.log('Browser environment detected.');
@@ -157,6 +213,13 @@ if (browser) {
     window.parent.postMessage(message, "*");
 }
 
+let journal_entry_category_li = [
+    { code: 'test', name: 'Test' },
+    { code: 'personal', name: 'Personal' },
+    { code: 'work', name: 'Work' },
+    { code: 'other', name: 'Other' },
+];
+
 </script>
 
 
@@ -183,16 +246,76 @@ if (browser) {
 
 <!-- <h1>Journals {$lq__journal_obj?.name} - {$lq__journal_entry_obj_li?.length}</h1> -->
 
-<a href="/journals" class="novi_btn btn btn-secondary btn-sm
-    variant-ghost-tertiary
-    hover:variant-filled-tertiary
-    transition
-    ">
-    <!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals -->
-    <span class="fas fa-arrow-left m-1"></span>
-    View Other Journals
-</a>
+<div class="flex flex-row items-center justify-between w-full">
+    {$journals_loc.filter__category_code}
 
+    <a href="/journals" class="novi_btn btn btn-secondary btn-sm
+        variant-ghost-tertiary
+        hover:variant-filled-tertiary
+        transition
+        ">
+        <!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals -->
+        <span class="fas fa-arrow-left m-1"></span>
+        View Other Journals
+    </a>
+
+    <!-- Add default journal entry -->
+    <button
+        class="novi_btn btn btn-secondary btn-sm
+        variant-ghost-success
+        hover:variant-filled-success
+        transition"
+        onclick={() => {
+            // $journals_sess.show__modal_new__journal_entry_obj = true;
+
+            let data_kv = {
+                // journal_id_random: $lq__journal_obj?.journal_id,
+                category_code: 'test',
+            };
+            if ($journals_loc.qry__category_code) {
+                data_kv.category_code = $journals_loc.qry__category_code;
+            }
+            if (log_lvl) {
+                console.log('Creating new journal entry with data_kv:', data_kv);
+            }
+            journals_func.create_ae_obj__journal_entry({
+                api_cfg: $ae_api,
+                journal_id: $lq__journal_obj?.journal_id,
+                data_kv: data_kv,
+                log_lvl: log_lvl
+            }).then((results) => {
+                console.log('New journal entry created:', results);
+                $journals_slct.journal_entry_id = results?.journal_entry_id_random;
+                // alert('Journal entry created successfully!');
+            }).catch((error) => {
+                console.error('Error updating journal entry:', error);
+                alert('Failed to update journal entry.');
+            });
+        }}
+        >
+        <span class="fas fa-plus m-1"></span> New Journal Entry
+    </button>
+
+    <!-- Give list of categories to base the new entry on -->
+    <select
+        class="novi_btn btn btn-secondary btn-sm
+        variant-ghost-primary
+        hover:variant-filled-primary
+        transition"
+        bind:value={$journals_loc.qry__category_code}
+        onchange={(event) => {
+            $journals_loc.qry__category_code = event.target.value;
+            console.log('Selected category:', $journals_loc.qry__category_code);
+        }}
+        >
+        <option value="">Select Category</option>
+        {#each journal_entry_category_li as category}
+            <option value={category.code}>{category.name}</option>
+        {/each}
+    </select>
+
+
+</div>
 
 <Journal_view
     lq__journal_obj={lq__journal_obj}
@@ -228,6 +351,7 @@ if (browser) {
                 {#if $ae_loc.trusted_access}
                 <!-- <div class="ae_options"> -->
                     <button
+                        type="button"
                         onclick={() => {
                         // const url = new URL(location);
                         // url.searchParams.set('event_id', $lq__journal_obj?.event_id_random);
@@ -278,10 +402,10 @@ if (browser) {
 </Modal>
 
 
-<!-- Modal: Journal Content edit ID -->
-<!-- <Modal
-    bind:open={$journals_sess.show__modal_edit__journal_entry_id}
-    title="{$lq__journal_entry_obj?.name ?? 'New Journal Content'} - {$lq__journal_entry_obj?.id ?? 'Not Saved Yet'}"
+<!-- Modal: Journal Entry new -->
+<Modal
+    bind:open={$journals_sess.show__modal_new__journal_entry_obj}
+    title="New Journal Entry - {$lq__journal_obj?.name}"
     autoclose={false}
     placement="top-center"
     size="xl"
@@ -292,36 +416,31 @@ if (browser) {
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-lg font-semibold">
-                    {#if $ae_loc.trusted_access}
-
-                        <button
-                            onclick={() => {
-                            // const url = new URL(location);
-                            // url.searchParams.set('event_id', $lq__journal_entry_obj?.event_id_random);
-                            // history.pushState({}, '', url);
-
-                            $journals_sess.show__modal_view__journal_entry_id = $journals_slct.journal_entry_id;
-                            $journals_sess.show__modal_edit__journal_entry_id = false;
+                    <button
+                        type="button"
+                        onclick={() => {
+                            // Cancel the new journal entry
+                            $journals_sess.show__modal_new__journal_entry_obj = false;
+                            $journals_slct.journal_entry_id = null;
+                            $journals_slct.journal_entry_obj = null;
                         }}
-                            class="novi_btn btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
-                            title={`View meeting: ${$lq__journal_entry_obj?.name}`}
-                            >
-                            <span class="fas fa-eye m-1"></span> View
-                        </button>
-                    {/if}
-
+                        class="novi_btn btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+                        title={`Cancel new journal entry`}
+                        >
+                        <span class="fas fa-times m-1"></span> Cancel
+                    </button>
+                    New Journal Entry
                     <span class="text-sm text-gray-500">
-                        Edit Journal Content:
+                        {$lq__journal_obj?.name}
                     </span>
-                    {$lq__journal_entry_obj?.name ?? 'New Journal Content'}
                 </h3>
             </div>
 
-
     {/snippet}
 
 
-</Modal> -->
+
+</Modal>
 
 
 <!-- Modal: Journal Content ID media player -->