More work on making the Journal's module actually useful

This commit is contained in:
Scott Idem
2025-04-01 17:40:33 -04:00
parent f423345e42
commit d393ed2c7a
5 changed files with 245 additions and 50 deletions

View File

@@ -37,6 +37,8 @@ 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
$journals_slct.journal_obj = results;
console.log(`lq__journal_obj: results = `, results);
return results;
@@ -120,10 +122,11 @@ async function handle_update_journal() {
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" />
View Other Journals
<span class="hidden md:inline">
View Other Journals
</span>
</a>
{#if $journals_slct?.journal_entry_id}
@@ -137,7 +140,10 @@ async function handle_update_journal() {
"
>
<Notebook />
Back to Journal Entries
<span class="hidden md:inline">Back to</span>
<span class="font-bold">
{$lq__journal_obj?.name || 'Journal'}
</span>
</a>
{:else}
<!-- Edit Journal button. Creates a modal to edit the journal. -->
@@ -210,7 +216,9 @@ async function handle_update_journal() {
>
<FilePlus class="mx-1" />
<!-- <span class="fas fa-plus m-1"></span> -->
New Journal Entry
<span class="hidden sm:inline">
New Journal Entry
</span>
</button>
<!-- Give list of categories to base the new entry on -->
@@ -261,7 +269,7 @@ async function handle_update_journal() {
>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Edit Journal</h3>
<!-- <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" />
@@ -335,6 +343,31 @@ async function handle_update_journal() {
</div>
</div>
<!-- Select max height options (Tailwind CSS) -->
<div>
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Entry List Max Height:
</span>
<select
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-96"
bind:value={$journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height}
title="Select maximum height for journal entries in the list"
onchange={(event) => {
$journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height = event.target.value;
console.log('Selected max height:', $journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height);
}}
>
<option value="">Default (auto)</option>
<!-- <option value="none">None (no limit)</option> -->
<option value="max-h-8">Small (8)</option>
<option value="max-h-16">Medium (16)</option>
<option value="max-h-32">Large (32)</option>
<option value="max-h-96">Extra Large (96)</option>
<option value="max-h-full">Full (no limit)</option>
</select>
</div>
<!-- textarea for json_cfg editing -->
</div>