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

Prettier for Journals

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:25:22 -04:00
parent e1338b1a72
commit b74c6d0e9c
25 changed files with 3983 additions and 4238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,86 +1,95 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl = $state(0);
/** @type {import('./$types').LayoutProps} */
let log_lvl = $state(0);
// *** Import Svelte specific
import { untrack } from 'svelte';
// import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import Svelte specific
import { untrack } from 'svelte';
// import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import other supporting libraries
import { ArrowDownUp, ArrowRight, House, RefreshCw, Satellite } from '@lucide/svelte';
// *** Import other supporting libraries
import {
ArrowDownUp,
ArrowRight,
House,
RefreshCw,
Satellite
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
// *** Setup Svelte properties
interface Props {
data: any;
children: any;
}
let { data, children }: Props = $props();
// *** Setup Svelte properties
interface Props {
data: any;
children: any;
}
let { data, children }: Props = $props();
// Use effects for store initializations to prevent render-phase updates
$effect(() => {
// Use effects for store initializations to prevent render-phase updates
$effect(() => {
untrack(() => {
if ($slct.account_id !== data.account_id) {
$slct.account_id = data.account_id;
}
});
});
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
if ($slct.account_id !== data.account_id) {
$slct.account_id = data.account_id;
if ($journals_slct.journal_id !== ae_acct.slct.journal_id) {
$journals_slct.journal_id = ae_acct.slct.journal_id;
}
if (
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(ae_acct.slct.journal_obj_li)
) {
$journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
}
});
});
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
if ($journals_slct.journal_id !== ae_acct.slct.journal_id) {
$journals_slct.journal_id = ae_acct.slct.journal_id;
}
if (JSON.stringify($journals_slct.journal_obj_li) !== JSON.stringify(ae_acct.slct.journal_obj_li)) {
$journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
}
});
}
});
let nav_y_height = $state(0);
let box: any = $state(null);
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
function handle_scroll() {
// console.log(`handle_scroll() called`);
if (box) {
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`handle_scroll() called: ${yTop}`);
}
}
});
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
let nav_y_height = $state(0);
let box: any = $state(null);
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
function handle_scroll() {
// console.log(`handle_scroll() called`);
if (box) {
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`handle_scroll() called: ${yTop}`);
}
}
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
}
</script>
<svelte:head>
@@ -97,15 +106,14 @@
class:iframe={$ae_loc?.iframe}
class="
ae_journals
h-full max-h-full max-w-7xl
m-auto flex h-full
max-h-full
max-w-7xl flex-col gap-1
overflow-auto
flex flex-col gap-1
m-auto
bg-gray-50 dark:bg-gray-900
text-gray-800 dark:text-gray-200
"
>
bg-gray-50 text-gray-800
dark:bg-gray-900 dark:text-gray-200
">
<!-- class:hidden={yTop > 200} -->
<nav
bind:clientHeight={nav_y_height}
@@ -113,36 +121,33 @@
class:opacity-0={yTop > 250}
class="
submenu
z-20
hover:opacity-100
absolute top-0 left-0 right-0
w-full max-w-7xl
min-h-12
p-1 px-2 pb-2 m-auto
absolute
top-0
right-0 left-0 z-20 m-auto
flex min-h-12
w-full
max-w-7xl flex-row flex-wrap items-center
flex flex-row flex-wrap
items-center justify-around sm:justify-between
gap-1
justify-around gap-1 rounded-b-lg
border-b-2 bg-gray-200 p-1
px-2
border-b-2 rounded-b-lg
pb-2 transition-all
bg-gray-200 dark:bg-gray-800
duration-1000 hover:opacity-100
transition-all duration-1000
"
>
sm:justify-between dark:bg-gray-800
">
<span class="justify-self-start">
<!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
<Satellite
size="1.5em"
class="mx-1 inline-block text-gray-500"
/>
class="mx-1 inline-block text-gray-500" />
<abbr title="Aether - Journals Module"> Æ Journals </abbr>
</span>
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
<House />
<span class="hidden md:inline"> Home </span>
</a>
@@ -213,9 +218,8 @@
// window.location.reload(true); // true only works with Firefox
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}}
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-warning-500"
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
>
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-warning-500 border"
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared.">
<!-- <span class="fas fa-eraser mx-1"></span> -->
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw />
@@ -230,8 +234,7 @@
show_btn_class="btn-info"
additional_kv={{
test: true
}}
></Help_tech>
}}></Help_tech>
</nav>
<!-- Add overflow-auto to section element to have the main nav sort of sticky at top -->
@@ -244,23 +247,21 @@
class="
main_content
grow
px-1 md:px-2
pb-48
"
>
px-1 pb-48
md:px-2
">
{@render children?.()}
</section>
<div
class:hidden={yTop < 500}
class="
z-20
hover:opacity-100
fixed bottom-48 right-1
fixed
right-1
bottom-48 z-20 flex
flex flex-col gap-1 items-end justify-end
"
>
flex-col items-end justify-end gap-1 hover:opacity-100
">
<!-- Scroll to top button -->
<button
type="button"
@@ -293,8 +294,7 @@
window.parent.postMessage({ scroll_to: 0 }, '*');
}}
title="Scroll to top"
>
title="Scroll to top">
<ArrowDownUp class="rotate-180" />
Scroll to Top
</button>
@@ -321,8 +321,7 @@
window.parent.postMessage({ scroll_to: xScroll }, '*');
}}
title="Scroll to right"
>
title="Scroll to right">
<ArrowRight size="1em" class="inline" />
<!-- Scroll to Right
xLeft={xLeft} xScroll={xScroll} xWidth={xWidth} xScroll={xScroll} scrollLeft={scroll_container().scrollLeft}
@@ -360,8 +359,7 @@
window.parent.postMessage({ scroll_to: yScroll }, '*');
}}
title="Scroll to bottom"
>
title="Scroll to bottom">
<ArrowDownUp />
Scroll to Bottom
</button>
@@ -373,38 +371,35 @@
class:opacity-0={yTop > 250}
class="
footer
z-20
hover:opacity-100
absolute bottom-0 left-0 right-0
w-full max-w-7xl
p-1 m-auto
absolute
right-0
bottom-0 left-0 z-20 m-auto
flex w-full
max-w-7xl flex-row
flex flex-row flex-wrap
items-center justify-between
sm:flex-row md:items-center md:justify-between
gap-1
flex-wrap items-center justify-between
gap-1 rounded-t-lg
border-t-2 border-gray-200 bg-gray-200
p-1
border-t-2 border-gray-200 dark:border-gray-600
rounded-t-lg
bg-gray-200 dark:bg-gray-800
text-xs transition-all duration-1000
hover:text-base
hover:opacity-100 sm:flex-row
text-xs hover:text-base
md:items-center md:justify-between
transition-all duration-1000
dark:border-gray-600 dark:bg-gray-800
"
class:ae_debug={$ae_loc?.debug}
>
class:ae_debug={$ae_loc?.debug}>
<Element_data_store
ds_code="hub__site__appshell_footer"
ds_type="html"
class_li="grow flex flex-row justify-between"
/>
class_li="grow flex flex-row justify-between" />
</footer>
</div>
{:else}
<section
class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center"
>
class="main_content flex grow flex-col items-center gap-1 px-1 pb-28 md:px-2">
<p class="text-center">
You are not logged in as a user. You must be signed in to access the
journals module.

241
src/routes/journals/+page.svelte
View File

@@ -1,103 +1,108 @@
<script lang="ts">
/**
* src/routes/journals/+page.svelte
* Modernized Journals Index View
* Focus: Simplicity for regular users, power tools for edit mode.
*/
// import { onMount } from 'svelte';
import { goto } from '$app/navigation';
/**
* src/routes/journals/+page.svelte
* Modernized Journals Index View
* Focus: Simplicity for regular users, power tools for edit mode.
*/
// import { onMount } from 'svelte';
import { goto } from '$app/navigation';
// *** Icons
import { BookPlus, FileUp, LoaderCircle, Sparkles, SquareLibrary, Wrench } from '@lucide/svelte';
// *** Libraries & Stores
import { liveQuery } from 'dexie';
import { Modal } from 'flowbite-svelte';
import { db_core } from '$lib/ae_core/db_core';
import { db_journals } from '$lib/ae_journals/db_journals';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
// *** Icons
import {
BookPlus,
FileUp,
LoaderCircle,
Sparkles,
SquareLibrary,
Wrench
} from '@lucide/svelte';
// *** Libraries & Stores
import { liveQuery } from 'dexie';
import { Modal } from 'flowbite-svelte';
import { db_core } from '$lib/ae_core/db_core';
import { db_journals } from '$lib/ae_journals/db_journals';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
// *** Components
import AE_Comp_Modal_Journal_Config from './ae_comp__modal_journal_config.svelte';
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
import AE_Comp_Journal_Entry_Quick_Add from './ae_comp__journal_entry_quick_add.svelte';
import AE_Comp_Modal_Journal_Import from './ae_comp__modal_journal_import.svelte';
// *** Components
import AE_Comp_Modal_Journal_Config from './ae_comp__modal_journal_config.svelte';
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
import AE_Comp_Journal_Entry_Quick_Add from './ae_comp__journal_entry_quick_add.svelte';
import AE_Comp_Modal_Journal_Import from './ae_comp__modal_journal_import.svelte';
interface Props {
data: any;
}
interface Props {
data: any;
}
let { data }: Props = $props();
let { data }: Props = $props();
// *** State
let show_import_modal = $state(false);
let log_lvl = 0;
// *** State
let show_import_modal = $state(false);
let log_lvl = 0;
// *** LiveQueries
let lq__account = $derived(
liveQuery(async () => {
if (!$slct.account_id) return null;
return await db_core.account.get($slct.account_id);
})
);
// *** LiveQueries
let lq__account = $derived(
liveQuery(async () => {
if (!$slct.account_id) return null;
return await db_core.account.get($slct.account_id);
})
);
let lq__journal_obj_li = $derived(
liveQuery(async () => {
return await db_journals.journal
.where('person_id')
.equals($ae_loc.person_id)
.reverse()
.sortBy('tmp_sort_3');
})
);
let lq__journal_obj_li = $derived(
liveQuery(async () => {
return await db_journals.journal
.where('person_id')
.equals($ae_loc.person_id)
.reverse()
.sortBy('tmp_sort_3');
})
);
async function create_journal() {
if (!confirm('Create a new journal?')) return;
async function create_journal() {
if (!confirm('Create a new journal?')) return;
const name = $journals_sess.journal.new_journal_name;
const type = $journals_sess.journal.new_journal_type_code;
const name = $journals_sess.journal.new_journal_name;
const type = $journals_sess.journal.new_journal_type_code;
if (name && type) {
try {
const results = await journals_func.create_ae_obj__journal({
api_cfg: $ae_api,
account_id: $slct.account_id,
data_kv: {
person_id: $ae_loc.person_id,
name,
type_code: type,
cfg_json: {
category_li: [{ code: '', name: 'Default' }]
}
if (name && type) {
try {
const results = await journals_func.create_ae_obj__journal({
api_cfg: $ae_api,
account_id: $slct.account_id,
data_kv: {
person_id: $ae_loc.person_id,
name,
type_code: type,
cfg_json: {
category_li: [{ code: '', name: 'Default' }]
}
});
if (results?.journal_id) {
$journals_sess.show__modal_new__journal_obj = false;
goto(`/journals/${results.journal_id}`);
}
} catch (error) {
alert('Failed to create journal.');
});
if (results?.journal_id) {
$journals_sess.show__modal_new__journal_obj = false;
goto(`/journals/${results.journal_id}`);
}
} else {
alert('Please provide a name and type.');
} catch (error) {
alert('Failed to create journal.');
}
} else {
alert('Please provide a name and type.');
}
}
</script>
<div
class="page_container flex flex-col gap-4 sm:gap-6 md:gap-8 items-center w-full min-h-screen p-3 sm:p-4 md:p-8"
>
class="page_container flex min-h-screen w-full flex-col items-center gap-4 p-3 sm:gap-6 sm:p-4 md:gap-8 md:p-8">
<!-- Header Section -->
<header class="text-center space-y-2 max-w-3xl">
<header class="max-w-3xl space-y-2 text-center">
<h1
class="text-3xl sm:text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100"
>
class="text-surface-900 dark:text-surface-100 text-3xl font-black tracking-tight sm:text-4xl md:text-5xl">
<SquareLibrary size="1em" class="text-primary-500 inline-block" />
Journals
</h1>
@@ -105,7 +110,9 @@
{#if $ae_loc.person.given_name || $ae_loc.person.family_name}
<p class="text-surface-600 dark:text-surface-400 font-medium">
<span class="text-primary-500 font-semibold">
{[$ae_loc.person.given_name, $ae_loc.person.family_name].filter(Boolean).join(' ')}
{[$ae_loc.person.given_name, $ae_loc.person.family_name]
.filter(Boolean)
.join(' ')}
</span>
</p>
{/if}
@@ -113,19 +120,17 @@
<!-- Quick Add Integrated Section -->
<section class="w-full max-w-2xl">
<div class="relative group">
<div class="group relative">
<!-- Glow ring: slightly brighter in dark mode where colors need more presence -->
<div
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 dark:opacity-40 group-hover:opacity-60 dark:group-hover:opacity-70 transition duration-1000 group-hover:duration-200"
></div>
class="from-primary-500 to-secondary-500 absolute -inset-1 rounded-2xl bg-linear-to-r opacity-25 blur transition duration-1000 group-hover:opacity-60 group-hover:duration-200 dark:opacity-40 dark:group-hover:opacity-70">
</div>
<AE_Comp_Journal_Entry_Quick_Add
journals_li={$lq__journal_obj_li}
class="relative shadow-2xl rounded-xl overflow-hidden border border-surface-500/10 bg-surface-50 dark:bg-surface-900"
/>
class="border-surface-500/10 bg-surface-50 dark:bg-surface-900 relative overflow-hidden rounded-xl border shadow-2xl" />
</div>
<div
class="mt-2 flex items-center justify-center gap-2 text-xs opacity-50 font-bold uppercase tracking-widest"
>
class="mt-2 flex items-center justify-center gap-2 text-xs font-bold tracking-widest uppercase opacity-50">
<Sparkles size="1em" />
<span>Fast Input Mode Active</span>
</div>
@@ -134,33 +139,29 @@
<!-- Administrative Action Bar (Edit Mode Only) -->
{#if $ae_loc.edit_mode}
<nav
class="flex flex-row flex-wrap gap-3 items-center justify-center w-full py-4 border-y border-surface-500/10"
>
class="border-surface-500/10 flex w-full flex-row flex-wrap items-center justify-center gap-3 border-y py-4">
<button
type="button"
class="btn preset-tonal-secondary shadow-lg hover:scale-105 transition-transform"
class="btn preset-tonal-secondary shadow-lg transition-transform hover:scale-105"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = true)}
>
($journals_sess.show__modal_new__journal_obj = true)}>
<BookPlus size="1.2em" class="mr-2" />
<span>New Journal</span>
</button>
<button
type="button"
class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
onclick={() => (show_import_modal = true)}
>
class="btn preset-tonal-surface shadow-lg transition-transform hover:scale-105"
onclick={() => (show_import_modal = true)}>
<FileUp size="1.2em" class="mr-2" />
<span>Import</span>
</button>
<button
type="button"
class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
class="btn preset-tonal-surface shadow-lg transition-transform hover:scale-105"
onclick={() =>
($journals_sess.show__modal__journals_config = true)}
>
($journals_sess.show__modal__journals_config = true)}>
<Wrench size="1.2em" class="mr-2" />
<span>Config</span>
</button>
@@ -168,11 +169,10 @@
{/if}
<!-- Main List Section -->
<main class="w-full flex justify-center">
<main class="flex w-full justify-center">
{#if $lq__journal_obj_li === undefined}
<div
class="flex flex-col items-center justify-center p-20 gap-4 opacity-50"
>
class="flex flex-col items-center justify-center gap-4 p-20 opacity-50">
<LoaderCircle size="3em" class="animate-spin" />
<p class="text-xl font-bold">Accessing Brain...</p>
</div>
@@ -180,11 +180,10 @@
<Journal_obj_li {lq__journal_obj_li} />
{:else}
<div
class="max-w-md text-center p-12 bg-surface-500/5 rounded-3xl border-2 border-dashed border-surface-500/20"
>
class="bg-surface-500/5 border-surface-500/20 max-w-md rounded-3xl border-2 border-dashed p-12 text-center">
<SquareLibrary size="4em" class="mx-auto mb-4 opacity-20" />
<h3 class="text-2xl font-bold mb-2">No Journals Found</h3>
<p class="opacity-60 mb-6">
<h3 class="mb-2 text-2xl font-bold">No Journals Found</h3>
<p class="mb-6 opacity-60">
You haven't created any journals yet. Start by creating one
to begin your documentation journey.
</p>
@@ -192,8 +191,7 @@
type="button"
class="btn preset-filled-primary"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = true)}
>
($journals_sess.show__modal_new__journal_obj = true)}>
Create Your First Journal
</button>
</div>
@@ -208,32 +206,27 @@
bind:open={$journals_sess.show__modal_new__journal_obj}
autoclose={false}
size="md"
class="bg-white dark:bg-surface-900 shadow-2xl rounded-2xl"
>
<div class="p-2 space-y-4">
class="dark:bg-surface-900 rounded-2xl bg-white shadow-2xl">
<div class="space-y-4 p-2">
<div class="space-y-1">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label class="label text-sm font-bold opacity-75"
>Journal Name</label
>
>Journal Name</label>
<input
type="text"
placeholder="e.g. My Daily Logs"
bind:value={$journals_sess.journal.new_journal_name}
class="input"
/>
class="input" />
</div>
<div class="space-y-1">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label class="label text-sm font-bold opacity-75"
>Type Code</label
>
>Type Code</label>
<input
type="text"
placeholder="e.g. diary, log, notebook"
bind:value={$journals_sess.journal.new_journal_type_code}
class="input"
/>
class="input" />
</div>
<div class="flex justify-end gap-2 pt-4">
<button
@@ -241,13 +234,11 @@
class="btn preset-tonal-surface"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = false)}
>Cancel</button
>
>Cancel</button>
<button
type="button"
class="btn preset-filled-primary font-bold"
onclick={create_journal}>Create Journal</button
>
onclick={create_journal}>Create Journal</button>
</div>
</div>
</Modal>
@@ -255,12 +246,10 @@
{#if $journals_sess.show__modal__journals_config}
<AE_Comp_Modal_Journal_Config
show={$journals_sess.show__modal__journals_config}
/>
show={$journals_sess.show__modal__journals_config} />
{/if}
<AE_Comp_Modal_Journal_Import
bind:open={show_import_modal}
on_close={() => (show_import_modal = false)}
on_import_complete={() => {}}
/>
on_import_complete={() => {}} />

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

@@ -1,83 +1,83 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = $state(0);
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = $state(0);
let { data, children } = $props();
let { data, children } = $props();
// *** Import Svelte specific
import { goto } from '$app/navigation';
// *** Import Svelte specific
import { goto } from '$app/navigation';
// *** Import other supporting libraries
import { FilePlus, Notebook, SquareLibrary, X } from '@lucide/svelte';
// *** Import other supporting libraries
import { FilePlus, Notebook, SquareLibrary, X } from '@lucide/svelte';
import { liveQuery } from 'dexie';
import { liveQuery } from 'dexie';
import { db_journals } from '$lib/ae_journals/db_journals';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import type { ae_JournalEntry } from '$lib/types/ae_types';
import { db_journals } from '$lib/ae_journals/db_journals';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import type { ae_JournalEntry } from '$lib/types/ae_types';
import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
// to prevent circular dependency loops during hydration.
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
});
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
// to prevent circular dependency loops during hydration.
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
});
let show_menu__all_journals: boolean = $state(false);
let show_menu__all_journals: boolean = $state(false);
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
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
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj = { ...results };
}
}
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(
`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`
);
console.log(`lq__journal_obj: results = `, lq__journal_obj);
if ($journals_slct.journal_obj && lq__journal_obj) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(lq__journal_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`
);
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj = { ...results };
}
}
});
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(
`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`
);
console.log(`lq__journal_obj: results = `, lq__journal_obj);
if ($journals_slct.journal_obj && lq__journal_obj) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(lq__journal_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`
);
}
}
}
});
</script>
<!-- Svelte layout for a Journal ID page and children -->
@@ -85,29 +85,27 @@
class="
ae_journals__journal
mx-auto
flex flex-col grow gap-1
items-center
min-h-full
max-h-max
flex max-h-max min-h-full max-w-max
min-w-full
max-w-max
grow
flex-col
items-center
gap-1
space-y-2
"
>
">
<div
class="
flex flex-row flex-wrap
relative flex w-full
flex-row
flex-wrap items-center
justify-between
gap-1
items-center justify-between
border-gray-400
border-b
py-2
w-full
hover:bg-slate-100 hover:dark:bg-slate-700
border-gray-400
py-2 transition-all
relative transition-all
"
>
hover:bg-slate-100 hover:dark:bg-slate-700
">
<!-- If middle click then open the all journals page in a new tab. Otherwise show/hide the menu. -->
<button
type="button"
@@ -134,8 +132,7 @@
transition-all
"
title={`View all journals menu: "${$ae_loc?.user?.name}"
Middle-click to open in new tab`}
>
Middle-click to open in new tab`}>
<!-- <BookHeart /> -->
<!-- <Library /> -->
{#if show_menu__all_journals}
@@ -152,16 +149,15 @@ Middle-click to open in new tab`}
<div
class="
absolute top-12 left-0
p-4 z-50 w-80
space-y-0.5
bg-white dark:bg-gray-800
border border-gray-500
shadow-xl rounded-lg
z-50 w-80 max-w-fit
min-w-72
max-w-fit
space-y-0.5 rounded-lg
border border-gray-500
bg-white p-4
shadow-xl
dark:bg-gray-800
"
class:hidden={!show_menu__all_journals}
>
class:hidden={!show_menu__all_journals}>
<a
href="/journals"
class="
@@ -172,8 +168,7 @@ Middle-click to open in new tab`}
hover:preset-filled-tertiary-300-700
transition-all
"
title="View all journals for this account: {$ae_loc.account_name}"
>
title="View all journals for this account: {$ae_loc.account_name}">
<!-- <BookHeart /> -->
<!-- <Library /> -->
<SquareLibrary class="text-blue-500" />
@@ -195,12 +190,11 @@ Middle-click to open in new tab`}
}}
class="
form-select
border-neutral-400-600
w-full
border p-1
text-sm
border border-neutral-400-600
p-1
"
>
">
<option value="" disabled selected>
{Object.keys($journals_loc.entry_view_history_kv)
.length}&times; Recent Entries...
@@ -228,8 +222,7 @@ Middle-click to open in new tab`}
hover:preset-filled-tertiary-300-700
transition-all
"
title="View all journal entries for this journal: {$lq__journal_obj?.name}"
>
title="View all journal entries for this journal: {$lq__journal_obj?.name}">
<Notebook />
<!-- <Bookmark /> -->
<!-- <BookHeart class="m-1" /> -->
@@ -315,8 +308,7 @@ Middle-click to open in new tab`}
hover:preset-filled-tertiary-300-700
transition-all
"
title="Create a new journal entry for this journal: {$lq__journal_obj?.name}"
>
title="Create a new journal entry for this journal: {$lq__journal_obj?.name}">
<FilePlus />
<!-- <span class="fas fa-plus m-1"></span> -->
<span class="hidden sm:inline"> New Entry </span>

