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

Can now edit some basic Journal cfg and other clean up

Browse Source
This commit is contained in:
Scott Idem
2025-03-24 17:50:10 -04:00
parent b37db30368
commit 1059cf5683
5 changed files with 257 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,12 +3,17 @@ let log_lvl: number = 0;
// console.log(`ae_journals +page data:`, data);
// console.log(`ae_journals Data Params:`, data.url.searchParams.get('journal_id'));
// *** Import Svelte specific
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { FolderPlus } from '@lucide/svelte';
// import { api } from '$lib/api';
// *** Import other supporting libraries
import { FolderPlus } from '@lucide/svelte';
import { liveQuery } from "dexie";
import { Modal } from 'flowbite-svelte';
// *** Import Aether specific variables and functions
// import { api } from '$lib/api';
import { db_journals } from "$lib/ae_journals/db_journals";
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
@@ -211,6 +216,14 @@ async function create_journal() {
<!-- Modal for creating new journal -->
{#if $journals_sess.show__modal_new__journal_obj}
<Modal
title="Create New Journal"
bind:open={$journals_sess.show__modal_new__journal_obj}
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"
>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Create New Journal</h3>
@@ -226,6 +239,8 @@ async function create_journal() {
</div>
</div>
</div>
</Modal>
{/if}

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

@@ -5,9 +5,10 @@ let log_lvl: number = 0;
let { data, children } = $props();
import { goto } from '$app/navigation';
import { BookHeart, FilePlus } from '@lucide/svelte';
import { BookHeart, Check, FilePlus, Minus, Notebook, Pencil, Plus, X } from '@lucide/svelte';
import { liveQuery } from "dexie";
import { Modal } from 'flowbite-svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { db_journals } from "$lib/ae_journals/db_journals";
@@ -41,6 +42,49 @@ let lq__journal_obj = $derived(liveQuery(async () => {
return results;
}));
async function handle_update_journal() {
if ($journals_slct.tmp_journal_obj.name && $journals_slct.tmp_journal_obj.type_code) {
try {
let data_kv = {
// account: $slct.account_id,
name: $journals_slct.tmp_journal_obj.name,
type_code: $journals_slct.tmp_journal_obj.type_code,
passcode: $journals_slct.tmp_journal_obj.passcode,
passcode_timeout: $journals_slct.tmp_journal_obj.passcode_timeout,
cfg_json: $journals_slct.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) => {
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_new__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>
@@ -59,11 +103,13 @@ let lq__journal_obj = $derived(liveQuery(async () => {
<div class="flex flex-row items-center justify-between w-full border-gray-200 border-y-2 py-2">
<a href="/journals"
class="btn btn-sm
variant-ghost-tertiary
hover:variant-filled-tertiary
transition
">
class="
btn btn-sm
variant-ghost-tertiary
hover:variant-filled-tertiary
transition
"
>
<!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals -->
<!-- <span class="fas fa-arrow-left m-1"></span> -->
<BookHeart class="mx-1" />
@@ -71,14 +117,43 @@ let lq__journal_obj = $derived(liveQuery(async () => {
</a>
{#if $journals_slct?.journal_entry_id}
<a href="/journals/{$journals_slct?.journal_id}" class="novi_btn btn btn-secondary btn-sm
variant-ghost-tertiary
hover:variant-filled-tertiary
transition
">
<span class="fas fa-arrow-left m-1"></span>
<a
href="/journals/{$journals_slct?.journal_id}"
class="
btn btn-sm
variant-ghost-tertiary
hover:variant-filled-tertiary
transition
"
>
<Notebook />
Back to Journal Entries
</a>
{:else}
<!-- Edit Journal button. Creates a modal to edit the journal. -->
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj = {
name: $lq__journal_obj?.name,
type_code: $lq__journal_obj?.type_code,
passcode: $lq__journal_obj?.passcode,
passcode_timeout: $lq__journal_obj?.passcode_timeout,
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
variant-ghost-warning
hover:variant-filled-warning
transition
"
>
<Pencil />
Edit Journal
</button>
{/if}
<!-- Add default journal entry -->
@@ -87,12 +162,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
New entry:
</span> -->
<button
class="
btn btn-sm
variant-ghost-success
hover:variant-filled-success
transition
"
type="button"
onclick={() => {
// $journals_sess.show__modal_new__journal_entry_obj = true;
@@ -121,6 +191,12 @@ let lq__journal_obj = $derived(liveQuery(async () => {
goto(`/journals/${$lq__journal_obj?.journal_id}/entry/${$journals_slct.journal_entry_id}`);
});
}}
class="
btn btn-sm
variant-ghost-success
hover:variant-filled-success
transition
"
>
<FilePlus class="mx-1" />
<!-- <span class="fas fa-plus m-1"></span> -->
@@ -133,7 +209,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
Category:
</span>
<select
class="novi_btn btn btn-secondary btn-sm
class="btn btn-secondary btn-sm
variant-soft-primary
hover:variant-filled-primary
transition
@@ -160,4 +236,118 @@ let lq__journal_obj = $derived(liveQuery(async () => {
{@render children()}
</section>
</section>
<!-- Modal for editing journal -->
{#if $journals_sess.show__modal_edit__journal_obj}
<Modal
title="Edit Journal"
bind:open={$journals_sess.show__modal_edit__journal_obj}
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"
>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Edit Journal</h3>
<div class="py-4">
<input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
<input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-full mb-2" />
<!-- input for passcode -->
<input type="text" placeholder="Passcode" bind:value={$journals_slct.tmp_journal_obj.passcode} class="input input-bordered w-full mb-2" />
<!-- input for passcode timeout -->
<input type="number" placeholder="Passcode Timeout" bind:value={$journals_slct.tmp_journal_obj.passcode_timeout} class="input input-bordered w-full mb-2" />
<!-- select option for journal type_code -->
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Type:
</span>
<select
class="btn btn-sm
variant-ghost-surface
hover:variant-filled-surface
transition
text-xs
"
bind:value={$journals_slct.tmp_journal_obj.type_code}
onchange={(event) => {
// Update the cfg_json with the selected journal type. Example cate
$journals_slct.tmp_journal_obj.type_code = event.target.value;
console.log('Selected journal type:', $journals_slct.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>
<!-- inputs for customizable journal category list -->
<!-- each category has a code and name; need to be able to add and remove categories -->
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Categories:
</span>
<div class="flex flex-col gap-1">
{#each $journals_slct.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={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].code} class="input input-bordered w-full" />
<input type="text" placeholder="Category Name" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].name} class="input input-bordered w-full" />
<button
type="button"
class="btn btn-sm variant-ghost-danger hover:variant-filled-danger transition"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.category_li.splice(index, 1);
$journals_slct.tmp_journal_obj.cfg_json.category_li = $journals_slct.tmp_journal_obj.cfg_json.category_li;
}}
>
<Minus />
Remove
</button>
</div>
{/each}
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj.cfg_json.category_li.push({ code: '', name: '' });
$journals_slct.tmp_journal_obj.cfg_json.category_li = $journals_slct.tmp_journal_obj.cfg_json.category_li;
}}
class="btn btn-sm variant-ghost-success hover:variant-filled-success transition max-w-96"
>
<Plus />
Add Category
</button>
</div>
</div>
<!-- textarea for json_cfg editing -->
</div>
<div class="modal-action">
<button
type="button"
onclick={handle_update_journal}
class="btn variant-ghost-warning hover:variant-filled-warning transition"
>
<Check />
Update
</button>
<button
type="button"
onclick={$journals_sess.show__modal_edit__journal_obj ?? false}
class="btn variant-ghost-surface hover:variant-filled-surface transition"
>
<X />
Cancel
</button>
</div>
</div>
</div>
</Modal>
{/if}