Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moving things around... trying to keep it clean

Browse Source
This commit is contained in:
Scott Idem
2025-05-14 16:47:48 -04:00
parent e96675174f
commit 238757782b
2 changed files with 457 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/routes/journals/[journal_id]/+layout.svelte
View File

@@ -662,6 +662,207 @@ async function handle_update_journal() {
</button>
<!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
<div class="flex flox-row gap-1">
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_alert = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_alert;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of alert icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_alert}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<Siren strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<Siren strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Alert Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_alert_msg = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_alert_msg;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of alert message icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_alert_msg}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<MessageSquareWarning strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<MessageSquareWarning strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Alert Message Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_private = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_private;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of private icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_private}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<Fingerprint strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<Fingerprint strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Private Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_public = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_public;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of public icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_public}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<EyeOff strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<Eye strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Public Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_personal = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_personal;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of personal icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_personal}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<BookHeart strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<BookHeart strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Personal Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_professional = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_professional;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of professional icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_professional}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<BriefcaseBusiness strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<BriefcaseBusiness strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Professional Button
</span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.hide_btn_template = !$journals_slct.tmp_journal_obj.cfg_json.hide_btn_template;
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of template icon button(s) on Journal Entry view page"
>
{#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_template}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<FilePlus strokeWidth="1" color="gray" />
<span class="hidden">
Hiding
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<FilePlus strokeWidth="2.5" color="green" />
<span class="hidden">
Showing
</span>
{/if}
<span class="hidden">
Template Button
</span>
</button>
</div>
<!-- JSON configuration editor for advanced users -->
<!-- textarea for json_cfg editing -->
</div>

376
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -11,13 +11,13 @@ import {
Eye, EyeOff,
Flag, FlagOff, FileX, Fingerprint,
Globe, Group,
History,
Hash, History,
LockKeyhole, LockKeyholeOpen,
MessageSquareWarning, Menu, Minus,
NotebookPen, NotebookText, NotepadTextDashed,
Pencil, PenLine, Plus,
RemoveFormatting,
Search,
Search, Settings,
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
SquareLibrary,
Tags, Trash2, TypeOutline,
@@ -863,7 +863,8 @@ function handle_marked(text_string: string) {
<!-- <Pencil strokeWidth="2.5" color="blue" /> -->
<PenLine strokeWidth="2.5" color="red" />
{:else}
<Pencil strokeWidth="1" color="gray" />
<!-- <Pencil strokeWidth="1" color="gray" /> -->
<Hash strokeWidth="1" color="green" />
{/if}
</button>
@@ -935,70 +936,21 @@ function handle_marked(text_string: string) {
{/if}
{/if}
<!-- Category code for journal entry -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<!-- <input
type="text"
bind:value={tmp_entry_obj.category_code}
class="input input-bordered"
placeholder="Category Code"
title="Edit the category code for this journal entry"
/> -->
<!-- Give list of categories to base the new entry on -->
<div class="flex flex-row items-center gap-2">
<span class="text-sm text-gray-500 hidden sm:inline">
Category:
<!-- Currently selected category for Entry; text only -->
{#if $lq__journal_entry_obj.category_code}
<div class="category flex flex-row gap-1 items-center justify-start border-l border-gray-200 rounded-lg">
<span class="text-sm text-gray-500">
<Shapes class="mx-1 inline-block" />
<!-- <span class="hidden sm:inline">Category:</span> -->
</span>
<select
class="novi_btn btn btn-secondary btn-sm
variant-soft-primary
hover:variant-filled-primary
transition
text-xs
"
bind:value={tmp_entry_obj.category_code}
onchange={(event) => {
tmp_entry_obj.category_code = event.target.value;
console.log('Selected category:', tmp_entry_obj.category_code);
update_journal_entry();
}}
title="Select a category for the new journal entry"
<span
class="btn btn-sm variant-glass-tertiary hover:variant-ghost-tertiary transition py-1 px-2"
title={`Category: ${$lq__journal_entry_obj.category_code}`}
>
<option value="">Select Category</option>
{#each $lq__journal_obj?.cfg_json.category_li as category}
<option value={category.code}
selected={$lq__journal_entry_obj.category_code == category.code}
title={`Category: ${category.name}`}
>
{category.name}
</option>
{/each}
</select>
{$lq__journal_entry_obj.category_code}
</span>
</div>
{:else}
{#if $lq__journal_entry_obj.category_code}
<!-- When clicked, this will change to edit the journal entry. -->
<button
type="button"
onclick={() => {
// Toggle edit mode
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'current';
// tmp_entry_obj.category_code = $lq__journal_entry_obj.category_code;
console.log('Editing category:', tmp_entry_obj.category_code);
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2"
title={`Filter by category: ${$lq__journal_entry_obj.category_code}`}
>
<span class="text-sm text-gray-500">
<Shapes class="mx-1 inline-block"/>
</span>
{$lq__journal_entry_obj.category_code ?? '-- no category --'}
</button>
{/if}
{/if}
</div>
@@ -1019,7 +971,229 @@ function handle_marked(text_string: string) {
{#if show_menu}
<div
class="absolute top-12 right-0 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 z-50 w-80"
>
>
<div class="flex flex-row flex-wrap gap-1 items-center justify-end">
<!-- Category code for journal entry -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<!-- <input
type="text"
bind:value={tmp_entry_obj.category_code}
class="input input-bordered"
placeholder="Category Code"
title="Edit the category code for this journal entry"
/> -->
<!-- Give list of categories to base the new entry on -->
<div class="flex flex-row items-center gap-2">
<span class="text-sm text-gray-500 hidden sm:inline">
Category:
</span>
<select
class="novi_btn btn btn-secondary btn-sm
variant-soft-primary
hover:variant-filled-primary
transition
text-xs
"
bind:value={tmp_entry_obj.category_code}
onchange={(event) => {
tmp_entry_obj.category_code = event.target.value;
console.log('Selected category:', tmp_entry_obj.category_code);
update_journal_entry();
}}
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}
selected={$lq__journal_entry_obj.category_code == category.code}
title={`Category: ${category.name}`}
>
{category.name}
</option>
{/each}
</select>
</div>
{:else}
{#if $lq__journal_entry_obj.category_code}
<!-- When clicked, this will change to edit the journal entry. -->
<button
type="button"
onclick={() => {
// Toggle edit mode
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'current';
// tmp_entry_obj.category_code = $lq__journal_entry_obj.category_code;
console.log('Editing category:', tmp_entry_obj.category_code);
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2"
title={`Filter by category: ${$lq__journal_entry_obj.category_code}`}
>
<span class="text-sm text-gray-500">
<Shapes class="mx-1 inline-block"/>
</span>
{$lq__journal_entry_obj.category_code ?? '-- no category --'}
</button>
{/if}
{/if}
</div>
<!-- Journal Entry Options: alert, private, public, personal, professional, template -->
<div
class="
flex flex-row flex-wrap gap-1 items-center justify-center
"
>
<span class="text-sm text-gray-500">
<Settings strokeWidth="1" class="mx-1 inline-block" />
Toggles:
</span>
<!-- Entry alert status -->
<!-- class:hidden={$lq__journal_obj.cfg_json?.hide_btn_alert} -->
<button
type="button"
onclick={() => {
tmp_entry_obj.alert = !$lq__journal_entry_obj?.alert;
update_journal_entry();
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle alert status of this journal entry"
>
{#if $lq__journal_entry_obj?.alert}
<Siren strokeWidth="2.5" color="red" />
{:else}
<MessageSquareWarning strokeWidth="1" color="gray" />
{/if}
</button>
<!-- Entry marked as private -->
<!-- ($lq__journal_obj.cfg_json?.hide_btn_private) || -->
<button
type="button"
class:hidden={(tmp_entry_obj?.private && !$ae_loc.edit_mode)}
onclick={() => {
// Allow for toggle between private (encrypted) and not,
// and if private, allow for decryption.
if (!$lq__journal_entry_obj?.private && tmp_entry_obj?.content) {
// Handle converting to private (encrypted) content
if (confirm('Are you sure you want to encrypt and resave this journal entry?')) {
// Setting private to true will cause the update_journal_entry() function to encrypt the content.
tmp_entry_obj.private = true;
update_journal_entry();
} else {
return false;
}
} else if ($lq__journal_entry_obj?.private && tmp_entry_obj?.content_encrypted) {
// Handle converting to not private (decrypted) content
if (confirm('Are you sure you want to decrypt and resave this journal entry unencrypted?')) {
// tmp_entry_obj.private = !$lq__journal_entry_obj?.private;
// update_journal_entry();
// Setting private to false will cause the update_journal_entry() function to decrypt the content. This will also copy it to tmp_entry_obj.content.
tmp_entry_obj.private = false;
// tmp_entry_obj.
// handle_decrypt_content();
update_journal_entry();
} else {
return false;
}
}
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle private visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.private}
<Fingerprint strokeWidth="2.5" color="green" />
<!-- Private (Encrypted) -->
{:else}
<Fingerprint strokeWidth="1" color="gray" />
<!-- Not Private -->
{/if}
</button>
<!-- Entry allowed to be public -->
<!-- class:hidden={$lq__journal_obj.cfg_json?.hide_btn_public} -->
<button
type="button"
onclick={() => {
tmp_entry_obj.public = !$lq__journal_entry_obj?.public;
update_journal_entry();
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle public visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.public}
<Globe strokeWidth="2.5" color="green" />
{:else}
<Globe strokeWidth="1" color="gray" />
{/if}
</button>
<!-- Entry marked as personal -->
<!-- class:hidden={$lq__journal_obj.cfg_json?.hide_btn_personal} -->
<button
type="button"
onclick={() => {
tmp_entry_obj.personal = !$lq__journal_entry_obj?.personal;
update_journal_entry();
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle personal visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.personal}
<BookHeart strokeWidth="2.5" color="green" />
{:else}
<BookHeart strokeWidth="1" color="gray" />
{/if}
</button>
<!-- Entry marked as professional -->
<!-- class:hidden={$lq__journal_obj.cfg_json?.hide_btn_professional} -->
<button
type="button"
onclick={() => {
tmp_entry_obj.professional = !$lq__journal_entry_obj?.professional;
update_journal_entry();
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle professional visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.professional}
<BriefcaseBusiness strokeWidth="2.5" color="green" />
{:else}
<BriefcaseBusiness strokeWidth="1" color="gray" />
{/if}
</button>
<!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. -->
<button
type="button"
class:hidden={($lq__journal_obj.cfg_json?.hide_btn_template) || !$ae_loc.edit_mode}
onclick={() => {
tmp_entry_obj.template = !$lq__journal_entry_obj?.template;
update_journal_entry();
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle if used as journal entry template"
>
{#if $lq__journal_entry_obj?.template}
<NotepadTextDashed strokeWidth="2.5" color="green" />
{:else}
<NotepadTextDashed strokeWidth="1" color="gray" />
{/if}
</button>
</div>
<!-- Copy and Clone Buttons -->
<div>
<!-- Button to copy the Markdown version -->
@@ -1038,8 +1212,8 @@ function handle_marked(text_string: string) {
>
<Copy size="1em" />
<RemoveFormatting size="2em" />
<span class="hidden">
Copy Plaintext Markdown
<span class="hidden md:inline">
Copy Plaintext Markdown
</span>
</button>
<!-- Button to copy the HTML version -->
@@ -1060,8 +1234,8 @@ function handle_marked(text_string: string) {
>
<Copy size="1em" />
<CodeXml size="2em" />
<span class="hidden">
Copy HTML
<span class="hidden md:inline">
Copy HTML
</span>
</button>
@@ -1098,7 +1272,9 @@ function handle_marked(text_string: string) {
>
<Copy size="1em" />
<TypeOutline size="2em" />
<span class="hidden">Copy Rich Text</span>
<span class="hidden md:inline">
Copy Rich Text
</span>
</button>
<!-- Clone entry -->
@@ -1136,7 +1312,9 @@ function handle_marked(text_string: string) {
<!-- class="btn btn-sm variant-soft-surface hover:variant-filled-warning transition py-1 px-2" -->
<!-- <Copy strokeWidth="1" /> -->
<Copy size="2em" />
<span class="hidden md:inline">Clone Entry</span>
<span class="hidden md:inline">
Clone Entry
</span>
</button>
</div>
@@ -1420,6 +1598,7 @@ function handle_marked(text_string: string) {
<!-- Entry alert status -->
<button
type="button"
class:hidden={$lq__journal_obj.cfg_json?.hide_btn_alert}
onclick={() => {
tmp_entry_obj.alert = !$lq__journal_entry_obj?.alert;
update_journal_entry();
@@ -1456,6 +1635,7 @@ function handle_marked(text_string: string) {
<!-- Only show this private toggle if not private or in edit mode. -->
<button
type="button"
class:hidden={($lq__journal_obj.cfg_json?.hide_btn_private) || (tmp_entry_obj?.private && !$ae_loc.edit_mode)}
onclick={() => {
// Allow for toggle between private (encrypted) and not,
// and if private, allow for decryption.
@@ -1484,7 +1664,6 @@ function handle_marked(text_string: string) {
}
}
}}
class:hidden={(tmp_entry_obj?.private && !$ae_loc.edit_mode)}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle private visibility of this journal entry"
>
@@ -1564,8 +1743,10 @@ function handle_marked(text_string: string) {
</button>
</span>
<!-- Entry allowed to be public -->
<button
type="button"
class:hidden={$lq__journal_obj.cfg_json?.hide_btn_public}
onclick={() => {
tmp_entry_obj.public = !$lq__journal_entry_obj?.public;
update_journal_entry();
@@ -1580,8 +1761,10 @@ function handle_marked(text_string: string) {
{/if}
</button>
<!-- Entry marked as personal -->
<button
type="button"
class:hidden={$lq__journal_obj.cfg_json?.hide_btn_personal}
onclick={() => {
tmp_entry_obj.personal = !$lq__journal_entry_obj?.personal;
update_journal_entry();
@@ -1596,8 +1779,10 @@ function handle_marked(text_string: string) {
{/if}
</button>
<!-- Entry marked as professional -->
<button
type="button"
class:hidden={$lq__journal_obj.cfg_json?.hide_btn_professional}
onclick={() => {
tmp_entry_obj.professional = !$lq__journal_entry_obj?.professional;
update_journal_entry();
@@ -1612,55 +1797,6 @@ function handle_marked(text_string: string) {
{/if}
</button>
<!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. -->
<button
type="button"
onclick={() => {
tmp_entry_obj.template = !$lq__journal_entry_obj?.template;
update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle if used as journal entry template"
>
{#if $lq__journal_entry_obj?.template}
<NotepadTextDashed strokeWidth="2.5" color="green" />
{:else}
<NotepadTextDashed strokeWidth="1" color="gray" />
{/if}
</button>
<!-- <button
type="button"
onclick={() => {
if ($ae_loc.trusted_access) {
let data_kv = {
shared: $lq__journal_entry_obj?.shared ? false : true
};
journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: $lq__journal_entry_obj?.journal_entry_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
// Optionally, you can provide feedback to the user
// alert('Journal entry updated successfully!');
orig_entry_obj = null;
}).catch((error) => {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
});
}
}}
class="btn-icon btn-icon-sm variant-soft-secondary hover:variant-filled-secondary transition"
title="Toggle shared visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.shared}
<Share2 strokeWidth="2.5" color="green" />
{:else}
<Share2 strokeWidth="1" color="gray" />
{/if}
</button> -->
</span>
<!-- If there is history, then we want a toggle button to show and hide the history. -->