538
src/routes/journals/[journal_id]/+page.svelte
View File

@@ -1,295 +1,291 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
let log_lvl: number = $state(0);
/** @type {import('./$types').PageData} */
let log_lvl: number = $state(0);
interface Props {
data: any;
}
interface Props {
data: any;
}
let { data }: Props = $props();
let { data }: Props = $props();
// *** Import Svelte specific
import { browser } from '$app/environment';
import { untrack } from 'svelte';
// *** Import Svelte specific
import { browser } from '$app/environment';
import { untrack } from 'svelte';
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import { db_journals } from '$lib/ae_journals/db_journals';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import { db_journals } from '$lib/ae_journals/db_journals';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import AeCompJournalObjIdView from './../ae_comp__journal_obj_id_view.svelte';
import Journal_entry_obj_li_wrapper from './../ae_comp__journal_entry_obj_li_wrapper.svelte';
import AeCompModalJournalExport from '../ae_comp__modal_journal_export.svelte';
import AeCompModalJournalImport from '../ae_comp__modal_journal_import.svelte';
import AeCompJournalObjIdView from './../ae_comp__journal_obj_id_view.svelte';
import Journal_entry_obj_li_wrapper from './../ae_comp__journal_entry_obj_li_wrapper.svelte';
import AeCompModalJournalExport from '../ae_comp__modal_journal_export.svelte';
import AeCompModalJournalImport from '../ae_comp__modal_journal_import.svelte';
// Variables
let ae_acct = $derived(data[data.account_id]);
let show_export_modal = $state(false);
let show_import_modal = $state(false);
// Variables
let ae_acct = $derived(data[data.account_id]);
let show_export_modal = $state(false);
let show_import_modal = $state(false);
let search_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = ''; // Search Guard Key
let search_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = ''; // Search Guard Key
function handle_import_complete() {
// Trigger a refresh of the journal entry list
if ($journals_loc.entry.search_version === undefined)
$journals_loc.entry.search_version = 0;
$journals_loc.entry.search_version++;
}
function handle_import_complete() {
// Trigger a refresh of the journal entry list
if ($journals_loc.entry.search_version === undefined)
$journals_loc.entry.search_version = 0;
$journals_loc.entry.search_version++;
}
$effect(() => {
if (!ae_acct) return;
$effect(() => {
if (!ae_acct) return;
untrack(() => {
$journals_slct.journal_id = ae_acct.slct.journal_id;
$journals_slct.journal_entry_id = null;
});
});
let lq__journal_obj = $derived(
liveQuery(async () => {
return await db_journals.journal.get($journals_slct?.journal_id ?? '');
})
);
// Stable LiveQuery Pattern (Aether UI V3)
// Re-wrapped in $derived to ensure the observable instance remains stable
// unless the underlying dependencies (ids, search context) change.
// Important: keep the `liveQuery` closure free of transient reactive
// references — capture stable values (ids, search keys) so the observable
// isn't recreated unnecessarily on every render. Use `search_id_li` or
// other plain arrays/values as explicit dependencies.
let lq__journal_entry_obj_li = $derived(
liveQuery(async () => {
const ids = search_id_li;
const journal_id = $lq__journal_obj?.journal_id;
const search_text = $journals_loc.entry.qry__search_text;
const cat_code = $journals_loc.entry.qry__category_code;
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl)
console.log(`Journal Page LQ: bulkGet ${ids.length} IDs`);
const results = await db_journals.journal_entry.bulkGet(ids);
return results.filter((item) => item !== undefined);
}
// SCENARIO 2: Fallback to broad search (Default view)
if (journal_id && !search_text && !cat_code) {
if (log_lvl)
console.log(
`Journal Page LQ: Fallback search for journal: ${journal_id}`
);
return await db_journals.journal_entry
.where('journal_id')
.equals(journal_id)
.reverse()
.sortBy('tmp_sort_1');
}
return [];
})
);
// Standardized Reactive Search Pattern (Aether UI V3)
// 1. Isolate dependencies into a stable derived object
let search_params = $derived({
v: $journals_loc.entry.search_version,
str: ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim(),
cat: $journals_loc.entry.qry__category_code,
limit: $journals_loc.entry.qry__limit,
enabled: $journals_loc.entry.qry__enabled,
hidden: $journals_loc.entry.qry__hidden,
journal_id: $journals_slct.journal_id,
person_id: $ae_loc.person_id,
remote_first: $journals_loc.entry.qry__remote_first
});
// 2. Controlled effect for triggering searches
$effect(() => {
// Establishes reactive dependency on search_params
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
// Execution MUST be untracked to prevent circular triggers
untrack(() => {
$journals_slct.journal_id = ae_acct.slct.journal_id;
$journals_slct.journal_entry_id = null;
handle_search_refresh(params);
});
}, 250);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
// 1. Guard: Check if criteria actually changed
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const journal_id = params.journal_id;
const remote_first = params.remote_first;
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`
);
// 2. Setup State
untrack(() => {
$journals_sess.entry.qry__status = 'loading';
});
let lq__journal_obj = $derived(
liveQuery(async () => {
return await db_journals.journal.get(
$journals_slct?.journal_id ?? ''
);
})
);
const qry_str = params.str;
const cat_code = params.cat;
// Stable LiveQuery Pattern (Aether UI V3)
// Re-wrapped in $derived to ensure the observable instance remains stable
// unless the underlying dependencies (ids, search context) change.
// Important: keep the `liveQuery` closure free of transient reactive
// references — capture stable values (ids, search keys) so the observable
// isn't recreated unnecessarily on every render. Use `search_id_li` or
// other plain arrays/values as explicit dependencies.
let lq__journal_entry_obj_li = $derived(
liveQuery(async () => {
const ids = search_id_li;
const journal_id = $lq__journal_obj?.journal_id;
const search_text = $journals_loc.entry.qry__search_text;
const cat_code = $journals_loc.entry.qry__category_code;
let local_ids: string[] = [];
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl)
console.log(`Journal Page LQ: bulkGet ${ids.length} IDs`);
const results = await db_journals.journal_entry.bulkGet(ids);
return results.filter((item) => item !== undefined);
}
// SCENARIO 2: Fallback to broad search (Default view)
if (journal_id && !search_text && !cat_code) {
if (log_lvl)
console.log(
`Journal Page LQ: Fallback search for journal: ${journal_id}`
);
return await db_journals.journal_entry
// 3. FAST PATH: Local IDB Search (SWR)
// We skip this ONLY if remote_first is checked AND we have search text
if (!remote_first) {
try {
if (journal_id) {
let local_results = await db_journals.journal_entry
.where('journal_id')
.equals(journal_id)
.reverse()
.sortBy('tmp_sort_1');
}
return [];
})
);
// Standardized Reactive Search Pattern (Aether UI V3)
// 1. Isolate dependencies into a stable derived object
let search_params = $derived({
v: $journals_loc.entry.search_version,
str: ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim(),
cat: $journals_loc.entry.qry__category_code,
limit: $journals_loc.entry.qry__limit,
enabled: $journals_loc.entry.qry__enabled,
hidden: $journals_loc.entry.qry__hidden,
journal_id: $journals_slct.journal_id,
person_id: $ae_loc.person_id,
remote_first: $journals_loc.entry.qry__remote_first
});
// 2. Controlled effect for triggering searches
$effect(() => {
// Establishes reactive dependency on search_params
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
// Execution MUST be untracked to prevent circular triggers
untrack(() => {
handle_search_refresh(params);
});
}, 250);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
// 1. Guard: Check if criteria actually changed
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const journal_id = params.journal_id;
const remote_first = params.remote_first;
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`
);
// 2. Setup State
untrack(() => {
$journals_sess.entry.qry__status = 'loading';
});
const qry_str = params.str;
const cat_code = params.cat;
let local_ids: string[] = [];
// 3. FAST PATH: Local IDB Search (SWR)
// We skip this ONLY if remote_first is checked AND we have search text
if (!remote_first) {
try {
if (journal_id) {
let local_results = await db_journals.journal_entry
.where('journal_id')
.equals(journal_id)
.filter((entry) => {
if (cat_code && entry.category_code !== cat_code)
return false;
if (qry_str) {
const name = (entry.name ?? '').toLowerCase();
const content = (
entry.content ?? ''
).toLowerCase();
return (
name.includes(qry_str) ||
content.includes(qry_str)
);
}
return true;
})
.toArray();
local_results.sort((a, b) => {
const dateA = a.updated_on
? new Date(a.updated_on).getTime()
: 0;
const dateB = b.updated_on
? new Date(b.updated_on).getTime()
: 0;
return dateB - dateA;
});
local_ids = local_results
.map((e) => e.id || e.journal_entry_id)
.filter(Boolean);
if (current_search_id === last_search_id) {
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`
.filter((entry) => {
if (cat_code && entry.category_code !== cat_code)
return false;
if (qry_str) {
const name = (entry.name ?? '').toLowerCase();
const content = (entry.content ?? '').toLowerCase();
return (
name.includes(qry_str) ||
content.includes(qry_str)
);
untrack(() => {
search_id_li = local_ids;
if (local_ids.length > 0)
$journals_sess.entry.qry__status = 'done';
});
}
}
} catch (e) {
if (log_lvl) console.warn('Journal Fast Path failed.', e);
}
}
}
return true;
})
.toArray();
// 4. REVALIDATE: API Request
try {
const results = await journals_func.qry__journal_entry({
api_cfg: $ae_api,
journal_id: journal_id,
person_id: null,
qry_str: qry_str || null,
qry_category_code: cat_code || null,
enabled: params.enabled,
hidden: params.hidden,
limit: params.limit,
log_lvl: 0
});
local_results.sort((a, b) => {
const dateA = a.updated_on
? new Date(a.updated_on).getTime()
: 0;
const dateB = b.updated_on
? new Date(b.updated_on).getTime()
: 0;
return dateB - dateA;
});
if (current_search_id === last_search_id) {
const api_results = results || [];
const api_ids = api_results
.map((e: any) => e.id || e.journal_entry_id)
local_ids = local_results
.map((e) => e.id || e.journal_entry_id)
.filter(Boolean);
// Protect UI cache if API returns empty during revalidation
if (
api_ids.length === 0 &&
local_ids.length > 0 &&
!remote_first &&
!qry_str
) {
if (current_search_id === last_search_id) {
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`
);
untrack(() => {
$journals_sess.entry.qry__status = 'done';
});
return;
}
untrack(() => {
$journals_sess.entry_li = api_results;
search_id_li = api_ids;
$journals_sess.entry.qry__status = 'done';
});
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`
);
}
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Journal revalidation failed:', error);
untrack(() => {
$journals_sess.entry.qry__status = 'error';
if (search_id_li.length === 0 && local_ids.length > 0) {
search_id_li = local_ids;
}
});
if (local_ids.length > 0)
$journals_sess.entry.qry__status = 'done';
});
}
}
} catch (e) {
if (log_lvl) console.warn('Journal Fast Path failed.', e);
}
}
if (browser) {
window.parent.postMessage(
{ journal_id: $journals_slct?.journal_id ?? null },
'*'
);
}
// 4. REVALIDATE: API Request
try {
const results = await journals_func.qry__journal_entry({
api_cfg: $ae_api,
journal_id: journal_id,
person_id: null,
qry_str: qry_str || null,
qry_category_code: cat_code || null,
enabled: params.enabled,
hidden: params.hidden,
limit: params.limit,
log_lvl: 0
});
import { LoaderCircle } from '@lucide/svelte';
if (current_search_id === last_search_id) {
const api_results = results || [];
const api_ids = api_results
.map((e: any) => e.id || e.journal_entry_id)
.filter(Boolean);
// Protect UI cache if API returns empty during revalidation
if (
api_ids.length === 0 &&
local_ids.length > 0 &&
!remote_first &&
!qry_str
) {
untrack(() => {
$journals_sess.entry.qry__status = 'done';
});
return;
}
untrack(() => {
$journals_sess.entry_li = api_results;
search_id_li = api_ids;
$journals_sess.entry.qry__status = 'done';
});
if (log_lvl)
console.log(
`[Journal Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`
);
}
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Journal revalidation failed:', error);
untrack(() => {
$journals_sess.entry.qry__status = 'error';
if (search_id_li.length === 0 && local_ids.length > 0) {
search_id_li = local_ids;
}
});
}
}
}
if (browser) {
window.parent.postMessage(
{ journal_id: $journals_slct?.journal_id ?? null },
'*'
);
}
import { LoaderCircle } from '@lucide/svelte';
</script>
<svelte:head>
@@ -300,9 +296,8 @@
{#if $lq__journal_obj === undefined}
<div
class="flex flex-col items-center justify-center p-20 opacity-50 text-center"
>
<LoaderCircle size="3em" class="animate-spin mb-4 mx-auto" />
class="flex flex-col items-center justify-center p-20 text-center opacity-50">
<LoaderCircle size="3em" class="mx-auto mb-4 animate-spin" />
<p class="text-xl">Loading Journal...</p>
</div>
{:else if $ae_loc.person_id == $lq__journal_obj?.person_id}
@@ -310,32 +305,27 @@
{lq__journal_obj}
{lq__journal_entry_obj_li}
on_show_export={() => (show_export_modal = true)}
on_show_import={() => (show_import_modal = true)}
/>
on_show_import={() => (show_import_modal = true)} />
<Journal_entry_obj_li_wrapper
{lq__journal_obj}
{lq__journal_entry_obj_li}
show_found_header={false}
{log_lvl}
/>
{log_lvl} />
<AeCompModalJournalExport
bind:open={show_export_modal}
entries={$lq__journal_entry_obj_li ?? []}
journal={$lq__journal_obj}
on_close={() => (show_export_modal = false)}
/>
on_close={() => (show_export_modal = false)} />
<AeCompModalJournalImport
bind:open={show_import_modal}
on_close={() => (show_import_modal = false)}
on_import_complete={handle_import_complete}
/>
on_import_complete={handle_import_complete} />
{:else}
<section
class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center"
>
class="main_content flex grow flex-col items-center gap-1 px-1 pb-28 md:px-2">
<p class="text-center">
You must be logged in as the owner to view this Journal.
</p>

472
src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
View File

@@ -1,264 +1,256 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
let log_lvl: number = $state(0);
/** @type {import('./$types').PageData} */
let log_lvl: number = $state(0);
// *** Import Svelte specific
import { untrack } from 'svelte';
import { browser } from '$app/environment';
// *** Import Svelte specific
import { untrack } from 'svelte';
import { browser } from '$app/environment';
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_journals } from '$lib/ae_journals/db_journals';
import {
ae_loc,
ae_sess,
ae_api,
ae_trig,
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_journals } from '$lib/ae_journals/db_journals';
import { ae_loc, ae_sess, ae_api, ae_trig } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import Journal_entry_view from './../../../ae_comp__journal_entry_obj_id_view.svelte';
// import Element_data_store from '$lib/elements/element_data_store.svelte';
import AeCompModalJournalExport from '../../../ae_comp__modal_journal_export.svelte';
import Journal_entry_view from './../../../ae_comp__journal_entry_obj_id_view.svelte';
// import Element_data_store from '$lib/elements/element_data_store.svelte';
import AeCompModalJournalExport from '../../../ae_comp__modal_journal_export.svelte';
interface Props {
data: any;
interface Props {
data: any;
}
let { data }: Props = $props();
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
// Variables
// *** Quickly pull out data from parent(s)
let ae_acct = $derived(data[data.account_id]);
let show_export_modal = $state(false);
$effect(() => {
if (!ae_acct) return;
if (log_lvl) console.log(`ae_acct = `, ae_acct);
untrack(() => {
$journals_slct.journal_id = ae_acct.slct.journal_id;
});
});
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
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj = { ...results };
}
}
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(
`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`
);
console.log(`lq__journal_obj: results = `, lq__journal_obj);
if ($journals_slct.journal_obj && lq__journal_obj) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(lq__journal_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`
);
}
}
}
});
let { data }: Props = $props();
let lq__journal_obj_li = $derived(
liveQuery(async () => {
let results = await db_journals.journal
.where('person_id')
.equals($ae_loc.person_id)
.reverse()
.sortBy('tmp_sort_2');
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
// Check if results are different than the current session version stored under $journals_slct
if (
$journals_slct.journal_obj_li &&
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj_li = [...results];
}
// Variables
// *** Quickly pull out data from parent(s)
let ae_acct = $derived(data[data.account_id]);
let show_export_modal = $state(false);
return results;
})
);
$effect(() => {
if (!ae_acct) return;
if (log_lvl) console.log(`ae_acct = `, ae_acct);
untrack(() => {
$journals_slct.journal_id = ae_acct.slct.journal_id;
});
});
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
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj = { ...results };
}
}
return results;
})
);
$effect(() => {
if (log_lvl) {
$effect(() => {
if (log_lvl) {
console.log(`lq__journal_obj_li: person_id = ${$ae_loc.person_id}`);
console.log(`lq__journal_obj_li: results = `, lq__journal_obj_li);
if (
$journals_slct.journal_obj_li &&
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(lq__journal_obj_li)
) {
console.log(
`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`
`Session slct li stored version has changed for ID = ${$ae_loc.person_id}`,
$journals_slct.journal_obj_li
);
console.log(`lq__journal_obj: results = `, lq__journal_obj);
if ($journals_slct.journal_obj && lq__journal_obj) {
if (
JSON.stringify($journals_slct.journal_obj) !==
JSON.stringify(lq__journal_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`,
$journals_slct.journal_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`
);
}
} else {
if (log_lvl > 1) {
console.log(
`Session slct li stored version has not changed for ID = ${$ae_loc.person_id}`
);
}
}
}
});
// For some reason data.params.journal_entry_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
// NOTE: This must remain reactive (in an effect) so it updates on same-route navigation.
$effect(() => {
if (!ae_acct) return;
untrack(() => {
$journals_slct.journal_entry_id = ae_acct.slct.journal_entry_id;
// $journals_slct.journal_entry_obj = ae_acct.slct.journal_entry_obj;
});
});
let lq__journal_obj_li = $derived(
liveQuery(async () => {
let results = await db_journals.journal
.where('person_id')
.equals($ae_loc.person_id)
.reverse()
.sortBy('tmp_sort_2');
let lq__journal_entry_obj = $derived(
liveQuery(async () => {
let results = await db_journals.journal_entry.get(
$journals_slct.journal_entry_id ?? ''
); // null or undefined does not reset things like '' does
// Check if results are different than the current session version stored under $journals_slct
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_entry_obj && results) {
if (
$journals_slct.journal_obj_li &&
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(results)
JSON.stringify($journals_slct.journal_entry_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_obj_li = [...results];
$journals_slct.journal_entry_obj = { ...results };
}
}
return results;
})
);
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(`lq__journal_obj_li: person_id = ${$ae_loc.person_id}`);
console.log(`lq__journal_obj_li: results = `, lq__journal_obj_li);
$effect(() => {
if (log_lvl) {
console.log(
`lq__journal_entry_obj: journal_entry_id = ${$journals_slct?.journal_entry_id}`
);
console.log(`lq__journal_entry_obj: results = `, lq__journal_entry_obj);
if ($journals_slct.journal_entry_obj && lq__journal_entry_obj) {
if (
$journals_slct.journal_obj_li &&
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(lq__journal_obj_li)
JSON.stringify($journals_slct.journal_entry_obj) !==
JSON.stringify(lq__journal_entry_obj)
) {
console.log(
`Session slct li stored version has changed for ID = ${$ae_loc.person_id}`,
$journals_slct.journal_obj_li
`Session slct stored version has changed for ID = ${$journals_slct.journal_entry_id}`,
$journals_slct.journal_entry_obj
);
} else {
if (log_lvl > 1) {
console.log(
`Session slct li stored version has not changed for ID = ${$ae_loc.person_id}`
);
}
}
}
});
// For some reason data.params.journal_entry_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
// NOTE: This must remain reactive (in an effect) so it updates on same-route navigation.
$effect(() => {
if (!ae_acct) return;
untrack(() => {
$journals_slct.journal_entry_id = ae_acct.slct.journal_entry_id;
// $journals_slct.journal_entry_obj = ae_acct.slct.journal_entry_obj;
});
});
let lq__journal_entry_obj = $derived(
liveQuery(async () => {
let results = await db_journals.journal_entry.get(
$journals_slct.journal_entry_id ?? ''
); // null or undefined does not reset things like '' does
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_entry_obj && results) {
if (
JSON.stringify($journals_slct.journal_entry_obj) !==
JSON.stringify(results)
) {
$journals_slct.journal_entry_obj = { ...results };
}
}
return results;
})
);
$effect(() => {
if (log_lvl) {
console.log(
`lq__journal_entry_obj: journal_entry_id = ${$journals_slct?.journal_entry_id}`
);
console.log(
`lq__journal_entry_obj: results = `,
lq__journal_entry_obj
);
if ($journals_slct.journal_entry_obj && lq__journal_entry_obj) {
if (
JSON.stringify($journals_slct.journal_entry_obj) !==
JSON.stringify(lq__journal_entry_obj)
) {
console.log(
`Session slct stored version has changed for ID = ${$journals_slct.journal_entry_id}`,
$journals_slct.journal_entry_obj
);
} else {
console.log(
`Session slct stored version has not changed for ID = ${$journals_slct.journal_entry_id}`
);
}
}
}
});
$effect(() => {
if (browser && $lq__journal_entry_obj?.journal_entry_id) {
// Start with the current KV or convert the LI to a KV if needed
let history_kv = {
...($journals_loc?.entry_view_history_kv ?? {})
};
// Add or update the current entry
const entry_id = $lq__journal_entry_obj?.journal_entry_id ?? 'NONE';
history_kv[entry_id] = {
id: entry_id,
name:
$lq__journal_entry_obj?.name ??
ae_util.iso_datetime_formatter(
$lq__journal_entry_obj?.created_on,
'datetime_iso_12_no_seconds'
),
url: `/journals/${$lq__journal_entry_obj?.journal_id ?? 'NONE'}/entry/${entry_id}`
};
console.log(`history_kv (before limiting) = `, history_kv);
// // Convert KV to array, sort by most recent (last updated), and limit to 15
// let history_li = Object.values(history_kv);
// console.log(`history_li (before limiting) = `, history_li);
// // If you want to keep the most recent 15, you can use the order of insertion.
// // To do this, remove the oldest if over 15.
// if (history_li.length > 15) {
// // Remove the oldest entries (by insertion order)
// // Get the keys in insertion order
// const keys = Object.keys(history_kv);
// const keys_to_remove = keys.slice(0, history_li.length - 15);
// for (const key of keys_to_remove) {
// delete history_kv[key];
// }
// }
// Only update if changed
if (
JSON.stringify(history_kv) !==
JSON.stringify($journals_loc?.entry_view_history_kv)
) {
$journals_loc.entry_view_history_kv = history_kv;
console.log(
`$journals_loc.entry_view_history_kv = `,
$journals_loc.entry_view_history_kv
`Session slct stored version has not changed for ID = ${$journals_slct.journal_entry_id}`
);
} else {
if (log_lvl > 1) {
console.log(
`$journals_loc.entry_view_history_kv has not changed.`
);
}
}
// log_lvl = 1;
}
});
}
});
$effect(() => {
if (browser && $lq__journal_entry_obj?.journal_entry_id) {
// Start with the current KV or convert the LI to a KV if needed
let history_kv = {
...($journals_loc?.entry_view_history_kv ?? {})
};
// Add or update the current entry
const entry_id = $lq__journal_entry_obj?.journal_entry_id ?? 'NONE';
history_kv[entry_id] = {
id: entry_id,
name:
$lq__journal_entry_obj?.name ??
ae_util.iso_datetime_formatter(
$lq__journal_entry_obj?.created_on,
'datetime_iso_12_no_seconds'
),
url: `/journals/${$lq__journal_entry_obj?.journal_id ?? 'NONE'}/entry/${entry_id}`
};
console.log(`history_kv (before limiting) = `, history_kv);
// // Convert KV to array, sort by most recent (last updated), and limit to 15
// let history_li = Object.values(history_kv);
// console.log(`history_li (before limiting) = `, history_li);
// // If you want to keep the most recent 15, you can use the order of insertion.
// // To do this, remove the oldest if over 15.
// if (history_li.length > 15) {
// // Remove the oldest entries (by insertion order)
// // Get the keys in insertion order
// const keys = Object.keys(history_kv);
// const keys_to_remove = keys.slice(0, history_li.length - 15);
// for (const key of keys_to_remove) {
// delete history_kv[key];
// }
// }
// Only update if changed
if (
JSON.stringify(history_kv) !==
JSON.stringify($journals_loc?.entry_view_history_kv)
) {
$journals_loc.entry_view_history_kv = history_kv;
console.log(
`$journals_loc.entry_view_history_kv = `,
$journals_loc.entry_view_history_kv
);
} else {
if (log_lvl > 1) {
console.log(
`$journals_loc.entry_view_history_kv has not changed.`
);
}
}
// log_lvl = 1;
}
});
</script>
<!-- <svelte:head>
@@ -274,22 +266,20 @@
class="
ae_journals__journal_entry
mx-auto
flex flex-col grow gap-1
items-center
min-h-full
max-h-max
flex max-h-max min-h-full max-w-max
min-w-full
max-w-max
grow
flex-col
items-center
gap-1
space-y-2
"
>
">
<!-- {#if $lq__journal_entry_obj} -->
<Journal_entry_view
{lq__journal_obj}
{lq__journal_obj_li}
{lq__journal_entry_obj}
on_show_export={() => (show_export_modal = true)}
/>
on_show_export={() => (show_export_modal = true)} />
<!-- {/if} -->
</section>
@@ -297,12 +287,10 @@
bind:open={show_export_modal}
entries={$lq__journal_entry_obj ? [$lq__journal_entry_obj] : []}
journal={$lq__journal_obj}
on_close={() => (show_export_modal = false)}
/>
on_close={() => (show_export_modal = false)} />
{:else}
<section
class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center"
>
class="main_content flex grow flex-col items-center gap-1 px-1 pb-28 md:px-2">
<p class="text-center">
You must be logged in as the owner to view this Journal Entry.
</p>

34
src/routes/journals/ae_comp__journal_entry_ai_tools.svelte
View File

@@ -1,24 +1,19 @@
<script lang="ts">
/**
* ae_comp__journal_entry_ai_tools.svelte
* Journal-specific wrapper for the generic AE_AITools.
* Handles layout/positioning and specific save behavior for journal entries.
*/
import AE_AITools from '$lib/ae_elements/AE_AITools.svelte';
/**
* ae_comp__journal_entry_ai_tools.svelte
* Journal-specific wrapper for the generic AE_AITools.
* Handles layout/positioning and specific save behavior for journal entries.
*/
import AE_AITools from '$lib/ae_elements/AE_AITools.svelte';
interface Props {
content: string;
summary: string; // Bindable
on_save: () => void;
log_lvl?: number;
}
interface Props {
content: string;
summary: string; // Bindable
on_save: () => void;
log_lvl?: number;
}
let {
content,
summary = $bindable(),
on_save,
log_lvl = 0
}: Props = $props();
let { content, summary = $bindable(), on_save, log_lvl = 0 }: Props = $props();
</script>
<div class="journal-entry-ai-tools absolute top-2 right-2 z-10">
@@ -29,6 +24,5 @@
summary = newSummary;
on_save();
}}
{log_lvl}
/>
{log_lvl} />
</div>

113
src/routes/journals/ae_comp__journal_entry_editor.svelte
View File

@@ -1,51 +1,50 @@
<script lang="ts">
/**
* ae_comp__journal_entry_editor.svelte
* Extracted 2026-01-08 to modularize the massive Journal Entry view.
* Handles: CodeMirror vs Plain vs Rendered HTML for both View and Edit modes.
*/
import { LockKeyhole, RefreshCcw, Save } from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
/**
* ae_comp__journal_entry_editor.svelte
* Extracted 2026-01-08 to modularize the massive Journal Entry view.
* Handles: CodeMirror vs Plain vs Rendered HTML for both View and Edit modes.
*/
import { LockKeyhole, RefreshCcw, Save } from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
tmp_entry_obj: any; // Bindable
editor_view?: any; // Bindable
has_changed: boolean;
updated_idb: boolean;
on_save: () => void;
on_force_reset?: () => void;
}
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
tmp_entry_obj: any; // Bindable
editor_view?: any; // Bindable
has_changed: boolean;
updated_idb: boolean;
on_save: () => void;
on_force_reset?: () => void;
}
let {
entry,
journal,
tmp_entry_obj = $bindable(),
editor_view = $bindable(),
has_changed,
updated_idb,
on_save,
on_force_reset
}: Props = $props();
let {
entry,
journal,
tmp_entry_obj = $bindable(),
editor_view = $bindable(),
has_changed,
updated_idb,
on_save,
on_force_reset
}: Props = $props();
const is_editing = $derived(
$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
);
const is_editing = $derived(
$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
);
</script>
<div
class="journal-entry-editor-wrapper grow w-full flex flex-col items-center"
>
class="journal-entry-editor-wrapper flex w-full grow flex-col items-center">
{#if !is_editing}
<!-- VIEW MODE -->
<div class="w-full max-w-6xl p-4 prose dark:prose-invert">
<div class="prose dark:prose-invert w-full max-w-6xl p-4">
{@html tmp_entry_obj?.content_md_html || ''}
</div>
{:else}
@@ -53,10 +52,9 @@
{#if !tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted}
<!-- Decryption Required Message -->
<div
class="w-full max-w-6xl p-4 bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 rounded-lg border border-error-500 flex flex-col gap-4"
>
class="bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 border-error-500 flex w-full max-w-6xl flex-col gap-4 rounded-lg border p-4">
<div class="space-y-2">
<div class="font-bold flex items-center gap-2">
<div class="flex items-center gap-2 font-bold">
<LockKeyhole size="1.25em" />
Decryption Required
</div>
@@ -65,16 +63,15 @@
</p>
{#if tmp_entry_obj?.content === false}
<p
class="text-xs font-bold text-error-500 uppercase tracking-widest"
>
class="text-error-500 text-xs font-bold tracking-widest uppercase">
Decryption failed. Incorrect passcode.
</p>
{/if}
</div>
{#if $ae_loc.edit_mode && on_force_reset}
<div class="pt-4 border-t border-error-500/20">
<p class="text-xs mb-2 opacity-70 italic">
<div class="border-error-500/20 border-t pt-4">
<p class="mb-2 text-xs italic opacity-70">
Passcode lost? You can force a reset to plain text,
but all currently encrypted data will be permanently
deleted.
@@ -82,8 +79,7 @@
<button
type="button"
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
onclick={on_force_reset}
>
onclick={on_force_reset}>
<RefreshCcw size="1.1em" class="mr-2" /> Force Reset to
Plain Text
</button>
@@ -98,14 +94,12 @@
bind:editor_view
theme_mode={$ae_loc.theme_mode}
placeholder="Write using Markdown..."
class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
/>
class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800" />
{:else}
<textarea
bind:value={tmp_entry_obj.content}
class="textarea grow w-full max-w-6xl p-4 font-mono shadow-lg rounded-lg border-orange-500/30 h-[500px] whitespace-pre-wrap break-words"
placeholder="Edit content..."
></textarea>
class="textarea h-[500px] w-full max-w-6xl grow rounded-lg border-orange-500/30 p-4 font-mono break-words whitespace-pre-wrap shadow-lg"
placeholder="Edit content..."></textarea>
{/if}
<!-- Floating Save Button -->
@@ -113,9 +107,8 @@
type="button"
onclick={on_save}
disabled={!has_changed}
class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 preset-filled-success shadow-xl z-20 transition-all"
class:hidden={!has_changed}
>
class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-72 right-6 z-20 min-w-32 shadow-xl transition-all"
class:hidden={!has_changed}>
<Save size="1.2em" class="mr-2" /> Save
</button>
@@ -124,16 +117,14 @@
type="button"
onclick={on_save}
disabled={!has_changed}
class="btn preset-tonal-warning hover:preset-filled-warning-500 w-full max-w-96 mt-4"
class:invisible={!has_changed}
>
class="btn preset-tonal-warning hover:preset-filled-warning-500 mt-4 w-full max-w-96"
class:invisible={!has_changed}>
<Save size="1.2em" class="mr-2" /> Save Changes
</button>
{#if updated_idb}
<p
class="text-xs text-error-500 mt-2 font-bold animate-pulse uppercase tracking-widest"
>
class="text-error-500 mt-2 animate-pulse text-xs font-bold tracking-widest uppercase">
IDB object updated since last load!
</p>
{/if}

173
src/routes/journals/ae_comp__journal_entry_header.svelte
View File

@@ -1,75 +1,85 @@
<script lang="ts">
/**
* ae_comp__journal_entry_header.svelte
* Standardized Journal Entry Header.
* Manages name, sync status, and triggers the modular config.
*/
import { ChevronLeft, CircleCheck, CircleX, Eye, Fingerprint, LoaderCircle, LockKeyhole, LockKeyholeOpen, Pencil, RefreshCw, Save, Settings } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
/**
* ae_comp__journal_entry_header.svelte
* Standardized Journal Entry Header.
* Manages name, sync status, and triggers the modular config.
*/
import {
ChevronLeft,
CircleCheck,
CircleX,
Eye,
Fingerprint,
LoaderCircle,
LockKeyhole,
LockKeyholeOpen,
Pencil,
RefreshCw,
Save,
Settings
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
journals_li?: ae_Journal[];
tmp_entry_obj: any; // Bindable
has_changed: boolean;
save_status?: 'saved' | 'unsaved' | 'saving';
on_save: () => void;
on_decrypt: () => void;
on_show_config: () => void;
log_lvl?: number;
}
let {
entry,
journal,
tmp_entry_obj = $bindable(),
has_changed,
save_status = 'saved',
on_save,
on_decrypt,
on_show_config,
log_lvl = 0
}: Props = $props();
const is_decrypted = $derived(
$journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted ===
true
);
function toggle_edit_mode() {
const isEditing =
$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
if (isEditing) {
if (has_changed) on_save();
else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
} else {
$journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
}
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
journals_li?: ae_Journal[];
tmp_entry_obj: any; // Bindable
has_changed: boolean;
save_status?: 'saved' | 'unsaved' | 'saving';
on_save: () => void;
on_decrypt: () => void;
on_show_config: () => void;
log_lvl?: number;
}
let {
entry,
journal,
tmp_entry_obj = $bindable(),
has_changed,
save_status = 'saved',
on_save,
on_decrypt,
on_show_config,
log_lvl = 0
}: Props = $props();
const is_decrypted = $derived(
$journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted === true
);
function toggle_edit_mode() {
const isEditing =
$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
if (isEditing) {
if (has_changed) on_save();
else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
} else {
$journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
}
}
</script>
<header
class="flex flex-col md:flex-row items-center justify-between gap-4 p-3
bg-gray-50 dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-xl shadow-sm w-full"
>
<div class="flex items-center gap-3 w-full md:w-auto">
class="flex w-full flex-col items-center justify-between gap-4 rounded-xl
border border-gray-200
bg-gray-50 p-3 shadow-sm
md:flex-row dark:border-gray-700 dark:bg-gray-800">
<div class="flex w-full items-center gap-3 md:w-auto">
<a
href="/journals/{journal.journal_id}"
class="btn-icon btn-icon-sm preset-tonal-surface"
title="Back to Journal"
>
title="Back to Journal">
<ChevronLeft size="1.2em" />
</a>
<div class="flex items-center gap-2 grow">
<div class="flex grow items-center gap-2">
<button
type="button"
onclick={toggle_edit_mode}
@@ -77,12 +87,10 @@
$journals_loc.entry.edit_kv[entry.journal_entry_id] ===
'current'
? 'preset-filled-success'
: 'preset-tonal-surface'}"
>
: 'preset-tonal-surface'}">
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
{#if has_changed}<Save size="1.2em" />{:else}<Eye
size="1.2em"
/>{/if}
size="1.2em" />{/if}
{:else}
<Pencil size="1.2em" />
{/if}
@@ -92,12 +100,11 @@
<input
type="text"
bind:value={tmp_entry_obj.name}
class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-2 focus:ring-primary-500"
class="input input-sm focus:ring-primary-500 grow border-none bg-transparent text-lg font-bold focus:ring-2 md:min-w-[300px]"
placeholder="Entry Title..."
onchange={on_save}
/>
onchange={on_save} />
{:else}
<h2 class="text-base md:text-lg font-bold truncate max-w-md">
<h2 class="max-w-md truncate text-base font-bold md:text-lg">
{entry.name ||
ae_util.iso_datetime_formatter(
entry.created_on,
@@ -108,12 +115,11 @@
</div>
</div>
<div class="flex items-center gap-2 w-full md:w-auto justify-end">
<div class="flex w-full items-center justify-end gap-2 md:w-auto">
<!-- Auto-Save indicator -->
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
<div
class="flex items-center gap-1 px-2 border-r border-surface-500/20 mr-1"
>
class="border-surface-500/20 mr-1 flex items-center gap-1 border-r px-2">
<button
type="button"
class="btn-icon btn-icon-sm {$journals_loc.entry.auto_save
@@ -122,19 +128,16 @@
onclick={() =>
($journals_loc.entry.auto_save =
!$journals_loc.entry.auto_save)}
title="Toggle Auto Save"
>
title="Toggle Auto Save">
<RefreshCw size="1em" />
</button>
{#if $journals_loc.entry.auto_save}
{#if save_status === 'saving'}<LoaderCircle
size="1em"
class="animate-spin text-primary-500"
/>
class="text-primary-500 animate-spin" />
{:else if save_status === 'saved'}<CircleCheck
size="1em"
class="text-success-500"
/>
class="text-success-500" />
{:else}<CircleX size="1em" class="opacity-30" />{/if}
{/if}
</div>
@@ -145,25 +148,22 @@
<button
type="button"
class="btn-icon btn-icon-sm transition-all {is_decrypted
? 'preset-filled-success shadow-lg shadow-success-500/20'
? 'preset-filled-success shadow-success-500/20 shadow-lg'
: 'preset-tonal-warning'}"
onclick={on_decrypt}
title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
>
title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}>
{#if is_decrypted}<LockKeyholeOpen
size="1.2em"
/>{:else}<LockKeyhole size="1.2em" />{/if}
size="1.2em" />{:else}<LockKeyhole size="1.2em" />{/if}
</button>
{/if}
<div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div>
<div class="bg-surface-500/20 mx-1 h-6 w-[1px]"></div>
<!-- Unified Config Button -->
<button
type="button"
class="btn btn-sm preset-tonal-primary font-bold"
onclick={on_show_config}
>
onclick={on_show_config}>
<Settings size="1.1em" class="mr-2" /> Config
</button>
@@ -172,8 +172,7 @@
<button
type="button"
class="btn btn-sm preset-filled-primary"
onclick={on_save}
>
onclick={on_save}>
<Save size="1.1em" class="mr-2" /> Save
</button>
{/if}

27
src/routes/journals/ae_comp__journal_entry_metadata.svelte
View File

@@ -1,25 +1,24 @@
<script lang="ts">
/**
* JournalEntry_Metadata.svelte
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
* Displays creation, update, and original datetime/timezone information.
*/
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
import type { ae_JournalEntry } from '$lib/types/ae_types';
/**
* JournalEntry_Metadata.svelte
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
* Displays creation, update, and original datetime/timezone information.
*/
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
import type { ae_JournalEntry } from '$lib/types/ae_types';
interface Props {
entry: ae_JournalEntry;
}
interface Props {
entry: ae_JournalEntry;
}
let { entry }: Props = $props();
let { entry }: Props = $props();
</script>
<section class="journal-metadata w-full space-y-4">
<!-- System Timestamps -->
<div
class="flex flex-col sm:flex-row justify-between items-center gap-2 px-1 text-xs text-surface-500"
>
class="text-surface-500 flex flex-col items-center justify-between gap-2 px-1 text-xs sm:flex-row">
<div class="flex gap-4">
<span title="Creation date">
<span class="font-semibold">Created:</span>

402
src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte
View File

@@ -1,205 +1,206 @@
<script lang="ts">
/**
* ae_comp__journal_entry_obj_file_li.svelte
* Manages and displays file attachments for Journal Entries.
* Ported/Refactored 2026-01-26 to include View mode and strictly snake_case.
*/
/**
* ae_comp__journal_entry_obj_file_li.svelte
* Manages and displays file attachments for Journal Entries.
* Ported/Refactored 2026-01-26 to include View mode and strictly snake_case.
*/
// *** Import Lucide Icons
import { Download, ExternalLink, FileUp, LoaderCircle, Paperclip, RefreshCw, Trash2 } from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig,
journals_prom
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// *** Import Lucide Icons
import {
Download,
ExternalLink,
FileUp,
LoaderCircle,
Paperclip,
RefreshCw,
Trash2
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig,
journals_prom
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
interface Props {
log_lvl?: number;
link_to_type: string;
link_to_id: string;
lq__journal_entry_obj: any;
interface Props {
log_lvl?: number;
link_to_type: string;
link_to_id: string;
lq__journal_entry_obj: any;
}
let {
log_lvl = 0,
link_to_type,
link_to_id,
lq__journal_entry_obj
}: Props = $props();
// *** State
let ae_promises: Record<string, any> = $state({});
let upload_complete: boolean = $state(false);
// Selection state for "Select Existing" mode
let slct_hosted_file_kv: key_val = $state({});
let slct_hosted_file_id: string | null = $state(null);
let slct_hosted_file_obj: any = $state(null);
// Selection state for "Upload" mode
let slct_hosted_file_id_li: string[] = $state([]);
let slct_hosted_file_obj_li: any[] = $state([]);
// Derived: Unified file list from both legacy data_json and new linked_li_json
let unified_file_li = $derived.by(() => {
const entry = $lq__journal_entry_obj;
if (!entry) return [];
let files: any[] = [];
// 1. Check new linked_li_json first
if (entry.linked_li_json && Array.isArray(entry.linked_li_json)) {
files = [...entry.linked_li_json];
}
let {
log_lvl = 0,
link_to_type,
link_to_id,
lq__journal_entry_obj
}: Props = $props();
// *** State
let ae_promises: Record<string, any> = $state({});
let upload_complete: boolean = $state(false);
// Selection state for "Select Existing" mode
let slct_hosted_file_kv: key_val = $state({});
let slct_hosted_file_id: string | null = $state(null);
let slct_hosted_file_obj: any = $state(null);
// Selection state for "Upload" mode
let slct_hosted_file_id_li: string[] = $state([]);
let slct_hosted_file_obj_li: any[] = $state([]);
// Derived: Unified file list from both legacy data_json and new linked_li_json
let unified_file_li = $derived.by(() => {
const entry = $lq__journal_entry_obj;
if (!entry) return [];
let files: any[] = [];
// 1. Check new linked_li_json first
if (entry.linked_li_json && Array.isArray(entry.linked_li_json)) {
files = [...entry.linked_li_json];
}
// 2. Merge with legacy hosted_file_kv if not already present
if (entry.data_json?.hosted_file_kv) {
Object.entries(entry.data_json.hosted_file_kv).forEach(
([id, obj]: [string, any]) => {
if (
!files.find(
(f) =>
(f.hosted_file_id ||
f.id ||
f.hosted_file_id) === id
)
) {
files.push({ ...obj, id: id });
}
// 2. Merge with legacy hosted_file_kv if not already present
if (entry.data_json?.hosted_file_kv) {
Object.entries(entry.data_json.hosted_file_kv).forEach(
([id, obj]: [string, any]) => {
if (
!files.find(
(f) =>
(f.hosted_file_id || f.id || f.hosted_file_id) ===
id
)
) {
files.push({ ...obj, id: id });
}
);
}
return files;
});
async function update_journal_entry(updated_files: any[]) {
let data_kv: key_val = {
linked_li_json: JSON.stringify(updated_files),
// Maintain data_json.hosted_file_kv for backward compatibility
data_json: {
...$lq__journal_entry_obj?.data_json,
hosted_file_kv: Object.fromEntries(
updated_files.map((f) => [
f.hosted_file_id || f.id || f.hosted_file_id,
f
])
)
}
};
try {
await 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: 1
});
} catch (error) {
console.error('Error updating journal entry files:', error);
}
}
// *** Effects for File Management
// Handle "Select Existing" completion
$effect(() => {
if (
$lq__journal_entry_obj &&
slct_hosted_file_id &&
slct_hosted_file_obj
) {
const new_file = {
...slct_hosted_file_obj,
id: slct_hosted_file_id
};
const updated_li = [...unified_file_li, new_file];
slct_hosted_file_id = null;
slct_hosted_file_obj = null;
update_journal_entry(updated_li);
}
});
// Handle "Upload" completion
$effect(() => {
if (
$lq__journal_entry_obj &&
upload_complete &&
slct_hosted_file_id_li.length
) {
const new_files = slct_hosted_file_id_li.map((id) => ({
...slct_hosted_file_kv[id],
id: id
}));
const updated_li = [...unified_file_li, ...new_files];
slct_hosted_file_id_li = [];
upload_complete = false;
update_journal_entry(updated_li);
}
});
async function handle_remove_file(file_id: string) {
if (!confirm('Are you sure you want to remove this file attachment?'))
return;
const updated_li = unified_file_li.filter(
(f) => (f.hosted_file_id || f.id || f.hosted_file_id) !== file_id
);
// Also perform physical/orphan deletion if admin
if ($ae_loc.administrator_access) {
await core_func.delete_ae_obj_id__hosted_file({
api_cfg: $ae_api,
hosted_file_id: file_id,
link_to_type: link_to_type,
link_to_id: link_to_id,
rm_orphan: true,
fake_delete: false,
log_lvl
});
}
await update_journal_entry(updated_li);
}
return files;
});
async function update_journal_entry(updated_files: any[]) {
let data_kv: key_val = {
linked_li_json: JSON.stringify(updated_files),
// Maintain data_json.hosted_file_kv for backward compatibility
data_json: {
...$lq__journal_entry_obj?.data_json,
hosted_file_kv: Object.fromEntries(
updated_files.map((f) => [
f.hosted_file_id || f.id || f.hosted_file_id,
f
])
)
}
};
try {
await 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: 1
});
} catch (error) {
console.error('Error updating journal entry files:', error);
}
}
// *** Effects for File Management
// Handle "Select Existing" completion
$effect(() => {
if ($lq__journal_entry_obj && slct_hosted_file_id && slct_hosted_file_obj) {
const new_file = {
...slct_hosted_file_obj,
id: slct_hosted_file_id
};
const updated_li = [...unified_file_li, new_file];
slct_hosted_file_id = null;
slct_hosted_file_obj = null;
update_journal_entry(updated_li);
}
});
// Handle "Upload" completion
$effect(() => {
if (
$lq__journal_entry_obj &&
upload_complete &&
slct_hosted_file_id_li.length
) {
const new_files = slct_hosted_file_id_li.map((id) => ({
...slct_hosted_file_kv[id],
id: id
}));
const updated_li = [...unified_file_li, ...new_files];
slct_hosted_file_id_li = [];
upload_complete = false;
update_journal_entry(updated_li);
}
});
async function handle_remove_file(file_id: string) {
if (!confirm('Are you sure you want to remove this file attachment?'))
return;
const updated_li = unified_file_li.filter(
(f) => (f.hosted_file_id || f.id || f.hosted_file_id) !== file_id
);
// Also perform physical/orphan deletion if admin
if ($ae_loc.administrator_access) {
await core_func.delete_ae_obj_id__hosted_file({
api_cfg: $ae_api,
hosted_file_id: file_id,
link_to_type: link_to_type,
link_to_id: link_to_id,
rm_orphan: true,
fake_delete: false,
log_lvl
});
}
await update_journal_entry(updated_li);
}
</script>
<section class="ae_section journal_entry_files w-full space-y-4 my-2">
<section class="ae_section journal_entry_files my-2 w-full space-y-4">
<!-- Header -->
<div
class="flex items-center justify-between border-b border-surface-500/20 pb-2"
>
class="border-surface-500/20 flex items-center justify-between border-b pb-2">
<h3 class="h3 flex items-center gap-2 text-lg font-bold">
<Paperclip size="1.1em" />
Attachments
{#if unified_file_li.length}
<span class="badge preset-tonal-surface text-xs"
>{unified_file_li.length}</span
>
>{unified_file_li.length}</span>
{/if}
</h3>
@@ -212,8 +213,7 @@
$ae_sess.files.add_to_use_files_method === 'upload'
? 'select'
: 'upload';
}}
>
}}>
<RefreshCw size="1em" class="mr-2" />
{$ae_sess.files.add_to_use_files_method === 'select'
? 'Switch to Upload'
@@ -224,14 +224,13 @@
<!-- File Grid -->
{#if unified_file_li.length}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
{#each unified_file_li as file (file.hosted_file_id ?? file.id)}
{@const file_id =
file.hosted_file_id || file.id || file.hosted_file_id}
<div
class="flex items-center justify-between p-3 rounded-xl bg-surface-50-950 border border-surface-500/10 group hover:border-primary-500 transition-all shadow-sm"
>
<div class="flex items-center gap-3 overflow-hidden grow">
class="bg-surface-50-950 border-surface-500/10 group hover:border-primary-500 flex items-center justify-between rounded-xl border p-3 shadow-sm transition-all">
<div class="flex grow items-center gap-3 overflow-hidden">
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file_id}
hosted_file_obj={file}
@@ -241,18 +240,16 @@
show_divider={true}
max_filename={25}
show_direct_download={$ae_loc.trusted_access &&
$ae_loc.edit_mode}
/>
$ae_loc.edit_mode} />
</div>
<div class="flex items-center gap-1 ml-2">
<div class="ml-2 flex items-center gap-1">
{#if $ae_loc.edit_mode}
<button
type="button"
class="btn btn-sm preset-tonal-error"
onclick={() => handle_remove_file(file_id)}
title="Remove attachment"
>
title="Remove attachment">
<Trash2 size="1.1em" />
</button>
{/if}
@@ -262,8 +259,7 @@
</div>
{:else if !$ae_loc.edit_mode}
<p
class="text-sm text-surface-500 italic p-4 text-center bg-surface-500/5 rounded-xl"
>
class="text-surface-500 bg-surface-500/5 rounded-xl p-4 text-center text-sm italic">
No files attached to this entry.
</p>
{/if}
@@ -271,8 +267,7 @@
<!-- Edit/Management Tools -->
{#if $ae_loc.edit_mode}
<div
class="mt-4 p-4 rounded-2xl bg-surface-500/5 border-2 border-dashed border-surface-500/20"
>
class="bg-surface-500/5 border-surface-500/20 mt-4 rounded-2xl border-2 border-dashed p-4">
{#if $ae_sess.files.add_to_use_files_method === 'upload'}
<Comp_hosted_files_upload
{link_to_type}
@@ -282,13 +277,11 @@
bind:hosted_file_obj_li={slct_hosted_file_obj_li}
bind:hosted_file_obj_kv={slct_hosted_file_kv}
accept="*/*"
class_li="!max-w-none"
>
class_li="!max-w-none">
{#snippet label()}
<div class="flex flex-col items-center gap-2 py-2">
<div
class="p-3 rounded-full bg-primary-500/10 text-primary-500"
>
class="bg-primary-500/10 text-primary-500 rounded-full p-3">
<FileUp size="1.8em" />
</div>
<div class="text-center">
@@ -302,7 +295,7 @@
</Comp_hosted_files_upload>
{:else}
<div class="space-y-2">
<p class="text-sm font-bold opacity-70 ml-1">
<p class="ml-1 text-sm font-bold opacity-70">
Select from existing hosted files:
</p>
<Element_manage_hosted_file_li_wrap
@@ -313,8 +306,7 @@
class_li={''}
bind:slct_hosted_file_kv
bind:slct_hosted_file_id
bind:slct_hosted_file_obj
/>
bind:slct_hosted_file_obj />
</div>
{/if}
</div>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

41
src/routes/journals/ae_comp__journal_entry_obj_li_wrapper.svelte
View File

@@ -1,24 +1,24 @@
<script lang="ts">
interface Props {
container_class_li?: string | Array<string>;
lq__journal_obj: any;
lq__journal_entry_obj_li: any;
show_found_header?: boolean;
log_lvl?: number;
}
interface Props {
container_class_li?: string | Array<string>;
lq__journal_obj: any;
lq__journal_entry_obj_li: any;
show_found_header?: boolean;
log_lvl?: number;
}
let {
container_class_li = '',
lq__journal_obj,
lq__journal_entry_obj_li,
show_found_header = true,
log_lvl = 0
}: Props = $props();
let {
container_class_li = '',
lq__journal_obj,
lq__journal_entry_obj_li,
show_found_header = true,
log_lvl = 0
}: Props = $props();
// *** Import other supporting libraries
import { LoaderCircle } from '@lucide/svelte';
// *** Import Aether specific components
import Journal_entry_obj_li from './ae_comp__journal_entry_obj_li.svelte';
// *** Import other supporting libraries
import { LoaderCircle } from '@lucide/svelte';
// *** Import Aether specific components
import Journal_entry_obj_li from './ae_comp__journal_entry_obj_li.svelte';
</script>
{#if $lq__journal_entry_obj_li}
@@ -26,11 +26,10 @@
{lq__journal_obj}
{lq__journal_entry_obj_li}
{show_found_header}
{log_lvl}
/>
{log_lvl} />
{:else}
<div class="flex flex-col items-center justify-center p-10 opacity-50">
<LoaderCircle size="2em" class="animate-spin mb-2" />
<LoaderCircle size="2em" class="mb-2 animate-spin" />
<p>Loading entries...</p>
</div>
{/if}

202
src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
View File

@@ -1,92 +1,91 @@
<script lang="ts">
interface Props {
log_lvl?: number;
lq__journal_obj: any;
interface Props {
log_lvl?: number;
lq__journal_obj: any;
}
let { log_lvl = $bindable(0), lq__journal_obj }: Props = $props();
import {
ArrowDown01,
ArrowDown10,
ArrowDownUp,
BetweenVerticalEnd,
BetweenVerticalStart,
BookHeart,
BookImage,
Bookmark,
BookOpenText,
BriefcaseBusiness,
Check,
Copy,
Expand,
Eye,
EyeOff,
Flag,
FlagOff,
FilePlus,
Fingerprint,
Globe,
Library,
MessageSquareWarning,
Minus,
Notebook,
Pencil,
Plus,
RemoveFormatting,
SquareLibrary,
Shapes,
Share2,
ShieldCheck,
ShieldMinus,
Siren,
Skull,
Tags,
Target,
ToggleLeft,
ToggleRight,
Trash2,
TypeOutline,
X
} from '@lucide/svelte';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// *** Functions and Logic
function handle_search_trigger() {
if ($journals_loc.entry.search_version === undefined) {
$journals_loc.entry.search_version = 0;
}
$journals_loc.entry.search_version++;
}
let { log_lvl = $bindable(0), lq__journal_obj }: Props = $props();
import {
ArrowDown01,
ArrowDown10,
ArrowDownUp,
BetweenVerticalEnd,
BetweenVerticalStart,
BookHeart,
BookImage,
Bookmark,
BookOpenText,
BriefcaseBusiness,
Check,
Copy,
Expand,
Eye,
EyeOff,
Flag,
FlagOff,
FilePlus,
Fingerprint,
Globe,
Library,
MessageSquareWarning,
Minus,
Notebook,
Pencil,
Plus,
RemoveFormatting,
SquareLibrary,
Shapes,
Share2,
ShieldCheck,
ShieldMinus,
Siren,
Skull,
Tags,
Target,
ToggleLeft,
ToggleRight,
Trash2,
TypeOutline,
X
} from '@lucide/svelte';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_prom,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// *** Functions and Logic
function handle_search_trigger() {
if ($journals_loc.entry.search_version === undefined) {
$journals_loc.entry.search_version = 0;
}
$journals_loc.entry.search_version++;
}
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
</script>
<div
class="ae_group filters_and_search flex flex-row flex-wrap items-center justify-center gap-2"
>
class="ae_group filters_and_search flex flex-row flex-wrap items-center justify-center gap-2">
<!-- Search input form -->
<span class="flex flex-row flex-wrap items-center justify-center gap-1">
<form
@@ -94,9 +93,8 @@
handle_search_trigger();
})}
autocomplete="off"
class="search_form flex flex-row flex-wrap gap-1 items-center justify-center"
>
<span class="text-sm text-gray-500 hidden lg:inline">
class="search_form flex flex-row flex-wrap items-center justify-center gap-1">
<span class="hidden text-sm text-gray-500 lg:inline">
Search:
</span>
<input
@@ -111,18 +109,16 @@
autocomplete="off"
class="
input input-sm
w-44 md:w-52
text-sm
w-44 text-sm
md:w-52
"
class:bg-red-200={$journals_sess.entry_li == null}
class:dark:bg-red-800={$journals_sess.entry_li == null}
/>
class:dark:bg-red-800={$journals_sess.entry_li == null} />
<button
type="submit"
class="btn btn-sm preset-filled-primary transition"
title="Perform detailed search"
>
title="Perform detailed search">
<Library size="1.25em" />
</button>
@@ -142,12 +138,10 @@
hover:preset-filled-surface-500
transition-all
"
title="Clear search query text"
>
title="Clear search query text">
<RemoveFormatting
size="1.25em"
class="text-neutral-800/60 dark:text-neutral-50/60"
/>
class="text-neutral-800/60 dark:text-neutral-50/60" />
<span class="hidden md:inline"> Clear </span>
</button>
</form>
@@ -155,15 +149,14 @@
<!-- Give list of categories to base the new entry on -->
<span class="flex flex-row items-center gap-2">
<span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
<span class="hidden text-sm text-gray-500 md:inline"> Category: </span>
<select
class="select select-sm"
bind:value={$journals_loc.entry.qry__category_code}
onchange={(event) => {
handle_search_trigger();
}}
title="Filter by category"
>
title="Filter by category">
<option value="">All Categories</option>
{#each $lq__journal_obj?.cfg_json?.category_li as category (category.code)}
<option value={category.code}>{category.name}</option>
@@ -173,8 +166,7 @@
<!-- Search Control Toggles -->
<span
class="flex flex-row flex-wrap items-center gap-2 border-l border-surface-300-700 pl-2"
>
class="border-surface-300-700 flex flex-row flex-wrap items-center gap-2 border-l pl-2">
<!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
<!--
<label
@@ -193,9 +185,8 @@
{#if $ae_loc.edit_mode}
<label
class="flex items-center gap-1 cursor-pointer"
title="When enabled, search results are fetched directly from the server first."
>
class="flex cursor-pointer items-center gap-1"
title="When enabled, search results are fetched directly from the server first.">
<span class="text-xs font-semibold text-gray-500">
Remote First?
</span>
@@ -203,8 +194,7 @@
type="checkbox"
bind:checked={$journals_loc.entry.qry__remote_first}
onchange={handle_search_trigger}
class="checkbox checkbox-sm"
/>
class="checkbox checkbox-sm" />
</label>
{/if}
</span>

171
src/routes/journals/ae_comp__journal_entry_quick_add.svelte
View File

@@ -1,98 +1,97 @@
<script lang="ts">
import { api } from '$lib/api/api';
import { ae_api } from '$lib/stores/ae_stores';
import {
journals_slct,
journals_loc,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { BookType } from '@lucide/svelte';
// Props
let {
class: className = '',
placeholder = 'Type your quick note... (First line = Title)',
journals_li = [] // Optional list of journals to select from
} = $props();
import { api } from '$lib/api/api';
import { ae_api } from '$lib/stores/ae_stores';
import {
journals_slct,
journals_loc,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { BookType } from '@lucide/svelte';
// Props
let {
class: className = '',
placeholder = 'Type your quick note... (First line = Title)',
journals_li = [] // Optional list of journals to select from
} = $props();
// State
let note_content = $state('');
let is_submitting = $state(false);
// State
let note_content = $state('');
let is_submitting = $state(false);
// Derived / Local target
// We prefer the persisted 'qry__journal_id' if we are on the main landing page
let selected_journal_id = $state($journals_loc.entry.qry__journal_id);
// Derived / Local target
// We prefer the persisted 'qry__journal_id' if we are on the main landing page
let selected_journal_id = $state($journals_loc.entry.qry__journal_id);
// If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
let target_journal_id = $derived(
$journals_slct.journal_id || selected_journal_id
);
// If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
let target_journal_id = $derived(
$journals_slct.journal_id || selected_journal_id
);
async function handle_submit() {
if (!note_content.trim()) return;
if (!target_journal_id) {
alert('Please select a target journal first.');
return;
}
async function handle_submit() {
if (!note_content.trim()) return;
if (!target_journal_id) {
alert('Please select a target journal first.');
return;
}
is_submitting = true;
is_submitting = true;
const lines = note_content.trim().split('\n');
let name = lines[0].substring(0, 100);
if (lines[0].length > 100) name += '...';
const lines = note_content.trim().split('\n');
let name = lines[0].substring(0, 100);
if (lines[0].length > 100) name += '...';
// Remove the first line (title) from the content
const entry_content = lines.slice(1).join('\n').trim();
// Remove the first line (title) from the content
const entry_content = lines.slice(1).join('\n').trim();
const data_kv = {
name: name,
content: entry_content,
type_code: 'note',
private: false, // Ensure notes are public/decrypted by default
enable: true,
hide: false
};
const data_kv = {
name: name,
content: entry_content,
type_code: 'note',
private: false, // Ensure notes are public/decrypted by default
enable: true,
hide: false
};
try {
const res = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: target_journal_id, // Pass string ID here
data_kv: data_kv,
log_lvl: 1
});
try {
const res = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: target_journal_id, // Pass string ID here
data_kv: data_kv,
log_lvl: 1
});
if (res) {
note_content = '';
// Trigger refresh
$journals_trig.journal_entry_li = true;
} else {
alert('Failed to create note.');
}
} catch (error) {
console.error('Error creating journal entry:', error);
if (res) {
note_content = '';
// Trigger refresh
$journals_trig.journal_entry_li = true;
} else {
alert('Failed to create note.');
}
is_submitting = false;
} catch (error) {
console.error('Error creating journal entry:', error);
alert('Failed to create note.');
}
function handle_keydown(e: KeyboardEvent) {
if (e.ctrlKey && e.key === 'Enter') {
handle_submit();
}
}
is_submitting = false;
}
function handle_journal_change(e: Event) {
const val = (e.target as HTMLSelectElement).value;
selected_journal_id = val;
$journals_loc.entry.qry__journal_id = val; // Persist choice
function handle_keydown(e: KeyboardEvent) {
if (e.ctrlKey && e.key === 'Enter') {
handle_submit();
}
}
function handle_journal_change(e: Event) {
const val = (e.target as HTMLSelectElement).value;
selected_journal_id = val;
$journals_loc.entry.qry__journal_id = val; // Persist choice
}
</script>
<div class="card p-4 space-y-4 preset-tonal-surface {className}">
<div class="card preset-tonal-surface space-y-4 p-4 {className}">
<header
class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2"
>
class="flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
<h3 class="h3 flex items-center gap-2">
<BookType size="1.2em" class="text-primary-500" />
Quick Add
@@ -103,11 +102,9 @@
<select
class="select select-sm font-bold"
value={target_journal_id}
onchange={handle_journal_change}
>
onchange={handle_journal_change}>
<option value="" disabled selected={!target_journal_id}
>Select Target Journal...</option
>
>Select Target Journal...</option>
{#each journals_li as journal (journal.id)}
<option value={journal.id}>{journal.name}</option>
{/each}
@@ -124,22 +121,19 @@
bind:value={note_content}
{placeholder}
onkeydown={handle_keydown}
disabled={is_submitting}
></textarea>
disabled={is_submitting}></textarea>
<div class="flex justify-between items-center">
<div class="flex items-center justify-between">
<span
class="text-[10px] opacity-50 font-mono uppercase tracking-tighter hidden sm:block"
>
class="hidden font-mono text-[10px] tracking-tighter uppercase opacity-50 sm:block">
Press Ctrl + Enter to save
</span>
<div class="flex justify-end space-x-2 grow sm:grow-0">
<div class="flex grow justify-end space-x-2 sm:grow-0">
<button
type="button"
class="btn btn-sm preset-tonal-surface"
onclick={() => (note_content = '')}
disabled={is_submitting || note_content.length === 0}
>
disabled={is_submitting || note_content.length === 0}>
Clear
</button>
<button
@@ -148,8 +142,7 @@
onclick={handle_submit}
disabled={is_submitting ||
!target_journal_id ||
note_content.length === 0}
>
note_content.length === 0}>
{#if is_submitting}Saving...{:else}Add Note{/if}
</button>
</div>

669
src/routes/journals/ae_comp__journal_obj_id_edit.svelte
View File

File diff suppressed because it is too large Load Diff

455
src/routes/journals/ae_comp__journal_obj_id_view.svelte
View File

@@ -1,265 +1,265 @@
<script lang="ts">
// *** Import Svelte specific
import { goto } from '$app/navigation';
// *** Import Svelte specific
import { goto } from '$app/navigation';
// *** Import other supporting libraries
import { BookOpenText, BookPlus, FileDown, FilePlus, FileUp, LoaderCircle, Menu, Pencil, Settings } from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig,
journals_prom
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import Journal_obj_id_edit from './ae_comp__journal_obj_id_edit.svelte';
// *** Import other supporting libraries
import {
BookOpenText,
BookPlus,
FileDown,
FilePlus,
FileUp,
LoaderCircle,
Menu,
Pencil,
Settings
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess,
journals_slct,
journals_trig,
journals_prom
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import Journal_obj_id_edit from './ae_comp__journal_obj_id_edit.svelte';
interface Props {
log_lvl?: number;
lq__journal_obj: any;
lq__journal_entry_obj_li: any;
on_show_export?: () => void;
on_show_import?: () => void;
interface Props {
log_lvl?: number;
lq__journal_obj: any;
lq__journal_entry_obj_li: any;
on_show_export?: () => void;
on_show_import?: () => void;
}
let {
log_lvl = 0,
lq__journal_obj,
lq__journal_entry_obj_li,
on_show_export,
on_show_import
}: Props = $props();
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_trigger: any = null;
// let ae_triggers: key_val = {};
let typed_journal_passcode: string = $state('');
let passcode_timer: any = $state(null);
$effect(() => {
if (typed_journal_passcode?.length > 4) {
if (!$journals_sess?.journal_kv) {
$journals_sess.journal_kv = {};
}
if (!$journals_sess.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {};
}
verify_journal_passcode();
}
let {
log_lvl = 0,
lq__journal_obj,
lq__journal_entry_obj_li,
on_show_export,
on_show_import
}: Props = $props();
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_trigger: any = null;
// let ae_triggers: key_val = {};
let typed_journal_passcode: string = $state('');
let passcode_timer: any = $state(null);
$effect(() => {
if (typed_journal_passcode?.length > 4) {
if (!$journals_sess?.journal_kv) {
$journals_sess.journal_kv = {};
}
if (!$journals_sess.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {};
}
verify_journal_passcode();
}
// We need to set a timeout to force the user to re-enter their private passcode
if (
$lq__journal_obj?.id &&
$journals_sess?.journal_kv[$lq__journal_obj?.id] &&
$journals_sess?.journal_kv[$lq__journal_obj?.id]
?.journal_passcode_verified
) {
if (passcode_timer) {
if (log_lvl) {
console.log('Passcode timer already set');
}
return;
}
// Use journal.passcode_timeout (assuming it's in minutes, default to 5)
const timeout_minutes = $lq__journal_obj?.passcode_timeout ?? 5;
const timeout_ms = 1000 * 60 * timeout_minutes;
// We need to set a timeout to force the user to re-enter their private passcode
if (
$lq__journal_obj?.id &&
$journals_sess?.journal_kv[$lq__journal_obj?.id] &&
$journals_sess?.journal_kv[$lq__journal_obj?.id]
?.journal_passcode_verified
) {
if (passcode_timer) {
if (log_lvl) {
console.log(
`Setting passcode timer for ${timeout_minutes} minutes (${timeout_ms}ms)`
);
console.log('Passcode timer already set');
}
passcode_timer = setTimeout(() => {
if (log_lvl) {
console.log('Passcode timer expired');
}
typed_journal_passcode = '';
if (!$journals_sess?.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {};
}
// Reset verification and decryption flags
$journals_sess.journal_kv[
$lq__journal_obj?.id
].journal_passcode_verified = false;
$journals_sess.journal_kv[
$lq__journal_obj?.id
].journal_passcode_decrypted = false;
passcode_timer = null;
}, timeout_ms);
return;
}
});
function verify_journal_passcode() {
// Use journal.passcode_timeout (assuming it's in minutes, default to 5)
const timeout_minutes = $lq__journal_obj?.passcode_timeout ?? 5;
const timeout_ms = 1000 * 60 * timeout_minutes;
if (log_lvl) {
console.log(
`verify_journal_passcode: typed_journal_passcode = ${typed_journal_passcode} journal private passcode = ${$lq__journal_obj?.private_passcode}`
`Setting passcode timer for ${timeout_minutes} minutes (${timeout_ms}ms)`
);
}
if (typed_journal_passcode === $lq__journal_obj?.private_passcode) {
console.log('Matched journal private passcode');
passcode_timer = setTimeout(() => {
if (log_lvl) {
console.log('Passcode timer expired');
}
typed_journal_passcode = '';
if (!$journals_sess?.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {};
}
$journals_sess.journal_kv[$lq__journal_obj?.id] = {
typed_journal_passcode: typed_journal_passcode,
journal_passcode_verified: true
};
typed_journal_passcode = '';
} else {
}
// Reset verification and decryption flags
$journals_sess.journal_kv[
$lq__journal_obj?.id
].journal_passcode_verified = false;
$journals_sess.journal_kv[
$lq__journal_obj?.id
].journal_passcode_decrypted = false;
passcode_timer = null;
}, timeout_ms);
}
});
function verify_journal_passcode() {
if (log_lvl) {
console.log(
`verify_journal_passcode: typed_journal_passcode = ${typed_journal_passcode} journal private passcode = ${$lq__journal_obj?.private_passcode}`
);
}
async function handle_new_entry() {
let data_kv = {
category_code: null
if (typed_journal_passcode === $lq__journal_obj?.private_passcode) {
console.log('Matched journal private passcode');
if (!$journals_sess?.journal_kv[$lq__journal_obj?.id]) {
$journals_sess.journal_kv[$lq__journal_obj?.id] = {};
}
$journals_sess.journal_kv[$lq__journal_obj?.id] = {
typed_journal_passcode: typed_journal_passcode,
journal_passcode_verified: true
};
if ($journals_loc.entry.qry__category_code) {
data_kv.category_code = $journals_loc.entry.qry__category_code;
}
try {
const results = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
});
if (results?.journal_entry_id) {
$journals_slct.journal_entry_id =
results.journal_entry_id;
$journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] =
'current';
goto(
`/journals/${$lq__journal_obj?.journal_id}/entry/${results.journal_entry_id}`
);
}
} catch (error) {
console.error('Error creating journal entry:', error);
alert('Failed to create new journal entry.');
}
typed_journal_passcode = '';
} else {
}
}
async function handle_new_entry() {
let data_kv = {
category_code: null
};
if ($journals_loc.entry.qry__category_code) {
data_kv.category_code = $journals_loc.entry.qry__category_code;
}
try {
const results = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
});
if (results?.journal_entry_id) {
$journals_slct.journal_entry_id = results.journal_entry_id;
$journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] =
'current';
goto(
`/journals/${$lq__journal_obj?.journal_id}/entry/${results.journal_entry_id}`
);
}
} catch (error) {
console.error('Error creating journal entry:', error);
alert('Failed to create new journal entry.');
}
}
</script>
<div class="relative group/view w-full mx-2 my-1">
<div class="group/view relative mx-2 my-1 w-full">
<!-- Glow ring — mirrors Quick Add and Journal List -->
<div
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
rounded-2xl blur opacity-10 dark:opacity-20
group-hover/view:opacity-25 dark:group-hover/view:opacity-35
transition duration-700 pointer-events-none"
></div>
class="from-primary-500 to-secondary-500 pointer-events-none absolute -inset-1
rounded-2xl bg-linear-to-r opacity-10 blur
transition duration-700
group-hover/view:opacity-25 dark:opacity-20 dark:group-hover/view:opacity-35">
</div>
<section
class="relative rounded-xl p-3 w-full
flex flex-col gap-2 items-center justify-center
bg-white dark:bg-gray-900
border border-gray-200 dark:border-gray-700
text-gray-900 dark:text-gray-100
shadow-xl"
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
<header
class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full"
>
<h2 class="journal__name h3 text-center">
<BookOpenText class="inline-block text-primary-500/80" />
{@html $lq__journal_obj?.name ?? 'Loading...'}
class="relative flex w-full flex-col
items-center justify-center gap-2 rounded-xl border
border-gray-200 bg-white
p-3 text-gray-900 shadow-xl
dark:border-gray-700 dark:bg-gray-900
dark:text-gray-100"
bind:clientHeight={$ae_loc.iframe_height_modal_body}>
<header
class="ae_header journal__header flex w-full flex-row flex-wrap items-center justify-between gap-2">
<h2 class="journal__name h3 text-center">
<BookOpenText class="text-primary-500/80 inline-block" />
{@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.edit_mode}
<span
class="badge preset-tonal-success font-bold text-lg px-2 ml-2"
title="Entries matching current filters"
>
{$lq__journal_entry_obj_li?.length ?? '0'}<span
class="text-xs opacity-50 ml-0.5">&times;</span
>
</span>
{/if}
{#if $ae_loc.edit_mode}
<span
class="badge preset-tonal-success ml-2 px-2 text-lg font-bold"
title="Entries matching current filters">
{$lq__journal_entry_obj_li?.length ?? '0'}<span
class="ml-0.5 text-xs opacity-50">&times;</span>
</span>
{/if}
{#await $journals_prom.load__journal_entry_obj_li}
<LoaderCircle
size="1em"
class="inline-block animate-spin ml-1 text-primary-500"
/>
{/await}
</h2>
{#await $journals_prom.load__journal_entry_obj_li}
<LoaderCircle
size="1em"
class="text-primary-500 ml-1 inline-block animate-spin" />
{/await}
</h2>
<div
class="grow flex flex-row flex-wrap gap-2 items-center justify-end"
>
<!-- Simplified Config Trigger -->
<button
type="button"
onclick={() =>
($journals_sess.show__modal_edit__journal_obj = true)}
class="btn preset-tonal-secondary py-1 px-3 shadow-md"
title="Journal Config & Actions"
>
<Settings size="1.2em" class="mr-2" />
<span class="hidden md:inline">Config</span>
</button>
<div
class="flex grow flex-row flex-wrap items-center justify-end gap-2">
<!-- Simplified Config Trigger -->
<button
type="button"
onclick={() =>
($journals_sess.show__modal_edit__journal_obj = true)}
class="btn preset-tonal-secondary px-3 py-1 shadow-md"
title="Journal Config & Actions">
<Settings size="1.2em" class="mr-2" />
<span class="hidden md:inline">Config</span>
</button>
<!-- Passcode Verification (Condensed) -->
{#if !$journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
<div class="flex gap-1">
<input
autocomplete="off"
type="text"
bind:value={typed_journal_passcode}
placeholder="Passcode"
class="input input-sm w-32"
/>
</div>
{/if}
</div>
</header>
<!-- Passcode Verification (Condensed) -->
{#if !$journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
<div class="flex gap-1">
<input
autocomplete="off"
type="text"
bind:value={typed_journal_passcode}
placeholder="Passcode"
class="input input-sm w-32" />
</div>
{/if}
</div>
</header>
<!-- Show Journal description -->
{#if $lq__journal_obj?.description && $ae_loc.edit_mode}
<div
class="
<!-- Show Journal description -->
{#if $lq__journal_obj?.description && $ae_loc.edit_mode}
<div
class="
prose
space-y-1
p-2
w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
font-mono
bg-gray-50 text-gray-900
dark:bg-gray-800 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap word-break
prose-p:m-0 prose-p:p-0
prose-h1:underline prose-h1:decoration-double
word-break
prose-p:m-0
prose-p:p-0 prose-h1:underline prose-h1:decoration-double
prose-h2:underline
prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
prose-h1:text-2xl prose-h2:text-xl
prose-h3:text-lg prose-h1:m-0
prose-h2:m-0 prose-h3:m-0
prose-h4:m-0 prose-h5:m-0 prose-h6:m-0 prose-li:m-0
prose-li:m-0 prose-li:p-0 prose-li:line-height-none
"
>
{@html $lq__journal_obj.description_md_html}
</div>
{/if}
prose-li:p-0 prose-li:line-height-none
w-full max-w-(--breakpoint-sm)
space-y-1
rounded-lg bg-gray-50 p-2
font-mono text-sm font-normal text-wrap text-gray-900 shadow-md
md:max-w-(--breakpoint-md) dark:bg-gray-800 dark:text-gray-100
">
{@html $lq__journal_obj.description_md_html}
</div>
{/if}
</section>
</div>
@@ -270,5 +270,4 @@
bind:show={$journals_sess.show__modal_edit__journal_obj}
on_new_entry={handle_new_entry}
{on_show_export}
{on_show_import}
/>
{on_show_import} />

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

@@ -1,19 +1,19 @@
<script lang="ts">
/**
* ae_comp__journal_obj_li.svelte
* Modernized Journal List Component
* Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
* Style: Tailwind 4 + Skeleton UI Reference Standard
*/
import { BookOpenText, BookType, Calendar, Clock, Hash } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
/**
* ae_comp__journal_obj_li.svelte
* Modernized Journal List Component
* Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
* Style: Tailwind 4 + Skeleton UI Reference Standard
*/
import { BookOpenText, BookType, Calendar, Clock, Hash } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
interface Props {
lq__journal_obj_li: any;
}
interface Props {
lq__journal_obj_li: any;
}
let { lq__journal_obj_li }: Props = $props();
let { lq__journal_obj_li }: Props = $props();
</script>
<!--
@@ -22,109 +22,138 @@
Uses plain Tailwind gray scale with explicit dark: variants — no Skeleton paired utilities —
so behavior is predictable regardless of which Skeleton theme is active.
-->
<div class="w-full max-w-2xl relative group/list">
<div class="group/list relative w-full max-w-2xl">
<!-- Glow ring behind the list, same technique as Quick Add -->
<div
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
rounded-2xl blur opacity-10 dark:opacity-20
group-hover/list:opacity-25 dark:group-hover/list:opacity-35
transition duration-700 pointer-events-none"
></div>
class="from-primary-500 to-secondary-500 pointer-events-none absolute -inset-1
rounded-2xl bg-linear-to-r opacity-10 blur
transition duration-700
group-hover/list:opacity-25 dark:opacity-20 dark:group-hover/list:opacity-35">
</div>
<section class="journal_list relative w-full space-y-1.5 p-2 sm:p-3
bg-white dark:bg-gray-900
border border-gray-200 dark:border-gray-700
rounded-2xl shadow-xl">
<section
class="journal_list relative w-full space-y-1.5 rounded-2xl border
border-gray-200 bg-white
p-2 shadow-xl sm:p-3
dark:border-gray-700 dark:bg-gray-900">
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
{#each $lq__journal_obj_li as journal (journal.journal_id)}
<a
href="/journals/{journal?.journal_id}"
class="journal_card group relative
flex items-center gap-3 px-4 py-3
bg-gray-50 dark:bg-gray-800
border border-gray-200 dark:border-gray-700
border-l-4 border-l-primary-500/60
rounded-xl shadow-sm
hover:shadow-md hover:border-l-primary-500
hover:bg-gray-100 dark:hover:bg-gray-700
class="journal_card group border-l-primary-500/60
hover:border-l-primary-500 relative flex items-center gap-3
rounded-xl border
border-l-4 border-gray-200 bg-gray-50
px-4 py-3
shadow-sm transition-all
duration-150 ease-in-out
hover:bg-gray-100 hover:shadow-md
active:scale-[0.99]
transition-all duration-150 ease-in-out"
class:hidden={(journal?.hide || !journal?.enable) && !$ae_loc.trusted_access}
dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
class:hidden={(journal?.hide || !journal?.enable) &&
!$ae_loc.trusted_access}
class:opacity-60={journal.hide}
class:!border-l-warning-500={!journal?.enable}
>
class:!border-l-warning-500={!journal?.enable}>
<!-- Icon: fixed size, never squashed -->
<div class="shrink-0 p-2 bg-primary-500/10 rounded-lg text-primary-500
group-hover:bg-primary-500 group-hover:text-white transition-colors">
<div
class="bg-primary-500/10 text-primary-500 group-hover:bg-primary-500 shrink-0 rounded-lg
p-2 transition-colors group-hover:text-white">
<BookType size="1.3em" />
</div>
<!-- Name + badge: min-w-0 flex-1 lets text shrink and wrap -->
<div class="min-w-0 flex-1">
<div class="text-sm sm:text-base font-bold
text-gray-900 dark:text-gray-100
leading-snug break-words">
<div
class="text-sm leading-snug font-bold
break-words text-gray-900
sm:text-base dark:text-gray-100">
{journal.name}
</div>
<div class="flex flex-wrap items-center gap-2 mt-0.5">
<div class="mt-0.5 flex flex-wrap items-center gap-2">
{#if journal.type_code}
<span class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold">
<span
class="badge preset-tonal-warning text-[10px] font-bold tracking-wider uppercase">
{journal.type_code}
</span>
{/if}
<!-- Description snippet: edit mode only -->
{#if journal.description && $ae_loc.edit_mode}
<span class="text-[11px] text-gray-500 dark:text-gray-400 font-mono truncate max-w-[16rem]">
{ae_util.strip_html ? ae_util.strip_html(journal.description).slice(0, 60) : journal.description.slice(0, 60)}&hellip;
<span
class="max-w-[16rem] truncate font-mono text-[11px] text-gray-500 dark:text-gray-400">
{ae_util.strip_html
? ae_util
.strip_html(journal.description)
.slice(0, 60)
: journal.description.slice(
0,
60
)}&hellip;
</span>
{/if}
</div>
</div>
<!-- Stats: right-aligned, compact -->
<div class="shrink-0 flex flex-col items-end gap-0.5
<div
class="flex shrink-0 flex-col items-end gap-0.5
text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-1" title="Entry Count">
<div
class="flex items-center gap-1"
title="Entry Count">
<Hash size="0.85em" />
<span class="font-bold tabular-nums">{journal.journal_entry_count ?? 0}&times;</span>
<span class="font-bold tabular-nums"
>{journal.journal_entry_count ??
0}&times;</span>
</div>
<div class="flex items-center gap-1" title="Last Updated">
<div
class="flex items-center gap-1"
title="Last Updated">
<Clock size="0.85em" />
<span class="tabular-nums">{ae_util.iso_datetime_formatter(
journal.updated_on || journal.created_on,
'date_short'
)}</span>
</div>
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
<div class="flex items-center gap-1 opacity-40" title="Created">
<Calendar size="0.85em" />
<span class="font-mono text-[10px] tabular-nums">{ae_util.iso_datetime_formatter(
journal.created_on,
<span class="tabular-nums"
>{ae_util.iso_datetime_formatter(
journal.updated_on || journal.created_on,
'date_short'
)}</span>
</div>
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
<div
class="flex items-center gap-1 opacity-40"
title="Created">
<Calendar size="0.85em" />
<span class="font-mono text-[10px] tabular-nums"
>{ae_util.iso_datetime_formatter(
journal.created_on,
'date_short'
)}</span>
</div>
{/if}
</div>
<!-- Chevron hint: desktop only -->
<BookOpenText size="0.95em"
class="shrink-0 opacity-0 group-hover:opacity-30 transition-opacity hidden sm:block" />
<BookOpenText
size="0.95em"
class="hidden shrink-0 opacity-0 transition-opacity group-hover:opacity-30 sm:block" />
<!-- Status overlays: edit mode only -->
{#if $ae_loc.edit_mode}
<div class="absolute -top-1.5 -right-1.5 flex gap-1">
{#if journal.hide}
<span class="badge-icon preset-tonal-surface shadow-sm" title="Hidden">🚫</span>
<span
class="badge-icon preset-tonal-surface shadow-sm"
title="Hidden">🚫</span>
{/if}
{#if !journal.enable}
<span class="badge-icon preset-tonal-warning shadow-sm" title="Disabled">⚠️</span>
<span
class="badge-icon preset-tonal-warning shadow-sm"
title="Disabled">⚠️</span>
{/if}
</div>
{/if}
</a>
{/each}
{:else}
<div class="p-20 text-center text-gray-400 dark:text-gray-500 flex flex-col items-center gap-4">
<div
class="flex flex-col items-center gap-4 p-20 text-center text-gray-400 dark:text-gray-500">
<BookType size="4em" />
<p class="text-xl">No journals found in this view.</p>
</div>

293
src/routes/journals/ae_comp__modal_journal_config.svelte
View File

@@ -1,50 +1,63 @@
<script lang="ts">
import { untrack } from 'svelte';
/**
* ae_comp__modal_journal_config.svelte
* Standardized Module-level settings for Journals.
* Fixed Svelte 5 state placement and reactivity loops.
*/
import { CalendarClock, Check, CodeXml, Database, Layout, MonitorPlay, MousePointerClick, Palette, Settings, ShieldCheck, Wrench, X } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
import { untrack } from 'svelte';
/**
* ae_comp__modal_journal_config.svelte
* Standardized Module-level settings for Journals.
* Fixed Svelte 5 state placement and reactivity loops.
*/
import {
CalendarClock,
Check,
CodeXml,
Database,
Layout,
MonitorPlay,
MousePointerClick,
Palette,
Settings,
ShieldCheck,
Wrench,
X
} from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
interface Props {
log_lvl?: number;
show?: boolean;
interface Props {
log_lvl?: number;
show?: boolean;
}
let { log_lvl = 0, show = $bindable(false) }: Props = $props();
// Internal State
let tab: 'form' | 'local_json' | 'session_json' = $state('form');
let tmp_config: any = $state({
journal: {},
entry: {}
});
$effect(() => {
if (show) {
untrack(() => {
const fresh_config = JSON.parse(JSON.stringify($journals_loc));
// Ensure the structure is preserved
if (!fresh_config.entry) fresh_config.entry = {};
tmp_config = fresh_config;
});
}
});
let { log_lvl = 0, show = $bindable(false) }: Props = $props();
// Internal State
let tab: 'form' | 'local_json' | 'session_json' = $state('form');
let tmp_config: any = $state({
journal: {},
entry: {}
});
$effect(() => {
if (show) {
untrack(() => {
const fresh_config = JSON.parse(JSON.stringify($journals_loc));
// Ensure the structure is preserved
if (!fresh_config.entry) fresh_config.entry = {};
tmp_config = fresh_config;
});
}
});
function handle_save() {
journals_loc.set(tmp_config);
show = false;
}
function handle_save() {
journals_loc.set(tmp_config);
show = false;
}
</script>
<Modal
@@ -53,32 +66,32 @@
dismissable={false}
placement="top-center"
size="xl"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
class="relative mx-auto flex w-full flex-col rounded-lg border border-orange-300 bg-white text-gray-800 shadow-xl dark:border-orange-700 dark:bg-gray-800 dark:text-gray-200"
headerClass="flex flex-row gap-2 items-center justify-between w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-t-lg border-b border-orange-200 dark:border-orange-800"
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
>
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800">
{#snippet header()}
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<h3 class="flex flex-1 items-center gap-2 text-lg font-bold">
<Wrench class="text-primary-500" />
<span>&AElig; Journals Module Config</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<button
type="button"
class="btn-icon btn-icon-sm preset-tonal-surface ml-2"
onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
<div class="h-[60vh] space-y-6 overflow-y-auto px-4 py-2">
<!-- Navigation Tabs -->
<div
class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm"
>
class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button
type="button"
class="btn btn-sm transition-all {tab === 'form'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'form')}
>
onclick={() => (tab = 'form')}>
<Settings size="1.1em" class="mr-1" /> Config
</button>
<button
@@ -86,8 +99,7 @@
class="btn btn-sm transition-all {tab === 'local_json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'local_json')}
>
onclick={() => (tab = 'local_json')}>
<Database size="1.1em" class="mr-1" /> Local JSON
</button>
<button
@@ -95,71 +107,55 @@
class="btn btn-sm transition-all {tab === 'session_json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'session_json')}
>
onclick={() => (tab = 'session_json')}>
<CodeXml size="1.1em" class="mr-1" /> Session JSON
</button>
</div>
{#if tab === 'form'}
<div class="space-y-8 animate-in fade-in duration-300">
<div class="animate-in fade-in space-y-8 duration-300">
<!-- Date/Time Section -->
<section class="space-y-4">
<h2
class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<CalendarClock size="1.2em" class="text-primary-500" />
Date and Time Display
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-2">
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
<label class="label">
<span class="text-sm font-bold opacity-70"
>DateTime Format</span
>
>DateTime Format</span>
<select
bind:value={tmp_config.datetime_format}
class="select select-sm"
>
class="select select-sm">
<option value="datetime_12_short"
>MMM D, YY hh:mm A</option
>
>MMM D, YY hh:mm A</option>
<option value="datetime_12_long"
>MMMM D, YYYY hh:mm A</option
>
>MMMM D, YYYY hh:mm A</option>
<option value="datetime_short"
>MMM D, YY HH:mm</option
>
>MMM D, YY HH:mm</option>
<option value="datetime_long"
>MMMM D, YYYY HH:mm</option
>
>MMMM D, YYYY HH:mm</option>
<option value="datetime_us"
>US (MM/DD/YYYY hh:mm:ss A)</option
>
>US (MM/DD/YYYY hh:mm:ss A)</option>
<option value="datetime_iso"
>ISO (YYYY-MM-DD HH:mm:ss)</option
>
>ISO (YYYY-MM-DD HH:mm:ss)</option>
</select>
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Time-Only Format</span
>
>Time-Only Format</span>
<select
bind:value={tmp_config.time_format}
class="select select-sm"
>
class="select select-sm">
<option value="time_12_short"
>12-hour short (3:30 PM)</option
>
>12-hour short (3:30 PM)</option>
<option value="time_12_long"
>12-hour long (3:30:45 PM)</option
>
>12-hour long (3:30:45 PM)</option>
<option value="time_short"
>24-hour short (15:30)</option
>
>24-hour short (15:30)</option>
<option value="time_long"
>24-hour long (15:30:45)</option
>
>24-hour long (15:30:45)</option>
</select>
</label>
</div>
@@ -168,23 +164,19 @@
<!-- UI Section -->
<section class="space-y-4">
<h2
class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<MousePointerClick
size="1.2em"
class="text-primary-500"
/>
class="text-primary-500" />
User Interface Preferences
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-2">
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
<label
class="flex items-center space-x-3 cursor-pointer p-2 rounded-lg bg-surface-500/5 border border-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
<input
type="checkbox"
bind:checked={tmp_config.entry.auto_save}
class="checkbox"
/>
class="checkbox" />
<div class="space-y-0.5">
<span class="font-bold">Enable Auto-Save</span>
<p class="text-xs opacity-60">
@@ -193,16 +185,14 @@
</div>
</label>
<label
class="flex items-center space-x-3 cursor-pointer p-2 rounded-lg bg-surface-500/5 border border-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
<input
type="checkbox"
bind:checked={tmp_config.show_id_random}
class="checkbox"
/>
class="checkbox" />
<div class="space-y-0.5">
<span class="font-bold">Show Technical IDs</span
>
<span class="font-bold"
>Show Technical IDs</span>
<p class="text-xs opacity-60">
Display UUIDs in metadata footers
</p>
@@ -214,52 +204,42 @@
<!-- Journal Query Filters Section -->
<section class="space-y-4">
<h2
class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<Database size="1.2em" class="text-primary-500" />
Journal Query Filters
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-2">
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
<label class="label">
<span class="text-sm font-bold opacity-70"
>Enabled Status</span
>
>Enabled Status</span>
<select
bind:value={tmp_config.journal.qry__enabled}
class="select select-sm"
>
class="select select-sm">
<option value="enabled">Enabled Only</option>
<option value="not_enabled"
>Disabled Only</option
>
>Disabled Only</option>
<option value="all"
>All (Enabled & Disabled & NULL)</option
>
>All (Enabled & Disabled & NULL)</option>
</select>
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Hidden Status</span
>
>Hidden Status</span>
<select
bind:value={tmp_config.journal.qry__hidden}
class="select select-sm"
>
class="select select-sm">
<option value="not_hidden">Visible Only</option>
<option value="hidden">Hidden Only</option>
<option value="all"
>All (Visible & Hidden & NULL)</option
>
>All (Visible & Hidden & NULL)</option>
</select>
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Query Limit</span
>
>Query Limit</span>
<select
bind:value={tmp_config.journal.qry__limit}
class="select select-sm"
>
class="select select-sm">
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
@@ -275,52 +255,42 @@
<!-- Entry Query Filters Section -->
<section class="space-y-4">
<h2
class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<Database size="1.2em" class="text-primary-500" />
Entry Query Filters
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-2">
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
<label class="label">
<span class="text-sm font-bold opacity-70"
>Enabled Status</span
>
>Enabled Status</span>
<select
bind:value={tmp_config.entry.qry__enabled}
class="select select-sm"
>
class="select select-sm">
<option value="enabled">Enabled Only</option>
<option value="not_enabled"
>Disabled Only</option
>
>Disabled Only</option>
<option value="all"
>All (Enabled & Disabled & NULL)</option
>
>All (Enabled & Disabled & NULL)</option>
</select>
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Hidden Status</span
>
>Hidden Status</span>
<select
bind:value={tmp_config.entry.qry__hidden}
class="select select-sm"
>
class="select select-sm">
<option value="not_hidden">Visible Only</option>
<option value="hidden">Hidden Only</option>
<option value="all"
>All (Visible & Hidden & NULL)</option
>
>All (Visible & Hidden & NULL)</option>
</select>
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Query Limit</span
>
>Query Limit</span>
<select
bind:value={tmp_config.entry.qry__limit}
class="select select-sm"
>
class="select select-sm">
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
@@ -336,30 +306,25 @@
<!-- Security Section -->
<section class="space-y-4">
<h2
class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<ShieldCheck size="1.2em" class="text-primary-500" />
Security & Encryption
</h2>
<div
class="p-4 bg-orange-500/5 rounded-lg border border-orange-500/20 space-y-4"
>
<div class="text-sm opacity-80 italic">
class="space-y-4 rounded-lg border border-orange-500/20 bg-orange-500/5 p-4">
<div class="text-sm italic opacity-80">
Global security overrides for the journal module.
</div>
<label
class="flex items-center space-x-3 cursor-pointer"
>
class="flex cursor-pointer items-center space-x-3">
<input
type="checkbox"
bind:checked={
$journals_sess.enable_session_passcode_cache
}
class="checkbox checkbox-primary"
/>
class="checkbox checkbox-primary" />
<span class="text-sm font-bold"
>Cache Passcodes in Session</span
>
>Cache Passcodes in Session</span>
</label>
</div>
</section>
@@ -370,8 +335,7 @@
readonly={true}
content={JSON.stringify(tmp_config, null, 2)}
theme_mode={$ae_loc.theme_mode}
class_li="rounded-lg border border-surface-500/30"
/>
class_li="rounded-lg border border-surface-500/30" />
</div>
{:else if tab === 'session_json'}
<div class="h-full min-h-[400px]">
@@ -379,8 +343,7 @@
readonly={true}
content={JSON.stringify($journals_sess, null, 2)}
theme_mode={$ae_loc.theme_mode}
class_li="rounded-lg border border-surface-500/30"
/>
class_li="rounded-lg border border-surface-500/30" />
</div>
{/if}
</div>
@@ -389,16 +352,14 @@
<div class="flex gap-4">
<button
type="button"
class="btn preset-tonal-surface font-bold min-w-[100px]"
onclick={() => (show = false)}
>
class="btn preset-tonal-surface min-w-[100px] font-bold"
onclick={() => (show = false)}>
<X size="1.2em" class="mr-2" /> Cancel
</button>
<button
type="button"
class="btn preset-filled-primary font-bold shadow-lg min-w-[120px]"
onclick={handle_save}
>
class="btn preset-filled-primary min-w-[120px] font-bold shadow-lg"
onclick={handle_save}>
<Check size="1.2em" class="mr-2" /> Save Changes
</button>
</div>

264
src/routes/journals/ae_comp__modal_journal_entry_append.svelte
View File

@@ -1,138 +1,135 @@
<script lang="ts">
import { Modal } from 'flowbite-svelte';
import { Check, X } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_api } from '$lib/stores/ae_stores';
import type { key_val } from '$lib/stores/ae_stores';
import { Modal } from 'flowbite-svelte';
import { Check, X } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_api } from '$lib/stores/ae_stores';
import type { key_val } from '$lib/stores/ae_stores';
interface Props {
open: boolean;
journal_entry: key_val;
journal_config: key_val; // The cfg_json from the journal object
mode?: 'append' | 'prepend' | 'auto';
on_close: () => void;
on_update: () => void;
log_lvl?: number;
interface Props {
open: boolean;
journal_entry: key_val;
journal_config: key_val; // The cfg_json from the journal object
mode?: 'append' | 'prepend' | 'auto';
on_close: () => void;
on_update: () => void;
log_lvl?: number;
}
let {
open = $bindable(false),
journal_entry,
journal_config,
mode = 'auto',
on_close,
on_update,
log_lvl = 0
}: Props = $props();
// Local State
let tmp_entry_obj: key_val = $state({});
// Header Options
let add_timestamp_header: boolean = $state(true);
let add_timestamp_header_w_day_of_week: boolean = $state(true);
let add_text_header: string = $state('');
let add_text: string = $state('');
// Change detection
let has_changes: boolean = $derived(
add_text_header.length > 0 || add_text.length > 0
);
// Initialize tmp object when entry changes or modal opens
$effect(() => {
if (open && journal_entry) {
tmp_entry_obj = JSON.parse(JSON.stringify(journal_entry));
// Reset fields
add_text_header = '';
add_text = '';
}
});
async function handle_save() {
let current_entry_content = tmp_entry_obj?.content || '';
let add_content = '';
let new_content = current_entry_content;
// Construct the header/content to add (Following original logic)
let timestamp_str = ae_util.iso_datetime_formatter(
new Date(),
'datetime_iso_12_no_seconds'
);
let day_of_week_str = add_timestamp_header_w_day_of_week
? ' (' + ae_util.iso_datetime_formatter(new Date(), 'week_long') + ')'
: '';
if (add_timestamp_header && add_text_header) {
add_content =
'## ' +
timestamp_str +
day_of_week_str +
' - ' +
add_text_header.trim() +
'\n' +
add_text.trim() +
'\n\n';
} else if (add_timestamp_header) {
add_content =
'## ' +
timestamp_str +
day_of_week_str +
'\n' +
add_text.trim() +
'\n\n';
} else if (add_text_header) {
add_content =
'## ' +
add_text_header.trim() +
day_of_week_str +
'\n' +
add_text.trim() +
'\n\n';
} else {
add_content = add_text.trim() + '\n\n';
}
let {
open = $bindable(false),
journal_entry,
journal_config,
mode = 'auto',
on_close,
on_update,
log_lvl = 0
}: Props = $props();
// Local State
let tmp_entry_obj: key_val = $state({});
// Determine Append or Prepend
let effective_mode = mode;
if (effective_mode === 'auto') {
effective_mode = journal_config?.entry_add_text || 'append';
}
// Header Options
let add_timestamp_header: boolean = $state(true);
let add_timestamp_header_w_day_of_week: boolean = $state(true);
let add_text_header: string = $state('');
let add_text: string = $state('');
if (effective_mode == 'prepend') {
new_content = add_content + new_content;
} else {
// Append
new_content = new_content.trim() + '\n\n' + add_content;
}
// Change detection
let has_changes: boolean = $derived(
add_text_header.length > 0 || add_text.length > 0
);
new_content = new_content.trim() + '\n';
// Initialize tmp object when entry changes or modal opens
$effect(() => {
if (open && journal_entry) {
tmp_entry_obj = JSON.parse(JSON.stringify(journal_entry));
// Reset fields
add_text_header = '';
add_text = '';
}
});
let data_kv = { content: new_content };
async function handle_save() {
let current_entry_content = tmp_entry_obj?.content || '';
let add_content = '';
let new_content = current_entry_content;
try {
let update_result = await journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: tmp_entry_obj?.journal_entry_id,
data_kv: data_kv,
log_lvl: log_lvl
});
// Construct the header/content to add (Following original logic)
let timestamp_str = ae_util.iso_datetime_formatter(
new Date(),
'datetime_iso_12_no_seconds'
);
let day_of_week_str = add_timestamp_header_w_day_of_week
? ' (' +
ae_util.iso_datetime_formatter(new Date(), 'week_long') +
')'
: '';
if (add_timestamp_header && add_text_header) {
add_content =
'## ' +
timestamp_str +
day_of_week_str +
' - ' +
add_text_header.trim() +
'\n' +
add_text.trim() +
'\n\n';
} else if (add_timestamp_header) {
add_content =
'## ' +
timestamp_str +
day_of_week_str +
'\n' +
add_text.trim() +
'\n\n';
} else if (add_text_header) {
add_content =
'## ' +
add_text_header.trim() +
day_of_week_str +
'\n' +
add_text.trim() +
'\n\n';
if (update_result) {
// Success
on_update();
open = false;
} else {
add_content = add_text.trim() + '\n\n';
}
// Determine Append or Prepend
let effective_mode = mode;
if (effective_mode === 'auto') {
effective_mode = journal_config?.entry_add_text || 'append';
}
if (effective_mode == 'prepend') {
new_content = add_content + new_content;
} else {
// Append
new_content = new_content.trim() + '\n\n' + add_content;
}
new_content = new_content.trim() + '\n';
let data_kv = { content: new_content };
try {
let update_result =
await journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: tmp_entry_obj?.journal_entry_id,
data_kv: data_kv,
log_lvl: log_lvl
});
if (update_result) {
// Success
on_update();
open = false;
} else {
alert('Failed to update journal entry.');
}
} catch (error) {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
}
} catch (error) {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
}
}
</script>
<Modal
@@ -145,8 +142,7 @@
autoclose={false}
placement="top-center"
size="xl"
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col gap-1 mx-auto w-full"
>
class="top-center relative mx-auto flex w-full flex-col gap-1 divide-gray-200 rounded-lg border-gray-200 bg-white text-gray-800 shadow-md dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
<div class="flex flex-col gap-3">
<!-- Checkbox Options -->
<div class="flex flex-wrap gap-4">
@@ -155,8 +151,7 @@
type="checkbox"
id="append_timestamp_header"
bind:checked={add_timestamp_header}
class="checkbox"
/>
class="checkbox" />
<span>Use timestamp as Markdown header</span>
</label>
@@ -165,8 +160,7 @@
type="checkbox"
id="append_timestamp_header_w_day_of_week"
bind:checked={add_timestamp_header_w_day_of_week}
class="checkbox"
/>
class="checkbox" />
<span>Include day of week</span>
</label>
</div>
@@ -176,8 +170,7 @@
type="text"
placeholder="Markdown header for content (Optional)"
bind:value={add_text_header}
class="input"
/>
class="input" />
<!-- Main Content Area -->
<textarea
@@ -185,26 +178,23 @@
class="textarea min-h-48"
placeholder="Content to {mode === 'auto'
? journal_config?.entry_add_text
: mode}..."
>
: mode}...">
</textarea>
<div class="flex justify-end gap-2 mt-2">
<div class="mt-2 flex justify-end gap-2">
<button
type="button"
disabled={!has_changes}
onclick={handle_save}
class="btn preset-filled-primary"
class:opacity-50={!has_changes}
>
class:opacity-50={!has_changes}>
<Check class="mr-1" />
Update
</button>
<button
type="button"
onclick={on_close}
class="btn preset-tonal-surface"
>
class="btn preset-tonal-surface">
<X class="mr-1" />
Cancel
</button>

352
src/routes/journals/ae_comp__modal_journal_entry_config.svelte
View File

@@ -1,89 +1,108 @@
<script lang="ts">
/**
* ae_comp__modal_journal_entry_config.svelte
* Standardized Journal Entry-level configuration.
*/
import { ArrowDownToLine, ArrowUpToLine, Check, Clock, CodeXml, Copy, Database, FileDown, Fingerprint, Minus, Plus, RefreshCcw, Settings, Shapes, ShieldCheck, Tag, Trash2, X, Zap } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import AE_Object_Flags from '$lib/ae_elements/AE_Object_Flags.svelte';
/**
* ae_comp__modal_journal_entry_config.svelte
* Standardized Journal Entry-level configuration.
*/
import {
ArrowDownToLine,
ArrowUpToLine,
Check,
Clock,
CodeXml,
Copy,
Database,
FileDown,
Fingerprint,
Minus,
Plus,
RefreshCcw,
Settings,
Shapes,
ShieldCheck,
Tag,
Trash2,
X,
Zap
} from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import AE_Object_Flags from '$lib/ae_elements/AE_Object_Flags.svelte';
interface Props {
log_lvl?: number;
show?: boolean;
entry: any;
journal: any;
tmp_entry_obj: any; // Bindable
on_save: () => void;
on_force_reset?: () => void;
on_show_export?: () => void;
on_append?: () => void;
on_prepend?: () => void;
}
let {
log_lvl = $bindable(0),
show = $bindable(false),
entry,
journal,
tmp_entry_obj = $bindable(),
on_save,
on_force_reset,
on_show_export,
on_append,
on_prepend
}: Props = $props();
let tab: 'actions' | 'meta' | 'security' | 'json' = $state('actions');
const normalize_date = (val: string | null) =>
val ? val.slice(0, 16) : null;
async function handle_update_entry() {
try {
// WHITELISTED BASE TABLE COLUMNS ONLY
const data_kv = {
name: tmp_entry_obj.name,
short_name: tmp_entry_obj.short_name,
summary: tmp_entry_obj.summary,
content: tmp_entry_obj.content,
category_code: tmp_entry_obj.category_code,
type_code: tmp_entry_obj.type_code,
topic_code: tmp_entry_obj.topic_code,
tags: tmp_entry_obj.tags,
private: tmp_entry_obj.private,
public: tmp_entry_obj.public,
personal: tmp_entry_obj.personal,
professional: tmp_entry_obj.professional,
alert: tmp_entry_obj.alert,
alert_msg: tmp_entry_obj.alert_msg,
enable: tmp_entry_obj.enable,
hide: tmp_entry_obj.hide,
priority: tmp_entry_obj.priority,
sort: tmp_entry_obj.sort,
group: tmp_entry_obj.group,
notes: tmp_entry_obj.notes,
archive_on: tmp_entry_obj.archive_on,
template: tmp_entry_obj.template,
data_json: tmp_entry_obj.data_json
};
await journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: tmp_entry_obj.journal_entry_id,
data_kv: data_kv,
log_lvl: log_lvl
});
} catch (error) {
console.error('Error updating journal entry:', error);
}
interface Props {
log_lvl?: number;
show?: boolean;
entry: any;
journal: any;
tmp_entry_obj: any; // Bindable
on_save: () => void;
on_force_reset?: () => void;
on_show_export?: () => void;
on_append?: () => void;
on_prepend?: () => void;
}
let {
log_lvl = $bindable(0),
show = $bindable(false),
entry,
journal,
tmp_entry_obj = $bindable(),
on_save,
on_force_reset,
on_show_export,
on_append,
on_prepend
}: Props = $props();
let tab: 'actions' | 'meta' | 'security' | 'json' = $state('actions');
const normalize_date = (val: string | null) => (val ? val.slice(0, 16) : null);
async function handle_update_entry() {
try {
// WHITELISTED BASE TABLE COLUMNS ONLY
const data_kv = {
name: tmp_entry_obj.name,
short_name: tmp_entry_obj.short_name,
summary: tmp_entry_obj.summary,
content: tmp_entry_obj.content,
category_code: tmp_entry_obj.category_code,
type_code: tmp_entry_obj.type_code,
topic_code: tmp_entry_obj.topic_code,
tags: tmp_entry_obj.tags,
private: tmp_entry_obj.private,
public: tmp_entry_obj.public,
personal: tmp_entry_obj.personal,
professional: tmp_entry_obj.professional,
alert: tmp_entry_obj.alert,
alert_msg: tmp_entry_obj.alert_msg,
enable: tmp_entry_obj.enable,
hide: tmp_entry_obj.hide,
priority: tmp_entry_obj.priority,
sort: tmp_entry_obj.sort,
group: tmp_entry_obj.group,
notes: tmp_entry_obj.notes,
archive_on: tmp_entry_obj.archive_on,
template: tmp_entry_obj.template,
data_json: tmp_entry_obj.data_json
};
await journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_entry_id: tmp_entry_obj.journal_entry_id,
data_kv: data_kv,
log_lvl: log_lvl
});
} catch (error) {
console.error('Error updating journal entry:', error);
}
}
</script>
<Modal
@@ -92,32 +111,32 @@
dismissable={false}
placement="top-center"
size="lg"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
class="relative mx-auto flex w-full flex-col rounded-lg border border-orange-300 bg-white text-gray-800 shadow-xl dark:border-orange-700 dark:bg-gray-800 dark:text-gray-200"
headerClass="flex flex-row gap-2 items-center justify-between w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-t-lg border-b border-orange-200 dark:border-orange-800"
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
>
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800">
{#snippet header()}
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<h3 class="flex flex-1 items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" />
<span>Entry Config: {tmp_entry_obj.name || '--'}</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<button
type="button"
class="btn-icon btn-icon-sm preset-tonal-surface ml-2"
onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
<div class="h-[60vh] space-y-6 overflow-y-auto px-4 py-2">
<!-- Navigation Tabs -->
<div
class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm"
>
class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button
type="button"
class="btn btn-sm transition-all {tab === 'actions'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'actions')}
>
onclick={() => (tab = 'actions')}>
<Zap size="1.1em" class="mr-1" /> Quick Actions
</button>
<button
@@ -125,8 +144,7 @@
class="btn btn-sm transition-all {tab === 'meta'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'meta')}
>
onclick={() => (tab = 'meta')}>
<Shapes size="1.1em" class="mr-1" /> Metadata
</button>
<button
@@ -134,8 +152,7 @@
class="btn btn-sm transition-all {tab === 'security'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'security')}
>
onclick={() => (tab = 'security')}>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security
</button>
<button
@@ -143,23 +160,21 @@
class="btn btn-sm transition-all {tab === 'json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'json')}
>
onclick={() => (tab = 'json')}>
<CodeXml size="1.1em" class="mr-1" /> JSON
</button>
</div>
{#if tab === 'actions'}
<div class="space-y-6 animate-in fade-in duration-300">
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="animate-in fade-in space-y-6 duration-300">
<section class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button
type="button"
class="btn preset-tonal-secondary w-full"
onclick={() => {
show = false;
on_prepend?.();
}}
>
}}>
<ArrowUpToLine size="1.2em" class="mr-2" /> Prepend Content
</button>
<button
@@ -168,8 +183,7 @@
onclick={() => {
show = false;
on_append?.();
}}
>
}}>
<ArrowDownToLine size="1.2em" class="mr-2" /> Append Content
</button>
<button
@@ -178,8 +192,7 @@
onclick={() => {
show = false;
on_show_export?.();
}}
>
}}>
<FileDown size="1.2em" class="mr-2" /> Export Entry
</button>
<button
@@ -189,13 +202,12 @@
/* Clone logic here */ alert(
'Clone not yet implemented in modal'
);
}}
>
}}>
<Copy size="1.2em" class="mr-2" /> Clone Entry
</button>
</section>
<section class="space-y-4 pt-4 border-t border-surface-500/20">
<section class="border-surface-500/20 space-y-4 border-t pt-4">
<h4 class="text-xs font-bold uppercase opacity-50">
Quick Category
</h4>
@@ -211,8 +223,7 @@
tmp_entry_obj.category_code = cat.code;
handle_update_entry();
on_save();
}}
>
}}>
{cat.name}
</button>
{/each}
@@ -220,7 +231,7 @@
</section>
</div>
{:else if tab === 'meta'}
<div class="space-y-6 animate-in fade-in duration-300">
<div class="animate-in fade-in space-y-6 duration-300">
<label class="label">
<span class="text-sm font-bold opacity-70">Category</span>
<select
@@ -229,8 +240,7 @@
onchange={() => {
handle_update_entry();
on_save();
}}
>
}}>
<option value="">None</option>
{#each journal?.cfg_json?.category_li ?? [] as cat (cat.code)}
<option value={cat.code}>{cat.name}</option>
@@ -240,9 +250,8 @@
<label class="label">
<span class="text-sm font-bold opacity-70"
>Tags (Comma separated)</span
>
<div class="flex gap-2 items-center">
>Tags (Comma separated)</span>
<div class="flex items-center gap-2">
<Tag size="1.2em" class="opacity-30" />
<input
type="text"
@@ -252,16 +261,14 @@
onchange={() => {
handle_update_entry();
on_save();
}}
/>
}} />
</div>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<label class="label">
<span class="text-sm font-bold opacity-70"
>Archive On</span
>
>Archive On</span>
<input
type="datetime-local"
value={normalize_date(tmp_entry_obj.archive_on)}
@@ -271,13 +278,11 @@
handle_update_entry();
on_save();
}}
class="input"
/>
class="input" />
</label>
<label class="label">
<span class="text-sm font-bold opacity-70"
>Sort Priority</span
>
>Sort Priority</span>
<div class="flex items-center gap-2">
<button
type="button"
@@ -287,11 +292,9 @@
(tmp_entry_obj.sort ?? 0) - 1;
handle_update_entry();
on_save();
}}><Minus size="1em" /></button
>
<span class="font-mono font-bold w-8 text-center"
>{tmp_entry_obj.sort ?? 0}</span
>
}}><Minus size="1em" /></button>
<span class="w-8 text-center font-mono font-bold"
>{tmp_entry_obj.sort ?? 0}</span>
<button
type="button"
class="btn-icon btn-icon-sm preset-tonal-surface"
@@ -300,25 +303,22 @@
(tmp_entry_obj.sort ?? 0) + 1;
handle_update_entry();
on_save();
}}><Plus size="1em" /></button
>
}}><Plus size="1em" /></button>
</div>
</label>
</div>
</div>
{:else if tab === 'security'}
<div class="space-y-6 animate-in fade-in duration-300">
<div class="animate-in fade-in space-y-6 duration-300">
<section class="space-y-4">
<h2
class="text-lg font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2"
>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-lg font-bold">
<Fingerprint size="1.2em" class="text-primary-500" />
Status & Security
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<label
class="flex items-center space-x-3 cursor-pointer p-3 rounded-lg bg-surface-500/5 border border-surface-500/10 transition-colors hover:bg-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 hover:bg-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors">
<input
type="checkbox"
bind:checked={tmp_entry_obj.enable}
@@ -326,18 +326,15 @@
handle_update_entry();
on_save();
}}
class="checkbox checkbox-primary"
/>
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Enabled</span>
<span class="text-xs opacity-60"
>Allow access to this entry</span
>
>Allow access to this entry</span>
</div>
</label>
<label
class="flex items-center space-x-3 cursor-pointer p-3 rounded-lg bg-surface-500/5 border border-surface-500/10 transition-colors hover:bg-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 hover:bg-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors">
<input
type="checkbox"
bind:checked={tmp_entry_obj.hide}
@@ -345,18 +342,15 @@
handle_update_entry();
on_save();
}}
class="checkbox checkbox-primary"
/>
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Hidden</span>
<span class="text-xs opacity-60"
>Hide from standard lists</span
>
>Hide from standard lists</span>
</div>
</label>
<label
class="flex items-center space-x-3 cursor-pointer p-3 rounded-lg bg-surface-500/5 border border-surface-500/10 transition-colors hover:bg-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 hover:bg-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors">
<input
type="checkbox"
bind:checked={tmp_entry_obj.priority}
@@ -364,24 +358,20 @@
handle_update_entry();
on_save();
}}
class="checkbox checkbox-primary"
/>
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Priority Entry</span>
<span class="text-xs opacity-60"
>Star or pin to top</span
>
>Star or pin to top</span>
</div>
</label>
<div
class="flex items-center justify-between p-3 rounded-lg bg-surface-500/5 border border-surface-500/10"
>
class="bg-surface-500/5 border-surface-500/10 flex items-center justify-between rounded-lg border p-3">
<div class="flex flex-col">
<span class="font-bold text-sm">Sort Order</span
>
<span class="text-sm font-bold"
>Sort Order</span>
<span class="text-xs opacity-60"
>Manual list position</span
>
>Manual list position</span>
</div>
<div class="flex items-center gap-2">
<button
@@ -392,12 +382,10 @@
(tmp_entry_obj.sort ?? 0) - 1;
handle_update_entry();
on_save();
}}><Minus size="1em" /></button
>
}}><Minus size="1em" /></button>
<span
class="font-mono font-bold w-8 text-center text-lg"
>{tmp_entry_obj.sort ?? 0}</span
>
class="w-8 text-center font-mono text-lg font-bold"
>{tmp_entry_obj.sort ?? 0}</span>
<button
type="button"
class="btn-icon btn-icon-sm preset-tonal-surface"
@@ -406,8 +394,7 @@
(tmp_entry_obj.sort ?? 0) + 1;
handle_update_entry();
on_save();
}}><Plus size="1em" /></button
>
}}><Plus size="1em" /></button>
</div>
</div>
</div>
@@ -429,21 +416,18 @@
hide_personal={journal?.cfg_json?.hide_btn_personal}
hide_professional={journal?.cfg_json
?.hide_btn_professional}
hide_template={journal?.cfg_json?.hide_btn_template}
/>
hide_template={journal?.cfg_json?.hide_btn_template} />
</section>
{#if tmp_entry_obj.private && !tmp_entry_obj.content && tmp_entry_obj.content_encrypted}
<section class="pt-8 border-t border-error-500/20">
<section class="border-error-500/20 border-t pt-8">
<div
class="bg-error-500/10 p-4 rounded-lg border border-error-500/30"
>
class="bg-error-500/10 border-error-500/30 rounded-lg border p-4">
<h4
class="text-error-500 font-bold flex items-center gap-2 mb-2"
>
class="text-error-500 mb-2 flex items-center gap-2 font-bold">
<RefreshCcw size="1.2em" /> Disaster Recovery
</h4>
<p class="text-xs opacity-70 mb-4 italic">
<p class="mb-4 text-xs italic opacity-70">
If the encryption passcode is lost, the data is
unrecoverable. You can force a reset to plain
text to reuse this entry ID.
@@ -454,8 +438,7 @@
onclick={() => {
show = false;
on_force_reset?.();
}}
>
}}>
Force Reset to Plain Text
</button>
</div>
@@ -468,8 +451,7 @@
class="btn btn-sm preset-tonal-error w-full"
onclick={() => {
alert('Delete logic handled in parent component');
}}
>
}}>
<Trash2 size="1.1em" class="mr-2" /> Delete Entry
</button>
</section>
@@ -480,8 +462,7 @@
readonly={true}
content={JSON.stringify(tmp_entry_obj, null, 2)}
theme_mode={$ae_loc.theme_mode}
class_li="rounded-lg border border-surface-500/30"
/>
class_li="rounded-lg border border-surface-500/30" />
</div>
{/if}
</div>
@@ -489,9 +470,8 @@
{#snippet footer()}
<button
type="button"
class="btn preset-filled-primary font-bold min-w-[120px]"
onclick={() => (show = false)}
>
class="btn preset-filled-primary min-w-[120px] font-bold"
onclick={() => (show = false)}>
<Check size="1.2em" class="mr-2" />
Done
</button>

237
src/routes/journals/ae_comp__modal_journal_export.svelte
View File

@@ -1,107 +1,113 @@
<script lang="ts">
/**
* @file ae_comp__modal_journal_export.svelte
* @description Modal component for bulk exporting journal entries.
* Allows exporting entries using various templates (Markdown, HTML, JSON).
* @author One Sky IT
*/
/**
* @file ae_comp__modal_journal_export.svelte
* @description Modal component for bulk exporting journal entries.
* Allows exporting entries using various templates (Markdown, HTML, JSON).
* @author One Sky IT
*/
import { Modal } from 'flowbite-svelte';
import { Code, Copy, Download, FileJson, FileType, Settings2 } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
import {
EXPORT_TEMPLATES,
type ExportTemplate
} from '$lib/ae_journals/ae_journals_export_templates';
import { Modal } from 'flowbite-svelte';
import {
Code,
Copy,
Download,
FileJson,
FileType,
Settings2
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
import {
EXPORT_TEMPLATES,
type ExportTemplate
} from '$lib/ae_journals/ae_journals_export_templates';
interface Props {
open: boolean;
entries: ae_JournalEntry[];
journal?: ae_Journal;
on_close: () => void;
}
interface Props {
open: boolean;
entries: ae_JournalEntry[];
journal?: ae_Journal;
on_close: () => void;
}
let {
open = $bindable(false),
entries = [],
journal,
on_close
}: Props = $props();
let {
open = $bindable(false),
entries = [],
journal,
on_close
}: Props = $props();
// State
let selected_template_id: string = $state('standard_markdown');
let export_preview: string = $state('');
let export_count: number = $derived(entries.length);
// State
let selected_template_id: string = $state('standard_markdown');
let export_preview: string = $state('');
let export_count: number = $derived(entries.length);
const templates = Object.values(EXPORT_TEMPLATES);
const selected_template = $derived(
EXPORT_TEMPLATES[
selected_template_id as keyof typeof EXPORT_TEMPLATES
] || EXPORT_TEMPLATES.standard_markdown
);
const templates = Object.values(EXPORT_TEMPLATES);
const selected_template = $derived(
EXPORT_TEMPLATES[selected_template_id as keyof typeof EXPORT_TEMPLATES] ||
EXPORT_TEMPLATES.standard_markdown
);
// Auto-select template based on journal type when modal opens
$effect(() => {
if (open && journal?.type_code) {
if (
journal.type_code === 'personal_log' &&
EXPORT_TEMPLATES.personal_log
) {
selected_template_id = 'personal_log';
} else if (
journal.type_code === 'amazon_vine' &&
EXPORT_TEMPLATES.amazon_vine
) {
selected_template_id = 'amazon_vine';
}
// Auto-select template based on journal type when modal opens
$effect(() => {
if (open && journal?.type_code) {
if (
journal.type_code === 'personal_log' &&
EXPORT_TEMPLATES.personal_log
) {
selected_template_id = 'personal_log';
} else if (
journal.type_code === 'amazon_vine' &&
EXPORT_TEMPLATES.amazon_vine
) {
selected_template_id = 'amazon_vine';
}
}
});
// Re-generate preview when entries or template changes
$effect(() => {
if (open && entries.length > 0) {
generate_preview();
}
});
function generate_preview() {
if (!selected_template) return;
export_preview = selected_template.formatter(entries);
}
/**
* Downloads the generated content as a file.
*/
function handle_download() {
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const filename = `journal_export_${timestamp}.${selected_template.extension}`;
const blob = new Blob([export_preview], {
type: 'text/plain;charset=utf-8'
});
// Re-generate preview when entries or template changes
$effect(() => {
if (open && entries.length > 0) {
generate_preview();
}
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
function generate_preview() {
if (!selected_template) return;
export_preview = selected_template.formatter(entries);
}
/**
* Downloads the generated content as a file.
*/
function handle_download() {
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const filename = `journal_export_${timestamp}.${selected_template.extension}`;
const blob = new Blob([export_preview], {
type: 'text/plain;charset=utf-8'
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
/**
* Copies the generated content to the clipboard.
*/
async function handle_copy() {
try {
await navigator.clipboard.writeText(export_preview);
alert('Content copied to clipboard!');
} catch (err) {
console.error('Failed to copy:', err);
alert('Failed to copy to clipboard.');
}
/**
* Copies the generated content to the clipboard.
*/
async function handle_copy() {
try {
await navigator.clipboard.writeText(export_preview);
alert('Content copied to clipboard!');
} catch (err) {
console.error('Failed to copy:', err);
alert('Failed to copy to clipboard.');
}
}
</script>
<Modal
@@ -109,12 +115,10 @@
bind:open
autoclose={false}
size="xl"
class="w-full"
>
class="w-full">
<div class="space-y-4">
<div
class="flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-lg"
>
class="flex items-center justify-between rounded-lg bg-blue-50 p-4 text-blue-800 dark:bg-blue-900/20 dark:text-blue-200">
<div>
<strong>Ready to Export:</strong>
{export_count} entries.
@@ -122,8 +126,7 @@
{#if journal}
<div class="text-xs opacity-70">
Journal Type: <span class="font-mono"
>{journal.type_code || 'standard'}</span
>
>{journal.type_code || 'standard'}</span>
</div>
{/if}
</div>
@@ -134,19 +137,18 @@
<Settings2 size="1em" />
<span class="label-text font-bold">Select Export Template</span>
</label>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
<div class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-5">
{#each templates as template (template.id)}
<button
type="button"
class="btn preset-outlined-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id ===
class="btn preset-outlined-surface flex h-24 flex-col items-center justify-center gap-1 border-2 p-2 text-center {selected_template_id ===
template.id
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
: 'opacity-60'}"
onclick={() => {
selected_template_id = template.id;
generate_preview();
}}
>
}}>
{#if template.extension === 'json'}
<FileJson size="1.5em" />
{:else if template.extension === 'html'}
@@ -154,12 +156,10 @@
{:else}
<FileType size="1.5em" />
{/if}
<span class="text-xs font-bold leading-tight"
>{template.name}</span
>
<span class="text-xs leading-tight font-bold"
>{template.name}</span>
<span class="text-[10px] opacity-70"
>.{template.extension}</span
>
>.{template.extension}</span>
</button>
{/each}
</div>
@@ -167,43 +167,38 @@
<!-- Preview Area -->
<div class="form-control">
<div class="label flex justify-between items-center">
<div class="label flex items-center justify-between">
<span class="label-text">Preview</span>
<span class="text-[10px] opacity-50 uppercase tracking-widest"
>{selected_template.name}</span
>
<span class="text-[10px] tracking-widest uppercase opacity-50"
>{selected_template.name}</span>
</div>
<textarea
class="textarea h-64 font-mono text-xs bg-gray-50 dark:bg-gray-900"
class="textarea h-64 bg-gray-50 font-mono text-xs dark:bg-gray-900"
readonly
value={export_preview.substring(0, 5000) +
(export_preview.length > 5000
? '\n... (truncated for preview)'
: '')}
></textarea>
: '')}></textarea>
</div>
<!-- Actions -->
<div class="modal-action flex justify-between items-center">
<div class="modal-action flex items-center justify-between">
<button
type="button"
class="btn preset-tonal-secondary"
onclick={on_close}>Close</button
>
onclick={on_close}>Close</button>
<div class="flex gap-2">
<button
type="button"
class="btn preset-tonal-primary"
onclick={handle_copy}
>
onclick={handle_copy}>
<Copy class="mr-2" size="1.2em" /> Copy to Clipboard
</button>
<button
type="button"
class="btn preset-filled-primary"
onclick={handle_download}
>
onclick={handle_download}>
<Download class="mr-2" size="1.2em" /> Download File
</button>
</div>

298
src/routes/journals/ae_comp__modal_journal_import.svelte
View File

@@ -1,142 +1,145 @@
<script lang="ts">
import { Modal } from 'flowbite-svelte';
import { Check, CircleAlert, FileText, RefreshCw, Upload, X } from '@lucide/svelte';
import {
PARSERS,
type AeJournalEntryInput
} from '$lib/ae_journals/ae_journals_parsers';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_api } from '$lib/stores/ae_stores';
import { journals_slct } from '$lib/ae_journals/ae_journals_stores';
import { Modal } from 'flowbite-svelte';
import {
Check,
CircleAlert,
FileText,
RefreshCw,
Upload,
X
} from '@lucide/svelte';
import {
PARSERS,
type AeJournalEntryInput
} from '$lib/ae_journals/ae_journals_parsers';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_api } from '$lib/stores/ae_stores';
import { journals_slct } from '$lib/ae_journals/ae_journals_stores';
interface Props {
open: boolean;
on_close: () => void;
on_import_complete: () => void;
interface Props {
open: boolean;
on_close: () => void;
on_import_complete: () => void;
}
let { open = $bindable(false), on_close, on_import_complete }: Props = $props();
let files: FileList | null = $state(null);
let selected_parser: keyof typeof PARSERS = $state('standard');
let parsed_entries: AeJournalEntryInput[] = $state([]);
let is_parsing = $state(false);
let is_importing = $state(false);
let import_log: string[] = $state([]);
let is_dragging = $state(false);
// Watch for file selection or parser change to trigger parsing
$effect(() => {
if (files && files.length > 0) {
parse_files();
}
});
let {
open = $bindable(false),
on_close,
on_import_complete
}: Props = $props();
function handle_drag_enter(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = true;
}
let files: FileList | null = $state(null);
let selected_parser: keyof typeof PARSERS = $state('standard');
let parsed_entries: AeJournalEntryInput[] = $state([]);
let is_parsing = $state(false);
let is_importing = $state(false);
let import_log: string[] = $state([]);
let is_dragging = $state(false);
function handle_drag_leave(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = false;
}
// Watch for file selection or parser change to trigger parsing
$effect(() => {
if (files && files.length > 0) {
parse_files();
}
});
function handle_drag_over(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = true;
}
function handle_drag_enter(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = true;
function handle_drop(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = false;
if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
files = e.dataTransfer.files;
}
}
function handle_drag_leave(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = false;
}
async function parse_files() {
if (!files) return;
is_parsing = true;
parsed_entries = [];
function handle_drag_over(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = true;
}
const parser = PARSERS[selected_parser];
function handle_drop(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
is_dragging = false;
if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
files = e.dataTransfer.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
try {
const text = await file.text();
const entries = await parser(file, text);
parsed_entries = [...parsed_entries, ...entries];
} catch (err) {
console.error(`Error parsing ${file.name}:`, err);
}
}
is_parsing = false;
}
async function parse_files() {
if (!files) return;
is_parsing = true;
parsed_entries = [];
async function handle_import() {
if (parsed_entries.length === 0) return;
is_importing = true;
import_log = [];
const parser = PARSERS[selected_parser];
for (let i = 0; i < files.length; i++) {
const file = files[i];
try {
const text = await file.text();
const entries = await parser(file, text);
parsed_entries = [...parsed_entries, ...entries];
} catch (err) {
console.error(`Error parsing ${file.name}:`, err);
}
}
is_parsing = false;
}
async function handle_import() {
if (parsed_entries.length === 0) return;
is_importing = true;
import_log = [];
const journal_id = $journals_slct.journal_id;
if (!journal_id) {
alert(
'No target journal selected. Please select a journal in the background first.'
);
is_importing = false;
return;
}
let success_count = 0;
for (const entry of parsed_entries) {
try {
// Construct payload
const data_kv = {
name: entry.name,
content: entry.content,
tags: entry.tags.join(', '),
type_code: entry.type_code || 'note',
created_on: entry.created_on,
updated_on: entry.updated_on
};
const res = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: journal_id,
data_kv: data_kv,
log_lvl: 0
});
if (res) {
import_log.push(`✅ Imported: ${entry.name}`);
success_count++;
} else {
import_log.push(`❌ Failed: ${entry.name}`);
}
} catch (err) {
import_log.push(`❌ Error: ${entry.name} - ${err}`);
}
}
is_importing = false;
const journal_id = $journals_slct.journal_id;
if (!journal_id) {
alert(
`Import complete! ${success_count}/${parsed_entries.length} imported.`
'No target journal selected. Please select a journal in the background first.'
);
on_import_complete();
open = false;
is_importing = false;
return;
}
let success_count = 0;
for (const entry of parsed_entries) {
try {
// Construct payload
const data_kv = {
name: entry.name,
content: entry.content,
tags: entry.tags.join(', '),
type_code: entry.type_code || 'note',
created_on: entry.created_on,
updated_on: entry.updated_on
};
const res = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: journal_id,
data_kv: data_kv,
log_lvl: 0
});
if (res) {
import_log.push(`✅ Imported: ${entry.name}`);
success_count++;
} else {
import_log.push(`❌ Failed: ${entry.name}`);
}
} catch (err) {
import_log.push(`❌ Error: ${entry.name} - ${err}`);
}
}
is_importing = false;
alert(
`Import complete! ${success_count}/${parsed_entries.length} imported.`
);
on_import_complete();
open = false;
}
</script>
<Modal
@@ -144,21 +147,18 @@
bind:open
autoclose={false}
size="xl"
class="w-full"
>
class="w-full">
<div class="space-y-4">
<!-- Configuration -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label class="label">
<span>Parser Strategy</span>
<select class="select" bind:value={selected_parser}>
<option value="standard"
>Standard (1 File = 1 Entry)</option
>
>Standard (1 File = 1 Entry)</option>
<option value="personal_log"
>Personal Log (Split by Date)</option
>
>Personal Log (Split by Date)</option>
<option value="amazon_vine">Amazon Vine Reviews</option>
</select>
</label>
@@ -173,25 +173,23 @@
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="
border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all duration-200
flex flex-col items-center justify-center gap-2
flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2
border-dashed p-8 text-center transition-all duration-200
{is_dragging
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
: 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}
: 'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500'}
"
ondragenter={handle_drag_enter}
ondragleave={handle_drag_leave}
ondragover={handle_drag_over}
ondrop={handle_drop}
onclick={() =>
document.getElementById('file_import_input')?.click()}
>
document.getElementById('file_import_input')?.click()}>
<Upload class="h-10 w-10 text-gray-400" />
<p class="text-sm text-gray-500">
<span
class="font-semibold text-primary-600 hover:text-primary-500"
>Click to upload</span
>
class="text-primary-600 hover:text-primary-500 font-semibold"
>Click to upload</span>
or drag and drop
</p>
<p class="text-xs text-gray-400">
@@ -204,17 +202,15 @@
class="hidden"
multiple
accept=".md,.txt"
onchange={(e) => (files = e.currentTarget.files)}
/>
onchange={(e) => (files = e.currentTarget.files)} />
</div>
</div>
</div>
<!-- Preview -->
<div
class="border rounded-lg p-2 bg-gray-50 dark:bg-gray-900 max-h-64 overflow-y-auto"
>
<h4 class="font-bold mb-2 flex justify-between">
class="max-h-64 overflow-y-auto rounded-lg border bg-gray-50 p-2 dark:bg-gray-900">
<h4 class="mb-2 flex justify-between font-bold">
<span>Preview ({parsed_entries.length} entries)</span>
{#if is_parsing}
<RefreshCw class="animate-spin" />
@@ -222,7 +218,7 @@
</h4>
{#if parsed_entries.length > 0}
<table class="table table-compact w-full text-xs">
<table class="table-compact table w-full text-xs">
<thead>
<tr>
<th>Name</th>
@@ -234,9 +230,8 @@
{#each parsed_entries as entry, i (i)}
<tr>
<td
class="truncate max-w-[200px]"
title={entry.name}>{entry.name}</td
>
class="max-w-[200px] truncate"
title={entry.name}>{entry.name}</td>
<td>{entry.created_on?.substring(0, 10)}</td>
<td>{entry.tags.join(', ')}</td>
</tr>
@@ -244,11 +239,11 @@
</tbody>
</table>
{:else if files && files.length > 0 && !is_parsing}
<div class="text-center text-gray-500 py-4">
<div class="py-4 text-center text-gray-500">
No entries found in selected files.
</div>
{:else if !files}
<div class="text-center text-gray-500 py-4">
<div class="py-4 text-center text-gray-500">
Select files to preview import.
</div>
{/if}
@@ -257,8 +252,7 @@
<!-- Import Log -->
{#if import_log.length > 0}
<div
class="bg-black text-green-400 p-2 rounded text-xs font-mono max-h-32 overflow-y-auto"
>
class="max-h-32 overflow-y-auto rounded bg-black p-2 font-mono text-xs text-green-400">
{#each import_log as log, i (i)}
<div>{log}</div>
{/each}
@@ -269,14 +263,12 @@
<button
type="button"
class="btn preset-tonal-secondary"
onclick={on_close}>Cancel</button
>
onclick={on_close}>Cancel</button>
<button
type="button"
class="btn preset-filled-primary"
disabled={parsed_entries.length === 0 || is_importing}
onclick={handle_import}
>
onclick={handle_import}>
{#if is_importing}
Importing...
{:else}

245
src/routes/journals/ae_comp__obj_core_props.svelte
View File

@@ -1,105 +1,104 @@
<script lang="ts">
// *** Import Svelte specific
// *** Import Svelte specific
import {
ArrowDown01,
ArrowDown10,
ArrowDownUp,
BookHeart,
BriefcaseBusiness,
CalendarClock,
CalendarOff,
Clock,
CodeXml,
Copy,
Eye,
EyeOff,
Flag,
FlagOff,
FileX,
Fingerprint,
Globe,
Group,
History,
LockKeyhole,
LockKeyholeOpen,
MessageSquareWarning,
Minus,
NotebookPen,
NotebookText,
NotepadTextDashed,
Pencil,
PenLine,
Plus,
RemoveFormatting,
Search,
Shapes,
Share2,
ShieldCheck,
ShieldMinus,
Siren,
Skull,
SquareLibrary,
Tags,
Trash2,
TypeOutline,
X
} from '@lucide/svelte';
import {
ArrowDown01,
ArrowDown10,
ArrowDownUp,
BookHeart,
BriefcaseBusiness,
CalendarClock,
CalendarOff,
Clock,
CodeXml,
Copy,
Eye,
EyeOff,
Flag,
FlagOff,
FileX,
Fingerprint,
Globe,
Group,
History,
LockKeyhole,
LockKeyholeOpen,
MessageSquareWarning,
Minus,
NotebookPen,
NotebookText,
NotepadTextDashed,
Pencil,
PenLine,
Plus,
RemoveFormatting,
Search,
Shapes,
Share2,
ShieldCheck,
ShieldMinus,
Siren,
Skull,
SquareLibrary,
Tags,
Trash2,
TypeOutline,
X
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { journals_slct } from '$lib/ae_journals/ae_journals_stores';
import { goto } from '$app/navigation';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { journals_slct } from '$lib/ae_journals/ae_journals_stores';
import { goto } from '$app/navigation';
interface Props {
log_lvl?: number;
obj_priority: any;
obj_sort: any;
obj_group: any;
obj_archive_on: any;
obj_hide: any;
obj_enable: any;
obj_delete: any;
tmp_entry_obj: any;
update_journal_entry: any;
lq__journal_entry_obj: any;
change_journal_id: any;
lq__journal_obj_li: any;
}
interface Props {
log_lvl?: number;
obj_priority: any;
obj_sort: any;
obj_group: any;
obj_archive_on: any;
obj_hide: any;
obj_enable: any;
obj_delete: any;
tmp_entry_obj: any;
update_journal_entry: any;
lq__journal_entry_obj: any;
change_journal_id: any;
lq__journal_obj_li: any;
}
let {
log_lvl = 0,
obj_priority,
obj_sort,
obj_group,
obj_archive_on,
obj_hide,
obj_enable,
obj_delete,
tmp_entry_obj,
update_journal_entry,
lq__journal_entry_obj,
change_journal_id,
lq__journal_obj_li
}: Props = $props();
let {
log_lvl = 0,
obj_priority,
obj_sort,
obj_group,
obj_archive_on,
obj_hide,
obj_enable,
obj_delete,
tmp_entry_obj,
update_journal_entry,
lq__journal_entry_obj,
change_journal_id,
lq__journal_obj_li
}: Props = $props();
let ae_promises: key_val = $state({});
let ae_promises: key_val = $state({});
</script>
<section
class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full"
>
class="ae_meta flex w-full flex-row flex-wrap items-center justify-between gap-1">
<!-- {lq__journal_entry_obj?.priority}
{lq__journal_entry_obj?.sort}
{lq__journal_entry_obj?.group}
@@ -113,9 +112,8 @@
obj_priority = !obj_priority;
// update_journal_entry();
}}
class="btn-icon btn-icon-sm md:btn-icon-base preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
title="Toggle priority of this journal entry"
>
class="btn-icon btn-icon-sm md:btn-icon-base preset-tonal-tertiary hover:preset-filled-tertiary-500 transition"
title="Toggle priority of this journal entry">
{#if obj_priority}
<Flag strokeWidth="2.5" color="green" class="inline-block" />
{:else}
@@ -127,17 +125,15 @@
<!-- 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"
>
class="flex flex-row flex-wrap items-center justify-center rounded-lg border border-gray-300">
<button
type="button"
onclick={() => {
obj_sort = obj_sort ? obj_sort + 1 : 1;
// update_journal_entry();
}}
class="btn-icon btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
title="Increment sort order of this journal entry"
>
class="btn-icon btn-icon-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 transition"
title="Increment sort order of this journal entry">
<Plus strokeWidth="2.5" color="blue" />
</button>
<span class="mx-1">
@@ -154,9 +150,8 @@
obj_sort = obj_sort ? obj_sort - 1 : 0;
// update_journal_entry();
}}
class="btn-icon btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
title="Decrement sort order of this journal entry"
>
class="btn-icon btn-icon-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 transition"
title="Decrement sort order of this journal entry">
<Minus strokeWidth="2.5" color="blue" />
</button>
</span>
@@ -171,13 +166,11 @@
}}
class:hidden={!$ae_loc.edit_mode}
class="input input-sm input-bordered w-24"
title="Set group (for sorting) of this journal entry"
/>
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"
>
class="flex flex-row flex-wrap items-center justify-center rounded-lg border border-gray-200">
<input
type="datetime-local"
bind:value={obj_archive_on}
@@ -187,8 +180,7 @@
}}
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"
/>
title="Set archive on datetime for archiving this journal entry" />
{#if obj_archive_on}
<!-- Button to clear the datetime -->
@@ -200,8 +192,7 @@
}}
class:hidden={!$ae_loc.edit_mode}
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
title="Clear the archive on datetime for this journal entry"
>
title="Clear the archive on datetime for this journal entry">
<X strokeWidth="2.5" color="red" />
<!-- <span class="hidden">Clear Archive</span> -->
</button>
@@ -221,8 +212,7 @@
}}
class:hidden={!$ae_loc.edit_mode}
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
title="Set the archive on datetime for this journal entry"
>
title="Set the archive on datetime for this journal entry">
<Clock strokeWidth="2.5" color="blue" />
<!-- <span class="hidden">Set Archive</span> -->
</button>
@@ -237,8 +227,7 @@
update_journal_entry();
}}
class="btn btn-sm md:btn-md preset-tonal-warning hover:preset-filled-warning-500 transition"
title="Toggle visibility of this journal entry"
>
title="Toggle visibility of this journal entry">
{#if obj_hide}
<EyeOff strokeWidth="1" color="red" class="inline-block" />
<span class="hidden md:inline">Hidden</span>
@@ -257,8 +246,7 @@
}}
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
title="Toggle enable status of this journal entry"
>
title="Toggle enable status of this journal entry">
{#if obj_enable}
<ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
<span class="hidden md:inline">Enabled</span>
@@ -304,8 +292,7 @@
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
title="Delete this journal entry"
>
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>
@@ -316,8 +303,7 @@
</button>
<span
class="flex flex-row items-center justify-center text-sm text-gray-500"
>
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(
@@ -344,19 +330,18 @@
<!-- 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"
>
class="flex flex-row flex-wrap items-center justify-start gap-2 rounded-lg border border-gray-200">
<SquareLibrary size="1em" class="mx-1" />
<span class="text-sm text-gray-500 hidden sm:inline">
<span class="hidden text-sm text-gray-500 sm:inline">
Journal:
</span>
<select
class="novi_btn btn btn-secondary btn-sm
preset-tonal-primary
hover:preset-filled-primary-500
transition
text-xs
border-none
text-xs
transition
"
bind:value={tmp_entry_obj.journal_id}
onchange={(event) => {
@@ -372,14 +357,12 @@
change_journal_id();
}
}}
title="Select a different journal for this entry"
>
title="Select a different journal for this entry">
<option value="">Select Journal</option>
{#each lq__journal_obj_li as journal (journal.journal_id)}
<option
value={journal.journal_id}
title={`Journal: ${journal.name}`}
>
title={`Journal: ${journal.name}`}>
{journal.name}
</option>
{/each}

30
src/routes/journals/journal_entry_visibility.test.ts
View File

@@ -30,33 +30,49 @@ describe('Journal Entry Visibility Filtering', () => {
{ id: '1', name: 'Normal Entry', hide: false, enable: true },
{ id: '2', name: 'Hidden Entry', hide: true, enable: true },
{ id: '3', name: 'Disabled Entry', hide: false, enable: false },
{ id: '4', name: 'Hidden & Disabled', hide: true, enable: false },
{ id: '4', name: 'Hidden & Disabled', hide: true, enable: false }
];
it('should show only normal entries when Edit Mode is OFF (Manager)', () => {
const ae_loc = { edit_mode: false, trusted_access: true, administrator_access: true };
const ae_loc = {
edit_mode: false,
trusted_access: true,
administrator_access: true
};
const result = filterEntries(mockEntries, ae_loc);
expect(result?.length).toBe(1);
expect(result?.[0].id).toBe('1');
});
it('should show hidden entries to Trusted users when Edit Mode is ON', () => {
const ae_loc = { edit_mode: true, trusted_access: true, administrator_access: false };
const ae_loc = {
edit_mode: true,
trusted_access: true,
administrator_access: false
};
const result = filterEntries(mockEntries, ae_loc);
// Should see Normal (1) and Hidden (2). Should NOT see Disabled (3, 4)
expect(result?.length).toBe(2);
expect(result?.map(r => r.id)).toContain('1');
expect(result?.map(r => r.id)).toContain('2');
expect(result?.map((r) => r.id)).toContain('1');
expect(result?.map((r) => r.id)).toContain('2');
});
it('should show everything to Administrators when Edit Mode is ON', () => {
const ae_loc = { edit_mode: true, trusted_access: true, administrator_access: true };
const ae_loc = {
edit_mode: true,
trusted_access: true,
administrator_access: true
};
const result = filterEntries(mockEntries, ae_loc);
expect(result?.length).toBe(4);
});
it('should hide everything sensitive to Public users even if Edit Mode is ON (Safety Check)', () => {
const ae_loc = { edit_mode: true, trusted_access: false, administrator_access: false };
const ae_loc = {
edit_mode: true,
trusted_access: false,
administrator_access: false
};
const result = filterEntries(mockEntries, ae_loc);
expect(result?.length).toBe(1);
expect(result?.[0].id).toBe('1');