256 lines
9.3 KiB
Svelte
256 lines
9.3 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* src/routes/journals/+page.svelte
|
|
* Modernized Journals Index View
|
|
* Focus: Simplicity for regular users, power tools for edit mode.
|
|
*/
|
|
// import { onMount } from 'svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
// *** Icons
|
|
import {
|
|
BookPlus,
|
|
FileUp,
|
|
LoaderCircle,
|
|
Sparkles,
|
|
SquareLibrary,
|
|
Wrench
|
|
} from '@lucide/svelte';
|
|
// *** Libraries & Stores
|
|
import { liveQuery } from 'dexie';
|
|
import { Modal } from 'flowbite-svelte';
|
|
import { db_core } from '$lib/ae_core/db_core';
|
|
import { db_journals } from '$lib/ae_journals/db_journals';
|
|
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
|
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
|
import {
|
|
journals_loc,
|
|
journals_sess,
|
|
journals_slct,
|
|
journals_trig
|
|
} from '$lib/ae_journals/ae_journals_stores';
|
|
|
|
// *** Components
|
|
import AE_Comp_Modal_Journal_Config from './ae_comp__modal_journal_config.svelte';
|
|
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
|
|
import AE_Comp_Journal_Entry_Quick_Add from './ae_comp__journal_entry_quick_add.svelte';
|
|
import AE_Comp_Modal_Journal_Import from './ae_comp__modal_journal_import.svelte';
|
|
|
|
interface Props {
|
|
data: any;
|
|
}
|
|
|
|
let { data }: Props = $props();
|
|
|
|
// *** State
|
|
let show_import_modal = $state(false);
|
|
let log_lvl = 0;
|
|
|
|
// *** LiveQueries
|
|
let lq__account = $derived(
|
|
liveQuery(async () => {
|
|
if (!$slct.account_id) return null;
|
|
return await db_core.account.get($slct.account_id);
|
|
})
|
|
);
|
|
|
|
let lq__journal_obj_li = $derived(
|
|
liveQuery(async () => {
|
|
return await db_journals.journal
|
|
.where('person_id')
|
|
.equals($ae_loc.person_id)
|
|
.reverse()
|
|
.sortBy('tmp_sort_3');
|
|
})
|
|
);
|
|
|
|
async function create_journal() {
|
|
if (!confirm('Create a new journal?')) return;
|
|
|
|
const name = $journals_sess.journal.new_journal_name;
|
|
const type = $journals_sess.journal.new_journal_type_code;
|
|
|
|
if (name && type) {
|
|
try {
|
|
const results = await journals_func.create_ae_obj__journal({
|
|
api_cfg: $ae_api,
|
|
account_id: $slct.account_id,
|
|
data_kv: {
|
|
person_id: $ae_loc.person_id,
|
|
name,
|
|
type_code: type,
|
|
cfg_json: {
|
|
category_li: [{ code: '', name: 'Default' }]
|
|
}
|
|
}
|
|
});
|
|
if (results?.journal_id) {
|
|
$journals_sess.show__modal_new__journal_obj = false;
|
|
goto(`/journals/${results.journal_id}`);
|
|
}
|
|
} catch (error) {
|
|
alert('Failed to create journal.');
|
|
}
|
|
} else {
|
|
alert('Please provide a name and type.');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="page_container flex min-h-screen w-full flex-col items-center gap-4 p-3 sm:gap-6 sm:p-4 md:gap-8 md:p-8">
|
|
<!-- Header Section -->
|
|
<header class="max-w-3xl space-y-2 text-center">
|
|
<h1
|
|
class="text-surface-900 dark:text-surface-100 text-3xl font-black tracking-tight sm:text-4xl md:text-5xl">
|
|
<SquareLibrary size="1em" class="text-primary-500 inline-block" />
|
|
Journals
|
|
</h1>
|
|
<!-- Show the person's name as context; skip account name (often shows placeholder) -->
|
|
{#if $ae_loc.person.given_name || $ae_loc.person.family_name}
|
|
<p class="text-surface-600 dark:text-surface-400 font-medium">
|
|
<span class="text-primary-500 font-semibold">
|
|
{[$ae_loc.person.given_name, $ae_loc.person.family_name]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
</span>
|
|
</p>
|
|
{/if}
|
|
</header>
|
|
|
|
<!-- Quick Add Integrated Section -->
|
|
<section class="w-full max-w-2xl">
|
|
<div class="group relative">
|
|
<!-- Glow ring: slightly brighter in dark mode where colors need more presence -->
|
|
<div
|
|
class="from-primary-500 to-secondary-500 absolute -inset-1 rounded-2xl bg-linear-to-r opacity-25 blur transition duration-1000 group-hover:opacity-60 group-hover:duration-200 dark:opacity-40 dark:group-hover:opacity-70">
|
|
</div>
|
|
<AE_Comp_Journal_Entry_Quick_Add
|
|
journals_li={$lq__journal_obj_li}
|
|
class="border-surface-500/10 bg-surface-50 dark:bg-surface-900 relative overflow-hidden rounded-xl border shadow-2xl" />
|
|
</div>
|
|
<div
|
|
class="mt-2 flex items-center justify-center gap-2 text-xs font-bold tracking-widest uppercase opacity-50">
|
|
<Sparkles size="1em" />
|
|
<span>Fast Input Mode Active</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Administrative Action Bar (Edit Mode Only) -->
|
|
{#if $ae_loc.edit_mode}
|
|
<nav
|
|
class="border-surface-500/10 flex w-full flex-row flex-wrap items-center justify-center gap-3 border-y py-4">
|
|
<button
|
|
type="button"
|
|
class="btn preset-tonal-secondary shadow-lg transition-transform hover:scale-105"
|
|
onclick={() =>
|
|
($journals_sess.show__modal_new__journal_obj = true)}>
|
|
<BookPlus size="1.2em" class="mr-2" />
|
|
<span>New Journal</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn preset-tonal-surface shadow-lg transition-transform hover:scale-105"
|
|
onclick={() => (show_import_modal = true)}>
|
|
<FileUp size="1.2em" class="mr-2" />
|
|
<span>Import</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn preset-tonal-surface shadow-lg transition-transform hover:scale-105"
|
|
onclick={() =>
|
|
($journals_sess.show__modal__journals_config = true)}>
|
|
<Wrench size="1.2em" class="mr-2" />
|
|
<span>Config</span>
|
|
</button>
|
|
</nav>
|
|
{/if}
|
|
|
|
<!-- Main List Section -->
|
|
<main class="flex w-full justify-center">
|
|
{#if $lq__journal_obj_li === undefined}
|
|
<div
|
|
class="flex flex-col items-center justify-center gap-4 p-20 opacity-50">
|
|
<LoaderCircle size="3em" class="animate-spin" />
|
|
<p class="text-xl font-bold">Accessing Brain...</p>
|
|
</div>
|
|
{:else if $lq__journal_obj_li.length > 0}
|
|
<Journal_obj_li {lq__journal_obj_li} />
|
|
{:else}
|
|
<div
|
|
class="bg-surface-500/5 border-surface-500/20 max-w-md rounded-3xl border-2 border-dashed p-12 text-center">
|
|
<SquareLibrary size="4em" class="mx-auto mb-4 opacity-20" />
|
|
<h3 class="mb-2 text-2xl font-bold">No Journals Found</h3>
|
|
<p class="mb-6 opacity-60">
|
|
You haven't created any journals yet. Start by creating one
|
|
to begin your documentation journey.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="btn preset-filled-primary"
|
|
onclick={() =>
|
|
($journals_sess.show__modal_new__journal_obj = true)}>
|
|
Create Your First Journal
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
{#if $journals_sess.show__modal_new__journal_obj}
|
|
<Modal
|
|
title="Create New Journal"
|
|
bind:open={$journals_sess.show__modal_new__journal_obj}
|
|
autoclose={false}
|
|
size="md"
|
|
class="dark:bg-surface-900 rounded-2xl bg-white shadow-2xl">
|
|
<div class="space-y-4 p-2">
|
|
<div class="space-y-1">
|
|
<!-- svelte-ignore a11y_label_has_associated_control -->
|
|
<label class="label text-sm font-bold opacity-75"
|
|
>Journal Name</label>
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. My Daily Logs"
|
|
bind:value={$journals_sess.journal.new_journal_name}
|
|
class="input" />
|
|
</div>
|
|
<div class="space-y-1">
|
|
<!-- svelte-ignore a11y_label_has_associated_control -->
|
|
<label class="label text-sm font-bold opacity-75"
|
|
>Type Code</label>
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. diary, log, notebook"
|
|
bind:value={$journals_sess.journal.new_journal_type_code}
|
|
class="input" />
|
|
</div>
|
|
<div class="flex justify-end gap-2 pt-4">
|
|
<button
|
|
type="button"
|
|
class="btn preset-tonal-surface"
|
|
onclick={() =>
|
|
($journals_sess.show__modal_new__journal_obj = false)}
|
|
>Cancel</button>
|
|
<button
|
|
type="button"
|
|
class="btn preset-filled-primary font-bold"
|
|
onclick={create_journal}>Create Journal</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|
|
|
|
{#if $journals_sess.show__modal__journals_config}
|
|
<AE_Comp_Modal_Journal_Config
|
|
show={$journals_sess.show__modal__journals_config} />
|
|
{/if}
|
|
|
|
<AE_Comp_Modal_Journal_Import
|
|
bind:open={show_import_modal}
|
|
on_close={() => (show_import_modal = false)}
|
|
on_import_complete={() => {}} />
|