1259 lines
68 KiB
Svelte
1259 lines
68 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
log_lvl?: number;
|
|
lq__journal_obj: any;
|
|
// tmp__journal_obj?: key_val;
|
|
show?: boolean;
|
|
}
|
|
|
|
let {
|
|
log_lvl = $bindable(0),
|
|
lq__journal_obj, // This is the live query so it updates automatically anyways?
|
|
// tmp__journal_obj = {},
|
|
show = $bindable(false)
|
|
}: Props = $props();
|
|
|
|
// *** Import Svelte specific
|
|
import { goto } from '$app/navigation';
|
|
|
|
// *** Import other supporting libraries
|
|
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 { Modal } from 'flowbite-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_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';
|
|
|
|
let tmp__journal_obj = $state($journals_slct.journal_obj ?? {});
|
|
|
|
let tmp__journal_obj_changed: boolean = $state(false);
|
|
// let tmp__journal_obj: key_val = $state( $journals_slct.journal_obj );
|
|
// let tmp__journal_obj: key_val = $state( { ...$lq__journal_obj ?? {} } );
|
|
// let tmp__journal_obj: key_val = { ...$lq__journal_obj ?? {} };
|
|
// let tmp__journal_obj: key_val;
|
|
|
|
$effect(() => {
|
|
if (tmp__journal_obj) {
|
|
// console.log(`Journal object has changed from the tmp object.`, tmp__journal_obj);
|
|
tmp__journal_obj_changed =
|
|
JSON.stringify(tmp__journal_obj) != JSON.stringify($lq__journal_obj);
|
|
|
|
// if (tmp__journal_obj.cfg_json) {
|
|
// // Ensure cfg_json is always an object
|
|
// if (typeof tmp__journal_obj.cfg_json !== 'object') {
|
|
// console.log(`Journal object cfg_json is not an object.`, tmp__journal_obj);
|
|
// tmp__journal_obj.cfg_json = {};
|
|
// }
|
|
// } else {
|
|
// console.log(`Journal object does not have a cfg_json property.`, tmp__journal_obj);
|
|
// tmp__journal_obj.cfg_json = {};
|
|
// }
|
|
|
|
if (tmp__journal_obj_changed) {
|
|
console.log(
|
|
`Journal object no longer matches tmp object = `,
|
|
tmp__journal_obj_changed
|
|
);
|
|
}
|
|
}
|
|
});
|
|
|
|
async function handle_update_journal() {
|
|
if (tmp__journal_obj.name && tmp__journal_obj.type_code) {
|
|
try {
|
|
let data_kv = {
|
|
// account: $slct.account_id,
|
|
name: tmp__journal_obj.name,
|
|
description: tmp__journal_obj.description ?? '', // Ensure description is at least an empty string
|
|
type_code: tmp__journal_obj.type_code,
|
|
passcode: tmp__journal_obj.passcode,
|
|
private_passcode: tmp__journal_obj.private_passcode,
|
|
passcode_timeout: tmp__journal_obj.passcode_timeout,
|
|
auth_key: tmp__journal_obj.auth_key, // The Journal Entry encryption password
|
|
|
|
cfg_json: tmp__journal_obj.cfg_json
|
|
};
|
|
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((results) => {
|
|
if (log_lvl) {
|
|
console.log('Journal updated:', results);
|
|
}
|
|
// $journals_slct.journal_id = results?.journal_id_random;
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error updating journal:', error);
|
|
alert('Failed to update journal.');
|
|
})
|
|
.finally(() => {
|
|
if ($journals_slct.journal_id) {
|
|
$journals_sess.show__modal_edit__journal_obj = false;
|
|
// goto(`/journals/${$journals_slct.journal_id}`);
|
|
}
|
|
});
|
|
// console.log('New journal updated:', result);
|
|
// $journals_sess.show__modal_new__journal_obj = false;
|
|
// goto(`/journals/${result.journal_id_random}`);
|
|
} catch (error) {
|
|
console.error('Error updating journal:', error);
|
|
alert('Failed to update journal.');
|
|
}
|
|
} else {
|
|
alert('Please provide both name and type for the journal.');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- title="Edit Journal / Settings" -->
|
|
|
|
<Modal
|
|
bind:open={show}
|
|
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"
|
|
headerClass="
|
|
flex flex-row gap-2 items-center justify-between
|
|
w-full
|
|
bg-gray-100 dark:bg-gray-900
|
|
"
|
|
footerClass="
|
|
flex flex-row gap-2 items-center justify-center
|
|
w-full
|
|
bg-gray-100 dark:bg-gray-900
|
|
"
|
|
>
|
|
{#snippet header()}
|
|
<h3>
|
|
<span class="text-base font-semibold">
|
|
<span class="text-primary-500">
|
|
<BookOpenText class="inline-block mr-1" />
|
|
</span>
|
|
Edit Journal / Settings:
|
|
</span>
|
|
{$lq__journal_obj?.name ?? '-- not set --'}
|
|
</h3>
|
|
{/snippet}
|
|
|
|
<div class="modal">
|
|
<div class="modal-box mx-2 mb-14 space-y-4">
|
|
{#if !tmp__journal_obj || typeof tmp__journal_obj.cfg_json !== 'object'}
|
|
Not found or loading?
|
|
{:else}
|
|
<div class="space-y-2 py-2 mb-2">
|
|
<label class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Name:
|
|
<input
|
|
type="text"
|
|
placeholder="Journal Name"
|
|
bind:value={tmp__journal_obj.name}
|
|
class="input input-bordered w-full mb-2"
|
|
/>
|
|
</label>
|
|
|
|
<!-- Journal Description (Markdown) -->
|
|
<label class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Description:
|
|
<textarea
|
|
placeholder="Journal Description (Markdown format)"
|
|
bind:value={tmp__journal_obj.description}
|
|
class="input input-bordered w-full mb-2 h-32 resize-none"
|
|
title="Description of the journal (supports Markdown)"
|
|
></textarea>
|
|
</label>
|
|
|
|
<div class="*:hover:inline">
|
|
<!-- input for passcode -->
|
|
<div class="*:hover:inline">
|
|
<label class="text-sm text-gray-500">
|
|
Passcode:
|
|
<input
|
|
type="text"
|
|
placeholder="Passcode"
|
|
bind:value={tmp__journal_obj.passcode}
|
|
class="input input-bordered w-64 mb-2"
|
|
/>
|
|
</label>
|
|
<div class="text-xs text-gray-500 hidden md:inline">
|
|
<span class="text-red-500">*</span> This passcode is used to encrypt
|
|
the Journal Entries.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- input for private passcode -->
|
|
<div class="*:hover:inline">
|
|
<label class="text-sm text-gray-500">
|
|
Private Passcode:
|
|
<input
|
|
type="text"
|
|
placeholder="Private Passcode"
|
|
bind:value={tmp__journal_obj.private_passcode}
|
|
class="input input-bordered w-64 mb-2"
|
|
/>
|
|
</label>
|
|
<div class="text-xs text-gray-500 hidden md:inline">
|
|
<span class="text-red-500">*</span> This passcode is combined with the
|
|
regular passcode and used to encrypt the Journal Entries.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- input for passcode timeout -->
|
|
<div class="*:hover:inline">
|
|
<label class="text-sm text-gray-500">
|
|
Passcode Timeout:
|
|
<input
|
|
type="number"
|
|
placeholder="Passcode Timeout"
|
|
bind:value={tmp__journal_obj.passcode_timeout}
|
|
class="input input-bordered w-32 mb-2"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- input for auth_key -->
|
|
<label class="text-sm text-gray-500 sm:inline">
|
|
Auth Key:
|
|
<input
|
|
type="text"
|
|
placeholder="Auth Key"
|
|
bind:value={tmp__journal_obj.auth_key}
|
|
class="input input-bordered w-64 mb-2"
|
|
/>
|
|
</label>
|
|
|
|
<label class="text-sm text-gray-500">
|
|
Journal Type:
|
|
<input
|
|
type="text"
|
|
placeholder="Journal Type"
|
|
bind:value={tmp__journal_obj.type_code}
|
|
class="input input-bordered w-48 mb-2"
|
|
/>
|
|
</label>
|
|
|
|
<!-- select option for journal type_code -->
|
|
<div>
|
|
<span class="text-sm text-gray-500 sm:inline"> Journal Type: </span>
|
|
<select
|
|
class="btn btn-sm
|
|
preset-tonal-surface border border-surface-500
|
|
hover:preset-filled-surface-500
|
|
transition
|
|
text-xs
|
|
"
|
|
bind:value={tmp__journal_obj.type_code}
|
|
onchange={(event) => {
|
|
// Update the cfg_json with the selected journal type. Example cate
|
|
tmp__journal_obj.type_code = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log('Selected journal type:', tmp__journal_obj.type_code);
|
|
}}
|
|
title="Select a journal type"
|
|
>
|
|
<option value="">Select Journal Type</option>
|
|
{#each $journals_loc.journal.type_code_li as journal_type}
|
|
<option value={journal_type.code}>{journal_type.name}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex flex-row flex-wrap gap-1 items-start justify-start">
|
|
<!-- inputs for customizable journal category list -->
|
|
<!-- each category has a code and name; need to be able to add and remove categories -->
|
|
<div class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Categories:
|
|
</div>
|
|
<div class="flex flex-col gap-1 p-4">
|
|
{#each tmp__journal_obj?.cfg_json?.category_li as category, index}
|
|
<div class="flex flex-row items-center gap-1">
|
|
<input
|
|
type="text"
|
|
placeholder="Category Code"
|
|
bind:value={
|
|
tmp__journal_obj.cfg_json.category_li[index].code
|
|
}
|
|
class="input input-bordered w-48"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Category Name"
|
|
bind:value={
|
|
tmp__journal_obj.cfg_json.category_li[index].name
|
|
}
|
|
class="input input-bordered w-full"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm preset-tonal-danger border border-danger-500 hover:preset-filled-danger-500 transition"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.category_li.splice(index, 1);
|
|
tmp__journal_obj.cfg_json.category_li =
|
|
tmp__journal_obj.cfg_json.category_li;
|
|
}}
|
|
>
|
|
<Minus />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.category_li.push({
|
|
code: '',
|
|
name: ''
|
|
});
|
|
tmp__journal_obj.cfg_json.category_li =
|
|
tmp__journal_obj.cfg_json.category_li;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition max-w-48 p-1"
|
|
>
|
|
<Plus />
|
|
Add Category
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Select max height options (Tailwind CSS) -->
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry List Max Height:
|
|
</span>
|
|
<!-- {#if tmp__journal_obj?.cfg_json?.entry_li_max_height} -->
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.entry_li_max_height}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.entry_li_max_height = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected max height:',
|
|
tmp__journal_obj.cfg_json.entry_li_max_height
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select maximum height for journal entries in the list"
|
|
>
|
|
<option value="">Default (auto)</option>
|
|
<!-- <option value="none">None (no limit)</option> -->
|
|
<option value="max-h-8">Small (8)</option>
|
|
<option value="max-h-16">Medium (16)</option>
|
|
<option value="max-h-32">Large (32)</option>
|
|
<option value="max-h-96">Extra Large (96)</option>
|
|
<option value="max-h-full">Full (no limit)</option>
|
|
</select>
|
|
<!-- {/if} -->
|
|
</div>
|
|
|
|
<!-- Select hover max height options (Tailwind CSS) -->
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry List Hover Max Height:
|
|
</span>
|
|
<!-- {#if tmp__journal_obj?.cfg_json?.entry_li_hover_max_height} -->
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.entry_li_hover_max_height}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.entry_li_hover_max_height = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected max height:',
|
|
tmp__journal_obj.cfg_json.entry_li_hover_max_height
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select maximum height for journal entries in the list"
|
|
>
|
|
<option value="">Default (auto)</option>
|
|
<!-- <option value="none">None (no limit)</option> -->
|
|
<option value="hover:max-h-8">Small (8)</option>
|
|
<option value="hover:max-h-16">Medium (16)</option>
|
|
<option value="hover:max-h-32">Large (32)</option>
|
|
<option value="hover:max-h-96">Extra Large (96)</option>
|
|
<option value="hover:max-h-full">Full (no limit)</option>
|
|
</select>
|
|
<!-- {/if} -->
|
|
</div>
|
|
|
|
<!-- Select click max height options (Tailwind CSS) -->
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry List Active (click/press) Max Height:
|
|
</span>
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.entry_li_click_max_height}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.entry_li_click_max_height = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected max height:',
|
|
tmp__journal_obj.cfg_json.entry_li_click_max_height
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select maximum height for journal entries in the list"
|
|
>
|
|
<option value="">Default (auto)</option>
|
|
<!-- <option value="none">None (no limit)</option> -->
|
|
<option value="active:max-h-8">Small (8)</option>
|
|
<option value="active:max-h-16">Medium (16)</option>
|
|
<option value="active:max-h-32">Large (32)</option>
|
|
<option value="active:max-h-96">Extra Large (96)</option>
|
|
<option value="active:max-h-full">Full (no limit)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Toggles for the hover or click to expand Entry content when in a list -->
|
|
<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry List Expand Contents:
|
|
</span>
|
|
|
|
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
if (tmp__journal_obj.cfg_json.expand_li_content == 'hover') {
|
|
tmp__journal_obj.cfg_json.expand_li_content = 'click';
|
|
} else {
|
|
tmp__journal_obj.cfg_json.expand_li_content = 'hover';
|
|
}
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle hover or click to expand Entry content in the list"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.expand_li_content == 'hover'}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
|
|
<Target strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Hover </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Expand strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Click </span>
|
|
{/if}
|
|
<span class="hidden"> Expand Entry Content </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Toggles for the of how to add new content to an existing Journal Entry. append, prepend, and defaults to append -->
|
|
<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry Add Content:
|
|
</span>
|
|
|
|
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
if (tmp__journal_obj.cfg_json.entry_add_text == 'append') {
|
|
tmp__journal_obj.cfg_json.entry_add_text = 'prepend';
|
|
} else {
|
|
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 group"
|
|
title="Toggle prepend (start) or append (end) text to Journal Entry content"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.entry_add_text == 'append'}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleRight strokeWidth="1" color="red" class="mx-1" />
|
|
|
|
<!-- <Plus strokeWidth="2.5" color="green" /> -->
|
|
<BetweenVerticalEnd strokeWidth="2.5" color="green" />
|
|
<span class="hidden group-hover:inline"> Append </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleLeft strokeWidth="2.5" color="green" class="mx-1" />
|
|
<!-- <Minus strokeWidth="2.5" color="green" /> -->
|
|
<BetweenVerticalStart strokeWidth="2.5" color="green" />
|
|
<span class="hidden group-hover:inline"> Prepend </span>
|
|
{/if}
|
|
<span class="hidden"> Add Content to Journal Entry </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Select color scheme for the journal entries -->
|
|
<!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
|
|
<!-- Saves to cfg_json.color_scheme -->
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline"> Color Scheme: </span>
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.color_scheme}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.color_scheme = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected color scheme:',
|
|
tmp__journal_obj.cfg_json.color_scheme
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select color scheme for journal entries"
|
|
>
|
|
<option value="">Default (auto)</option>
|
|
<option value="slate">Slate</option>
|
|
<option value="gray">Gray</option>
|
|
<option value="blue">Blue</option>
|
|
<option value="green">Green</option>
|
|
<option value="orange">Orange</option>
|
|
<option value="red">Red</option>
|
|
<option value="yellow">Yellow</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Preferred Viewer:
|
|
</span>
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.pref_viewer}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.pref_viewer = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected viewer:',
|
|
tmp__journal_obj.cfg_json.pref_viewer
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select preferred viewer for journal entries"
|
|
>
|
|
<option value="">Default (Rendered)</option>
|
|
<option value="plain">Plain Text</option>
|
|
<option value="rendered">Rendered (HTML)</option>
|
|
<!-- <option value="textarea">Text Area</option> -->
|
|
<option value="codemirror">CodeMirror (readonly)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Preferred Editor:
|
|
</span>
|
|
<select
|
|
bind:value={tmp__journal_obj.cfg_json.pref_editor}
|
|
onchange={(event) => {
|
|
tmp__journal_obj.cfg_json.pref_editor = (
|
|
event.target as HTMLInputElement
|
|
).value;
|
|
console.log(
|
|
'Selected editor:',
|
|
tmp__journal_obj.cfg_json.pref_editor
|
|
);
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
|
|
title="Select preferred editor for journal entries"
|
|
>
|
|
<option value="">Default (Text Area)</option>
|
|
<option value="textarea">Text Area</option>
|
|
<option value="codemirror">CodeMirror</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Toggles for the copy content buttons: plain text (in Markdown), HTML marked up, rendered rich HTML, encrypted content, clone Entry -->
|
|
<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry Copy Options:
|
|
</span>
|
|
|
|
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_copy_plain_md =
|
|
!tmp__journal_obj.cfg_json.hide_copy_plain_md;
|
|
}}
|
|
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"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_copy_plain_md}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<EyeOff strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Eye strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Plaintext Markdown Copy Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_copy_html =
|
|
!tmp__journal_obj.cfg_json.hide_copy_html;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of HTML copy button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_copy_html}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<EyeOff strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Eye strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> HTML Copy Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_copy_rich =
|
|
!tmp__journal_obj.cfg_json.hide_copy_rich;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of rendered copy button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_copy_rich}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<EyeOff strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Eye strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Rendered Rich Copy Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_copy_encrypted =
|
|
!tmp__journal_obj.cfg_json.hide_copy_encrypted;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of encrypted copy button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_copy_encrypted}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<EyeOff strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Eye strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Encrypted Copy Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_clone =
|
|
!tmp__journal_obj.cfg_json.hide_clone;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of clone button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_clone}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<Copy strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Copy strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Clone Button </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Toggles for automatically hiding Entries marked as either: private, personal, or professional -->
|
|
<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry Visibility:
|
|
</span>
|
|
|
|
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_private =
|
|
!tmp__journal_obj.cfg_json.hide_private;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of private entries"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_private}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<Fingerprint strokeWidth="1" color="gray" class="mx-1" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Fingerprint strokeWidth="2.5" color="green" class="mx-1" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Private Entries </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_personal =
|
|
!tmp__journal_obj.cfg_json.hide_personal;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of personal entries"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_personal}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<BookHeart strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<BookHeart strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Personal Entries </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_professional =
|
|
!tmp__journal_obj.cfg_json.hide_professional;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of professional entries"
|
|
>
|
|
{#if tmp__journal_obj.cfg_json.hide_professional}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<BriefcaseBusiness strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<BriefcaseBusiness strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Professional Entries </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
|
|
<div class="flex flox-row flex-wrap gap-1 items-center justify-start">
|
|
<span class="text-sm text-gray-500 hidden sm:inline">
|
|
Journal Entry View Buttons:
|
|
</span>
|
|
|
|
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_alert =
|
|
!tmp__journal_obj.cfg_json.hide_btn_alert;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of alert icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_alert}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<Siren strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Siren strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Alert Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_alert_msg =
|
|
!tmp__journal_obj.cfg_json.hide_btn_alert_msg;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of alert message icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_alert_msg}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<MessageSquareWarning strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<MessageSquareWarning strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Alert Message Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_private =
|
|
!tmp__journal_obj.cfg_json.hide_btn_private;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of private icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_private}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<Fingerprint strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Fingerprint strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Private Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_public =
|
|
!tmp__journal_obj.cfg_json.hide_btn_public;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of public icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_public}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<EyeOff strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<Eye strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Public Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_personal =
|
|
!tmp__journal_obj.cfg_json.hide_btn_personal;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of personal icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_personal}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<BookHeart strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<BookHeart strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Personal Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_professional =
|
|
!tmp__journal_obj.cfg_json.hide_btn_professional;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of professional icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_professional}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<BriefcaseBusiness strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<BriefcaseBusiness strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Professional Button </span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
tmp__journal_obj.cfg_json.hide_btn_template =
|
|
!tmp__journal_obj.cfg_json.hide_btn_template;
|
|
}}
|
|
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
|
|
title="Toggle visibility of template icon button(s) on Journal Entry view page"
|
|
>
|
|
{#if tmp__journal_obj?.cfg_json.hide_btn_template}
|
|
<!-- <EyeOff strokeWidth="1" color="red" /> -->
|
|
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
|
|
<FilePlus strokeWidth="1" color="gray" />
|
|
<span class="hidden"> Hiding </span>
|
|
{:else}
|
|
<!-- <Eye strokeWidth="2.5" color="green" /> -->
|
|
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
|
|
<FilePlus strokeWidth="2.5" color="green" />
|
|
<span class="hidden"> Showing </span>
|
|
{/if}
|
|
<span class="hidden"> Template Button </span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- JSON configuration editor for advanced users -->
|
|
<!-- 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 preset-tonal-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 preset-tonal-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 preset-tonal-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 preset-tonal-warning hover:preset-filled-warning-500 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 preset-tonal-error hover:preset-filled-error-500 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 preset-tonal-error hover:preset-filled-error-500 transition"
|
|
title="Delete this journal"
|
|
>
|
|
<Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
|
|
<span class="hidden md:inline">Delete</span>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#snippet footer()}
|
|
<div
|
|
class="
|
|
|
|
"
|
|
>
|
|
<button
|
|
type="button"
|
|
onclick={handle_update_journal}
|
|
class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
|
|
>
|
|
<Check />
|
|
Update
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => (show = false)}
|
|
class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
|
|
>
|
|
<X />
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
{/snippet}
|
|
</Modal>
|