style(journals): standardize and stabilize 'Config' interfaces across all levels
This commit is contained in:
Scott Idem
@@ -3,7 +3,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp } from '@lucide/svelte';
|
||||
import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings } from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
@@ -24,6 +24,7 @@
|
||||
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;
|
||||
@@ -40,7 +41,6 @@
|
||||
// let ae_trigger: any = null;
|
||||
// let ae_triggers: key_val = {};
|
||||
|
||||
let show_menu: boolean = $state(false);
|
||||
let typed_journal_passcode: string = $state('');
|
||||
let passcode_timer: any = $state(null);
|
||||
|
||||
@@ -119,6 +119,33 @@
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_new_entry() {
|
||||
let data_kv = {
|
||||
category_code: null
|
||||
};
|
||||
if ($journals_loc.qry__category_code) {
|
||||
data_kv.category_code = $journals_loc.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_random) {
|
||||
$journals_slct.journal_entry_id = results.journal_entry_id_random;
|
||||
$journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] = 'current';
|
||||
goto(`/journals/${$lq__journal_obj?.journal_id}/entry/${results.journal_entry_id_random}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating journal entry:', error);
|
||||
alert('Failed to create new journal entry.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
@@ -147,213 +174,32 @@
|
||||
</h2>
|
||||
|
||||
<div class="grow flex flex-row flex-wrap gap-2 items-center justify-end">
|
||||
<section class="relative transition-all">
|
||||
<!-- Menu Button -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (show_menu = !show_menu)}
|
||||
class="
|
||||
btn
|
||||
variant-outline-secondary hover:preset-filled-secondary-400-600
|
||||
py-1 px-2 w-24
|
||||
transition-all
|
||||
"
|
||||
title="Toggle menu"
|
||||
>
|
||||
<Menu size="1.5em" class="inline-block" />
|
||||
<span class="hidden md:inline">Menu</span>
|
||||
</button>
|
||||
<!-- Simplified Config Trigger -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($journals_sess.show__modal_edit__journal_obj = true)}
|
||||
class="btn variant-filled-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>
|
||||
|
||||
<!-- Menu -->
|
||||
<!-- {#if show_menu} -->
|
||||
<div
|
||||
class="
|
||||
absolute top-12 right-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
|
||||
min-w-72
|
||||
max-w-fit
|
||||
"
|
||||
class:hidden={!show_menu}
|
||||
>
|
||||
<div
|
||||
class="
|
||||
flex flex-row flex-wrap items-center justify-evenly gap-2 w-full
|
||||
"
|
||||
>
|
||||
<span class="text-sm text-gray-500">
|
||||
<span class="fas fa-info-circle text-blue-500"></span>
|
||||
Journal ID: {$lq__journal_obj?.id}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// $journals_sess.show__modal_new__journal_entry_obj = true
|
||||
// log_lvl = 3;
|
||||
|
||||
let data_kv = {
|
||||
category_code: null
|
||||
};
|
||||
if ($journals_loc.qry__category_code) {
|
||||
data_kv.category_code = $journals_loc.qry__category_code;
|
||||
}
|
||||
if (log_lvl) {
|
||||
console.log(
|
||||
'Creating new journal entry with data_kv:',
|
||||
data_kv
|
||||
);
|
||||
}
|
||||
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
|
||||
})
|
||||
.then((results) => {
|
||||
if (log_lvl) {
|
||||
console.log('New journal entry created:', results);
|
||||
}
|
||||
$journals_slct.journal_entry_id =
|
||||
results?.journal_entry_id_random;
|
||||
// $journals_loc.entry.edit = true;
|
||||
$journals_loc.entry.edit_kv[
|
||||
$journals_slct.journal_entry_id
|
||||
] = 'current';
|
||||
// alert(`Journal entry created successfully! ${$journals_slct.journal_entry_id}`);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error updating journal entry:', error);
|
||||
alert('Failed to update journal entry.');
|
||||
})
|
||||
.finally(() => {
|
||||
if ($journals_slct.journal_entry_id) {
|
||||
goto(
|
||||
`/journals/${$lq__journal_obj?.journal_id}/entry/${$journals_slct.journal_entry_id}`
|
||||
);
|
||||
} else {
|
||||
alert('Failed to create new journal entry.');
|
||||
}
|
||||
});
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
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 Journal Entry </span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$journals_slct.tmp_journal_obj = {
|
||||
name: $lq__journal_obj?.name,
|
||||
description: $lq__journal_obj?.description,
|
||||
type_code: $lq__journal_obj?.type_code,
|
||||
passcode: $lq__journal_obj?.passcode,
|
||||
passcode_timeout: $lq__journal_obj?.passcode_timeout,
|
||||
auth_key: $lq__journal_obj?.auth_key,
|
||||
cfg_json: $lq__journal_obj?.cfg_json
|
||||
};
|
||||
$journals_sess.show__modal_edit__journal_obj = true;
|
||||
}}
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-warning border border-warning-500
|
||||
hover:preset-filled-warning-500
|
||||
transition
|
||||
"
|
||||
title="Edit Journal meta and configuration (name, type, passcode, categories, etc.: {$lq__journal_obj?.name})"
|
||||
>
|
||||
<Pencil />
|
||||
<span class="hidden md:inline"> Edit Journal </span>
|
||||
</button>
|
||||
|
||||
{#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
show_menu = false;
|
||||
onShowExport?.();
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
title="Export journal entries"
|
||||
>
|
||||
<FileDown />
|
||||
<span class="hidden md:inline"> Export Entries </span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
show_menu = false;
|
||||
onShowImport?.();
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
title="Import journal entries from files"
|
||||
>
|
||||
<FileUp />
|
||||
<span class="hidden md:inline"> Import Entries </span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Set Journal private_passcode (string) -->
|
||||
<!-- The Journal private_passcode will be used along with the Journal passcode to encrypt the journal entries. -->
|
||||
<!-- Passcode Verification (Condensed) -->
|
||||
{#if !$journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
|
||||
<div class="flex gap-1">
|
||||
<input
|
||||
type="text"
|
||||
type="password"
|
||||
bind:value={typed_journal_passcode}
|
||||
placeholder="Journal passcode"
|
||||
onchange={() => {
|
||||
// console.log('HERE');
|
||||
// verify_journal_passcode();
|
||||
}}
|
||||
class="input input-sm input-bordered w-full mb-2"
|
||||
title="Enter private passcode of this journal"
|
||||
placeholder="Passcode"
|
||||
class="input input-sm variant-form-material w-32"
|
||||
/>
|
||||
|
||||
{#if $journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
|
||||
<div class="text-sm text-gray-500">
|
||||
<span class="fas fa-check-circle text-green-500"></span>
|
||||
Journal passcode verified
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm text-gray-500">
|
||||
<span class="fas fa-exclamation-circle text-red-500"></span>
|
||||
Journal passcode not verified {$lq__journal_obj?.private_passcode ??
|
||||
'??'}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- {/if} -->
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Show Journal description -->
|
||||
<!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
|
||||
<!-- prose-h1:text-gray-100 dark:prose-h1:text-gray-900 -->
|
||||
<!-- <div> -->
|
||||
{#if $lq__journal_obj?.description && $ae_loc.edit_mode}
|
||||
<div
|
||||
class="
|
||||
@@ -379,5 +225,14 @@
|
||||
{@html $lq__journal_obj.description_md_html}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- </div> -->
|
||||
</section>
|
||||
|
||||
<!-- Standardized Journal Action/Config Modal -->
|
||||
<Journal_obj_id_edit
|
||||
{log_lvl}
|
||||
{lq__journal_obj}
|
||||
show={$journals_sess.show__modal_edit__journal_obj}
|
||||
onNewEntry={handle_new_entry}
|
||||
onShowExport={onShowExport}
|
||||
onShowImport={onShowImport}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user