Can now edit some basic Journal cfg and other clean up

src/lib/ae_journals/ae_journals__journal.ts

@@ -561,6 +561,9 @@ export function db_save_ae_obj_li__journal(
                     passcode_write: obj.passcode_write,
                     passcode_write_expire: obj.passcode_write_expire,
 
+                    passcode: obj.passcode,
+                    passcode_timeout: obj.passcode_timeout,
+
                     enable: obj.enable,
                     hide: obj.hide,
                     priority: obj.priority,

src/lib/ae_journals/ae_journals_stores.ts

@@ -30,6 +30,19 @@ let journals_local_data_struct: key_val = {
     journal: {
         edit: false,
         edit_kv: {},
+
+        type_code_li: [
+            { code: 'diary', name: 'Diary' },
+            { code: 'log', name: 'Log' },
+            { code: 'journal', name: 'Journal' },
+            { code: 'notebook', name: 'Notebook' },
+            { code: 'personal', name: 'Personal' },
+            { code: 'professional', name: 'Professional' },
+            { code: 'tracking', name: 'Tracking' },
+            { code: 'other', name: 'Other' },
+            { code: 'test', name: 'Test' },
+            // { code: 'notepad', name: 'Notepad' },
+        ],
     },
     entry: {
         edit: false,
@@ -69,10 +82,14 @@ let journals_session_data_struct: key_val = {
 
         new_journal_name: '',
         new_journal_type_code: '',
+
+        tmp_obj: {},
     },
     entry: {
         edit: false,
         edit_kv: {},
+
+        tmp_obj: {},
     },
 };
 // console.log(`AE Stores - App Journals Session Storage Data:`, journals_session_data_struct);
@@ -91,6 +108,9 @@ let journals_slct_obj_template: key_val = {
     'journal_obj': {},
     'journal_obj_li': [],
 
+    'tmp_journal_obj': {}, // Temporary object for new journal
+    'tmp_journal_entry_obj': {}, // Temporary object for new journal entry
+
     'lq__journal_obj': {}, // Testing passing a LiveQuery object around...
 };
 // console.log(`AE Stores - Selected Journals Objects:`, journals_slct_obj_template);
@@ -103,10 +123,8 @@ export let journals_slct = writable(journals_slct_obj_template);
 // Intended for temporary session storage.
 // Updated 2025-03-16
 let journals_trig_template: key_val = {
-    archive_id: false,
+    journal_id: false,
-    archive_content_li: false,
+    journal_entry_li: false,
-    event_id: false,
-    post_id: false,
 };
 export let journals_trig: any = writable(journals_trig_template);
 // console.log(`AE Journals Stores - Journals Trigger:`, journals_trig);
@@ -116,10 +134,7 @@ export let journals_trig: any = writable(journals_trig_template);
 // Intended for temporary session storage.
 // Updated 2025-03-16
 let journals_prom_template: key_val = {
-    archive_id: false,
+    journal_id: false,
-    archive_content_li: false,
+    journal_entry_li: false,};
-    event_id: false,
-    post_id: false,
-};
 export let journals_prom: any = writable(journals_prom_template);
 // console.log(`AE Journals Stores - Journals Trigger:`, journals_prom);

src/lib/ae_journals/db_journals.ts

@@ -63,6 +63,9 @@ export interface Journal {
     passcode_write?: null|string;
     passcode_write_expire?: null|Date
 
+    passcode?: null|string;
+    passcode_timeout?: null|number; // Timeout in seconds
+
     enable: null|boolean;
     hide?: null|boolean;
     priority?: null|boolean

src/routes/journals/+page.svelte

@@ -3,12 +3,17 @@ let log_lvl: number = 0;
 // console.log(`ae_journals +page data:`, data);
 // console.log(`ae_journals Data Params:`, data.url.searchParams.get('journal_id'));
 
+// *** Import Svelte specific
 import { onMount } from 'svelte';
 import { goto } from '$app/navigation';
-import { FolderPlus } from '@lucide/svelte';
 
-// import { api } from '$lib/api';
+// *** Import other supporting libraries
+import { FolderPlus } from '@lucide/svelte';
 import { liveQuery } from "dexie";
+import { Modal } from 'flowbite-svelte';
+
+// *** Import Aether specific variables and functions
+// import { api } from '$lib/api';
 import { db_journals } from "$lib/ae_journals/db_journals";
 import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
@@ -211,6 +216,14 @@ async function create_journal() {
 
 <!-- Modal for creating new journal -->
 {#if $journals_sess.show__modal_new__journal_obj}
+<Modal
+    title="Create New Journal"
+    bind:open={$journals_sess.show__modal_new__journal_obj}
+    autoclose={false}
+    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"
+    >
 <div class="modal">
     <div class="modal-box">
         <h3 class="font-bold text-lg">Create New Journal</h3>
@@ -226,6 +239,8 @@ async function create_journal() {
         </div>
     </div>
 </div>
+
+</Modal>
 {/if}
 
 

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

@@ -5,9 +5,10 @@ let log_lvl: number = 0;
 let { data, children } = $props();
 
 import { goto } from '$app/navigation';
-import { BookHeart, FilePlus } from '@lucide/svelte';
+import { BookHeart, Check, FilePlus, Minus, Notebook, Pencil, Plus, X } from '@lucide/svelte';
 
 import { liveQuery } from "dexie";
+import { Modal } from 'flowbite-svelte';
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { db_journals } from "$lib/ae_journals/db_journals";
@@ -41,6 +42,49 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     return results;
 }));
 
+
+async function handle_update_journal() {
+    if ($journals_slct.tmp_journal_obj.name && $journals_slct.tmp_journal_obj.type_code) {
+        try {
+            let data_kv = {
+                // account: $slct.account_id,
+                name: $journals_slct.tmp_journal_obj.name,
+                type_code: $journals_slct.tmp_journal_obj.type_code,
+                passcode: $journals_slct.tmp_journal_obj.passcode,
+                passcode_timeout: $journals_slct.tmp_journal_obj.passcode_timeout,
+
+                cfg_json: $journals_slct.tmp_journal_obj.cfg_json
+
+            };
+            journals_func.update_ae_obj__journal({
+                api_cfg: $ae_api,
+                journal_id: $lq__journal_obj?.journal_id ?? '',
+                data_kv: data_kv,
+                log_lvl: log_lvl
+            }).then((results) => {
+                console.log('Journal updated:', results);
+                // $journals_slct.journal_id = results?.journal_id_random;
+            }).catch((error) => {
+                    console.error('Error updating journal:', error);
+                    alert('Failed to update journal.');
+            }).finally(() => {
+                if ($journals_slct.journal_id) {
+                    $journals_sess.show__modal_new__journal_obj = false;
+                    // goto(`/journals/${$journals_slct.journal_id}`);
+                }
+            });
+            // console.log('New journal updated:', result);
+            // $journals_sess.show__modal_new__journal_obj = false;
+            // goto(`/journals/${result.journal_id_random}`);
+        } catch (error) {
+            console.error('Error updating journal:', error);
+            alert('Failed to update journal.');
+        }
+    } else {
+        alert('Please provide both name and type for the journal.');
+    }
+}
+
 </script>
 
 
@@ -59,11 +103,13 @@ let lq__journal_obj = $derived(liveQuery(async () => {
 
 <div class="flex flex-row items-center justify-between w-full border-gray-200 border-y-2 py-2">
     <a href="/journals"
-        class="btn btn-sm
+        class="
-        variant-ghost-tertiary
+            btn btn-sm
-        hover:variant-filled-tertiary
+            variant-ghost-tertiary
-        transition
+            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> -->
         <BookHeart class="mx-1" />
@@ -71,14 +117,43 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     </a>
 
     {#if $journals_slct?.journal_entry_id}
-    <a href="/journals/{$journals_slct?.journal_id}" class="novi_btn btn btn-secondary btn-sm
+    <a
-        variant-ghost-tertiary
+        href="/journals/{$journals_slct?.journal_id}"
-        hover:variant-filled-tertiary
+        class="
-        transition
+            btn btn-sm
-        ">
+            variant-ghost-tertiary
-        <span class="fas fa-arrow-left m-1"></span>
+            hover:variant-filled-tertiary
+            transition
+            "
+        >
+        <Notebook />
         Back to Journal Entries
     </a>
+    {:else}
+    <!-- Edit Journal button. Creates a modal to edit the journal. -->
+    <button
+        type="button"
+        onclick={() => {
+            $journals_slct.tmp_journal_obj = {
+                name: $lq__journal_obj?.name,
+                type_code: $lq__journal_obj?.type_code,
+                passcode: $lq__journal_obj?.passcode,
+                passcode_timeout: $lq__journal_obj?.passcode_timeout,
+                cfg_json: $lq__journal_obj?.cfg_json
+            };
+            $journals_sess.show__modal_edit__journal_obj = true;
+        }}
+        class:hidden={!$ae_loc.edit_mode}
+        class="
+            btn btn-sm
+            variant-ghost-warning
+            hover:variant-filled-warning
+            transition
+            "
+        >
+        <Pencil />
+        Edit Journal
+    </button>
     {/if}
 
     <!-- Add default journal entry -->
@@ -87,12 +162,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
             New entry:
         </span> -->
         <button
-            class="
+            type="button"
-            btn btn-sm
-            variant-ghost-success
-            hover:variant-filled-success
-            transition
-            "
             onclick={() => {
                 // $journals_sess.show__modal_new__journal_entry_obj = true;
 
@@ -121,6 +191,12 @@ let lq__journal_obj = $derived(liveQuery(async () => {
                     goto(`/journals/${$lq__journal_obj?.journal_id}/entry/${$journals_slct.journal_entry_id}`);
                 });
             }}
+            class="
+                btn btn-sm
+                variant-ghost-success
+                hover:variant-filled-success
+                transition
+                "
             >
             <FilePlus class="mx-1" />
             <!-- <span class="fas fa-plus m-1"></span> -->
@@ -133,7 +209,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
                 Category:
             </span>
             <select
-                class="novi_btn btn btn-secondary btn-sm
+                class="btn btn-secondary btn-sm
                 variant-soft-primary
                 hover:variant-filled-primary
                 transition
@@ -161,3 +237,117 @@ let lq__journal_obj = $derived(liveQuery(async () => {
 
 
 </section>
+
+
+<!-- Modal for editing journal -->
+{#if $journals_sess.show__modal_edit__journal_obj}
+<Modal
+    title="Edit Journal"
+    bind:open={$journals_sess.show__modal_edit__journal_obj}
+    autoclose={false}
+    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"
+    >
+    <div class="modal">
+        <div class="modal-box">
+            <h3 class="font-bold text-lg">Edit Journal</h3>
+            <div class="py-4">
+                <input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
+                <input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-full mb-2" />
+
+                <!-- input for passcode -->
+                <input type="text" placeholder="Passcode" bind:value={$journals_slct.tmp_journal_obj.passcode} class="input input-bordered w-full mb-2" />
+
+                <!-- input for passcode timeout -->
+                <input type="number" placeholder="Passcode Timeout" bind:value={$journals_slct.tmp_journal_obj.passcode_timeout} class="input input-bordered w-full mb-2" />
+
+                <!-- select option for journal type_code -->
+                <span class="text-sm text-gray-500 hidden sm:inline">
+                    Journal Type:
+                </span>
+                <select
+                    class="btn btn-sm
+                    variant-ghost-surface
+                    hover:variant-filled-surface
+                    transition
+                    text-xs
+                    "
+                    bind:value={$journals_slct.tmp_journal_obj.type_code}
+                    onchange={(event) => {
+                        // Update the cfg_json with the selected journal type. Example cate
+                        $journals_slct.tmp_journal_obj.type_code = event.target.value;
+                        console.log('Selected journal type:', $journals_slct.tmp_journal_obj.type_code);
+                    }}
+                    title="Select a journal type"
+                    >
+                    <option value="">Select Journal Type</option>
+                    {#each $journals_loc.journal.type_code_li as journal_type}
+                        <option value={journal_type.code}>{journal_type.name}</option>
+                    {/each}
+                </select>
+
+                <div>
+                    <!-- inputs for customizable journal category list -->
+                    <!-- each category has a code and name; need to be able to add and remove categories -->
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Categories:
+                    </span>
+                    <div class="flex flex-col gap-1">
+                        {#each $journals_slct.tmp_journal_obj.cfg_json.category_li as category, index}
+                            <div class="flex flex-row items-center gap-1">
+                                <input type="text" placeholder="Category Code" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].code} class="input input-bordered w-full" />
+                                <input type="text" placeholder="Category Name" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].name} class="input input-bordered w-full" />
+                                <button
+                                    type="button"
+                                    class="btn btn-sm variant-ghost-danger hover:variant-filled-danger transition"
+                                    onclick={() => {
+                                        $journals_slct.tmp_journal_obj.cfg_json.category_li.splice(index, 1);
+                                        $journals_slct.tmp_journal_obj.cfg_json.category_li = $journals_slct.tmp_journal_obj.cfg_json.category_li;
+                                    }}
+                                    >
+                                    <Minus />
+                                    Remove
+                                </button>
+                            </div>
+                        {/each}
+                        <button
+                            type="button"
+                            onclick={() => {
+                                $journals_slct.tmp_journal_obj.cfg_json.category_li.push({ code: '', name: '' });
+                                $journals_slct.tmp_journal_obj.cfg_json.category_li = $journals_slct.tmp_journal_obj.cfg_json.category_li;
+                            }}
+                            class="btn btn-sm variant-ghost-success hover:variant-filled-success transition max-w-96"
+                            >
+                            <Plus />
+                            Add Category
+                        </button>
+                    </div>
+                </div>
+
+
+                <!-- textarea for json_cfg editing -->
+            </div>
+
+            <div class="modal-action">
+                <button
+                    type="button"
+                    onclick={handle_update_journal}
+                    class="btn variant-ghost-warning hover:variant-filled-warning transition"
+                    >
+                    <Check />
+                    Update
+                </button>
+                <button
+                    type="button"
+                    onclick={$journals_sess.show__modal_edit__journal_obj ?? false}
+                    class="btn variant-ghost-surface hover:variant-filled-surface transition"
+                    >
+                    <X />
+                    Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+</Modal>
+{/if}