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

More work on making the Journal's module actually useful

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

116
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -4,7 +4,15 @@ let log_lvl: number = 1;
// *** Import Svelte specific
import { goto, invalidate, pushState, replaceState } from '$app/navigation';
import { CalendarClock, Flag, FlagOff, NotebookPen, NotebookText, Shapes, Siren, Tags } from '@lucide/svelte';
import {
CalendarClock, CodeXml,
Eye, EyeOff,
Flag, FlagOff,
NotebookPen, NotebookText,
RemoveFormatting,
Shapes, Siren,
Tags
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
@@ -13,6 +21,7 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
interface Props {
lq__journal_entry_obj_li: any;
@@ -24,6 +33,8 @@ let ae_promises: key_val = $state({});
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
let tmp_entry_obj: key_val = $state({});
</script>
@@ -41,12 +52,15 @@ let ae_promises: key_val = $state({});
<div
class="container journal journal_entry_obj border border-1 p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center bg-white rounded-lg"
class:dim={journals_journal_entry_obj.hide}
class:dim={!journals_journal_entry_obj.enable}
class:bg-warning-100={!journals_journal_entry_obj?.enable}
>
<header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
<h3 class="journal__name h4">
<span class="flex flex-row flex-wrap gap-1">
<h3
class:dim={journals_journal_entry_obj.hide}
class="journal__name h4"
>
<span class="journal_entry__name">
{#if (journals_journal_entry_obj.alert)}
<Siren class="mx-1 inline-block text-red-500"/>
@@ -64,6 +78,55 @@ let ae_promises: key_val = $state({});
</span>
</h3>
<!-- Button to copy the Markdown version -->
<button
type="button"
onclick={() => {
let tmp_entry_obj = journals_journal_entry_obj;
navigator.clipboard.writeText(tmp_entry_obj.content).then(() => {
alert('Markdown content copied to clipboard!');
}).catch((error) => {
console.error('Failed to copy content:', error);
alert('Failed to copy content.');
});
}}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the markdown content"
>
<span class="fas fa-copy mx-1"></span>
<RemoveFormatting />
<span class="hidden">
Copy Plaintext Markdown
</span>
</button>
<!-- Button to copy the rendered to HTML version -->
<button
type="button"
onclick={() => {
// Copy the rendered HTML content to clipboard
// const htmlContent = $lq__journal_entry_obj?.content_md_html || '';
let htmlContent = journals_journal_entry_obj.content_md_html || '';
navigator.clipboard.writeText(htmlContent).then(() => {
alert('Rendered HTML content copied to clipboard!');
}).catch((error) => {
console.error('Failed to copy HTML content:', error);
alert('Failed to copy HTML content.');
});
}}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the rendered HTML content"
>
<span class="fas fa-copy mx-1"></span>
<CodeXml />
<span class="hidden">
Copy Rendered HTML
</span>
</button>
</span>
<div class="flex flex-row gap-2 items-center justify-end">
<!-- Tags for journal entry. Comma delimited list. -->
{#if journals_journal_entry_obj.tags && journals_journal_entry_obj.tags.length}
@@ -126,7 +189,13 @@ let ae_promises: key_val = $state({});
{#if journals_journal_entry_obj.content}
<div class="journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap">
<div
class:hidden={journals_journal_entry_obj.hide}
class="
journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
"
>
{@html journals_journal_entry_obj.content}
</div>
{/if}
@@ -202,7 +271,7 @@ let ae_promises: key_val = $state({});
<section
class="ae_meta mt-2 flex flex-col sm:flex-row gap-2 items-center justify-center text-xs text-gray-500"
class:hidden={!$ae_loc.administrator_access}
class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
>
<!-- <span
class="journal_entry__journal_entry_type"
@@ -225,6 +294,41 @@ let ae_promises: key_val = $state({});
{ae_util.iso_datetime_formatter(journals_journal_entry_obj.updated_on, 'datetime_12_long')}
</span>
</span>
<!-- Set/unset hide (boolean) -->
<button
type="button"
onclick={() => {
let data_kv = {
hide: journals_journal_entry_obj?.hide ? false : true
};
journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: journals_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!');
}).catch((error) => {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
});
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm variant-soft-warning hover:variant-filled-warning transition py-1 px-2"
title={`Set entry as ${journals_journal_entry_obj.hide ? 'visible' : 'hidden'}`}
>
{#if journals_journal_entry_obj.hide}
<EyeOff strokeWidth="1" color="hsla( 0, 100%, 50%, .5)"
class="inline-block" />
<span class="hidden md:inline">Hidden</span>
{:else}
<Eye strokeWidth="2.5" color="hsla( 120, 100%, 25%, .5)"
class="inline-block" />
<span class="hidden lg:inline">Visible</span>
{/if}
</button>
</section>
</div>