Now many things are hidden away in the new Journal Entry menu.

This commit is contained in:
Scott Idem
2025-05-06 20:01:28 -04:00
parent 89822ef540
commit de740e1e37

View File

@@ -615,33 +615,29 @@ function handle_cut_string(old_string: string) {
<header class="ae_header journal_entry__header flex flex-row flex-wrap gap-2 items-center justify-between w-full"> <header class="ae_header journal_entry__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
<div class="flex-grow flex flex-row flex-wrap gap-2 items-center justify-start outline"> <div class="flex-grow flex flex-row flex-wrap gap-2 items-center justify-start">
<!-- Toggle edit for journal entry --> <!-- Toggle edit for journal entry -->
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
// Ask if they would like to save changes before toggling edit mode off. // Ask if they would like to save changes before toggling edit mode off.
if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]) { if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current') {
if (tmp_entry_obj_changed && confirm('Would you like to save changes to this journal entry before exiting edit mode? Your changes will be lost if the page is refreshed.')) { if (tmp_entry_obj_changed && confirm('Would you like to save changes to this journal entry before exiting edit mode? Your changes will be lost if the page is refreshed.')) {
update_journal_entry(); update_journal_entry();
} }
}
// Toggle edit mode
if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]) {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = false; $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = false;
} else { } else {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = true; $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'current';
} }
// if ($ae_loc.trusted_access && !$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]) { // if ($ae_loc.trusted_access && !$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]) {
// trigger_decrypt = true; // trigger_decrypt = true;
// } // }
}} }}
class="btn btn-icon-sm inline-block" class="btn-icon btn-icon-sm variant-soft-warning hover:variant-filled-warning transition"
title="Toggle edit mode for this journal entry" title="Toggle edit mode for this journal entry"
> >
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]} {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<!-- <Pencil strokeWidth="2.5" color="blue" /> --> <!-- <Pencil strokeWidth="2.5" color="blue" /> -->
<PenLine strokeWidth="2.5" color="red" /> <PenLine strokeWidth="2.5" color="red" />
{:else} {:else}
@@ -654,7 +650,7 @@ function handle_cut_string(old_string: string) {
<!-- <span class="fas fa-spinner fa-spin"></span> --> <!-- <span class="fas fa-spinner fa-spin"></span> -->
<span class="journal_entry__name inline-block"> <span class="journal_entry__name inline-block">
<!-- Allow for toggle between view and edit of journal entry. --> <!-- Allow for toggle between view and edit of journal entry. -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]} {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<input <input
type="text" type="text"
bind:value={tmp_entry_obj.name} bind:value={tmp_entry_obj.name}
@@ -674,14 +670,14 @@ function handle_cut_string(old_string: string) {
</span> </span>
</h2> </h2>
</div> </div>
<div class="flex-grow flex flex-row flex-wrap gap-2 items-center justify-end"> <div class="flex-grow flex flex-row flex-wrap gap-2 items-center justify-end">
<div class="flex flex-row flex-wrap gap-1 items-center justify-center"> <div class="flex flex-row flex-wrap gap-1 items-center justify-center">
<!-- Tags for journal entry. Comma delimited list. --> <!-- Tags for journal entry. Comma delimited list. -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]} {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<div class="tags flex flex-row gap-1 items-center justify-start border border-gray-200 rounded-lg"> <div class="tags flex flex-row gap-1 items-center justify-start border-l border-gray-200 rounded-lg">
<span class="text-sm text-gray-500"> <span class="text-sm text-gray-500">
<Tags class="mx-1 inline-block" /> <Tags class="mx-1 inline-block" />
<!-- <span class="hidden sm:inline">Tags:</span> --> <!-- <span class="hidden sm:inline">Tags:</span> -->
@@ -718,7 +714,7 @@ function handle_cut_string(old_string: string) {
{/if} {/if}
<!-- Category code for journal entry --> <!-- Category code for journal entry -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]} {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<!-- <input <!-- <input
type="text" type="text"
bind:value={tmp_entry_obj.category_code} bind:value={tmp_entry_obj.category_code}
@@ -728,7 +724,7 @@ function handle_cut_string(old_string: string) {
/> --> /> -->
<!-- Give list of categories to base the new entry on --> <!-- Give list of categories to base the new entry on -->
<span class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
<span class="text-sm text-gray-500 hidden sm:inline"> <span class="text-sm text-gray-500 hidden sm:inline">
Category: Category:
</span> </span>
@@ -758,7 +754,7 @@ function handle_cut_string(old_string: string) {
</option> </option>
{/each} {/each}
</select> </select>
</span> </div>
{:else} {:else}
@@ -768,7 +764,7 @@ function handle_cut_string(old_string: string) {
type="button" type="button"
onclick={() => { onclick={() => {
// Toggle edit mode // Toggle edit mode
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = true; $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'current';
// tmp_entry_obj.category_code = $lq__journal_entry_obj.category_code; // tmp_entry_obj.category_code = $lq__journal_entry_obj.category_code;
console.log('Editing category:', tmp_entry_obj.category_code); console.log('Editing category:', tmp_entry_obj.category_code);
}} }}
@@ -790,11 +786,11 @@ function handle_cut_string(old_string: string) {
<button <button
type="button" type="button"
onclick={() => (show_menu = !show_menu)} onclick={() => (show_menu = !show_menu)}
class="btn variant-outline-secondary hover:variant-filled-secondary transition py-1 px-2" class="btn variant-outline-secondary hover:variant-filled-secondary transition py-1 px-2 w-24 *:hover:inline"
title="Toggle menu" title="Toggle menu"
> >
<Menu size="1.5em" class="inline-block" /> <Menu size="1.5em" class="inline-block" />
Menu <span class="hidden md:inline">Menu</span>
</button> </button>
<!-- Menu --> <!-- Menu -->
@@ -1137,6 +1133,47 @@ function handle_cut_string(old_string: string) {
</div> </div>
<!-- Select option list of Journals to choose from. This is used to assign the Journal Entry to a different Journal ID. -->
{#if $ae_loc.edit_mode && $lq__journal_obj_li?.length}
<div class="w-full flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg">
<span class="w-full text-center">
<SquareLibrary size="1em" class="mx-1 inline-block"/>
<span class="text-sm text-gray-500 hidden sm:inline">
Move to Journal:
</span>
</span>
<select
class="btn btn-secondary btn-sm
variant-soft-primary
hover:variant-filled-primary
transition
text-xs
border-none
w-full
"
bind:value={tmp_entry_obj.journal_id}
onchange={(event) => {
tmp_entry_obj.journal_id = event.target.value;
console.log('Selected journal:', tmp_entry_obj.journal_id);
if (confirm(`Are you sure you want to change the journal for this entry?`)) {
change_journal_id();
}
}}
title="Select a different journal for this entry"
>
<option value="">Select Journal</option>
{#each $lq__journal_obj_li as journal}
<option value={journal.journal_id}
title={`Journal: ${journal.name}`}
>
{journal.name}
</option>
{/each}
</select>
</div>
{/if}
</div> </div>
{/if} {/if}
@@ -1150,7 +1187,13 @@ function handle_cut_string(old_string: string) {
<section <section
class="flex flex-row flex-wrap gap-1 items-center justify-evenly w-full max-w-sm " class="flex flex-row flex-wrap gap-1 items-center justify-between w-full"
>
<span
class="
flex flex-row flex-wrap gap-1 items-center justify-center
"
> >
<!-- Entry alert status --> <!-- Entry alert status -->
<button <button
@@ -1159,7 +1202,7 @@ function handle_cut_string(old_string: string) {
tmp_entry_obj.alert = !$lq__journal_entry_obj?.alert; tmp_entry_obj.alert = !$lq__journal_entry_obj?.alert;
update_journal_entry(); update_journal_entry();
}} }}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle alert status of this journal entry" title="Toggle alert status of this journal entry"
> >
{#if $lq__journal_entry_obj?.alert} {#if $lq__journal_entry_obj?.alert}
@@ -1177,7 +1220,7 @@ function handle_cut_string(old_string: string) {
update_journal_entry(); update_journal_entry();
}} }}
class:hidden={!$lq__journal_entry_obj?.alert} class:hidden={!$lq__journal_entry_obj?.alert}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle alert message of this journal entry" title="Toggle alert message of this journal entry"
> >
{#if $lq__journal_entry_obj?.alert_msg} {#if $lq__journal_entry_obj?.alert_msg}
@@ -1219,7 +1262,7 @@ function handle_cut_string(old_string: string) {
} }
}} }}
class:hidden={(tmp_entry_obj?.private && !$ae_loc.edit_mode)} class:hidden={(tmp_entry_obj?.private && !$ae_loc.edit_mode)}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle private visibility of this journal entry" title="Toggle private visibility of this journal entry"
> >
{#if $lq__journal_entry_obj?.private} {#if $lq__journal_entry_obj?.private}
@@ -1257,7 +1300,7 @@ function handle_cut_string(old_string: string) {
} }
}} }}
class:hidden={!$lq__journal_entry_obj?.private} class:hidden={!$lq__journal_entry_obj?.private}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle viewing/editing of private encrypted content" title="Toggle viewing/editing of private encrypted content"
> >
{#if $lq__journal_entry_obj?.private && decrypted_content} {#if $lq__journal_entry_obj?.private && decrypted_content}
@@ -1281,7 +1324,7 @@ function handle_cut_string(old_string: string) {
tmp_entry_obj.public = !$lq__journal_entry_obj?.public; tmp_entry_obj.public = !$lq__journal_entry_obj?.public;
update_journal_entry(); update_journal_entry();
}} }}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle public visibility of this journal entry" title="Toggle public visibility of this journal entry"
> >
{#if $lq__journal_entry_obj?.public} {#if $lq__journal_entry_obj?.public}
@@ -1297,7 +1340,7 @@ function handle_cut_string(old_string: string) {
tmp_entry_obj.personal = !$lq__journal_entry_obj?.personal; tmp_entry_obj.personal = !$lq__journal_entry_obj?.personal;
update_journal_entry(); update_journal_entry();
}} }}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle personal visibility of this journal entry" title="Toggle personal visibility of this journal entry"
> >
{#if $lq__journal_entry_obj?.personal} {#if $lq__journal_entry_obj?.personal}
@@ -1313,7 +1356,7 @@ function handle_cut_string(old_string: string) {
tmp_entry_obj.professional = !$lq__journal_entry_obj?.professional; tmp_entry_obj.professional = !$lq__journal_entry_obj?.professional;
update_journal_entry(); update_journal_entry();
}} }}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle professional visibility of this journal entry" title="Toggle professional visibility of this journal entry"
> >
{#if $lq__journal_entry_obj?.professional} {#if $lq__journal_entry_obj?.professional}
@@ -1331,7 +1374,7 @@ function handle_cut_string(old_string: string) {
update_journal_entry(); update_journal_entry();
}} }}
class:hidden={!$ae_loc.edit_mode} class:hidden={!$ae_loc.edit_mode}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle if used as journal entry template" title="Toggle if used as journal entry template"
> >
{#if $lq__journal_entry_obj?.template} {#if $lq__journal_entry_obj?.template}
@@ -1363,7 +1406,7 @@ function handle_cut_string(old_string: string) {
}); });
} }
}} }}
class="btn-icon-sm" class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle shared visibility of this journal entry" title="Toggle shared visibility of this journal entry"
> >
{#if $lq__journal_entry_obj?.shared} {#if $lq__journal_entry_obj?.shared}
@@ -1372,6 +1415,110 @@ function handle_cut_string(old_string: string) {
<Share2 strokeWidth="1" color="gray" /> <Share2 strokeWidth="1" color="gray" />
{/if} {/if}
</button> --> </button> -->
</span>
<!-- If there is history, then we want a toggle button to show and hide the history. -->
{#if ($lq__journal_entry_obj?.history || $lq__journal_entry_obj?.history_encrypted)}
<div
class="
flex flex-row-reverse flex-wrap gap-1 items-center justify-center
"
>
<button
type="button"
onclick={async () => {
if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]) {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'history';
$journals_sess.show__content__journal_entry_history = 'view'
} else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current') {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'history';
$journals_sess.show__content__journal_entry_history = 'view'
} else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history') {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = false;
} else {
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = false;
}
// if ($journals_sess.show__content__journal_entry_history == 'view') {
// $journals_sess.show__content__journal_entry_history = 'hide';
// } else if ($journals_sess.show__content__journal_entry_history == 'edit') {
// $journals_sess.show__content__journal_entry_history = 'hide';
// } else if ($journals_sess.show__content__journal_entry_history == 'hide') {
// $journals_sess.show__content__journal_entry_history = 'view';
// } else if (!$journals_sess.show__content__journal_entry_history) {
// $journals_sess.show__content__journal_entry_history = 'view';
// }
// !tmp_entry_obj?.history &&
if (tmp_entry_obj?.history_encrypted) {
decrypted_history = await handle_decrypt_string(tmp_entry_obj.history_encrypted, journal_key);
console.log('Decrypted history:', decrypted_history);
tmp_entry_obj.history = decrypted_history;
}
}}
class:variant-filled-secondary={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history'}
class:variant-soft-secondary={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] != 'history'}
class="btn btn-sm hover:variant-filled-secondary *:hover:inline lg:text-xs"
title="Toggle history of this journal entry"
>
{#if !$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<History strokeWidth="1" color="gray" />
{:else if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history'}
<History strokeWidth="2.5" color="red" />
{/if}
<!-- <History strokeWidth="2.5" color="blue" /> -->
<span class="hidden sm:inline text-sm">
History</span>
</button>
<button
type="button"
class:hidden={!($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history')}
onclick={async () => {
if (!$journals_sess?.show__content__journal_entry_history || $journals_sess.show__content__journal_entry_history == 'view') {
$journals_sess.show__content__journal_entry_history = 'edit';
} else if ($journals_sess.show__content__journal_entry_history == 'edit') {
$journals_sess.show__content__journal_entry_history = 'view';
}
console.log('History edit mode:', $journals_sess.show__content__journal_entry_history);
if (tmp_entry_obj?.history_encrypted) {
let history_cleaned: null|string = null;
let history_md_html: null|string = null;
decrypted_history = await handle_decrypt_string(tmp_entry_obj.history_encrypted, journal_key);
console.log('Decrypted history:', decrypted_history);
tmp_entry_obj.history = decrypted_history;
history_cleaned = decrypted_history.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"");
history_md_html = await marked.parse(history_cleaned ?? '') ?? null;
tmp_entry_obj.history_md_html = history_md_html;
// console.log('History cleaned:', history_cleaned);
console.log('History md html:', history_md_html);
}
}}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
title="Toggle edit mode for history of this journal entry"
>
{#if !$journals_sess?.show__content__journal_entry_history || $journals_sess?.show__content__journal_entry_history == 'view'}
<Pencil strokeWidth="2.5" color="blue" class="inline-block" />
{:else if $journals_sess?.show__content__journal_entry_history == 'edit'}
<PenLine strokeWidth="2.5" color="red" class="inline-block" />
{/if}
<span class="hidden sm:inline">
{#if !$journals_sess?.show__content__journal_entry_history || $journals_sess?.show__content__journal_entry_history == 'view'}
Edit?
{:else if $journals_sess.show__content__journal_entry_history == 'edit'}
View?
{/if}
</span>
</button>
</div>
{/if}
</section> </section>
@@ -1397,10 +1544,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
> >
{#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])} {#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
<article <article
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class=" class="
flex-grow flex-grow
basis-full basis-full
@@ -1414,7 +1558,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
dark:prose-invert dark:prose-invert
shadow-md rounded-lg shadow-md rounded-lg
border border-gray-200 dark:border-gray-700 border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500 hover:border-green-500 dark:hover:border-green-500
prose prose
prose-h1:underline prose-h1:decoration-double prose-h1:underline prose-h1:decoration-double
prose-h2:underline prose-h2:underline
@@ -1447,9 +1591,10 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
<!-- --{@html encrypted_base64_string}-- --> <!-- --{@html encrypted_base64_string}-- -->
<!-- {@html marked.parse($lq__journal_entry_obj?.content)} --> <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
{:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])} {:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current')}
<!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) --> <!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) -->
<!-- class="flex flex-row flex-wrap gap-1 items-center justify-center w-full max-w-sm" --> <!-- class="flex flex-row flex-wrap gap-1 items-center justify-center w-full max-w-sm" -->
{#if ($lq__journal_entry_obj?.content_encrypted && !decrypted_content)} {#if ($lq__journal_entry_obj?.content_encrypted && !decrypted_content)}
<div <div
class=" class="
@@ -1504,8 +1649,6 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
// } // }
}} }}
disabled={tmp_entry_obj.content_encrypted && !decrypted_content} disabled={tmp_entry_obj.content_encrypted && !decrypted_content}
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class=" class="
flex-grow flex-grow
flex-shrink-0 flex-shrink-0
@@ -1518,8 +1661,8 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
bg-slate-100 text-gray-900 bg-slate-100 text-gray-900
dark:bg-slate-900 dark:text-gray-100 dark:bg-slate-900 dark:text-gray-100
shadow-lg rounded-lg shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700 border border-orange-200 dark:border-orange-700
hover:border-gray-500 dark:hover:border-gray-500 hover:border-orange-500 dark:hover:border-orange-500
" "
placeholder="Edit journal entry content here..." placeholder="Edit journal entry content here..."
></textarea> ></textarea>
@@ -1557,91 +1700,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
{/if} {/if}
{:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history')}
{/if}
<!-- If there is history, then we want a toggle button to show and hide the history. -->
{#if ($lq__journal_entry_obj?.history || $lq__journal_entry_obj?.history_encrypted)}
<div
class="
flex flex-col flex-wrap gap-1 items-center justify-center h-full w-full
"
>
<div>
<button
type="button"
onclick={async () => {
if ($journals_sess.show__content__journal_entry_history == 'view') {
$journals_sess.show__content__journal_entry_history = 'hide';
} else if ($journals_sess.show__content__journal_entry_history == 'edit') {
$journals_sess.show__content__journal_entry_history = 'hide';
} else if ($journals_sess.show__content__journal_entry_history == 'hide') {
$journals_sess.show__content__journal_entry_history = 'view';
} else if (!$journals_sess.show__content__journal_entry_history) {
$journals_sess.show__content__journal_entry_history = 'view';
}
// !tmp_entry_obj?.history &&
if (tmp_entry_obj?.history_encrypted) {
decrypted_history = await handle_decrypt_string(tmp_entry_obj.history_encrypted, journal_key);
console.log('Decrypted history:', decrypted_history);
tmp_entry_obj.history = decrypted_history;
}
}}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
title="Toggle history of this journal entry"
>
<History strokeWidth="2.5" color="blue" />
<span class="hidden sm:inline">History</span>
</button>
<button
type="button"
class:hidden={!$journals_sess.show__content__journal_entry_history}
onclick={async () => {
if ($journals_sess.show__content__journal_entry_history == 'view') {
$journals_sess.show__content__journal_entry_history = 'edit';
} else if ($journals_sess.show__content__journal_entry_history == 'edit') {
$journals_sess.show__content__journal_entry_history = 'view';
}
if (tmp_entry_obj?.history_encrypted) {
let history_cleaned: null|string = null;
let history_md_html: null|string = null;
decrypted_history = await handle_decrypt_string(tmp_entry_obj.history_encrypted, journal_key);
console.log('Decrypted history:', decrypted_history);
tmp_entry_obj.history = decrypted_history;
history_cleaned = decrypted_history.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"");
history_md_html = await marked.parse(history_cleaned ?? '') ?? null;
tmp_entry_obj.history_md_html = history_md_html;
// console.log('History cleaned:', history_cleaned);
console.log('History md html:', history_md_html);
}
}}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
title="Toggle edit mode for history of this journal entry"
>
{#if $journals_sess.show__content__journal_entry_history == 'view'}
<Pencil strokeWidth="2.5" color="blue" class="inline-block" />
{:else if $journals_sess.show__content__journal_entry_history == 'edit'}
<PenLine strokeWidth="2.5" color="red" class="inline-block" />
{/if}
<span class="hidden sm:inline">
{#if $journals_sess.show__content__journal_entry_history == 'view'}
Edit?
{:else if $journals_sess.show__content__journal_entry_history == 'edit'}
View?
{/if}
</span>
</button>
</div>
<div <div
class=" class="
@@ -1654,9 +1713,8 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
> >
{#if $journals_sess?.show__content__journal_entry_history == 'view'} {#if $journals_sess?.show__content__journal_entry_history == 'view'}
<article <article
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class=" class="
flex-grow
space-y-1 space-y-1
h-full min-h-max max-h-full h-full min-h-max max-h-full
w-full min-w-full max-w-6xl w-full min-w-full max-w-6xl
@@ -1681,8 +1739,6 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
{:else if $journals_sess?.show__content__journal_entry_history == 'edit'} {:else if $journals_sess?.show__content__journal_entry_history == 'edit'}
<textarea <textarea
bind:value={tmp_entry_obj.history} bind:value={tmp_entry_obj.history}
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class=" class="
space-y-1 space-y-1
flex-grow flex-grow
@@ -1694,17 +1750,27 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
bg-slate-100 text-gray-900 bg-slate-100 text-gray-900
dark:bg-slate-900 dark:text-gray-100 dark:bg-slate-900 dark:text-gray-100
shadow-lg rounded-lg shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700 border border-orange-200 dark:border-orange-700
hover:border-gray-500 dark:hover:border-gray-500 hover:border-orange-500 dark:hover:border-orange-500
" "
placeholder="Edit journal entry content here..." placeholder="Edit journal entry content here..."
></textarea> ></textarea>
{/if} {/if}
</div> </div>
</div>
{/if} {/if}
</section> </section>
<!-- <div> <!-- <div>
@@ -1712,217 +1778,6 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
</div> --> </div> -->
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full"> <section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<!-- {$lq__journal_entry_obj?.priority}
{$lq__journal_entry_obj?.sort}
{$lq__journal_entry_obj?.group}
{$lq__journal_entry_obj?.hide}
{$lq__journal_entry_obj?.enable} -->
<!-- Set/unset priority (boolean) -->
<button
type="button"
onclick={() => {
tmp_entry_obj.priority = !$lq__journal_entry_obj?.priority;
update_journal_entry();
}}
class="btn-icon btn-icon-sm md:btn-icon-base variant-soft-tertiary transition hover:variant-filled-tertiary"
title="Toggle priority of this journal entry"
>
{#if $lq__journal_entry_obj?.priority}
<Flag strokeWidth="2.5" color="green" class="inline-block" />
{:else}
<FlagOff strokeWidth="1" color="gray" class="inline-block" />
{/if}
<span class="hidden lg:inline">
Priority
</span>
</button>
<!-- Set sort order (number) -->
<span
class:hidden={!$ae_loc.edit_mode}
class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
<button
type="button"
onclick={() => {
tmp_entry_obj.sort = $lq__journal_entry_obj?.sort ? $lq__journal_entry_obj?.sort + 1 : 1;
update_journal_entry();
}}
class="btn-icon-sm variant-soft-tertiary transition hover:variant-filled-tertiary"
title="Increment sort order of this journal entry"
>
<Plus strokeWidth="2.5" color="blue" />
</button>
<span class="mx-1">
{#if $lq__journal_entry_obj?.sort}
{$lq__journal_entry_obj.sort}
{:else}
<!-- <ArrowDown01 /> -->
<ArrowDown10 />
{/if}
</span>
<button
type="button"
onclick={() => {
tmp_entry_obj.sort = $lq__journal_entry_obj?.sort ? $lq__journal_entry_obj?.sort - 1 : 0;
update_journal_entry();
}}
class="btn-icon-sm variant-soft-tertiary transition hover:variant-filled-tertiary"
title="Decrement sort order of this journal entry"
>
<Minus strokeWidth="2.5" color="blue" />
</button>
</span>
<!-- Set group (string) -->
<input
type="text"
bind:value={tmp_entry_obj.group}
placeholder="Group"
onchange={() => {
update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="input input-sm input-bordered w-24"
title="Set group (for sorting) of this journal entry"
/>
<!-- Set archive datetime (string) -->
<span class="flex flex-row flex-wrap items-center justify-center border border-gray-200 rounded-lg">
<input
type="datetime-local"
bind:value={tmp_entry_obj.archive_on}
placeholder="Archive On"
onchange={() => {
update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="input input-sm input-bordered w-auto border-none"
title="Set archive on datetime for archiving this journal entry"
/>
{#if $lq__journal_entry_obj?.archive_on}
<!-- Button to clear the datetime -->
<button
type="button"
onclick={() => {
tmp_entry_obj.archive_on = null;
update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-icon btn-icon-sm variant-glass-warning hover:variant-filled-warning transition *:hover:inline"
title="Clear the archive on datetime for this journal entry"
>
<X strokeWidth="2.5" color="red" />
<!-- <span class="hidden">Clear Archive</span> -->
</button>
{:else}
<!-- Button to set the datetime to now -->
<button
type="button"
onclick={() => {
// tmp_entry_obj.archive_on = new Date().toISOString();
// console.log('Archive on datetime set to now:', tmp_entry_obj.archive_on);
tmp_entry_obj = {
...tmp_entry_obj,
archive_on: new Date().toISOString()
};
console.log('Archive on datetime set to now:', tmp_entry_obj.archive_on);
update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-icon btn-icon-sm variant-glass-warning hover:variant-filled-warning transition *:hover:inline"
title="Set the archive on datetime for this journal entry"
>
<Clock strokeWidth="2.5" color="blue" />
<!-- <span class="hidden">Set Archive</span> -->
</button>
{/if}
</span>
<!-- Set/unset hide (boolean) -->
<button
type="button"
onclick={() => {
tmp_entry_obj.hide = !$lq__journal_entry_obj?.hide;
update_journal_entry();
}}
class="btn btn-sm md:btn-md variant-soft-warning hover:variant-filled-warning transition"
title="Toggle visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.hide}
<EyeOff strokeWidth="1" color="red" class="inline-block" />
<span class="hidden md:inline">Hidden</span>
{:else}
<Eye strokeWidth="2.5" color="green" class="inline-block" />
<span class="hidden md:inline">Visible</span>
{/if}
</button>
<!-- Set/unset enable (boolean) -->
<button
type="button"
onclick={() => {
tmp_entry_obj.enable = !$lq__journal_entry_obj?.enable;
update_journal_entry();
}}
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
title="Toggle enable status of this journal entry"
>
{#if $lq__journal_entry_obj?.enable}
<ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
<span class="hidden md:inline">Enabled</span>
{:else}
<ShieldMinus strokeWidth="1" color="red" class="inline-block" />
<span class="hidden md:inline">Disabled</span>
{/if}
</button>
<!-- Delete journal entry -->
<button
type="button"
onclick={() => {
if (confirm(`Are you sure you want to delete this journal entry?`)) {
let delete_method = 'disable';
if ($ae_loc.administrator_access && $ae_loc.edit_mode) {
delete_method = 'delete';
}
journals_func.delete_ae_obj_id__journal_entry({
api_cfg: $ae_api,
journal_entry_id: $lq__journal_entry_obj?.journal_entry_id,
method: delete_method, // 'delete', 'disable', 'hide'
log_lvl: log_lvl
}).then(() => {
// Optionally, you can provide feedback to the user
alert('Journal entry deleted successfully!');
}).catch((error) => {
console.error('Error deleting journal entry:', error);
alert('Failed to delete journal entry.');
}).finally(() => {
$journals_slct.journal_id = null;
$journals_slct.journal_obj = null;
goto(`/journals/${$lq__journal_entry_obj?.journal_id}`);
});
}
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
title="Delete this journal entry"
>
{#if ($ae_loc.administrator_access && $ae_loc.edit_mode)}
<FileX strokeWidth="2.5" color="red" class="inline-block" />
<span class="hidden md:inline">Delete</span>
{:else}
<Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
<span class="hidden md:inline">Remove</span>
{/if}
</button>
<span class="flex flex-row items-center justify-center text-sm text-gray-500"> <span class="flex flex-row items-center justify-center text-sm text-gray-500">
{#if !$ae_loc.edit_mode} {#if !$ae_loc.edit_mode}
@@ -1941,43 +1796,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
</span> </span>
<!-- Select option list of Journals to choose from. This is used to assign the Journal Entry to a different Journal ID. -->
{#if $ae_loc.edit_mode && $lq__journal_obj_li?.length}
<div class="flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg">
<SquareLibrary size="1em" class="mx-1"/>
<span class="text-sm text-gray-500 hidden sm:inline">
Journal:
</span>
<select
class="novi_btn btn btn-secondary btn-sm
variant-soft-primary
hover:variant-filled-primary
transition
text-xs
border-none
"
bind:value={tmp_entry_obj.journal_id}
onchange={(event) => {
tmp_entry_obj.journal_id = event.target.value;
console.log('Selected journal:', tmp_entry_obj.journal_id);
if (confirm(`Are you sure you want to change the journal for this entry?`)) {
change_journal_id();
}
}}
title="Select a different journal for this entry"
>
<option value="">Select Journal</option>
{#each $lq__journal_obj_li as journal}
<option value={journal.journal_id}
title={`Journal: ${journal.name}`}
>
{journal.name}
</option>
{/each}
</select>
</div>
{/if}
</section> </section>