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

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

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"