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

Improved styles with colors. More config options. Other updates.

Browse Source
This commit is contained in:
Scott Idem
2025-04-03 19:19:03 -04:00
parent e022645f64
commit 6e41833f82
6 changed files with 274 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -603,6 +603,8 @@ export function db_save_ae_obj_li__journal(
updated_on: obj.updated_on,
// Generated fields for sorting locally only
tmp_sort_1: `${obj.group}_${obj.priority}_${obj.sort}_${obj.updated_on}_${obj.created_on}`,
tmp_sort_2: `${obj.group}_${obj.priority}_${obj.sort}_${obj.updated_on ?? obj.created_on}`,
// tmp_sort_1: `${obj.original_datetime}_${obj.group}_${obj.priority}_${obj.sort}`,
// tmp_sort_2: `${obj.group}_${obj.original_datetime}_${obj.priority}_${obj.sort}`,

6
src/lib/ae_journals/db_journals.ts
View File

@@ -80,6 +80,10 @@ export interface Journal {
created_on: Date;
updated_on?: null|Date;
// Generated fields for sorting locally only
tmp_sort_1?: null|string;
tmp_sort_2?: null|string;
// Additional fields for convenience (database views)
file_count?: null|number; // Only files directly under a journal
journal_file_id_li_json?: null|string;
@@ -299,6 +303,7 @@ export class MySubClassedDexie extends Dexie {
name,
start_datetime, end_datetime,
timezone,
tmp_sort_1, tmp_sort_2,
enable, hide, priority, sort, group, notes, created_on, updated_on`,
journal_entry: `
id, journal_entry_id,
@@ -309,6 +314,7 @@ export class MySubClassedDexie extends Dexie {
name,
start_datetime, end_datetime,
timezone,
tmp_sort_1, tmp_sort_2,
enable, hide, priority, sort, group, notes, created_on, updated_on`,
});
}

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

@@ -43,7 +43,7 @@ let ae_acct = data[$slct.account_id];
let lq__journal_obj_li = $derived(liveQuery(async () => {
let results = await db_journals.journal
.orderBy('updated_on')
.orderBy('tmp_sort_2')
.reverse()
.toArray()
// .sortBy('start_datetime')

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

@@ -6,11 +6,17 @@ let { data, children } = $props();
import { goto } from '$app/navigation';
import {
ArrowDown01, ArrowDown10, ArrowDownUp,
BookHeart, BookImage, Bookmark, BookOpenText,
Check,
FilePlus, Library,
Minus, Notebook, Pencil, Plus,
Eye, EyeOff,
Flag, FlagOff, FilePlus, Library,
MessageSquareWarning, Minus,
Notebook,
Pencil, Plus,
SquareLibrary,
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
Tags, Trash2, TypeOutline,
X
} from '@lucide/svelte';
@@ -30,6 +36,9 @@ import { journals_func } from '$lib/ae_journals/ae_journals_functions';
// let { data }: Props = $props();
let tmp_journal_obj_changed: boolean = $state(false);
let tmp_journal_obj: key_val = $state({});
let ae_acct = data[$slct.account_id];
if (log_lvl) {
@@ -51,6 +60,17 @@ let lq__journal_obj = $derived(liveQuery(async () => {
return results;
}));
$effect(() => {
if ($lq__journal_obj) {
tmp_journal_obj = { ...$lq__journal_obj };
}
});
$effect(() => {
if (tmp_journal_obj) {
tmp_journal_obj_changed = JSON.stringify(tmp_journal_obj) != JSON.stringify($lq__journal_obj);
}
});
async function handle_update_journal() {
if ($journals_slct.tmp_journal_obj.name && $journals_slct.tmp_journal_obj.type_code) {
@@ -279,6 +299,7 @@ async function handle_update_journal() {
</div>
<!-- <div class="overflow-auto"> -->
{@render children()}
<!-- </div> -->
@@ -438,6 +459,211 @@ async function handle_update_journal() {
<!-- textarea for json_cfg editing -->
</div>
<div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<!-- Priority Button -->
<button
type="button"
onclick={() => {
if ($ae_loc.trusted_access) {
let data_kv = {
priority: $lq__journal_obj?.priority ? false : true,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal priority updated successfully!');
}).catch((error) => {
console.error('Error updating journal priority:', error);
alert('Failed to update journal priority.');
});
}
}}
class="btn-icon-sm variant-soft-tertiary transition"
title="Toggle priority of this journal"
>
{#if $lq__journal_obj?.priority}
<Flag strokeWidth="2.5" color="green" />
{:else}
<FlagOff strokeWidth="1" color="gray" />
{/if}
<span class="hidden lg:inline">Priority</span>
</button>
<!-- Sort Buttons -->
<span class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
<button
type="button"
onclick={() => {
let data_kv = {
sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort + 1 : 1,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal sort order incremented!');
}).catch((error) => {
console.error('Error updating journal sort order:', error);
alert('Failed to update journal sort order.');
});
}}
class="btn-icon-sm variant-soft-tertiary transition"
title="Increment sort order of this journal"
>
<Plus strokeWidth="2.5" color="blue" />
</button>
<span class="mx-1">
{#if $lq__journal_obj?.sort}
{$lq__journal_obj.sort}
{:else}
<ArrowDown10 />
{/if}
</span>
<button
type="button"
onclick={() => {
let data_kv = {
sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort - 1 : 0,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal sort order decremented!');
}).catch((error) => {
console.error('Error updating journal sort order:', error);
alert('Failed to update journal sort order.');
});
}}
class="btn-icon-sm variant-soft-tertiary transition"
title="Decrement sort order of this journal"
>
<Minus strokeWidth="2.5" color="blue" />
</button>
</span>
<!-- Group Input -->
<input
type="text"
bind:value={tmp_journal_obj.group}
placeholder="Group"
onchange={() => {
let data_kv = {
group: tmp_journal_obj.group,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal group updated successfully!');
}).catch((error) => {
console.error('Error updating journal group:', error);
alert('Failed to update journal group.');
});
}}
class="input input-sm input-bordered w-24"
title="Set group (for sorting) of this journal"
/>
<!-- Hide Button -->
<button
type="button"
onclick={() => {
let data_kv = {
hide: tmp_journal_obj.hide ? false : true,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal visibility updated successfully!');
}).catch((error) => {
console.error('Error updating journal visibility:', error);
alert('Failed to update journal visibility.');
});
}}
class="btn btn-sm md:btn-md variant-soft-warning hover:variant-filled-warning transition"
title="Toggle visibility of this journal"
>
{#if $lq__journal_obj?.hide}
<EyeOff strokeWidth="1" color="red" class="inline-block" />
<span class="hidden md:inline">Hidden</span>
{:else}
<Eye strokeWidth="2.5" color="green" class="inline-block" />
<span class="hidden md:inline">Visible</span>
{/if}
</button>
<!-- Enable Button -->
<button
type="button"
onclick={() => {
let data_kv = {
enable: $lq__journal_obj?.enable ? false : true,
};
journals_func.update_ae_obj__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
}).then(() => {
alert('Journal enable status updated successfully!');
}).catch((error) => {
console.error('Error updating journal enable status:', error);
alert('Failed to update journal enable status.');
});
}}
class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
title="Toggle enable status of this journal"
>
{#if $lq__journal_obj?.enable}
<ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
<span class="hidden md:inline">Enabled</span>
{:else}
<ShieldMinus strokeWidth="1" color="red" class="inline-block" />
<span class="hidden md:inline">Disabled</span>
{/if}
</button>
<!-- Delete Button -->
<button
type="button"
onclick={() => {
if (confirm(`Are you sure you want to delete this journal?`)) {
journals_func.delete_ae_obj_id__journal({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
log_lvl: log_lvl
}).then(() => {
alert('Journal deleted successfully!');
goto('/journals');
}).catch((error) => {
console.error('Error deleting journal:', error);
alert('Failed to delete journal.');
});
}
}}
class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
title="Delete this journal"
>
<Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
<span class="hidden md:inline">Delete</span>
</button>
</div>
<div class="modal-action">
<button
type="button"

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

@@ -29,10 +29,14 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
</script>
<section class="svelte_component ae_section ae_view journal_obj view__journal_obj bg-white rounded-lg p-2 m-2" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
<section class="
bg-white rounded-lg p-2 m-2 w-full
flex flex-col flex-wrap items-center justify-center
"
bind:clientHeight={$ae_loc.iframe_height_modal_body}>
<header class="ae_header journal__header">
<h2 class="journal__name h3">
<h2 class="journal__name h3 text-center">
<BookOpenText class="inline-block" />
{@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
@@ -48,22 +52,22 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
<!-- Show Journal description -->
<!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
<div>
<!-- <div> -->
{#if $lq__journal_obj?.description}
<div
class="
prose
space-y-1
journal__description
m-4
p-2
w-full max-w-screen-md
font-mono
bg-{$lq__journal_obj?.cfg_json.color_scheme}-100 text-gray-900
dark:bg-blue-900 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap whitespace-pre-wrap word-break
max-w-screen-md
text-sm font-normal text-wrap 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
@@ -74,7 +78,7 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
{@html $lq__journal_obj.description_md_html}
</div>
{/if}
</div>
<!-- </div> -->

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

@@ -48,7 +48,31 @@ let { lq__journal_obj_li }: Props = $props();
{/if}
</header>
{#if journals_journal_obj.description}<pre class="journal__description p-2 bg-white shadow-md rounded-lg text-sm font-normal text-wrap whitespace-pre-wrap word-break max-w-screen-md novi_text_wrap">{@html journals_journal_obj.description}</pre>{/if}
{#if journals_journal_obj.description}
<div
class="
prose
space-y-1
journal__description
p-2
w-full
font-mono
bg-{journals_journal_obj?.cfg_json.color_scheme}-100 text-gray-900
dark:bg-blue-900 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap word-break
max-w-screen-md
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-li:m-0 prose-li:p-0 prose-li:line-height-none
"
>
{@html journals_journal_obj.description_md_html}
</div>
{/if}
<div class="ae_options flex flex-row gap-2 items-center justify-center">