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

Finally work on the Journals to fix some bugs. Now with much better append and prepend to Journal Entry.

Browse Source
This commit is contained in:
Scott Idem
2025-08-19 18:50:23 -04:00
parent ebaba77fe3
commit edfe9dee7a
6 changed files with 214 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/ae_core/ae_comp__hosted_files_upload.svelte
View File

@@ -269,7 +269,17 @@ async function handle_input_upload_files(
{required}
{accept}
name={input_name}
class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
class="
svelte_input_file_element
file-dropzone-input
px-1
block w-full text-lg
text-gray-900
border border-gray-300 rounded-lg
cursor-pointer b
g-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
{input_class_li.join(' ')}
"
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
/>

2
src/lib/ae_journals/ae_journals_stores.ts
View File

@@ -77,8 +77,6 @@ let journals_session_data_struct: key_val = {
show__modal_view__journal_entry_id: null,
show__modal_edit__journal_entry_id: null,
show__modal_edit__journal_obj: false,
show__content__journal_entry_history: false,
journal: {

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

@@ -430,7 +430,7 @@ async function handle_update_journal() {
<Modal
title="Edit Journal"
bind:open={$journals_sess.show__modal_edit__journal_obj}
autoclose={false}
autoclose={true}
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 mx-auto w-full divide-y"
@@ -570,6 +570,7 @@ async function handle_update_journal() {
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Entry List Max Height:
</span>
{#if tmp_journal_obj?.cfg_json}
<select
bind:value={tmp_journal_obj.cfg_json.entry_li_max_height}
onchange={(event) => {
@@ -588,6 +589,7 @@ async function handle_update_journal() {
<option value="max-h-full">Full (no limit)</option>
</select>
{/if}
</div>
<!-- Select hover max height options (Tailwind CSS) -->
@@ -700,24 +702,24 @@ async function handle_update_journal() {
tmp_journal_obj.cfg_json.entry_add_text = 'append';
}
}}
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition group"
title="Toggle append or prepend text to Journal Entry content"
>
{#if tmp_journal_obj.cfg_json.entry_add_text == 'append'}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<ToggleRight strokeWidth="1" color="red" class="mx-1" />
<!-- <Plus strokeWidth="2.5" color="green" /> -->
<BetweenVerticalEnd strokeWidth="2.5" color="green" />
<span class="hidden">
<span class="hidden group-hover:inline">
Append
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<ToggleLeft strokeWidth="2.5" color="green" class="mx-1" />
<!-- <Minus strokeWidth="2.5" color="green" /> -->
<BetweenVerticalStart strokeWidth="2.5" color="green" />
<span class="hidden">
<span class="hidden group-hover:inline">
Prepend
</span>
{/if}
@@ -1468,7 +1470,7 @@ async function handle_update_journal() {
</button>
<button
type="button"
onclick={$journals_sess.show__modal_edit__journal_obj ?? false}
onclick={() => (journals_sess.show__modal_edit__journal_obj = false)}
class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
>
<X />

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

@@ -10,7 +10,6 @@ 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/element_manage_hosted_file_li_all.svelte';
import { keymap } from '@codemirror/view';
interface Props {
@@ -150,11 +149,30 @@ $effect(() => {
<section
class:hidden={!$ae_loc.edit_mode}
class="ae_section journal_entry__hosted_file border border-gray-200 rounded p-2 space-y-2"
class="
ae_section journal_entry__hosted_file
border border-gray-200 rounded
p-2 space-y-2
w-full
"
>
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
title="Toggle between Upload and Select from Hosted Files"
onclick={() => {
if ($ae_sess.files.add_to_use_files_method == 'upload') {
$ae_sess.files.add_to_use_files_method = 'select';
} else {
$ae_sess.files.add_to_use_files_method = 'upload';
}
}}
>
<span class="fas fa-exchange-alt m-1"></span>
Upload/Select
</button>
<h3 class="h3">Upload/Manage Hosted File</h3>
<h3 class="h3 text-lg">{$ae_sess.files.add_to_use_files_method == 'select' ? 'Select' : 'Upload'} and Manage Hosted Files</h3>
<!-- {Object.keys($lq__journal_entry_obj?.data_json?.hosted_file_kv ?? {}).length} selected -->
<!-- {Object.keys(hosted_file_kv ?? {}).length} selected -->
<!-- {Object.keys(slct_hosted_file_kv ?? {}).length} to add -->
@@ -162,29 +180,16 @@ $effect(() => {
{#if $ae_loc.trusted_access}
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
title="Toggle between Upload and Select from Hosted Files"
onclick={() => {
if ($ae_sess.files.add_to_use_files_method == 'upload') {
$ae_sess.files.add_to_use_files_method = 'select';
} else {
$ae_sess.files.add_to_use_files_method = 'upload';
}
}}
>
<span class="fas fa-exchange-alt m-1"></span>
Upload/Select
</button>
<div
class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}
class="upload"
>
<Comp_hosted_files_upload
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
class_li="
border border-gray-300 rounded-md p-2
bg-gray-100 dark:bg-gray-800
"
link_to_type={link_to_type}
link_to_id={link_to_id}
bind:hosted_file_id_li={slct_hosted_file_id_li}
@@ -197,7 +202,7 @@ $effect(() => {
<span >
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload Journal Entry files</strong>
<strong class="bg-green-100 dark:bg-green-900 p-1">Upload Journal Entry files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Aether hosted files only</strong>
@@ -224,7 +229,7 @@ $effect(() => {
bind:slct_hosted_file_obj={slct_hosted_file_obj}
/>
</div>
{/if}
{#if !Object.keys(hosted_file_kv ?? {}).length}
No file(s) uploaded yet.

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

@@ -17,6 +17,7 @@ import {
NotebookPen, NotebookText, NotepadTextDashed,
Pencil, PenLine, Plus,
RemoveFormatting,
Save,
Search, Settings,
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
SquareLibrary,
@@ -909,10 +910,10 @@ $effect(() => {
<section
class="
svelte_component ae_section ae_view journal_entry_obj view__journal_entry_obj bg-white
flex flex-col grow items-center justify-start
w-full h-full p-2 m-2 space-y-2
svelte_component ae_section ae_view journal_entry_obj view__journal_entry_obj
flex flex-col gap-1 grow items-center justify-start
w-full h-full
p-1 m-1
"
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
@@ -920,7 +921,16 @@ $effect(() => {
{#if $lq__journal_entry_obj}
<header class="ae_header journal_entry__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
<header
class="
ae_header journal_entry__header
flex flex-row flex-wrap gap-2
items-center justify-between
w-full
bg-gray-100 dark:bg-gray-800
p-1 rounded-lg shadow-md
"
>
<div class="grow flex flex-row flex-wrap gap-2 items-center justify-start">
<!-- Toggle edit for journal entry -->
@@ -941,39 +951,62 @@ $effect(() => {
// trigger_decrypt = true;
// }
}}
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
class="
btn btn-sm
preset-tonal-success hover:preset-filled-warning-500
transition-all
"
title="Toggle edit mode for this journal entry"
>
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<!-- <Pencil strokeWidth="2.5" color="blue" /> -->
<!-- <Hash strokeWidth="2.5" color="green" /> -->
<!-- <Hash strokeWidth="1" color="red" /> -->
<NotebookText strokeWidth="2.5" color="green" />
<!-- <Hash strokeWidth="2.5" color="red" /> -->
<PenLine strokeWidth="2.5" color="red" />
{:else}
<!-- <Pencil strokeWidth="1" color="gray" /> -->
<Hash strokeWidth="1" color="green" />
<!-- <PenLine strokeWidth="1" color="green" /> -->
{#if ($lq__journal_entry_obj?.name)}
<NotebookText strokeWidth="2.5" class="text-neutral-800/60 dark:text-neutral-200/60"/>
{:else}
<CalendarClock strokeWidth="2.5" class="text-neutral-800/60 dark:text-neutral-200/60"/>
{/if}
<Hash strokeWidth="2.5" color="green" />
{/if}
</button>
<h2 class="journal_entry__name h4 md:h3 grow">
<h2 class="journal_entry__name text-md grow">
<!-- <span class="fas fa-spinner fa-spin"></span> -->
<!-- <span class="journal_entry__name inline-block"> -->
<!-- Allow for toggle between view and edit of journal entry. -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<span class="flex flex-row gap-1 items-center justify-start">
<!-- <Hash strokeWidth="2.5" color="red" /> -->
<input
type="text"
bind:value={tmp_entry_obj.name}
class="input input-bordered min-w-60 w-full"
class="input input-bordered min-w-60 w-full text-gray-800 dark:text-gray-200"
placeholder="Journal Entry Name"
title="Edit the name of this journal entry"
/>
</span>
{:else}
<span>
{#if ($lq__journal_entry_obj?.name)}
<NotebookText class="mx-1 inline-block text-neutral-800/60"/>
<!-- <NotebookText class="mx-1 inline-block text-neutral-800/60 dark:text-neutral-200/60"/> -->
{@html $lq__journal_entry_obj?.name}
{:else}
<CalendarClock class="mx-1 inline-block text-neutral-800/60"/>
<!-- <CalendarClock class="mx-1 inline-block text-neutral-800/60 dark:text-neutral-200/60"/> -->
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
{/if}
</span>
{/if}
<!-- </span> -->
@@ -994,7 +1027,7 @@ $effect(() => {
<input
type="text"
bind:value={tmp_entry_obj.tags}
class="input input-bordered inline-block text-sm"
class="input input-bordered inline-block text-sm text-gray-800 dark:text-gray-200"
placeholder="Tags (comma delimited)"
title="Edit the tags for this journal entry"
/>
@@ -1991,11 +2024,15 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
class="
grow
basis-full
flex flex-col flex-wrap items-center justify-center
flex flex-col flex-wrap gap-1 items-center justify-center
h-full min-h-max max-h-full
w-full max-w-6xl
relative
bg-gray-100 dark:bg-gray-800
p-1 rounded-lg shadow-md
"
class:bg-yellow-50={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
class:dark:bg-yellow-950={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
>
{#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
@@ -2098,6 +2135,29 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
<!-- --{@html encrypted_base64_string}-- -->
<!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
{#if $lq__journal_entry_obj?.data_json?.hosted_file_kv}
<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
<span class="">
<!-- <SquareDownload size="1em" class="mx-1 inline-block"/> -->
<FileDown size="1em" class="mx-1 inline-block" />
<span class="text-sm text-gray-500 hidden sm:inline">
Download Files:
</span>
</span>
{#each Object.entries($lq__journal_entry_obj?.data_json?.hosted_file_kv) as [key, hosted_file_obj]}
<Comp_hosted_files_download_button
hosted_file_id={hosted_file_obj?.hosted_file_id_random ?? ''}
hosted_file_obj={hosted_file_obj}
linked_to_type="journal_entry"
linked_to_id={$lq__journal_entry_obj?.journal_entry_id}
/>
{/each}
</div>
{/if}
{:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current')}
<!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) -->
@@ -2176,9 +2236,10 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
placeholder="Write using Markdown here..."
class="
p-2
preset-outlined-warning-200-800
hover:preset-tonal-warning
preset-outlined-warning-300-700
shadow-lg rounded-lg
bg-gray-100 text-gray-950
dark:bg-gray-800 dark:text-gray-100
"
/>
{:else}
@@ -2219,16 +2280,22 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
update_journal_entry();
}}
disabled={!tmp_entry_obj_changed}
class:preset-filled-error-500={tmp_entry_obj_changed}
class:invisible={!tmp_entry_obj_changed}
class="
btn btn-sm md:btn-md lg:btn-lg
min-w-72 w-full lg:min-w-96
max-w-96
hover:variant-outline-success
hover:preset-filled-success-500
preset-outlined-warning-900-100
preset-filled-warning-50-950
hover:variant-outline-success-900-100
hover:preset-filled-success-50-950
"
>
Save Changes?
<Save strokeWidth="1" class="inline-block" />
Save Changes
</button>
<!-- Do a quick check to see if the updated_on timestamp has changed. Specifically, if the entry was updated since the last time it was loaded. -->
@@ -2250,18 +2317,24 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
}}
disabled={!tmp_entry_obj_changed}
class:hidden={!tmp_entry_obj_changed}
class:preset-filled-error-500={tmp_entry_obj_changed}
class="
btn btn-sm md:btn-md lg:btn-lg
fixed top-96 md:top-72 right-6
min-w-24 w-full lg:min-w-32
max-w-40
preset-tonal-warning border border-warning-500
hover:variant-outline-success
hover:preset-filled-success-500
fixed top-96 md:top-72 right-6
preset-outlined-warning-900-100
preset-filled-warning-50-950
hover:variant-outline-success-900-100
hover:preset-filled-success-50-950
"
>
Save Changes?
<Save strokeWidth="1" class="inline-block" />
Save Changes
</button>
<!-- </div> -->
@@ -2383,20 +2456,18 @@ zzzz
</div> -->
</section>
<!-- <div>
{@html test_html}
</div> -->
{#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<!-- {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<div
id="journal_entry_codemirror"
class:hidden={!$ae_loc.edit_mode}
>
> -->
<!-- {cm_view} -->
<!-- <CodeMirror bind:value class="editor" {...props} /> -->
<!-- bind:value={cm_view} -->
@@ -2414,8 +2485,9 @@ zzzz
<!-- <pre>
{tmp_entry_obj.new_content}
</pre> -->
</div>
{/if}
<!-- </div>
{/if} -->
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">

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

@@ -39,6 +39,7 @@ let ae_promises: key_val = $state({});
let tmp_entry_obj: key_val = $state({});
let tmp_entry_obj_add_timestamp_header: boolean = $state(true);
let tmp_entry_obj_add_timestamp_header_w_day_of_week: boolean = $state(true);
let tmp_entry_obj_add_text_header: string = $state('');
let tmp_entry_obj_add_text: string = $state('');
let tmp_entry_obj_changed: boolean = $state(false);
@@ -432,6 +433,7 @@ $effect(() => {
tmp_entry_obj = journals_journal_entry_obj;
}}
class="btn btn-icon btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-secondary-500 transition"
title="{$lq__journal_obj?.cfg_json?.entry_add_text == 'append' ? 'Append to Journal Entry' : 'Prepend to Journal Entry'}"
>
<ListPlus />
<!-- Append -->
@@ -624,17 +626,23 @@ $effect(() => {
<!-- This should only have a textarea, Save button, and Cancel button. -->
{#if $journals_sess.show__modal_append__journal_entry_id}
<Modal
title="Append to Journal Entry: {tmp_entry_obj?.name ?? tmp_entry_obj?.created_on} ({tmp_entry_obj?.journal_entry_id})"
title="{$lq__journal_obj?.cfg_json?.entry_add_text == 'append' ? 'Append to Journal Entry' : 'Prepend to Journal Entry'}: {tmp_entry_obj?.name ?? tmp_entry_obj?.created_on} ({tmp_entry_obj?.journal_entry_id})"
bind:open={$journals_sess.show__modal_append__journal_entry_id}
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 mx-auto w-full divide-y"
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"
>
<div class="modal">
<div class="modal-box">
<!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
<div class="py-4">
<div class="flex flex-col gap-1">
<!-- Checkbox for using the timestamp as the Markdown header. This will be pre-pended to any text header given, if any. -->
<div>
@@ -671,6 +679,40 @@ $effect(() => {
>
Use timestamp as Markdown header
</label>
<input
type="checkbox"
id="append_timestamp_header_w_day_of_week"
bind:checked={tmp_entry_obj_add_timestamp_header_w_day_of_week}
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class="
p-2
bg-slate-100 text-gray-900
dark:bg-slate-900 dark:text-gray-100
shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500
inline-block
"
/>
<label
for="append_timestamp_header_w_day_of_week"
class:border-orange-200={$ae_loc.edit_mode}
class:hover:border-orange-500={$ae_loc.edit_mode}
class="
p-2
bg-slate-100 text-gray-900
dark:bg-slate-900 dark:text-gray-100
shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500
inline-block
"
>
Include day of week
</label>
</div>
@@ -732,11 +774,20 @@ $effect(() => {
// if ($lq__journal_obj?.cfg_json?.entry_add_text == 'prepend') {
if (tmp_entry_obj_add_timestamp_header && tmp_entry_obj_add_text_header) {
add_content = '## ' + ae_util.iso_datetime_formatter(new Date(), 'datetime_iso_12_no_seconds') + ' - ' + tmp_entry_obj_add_text_header.trim() + '\n' + tmp_entry_obj_add_text.trim() + '\n\n';
add_content = '## ' + ae_util.iso_datetime_formatter(new Date(), 'datetime_iso_12_no_seconds')
+ (tmp_entry_obj_add_timestamp_header_w_day_of_week ? ' ('+ae_util.iso_datetime_formatter(new Date(), 'week_long')+')' : '')
+ ' - ' + tmp_entry_obj_add_text_header.trim() + '\n' + tmp_entry_obj_add_text.trim() + '\n\n';
} else if (tmp_entry_obj_add_timestamp_header) {
add_content = '## ' + ae_util.iso_datetime_formatter(new Date(), 'datetime_iso_12_no_seconds') + '\n' + tmp_entry_obj_add_text.trim() + '\n\n';
add_content = '## ' + ae_util.iso_datetime_formatter(new Date(), 'datetime_iso_12_no_seconds')
+
(tmp_entry_obj_add_timestamp_header_w_day_of_week ? ' ('+ae_util.iso_datetime_formatter(new Date(), 'week_long')+')' : '')
+ '\n'
+ tmp_entry_obj_add_text.trim() + '\n\n';
} else if (tmp_entry_obj_add_text_header) {
add_content = '## ' + tmp_entry_obj_add_text_header.trim() + '\n' + tmp_entry_obj_add_text.trim() + '\n\n';
add_content = '## ' + tmp_entry_obj_add_text_header.trim()
+
(tmp_entry_obj_add_timestamp_header_w_day_of_week ? ' ('+ae_util.iso_datetime_formatter(new Date(), 'week_long')+')' : '')
+ '\n' + tmp_entry_obj_add_text.trim() + '\n\n';
}
// } else {
// if (tmp_entry_obj_add_timestamp_header && tmp_entry_obj_add_text_header) {
@@ -755,9 +806,12 @@ $effect(() => {
// }
// if (tmp_entry_obj_add_text) {
if ($lq__journal_obj?.cfg_json?.entry_add_text == 'prepend') {
// Handle prepending content
new_content = add_content + new_content;
} else {
new_content = new_content + add_content;
// Handle appending content
// Add one more line break before the content to be appended
new_content = new_content + '\n' + add_content;
}
// new_content = new_content + tmp_entry_obj_add_text.trim();
// }