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

5
src/routes/journals/+layout.svelte
View File

@@ -81,6 +81,11 @@ if (browser) {
<button
onclick={() => {
// Confirm before clearing
if (!confirm("Are you sure you want to clear all app data and settings? This will reload the page.")) {
return;
}
console.log("Clearing local and session storage, and reloading the page...");
// Clear the local and session storage. Clearing the localStorage will force it to be re-created.
localStorage.clear();

45
src/routes/journals/[journal_id]/+layout.svelte
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>

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

@@ -1,26 +1,24 @@
<script lang="ts">
// *** Import Svelte specific
import { goto } from '$app/navigation';
// import { createIcons, icons } from 'lucide';
// createIcons({ icons });
import { clipboard } from '@skeletonlabs/skeleton';
import {
ArrowDown01, ArrowDownUp,
ArrowDown01, ArrowDown10, ArrowDownUp,
BookHeart, BriefcaseBusiness,
CalendarClock, CalendarOff,
CalendarClock, CalendarOff, CodeXml,
Eye, EyeOff,
Flag, FlagOff, Fingerprint,
Flag, FlagOff, FileX, Fingerprint,
Globe, Group,
MessageSquareWarning, Minus,
NotebookPen, NotebookText,
Pencil,
Plus, Search,
Pencil, Plus,
RemoveFormatting,
Search,
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
Tags, Trash2
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -152,6 +150,50 @@ $effect(() => {
</span>
</h2>
<!-- Button to copy the Markdown version -->
<button
type="button"
onclick={() => {
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 || '';
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>
@@ -628,10 +670,13 @@ $effect(() => {
{:else}
<FlagOff strokeWidth="1" color="gray" />
{/if}
<span class="hidden lg:inline">
Priority
</span>
</button>
<!-- Set sort order (number) -->
<span class="flex flex-row items-center justify-center border border-gray-300 rounded-lg">
<span class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
<button
type="button"
onclick={() => {
@@ -657,7 +702,12 @@ $effect(() => {
<Plus strokeWidth="2.5" color="blue" />
</button>
<span class="mx-1">
{$lq__journal_entry_obj?.sort}
{#if $lq__journal_entry_obj?.sort}
{$lq__journal_entry_obj.sort}
{:else}
<!-- <ArrowDown01 /> -->
<ArrowDown10 />
{/if}
</span>
<button
type="button"
@@ -709,7 +759,7 @@ $effect(() => {
});
}}
class="input input-sm input-bordered w-24"
title="Set group of this journal entry"
title="Set group (for sorting) of this journal entry"
/>
@@ -765,6 +815,7 @@ $effect(() => {
alert('Failed to 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"
>
@@ -782,9 +833,14 @@ $effect(() => {
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
@@ -799,21 +855,38 @@ $effect(() => {
});
}
}}
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"
>
<Trash2 strokeWidth="2.5" color="red" class="inline-block" />
<span class="hidden md:inline">Delete</span>
{#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>
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
<span class="flex flex-row items-center justify-center text-sm text-gray-500">
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
{$lq__journal_entry_obj?.updated_on ?
<span class="flex flex-row items-center justify-center text-sm text-gray-500">
{#if !$ae_loc.edit_mode}
<span class="">
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
{$lq__journal_entry_obj?.updated_on ?
` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_12_no_seconds')}` : ''}
</span>
{:else}
<span class="">
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_tz')}
{$lq__journal_entry_obj?.updated_on ?
` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_tz')}` : ''}
</span>
{/if}
</span>
</div>
{/if}

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>

20
src/routes/journals/ae_comp__journal_obj_li.svelte
View File

@@ -63,26 +63,6 @@ let { lq__journal_obj_li }: Props = $props();
</span>
{/if}
</a>
<!-- {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
<button
type="button"
disabled={!$ae_loc.administrator_access}
onclick={() => {
$journals_slct.journal_id = journals_journal_obj.journal_id;
$journals_slct.journal_obj = journals_journal_obj;
$journals_sess.journals.show__modal_view__journal_id = false;
$journals_sess.journals.show__modal_edit__journal_id = $journals_slct.journal_id;
goto(`/journals/${journals_journal_obj?.journal_id}`);
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title={`Edit journal: ${journals_journal_obj.name}`}
>
<span class="fas fa-edit m-1"></span> Edit Journal
</button>
{/if} -->
</div>
<section