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

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

@@ -561,6 +561,9 @@ export function db_save_ae_obj_li__journal(
passcode_write: obj.passcode_write,
passcode_write_expire: obj.passcode_write_expire,
passcode: obj.passcode,
passcode_timeout: obj.passcode_timeout,
enable: obj.enable,
hide: obj.hide,
priority: obj.priority,

33
src/lib/ae_journals/ae_journals_stores.ts
View File

@@ -30,6 +30,19 @@ let journals_local_data_struct: key_val = {
journal: {
edit: false,
edit_kv: {},
type_code_li: [
{ code: 'diary', name: 'Diary' },
{ code: 'log', name: 'Log' },
{ code: 'journal', name: 'Journal' },
{ code: 'notebook', name: 'Notebook' },
{ code: 'personal', name: 'Personal' },
{ code: 'professional', name: 'Professional' },
{ code: 'tracking', name: 'Tracking' },
{ code: 'other', name: 'Other' },
{ code: 'test', name: 'Test' },
// { code: 'notepad', name: 'Notepad' },
],
},
entry: {
edit: false,
@@ -69,10 +82,14 @@ let journals_session_data_struct: key_val = {
new_journal_name: '',
new_journal_type_code: '',
tmp_obj: {},
},
entry: {
edit: false,
edit_kv: {},
tmp_obj: {},
},
};
// console.log(`AE Stores - App Journals Session Storage Data:`, journals_session_data_struct);
@@ -91,6 +108,9 @@ let journals_slct_obj_template: key_val = {
'journal_obj': {},
'journal_obj_li': [],
'tmp_journal_obj': {}, // Temporary object for new journal
'tmp_journal_entry_obj': {}, // Temporary object for new journal entry
'lq__journal_obj': {}, // Testing passing a LiveQuery object around...
};
// console.log(`AE Stores - Selected Journals Objects:`, journals_slct_obj_template);
@@ -103,10 +123,8 @@ export let journals_slct = writable(journals_slct_obj_template);
// Intended for temporary session storage.
// Updated 2025-03-16
let journals_trig_template: key_val = {
archive_id: false,
archive_content_li: false,
event_id: false,
post_id: false,
journal_id: false,
journal_entry_li: false,
};
export let journals_trig: any = writable(journals_trig_template);
// console.log(`AE Journals Stores - Journals Trigger:`, journals_trig);
@@ -116,10 +134,7 @@ export let journals_trig: any = writable(journals_trig_template);
// Intended for temporary session storage.
// Updated 2025-03-16
let journals_prom_template: key_val = {
archive_id: false,
archive_content_li: false,
event_id: false,
post_id: false,
};
journal_id: false,
journal_entry_li: false,};
export let journals_prom: any = writable(journals_prom_template);
// console.log(`AE Journals Stores - Journals Trigger:`, journals_prom);

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

@@ -63,6 +63,9 @@ export interface Journal {
passcode_write?: null|string;
passcode_write_expire?: null|Date
passcode?: null|string;
passcode_timeout?: null|number; // Timeout in seconds
enable: null|boolean;
hide?: null|boolean;
priority?: null|boolean

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}