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

Advance journal config modal parity

Browse Source
This commit is contained in:
Scott Idem
2026-05-05 14:56:10 -04:00
parent 07dd213cfd
commit e5c8500bc1
2 changed files with 142 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -246,7 +246,7 @@ async function create_journal() {
{#if $journals_sess.show__modal__journals_config}
<AE_Comp_Modal_Journal_Config
show={$journals_sess.show__modal__journals_config} />
bind:show={$journals_sess.show__modal__journals_config} />
{/if}
<AE_Comp_Modal_Journal_Import

171
src/routes/journals/ae_comp__modal_journal_config.svelte
View File

@@ -8,12 +8,10 @@ import { untrack } from 'svelte';
import {
CalendarClock,
Check,
CircleAlert,
CodeXml,
Database,
Layout,
MonitorPlay,
MousePointerClick,
Palette,
Settings,
ShieldCheck,
Wrench,
@@ -22,7 +20,8 @@ import {
import { Modal } from 'flowbite-svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { ae_loc } from '$lib/stores/ae_stores';
import type { key_val } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
@@ -30,21 +29,21 @@ import {
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
interface Props {
log_lvl?: number;
show?: boolean;
}
let { log_lvl = 0, show = $bindable(false) }: Props = $props();
let { show = $bindable(false) }: Props = $props();
// Internal State
let tab: 'form' | 'local_json' | 'session_json' = $state('form');
let tmp_config: any = $state({
let tab: 'config' | 'local_json' | 'session_json' = $state('config');
let tmp_config: key_val = $state({
journal: {},
entry: {}
});
const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
const field_card_class = 'bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors hover:bg-surface-500/10';
const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
@@ -98,8 +97,8 @@ function handle_save() {
class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button
type="button"
class={tab_button_class(tab === 'form')}
onclick={() => (tab = 'form')}>
class={tab_button_class(tab === 'config')}
onclick={() => (tab = 'config')}>
<Settings size="1.1em" class="mr-1" /> Config
</button>
<button
@@ -116,16 +115,16 @@ function handle_save() {
</button>
</div>
{#if tab === 'form'}
<div class="animate-in fade-in space-y-8 duration-300">
{#if tab === 'config'}
<div class="animate-in fade-in space-y-4 duration-300">
<!-- Date/Time Section -->
<section class={panel_class}>
<h2 class={panel_title_class}>
<CalendarClock size="1.2em" class="text-primary-500" />
Date and Time Display
</h2>
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
<label class="label">
<div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-2">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>DateTime Format</span>
<select
@@ -145,7 +144,7 @@ function handle_save() {
>ISO (YYYY-MM-DD HH:mm:ss)</option>
</select>
</label>
<label class="label">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Time-Only Format</span>
<select
@@ -172,9 +171,8 @@ function handle_save() {
class="text-primary-500" />
User Interface Preferences
</h2>
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
<label
class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
<div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-2">
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.entry.auto_save}
@@ -186,8 +184,7 @@ function handle_save() {
</p>
</div>
</label>
<label
class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.show_id_random}
@@ -209,8 +206,8 @@ function handle_save() {
<Database size="1.2em" class="text-primary-500" />
Journal Query Filters
</h2>
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
<label class="label">
<div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-3">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Enabled Status</span>
<select
@@ -223,7 +220,7 @@ function handle_save() {
>All (Enabled & Disabled & NULL)</option>
</select>
</label>
<label class="label">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Hidden Status</span>
<select
@@ -235,7 +232,7 @@ function handle_save() {
>All (Visible & Hidden & NULL)</option>
</select>
</label>
<label class="label">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Query Limit</span>
<select
@@ -259,8 +256,8 @@ function handle_save() {
<Database size="1.2em" class="text-primary-500" />
Entry Query Filters
</h2>
<div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
<label class="label">
<div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-3">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Enabled Status</span>
<select
@@ -273,7 +270,7 @@ function handle_save() {
>All (Enabled & Disabled & NULL)</option>
</select>
</label>
<label class="label">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Hidden Status</span>
<select
@@ -285,7 +282,7 @@ function handle_save() {
>All (Visible & Hidden & NULL)</option>
</select>
</label>
<label class="label">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Query Limit</span>
<select
@@ -313,8 +310,7 @@ function handle_save() {
<div class="text-sm italic opacity-80">
Global security overrides for the journal module.
</div>
<label
class="flex cursor-pointer items-center space-x-3">
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={
@@ -326,6 +322,121 @@ function handle_save() {
</label>
</div>
</section>
<!-- Alerts Section -->
<section class={panel_class}>
<h2 class={panel_title_class}>
<CircleAlert size="1.2em" class="text-primary-500" />
Alerts & Messaging
</h2>
<div class="space-y-4 rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Alert Message</span>
<textarea
bind:value={tmp_config.alert_msg}
class="textarea min-h-24 w-full"
placeholder="Optional alert or notice shown with the journal"
></textarea>
</label>
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.alert}
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Enable Alert</span>
<span class="text-xs opacity-60">
Mark this journal for attention in lists and
headers.
</span>
</div>
</label>
</div>
</section>
<!-- Admin Section -->
<section class={panel_class}>
<h2 class={panel_title_class}>
<Settings size="1.2em" class="text-primary-500" />
Admin
</h2>
<div class="space-y-4 rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
<label class="label flex flex-col items-start gap-1">
<span class="text-sm font-bold opacity-70"
>Notes</span>
<textarea
bind:value={tmp_config.notes}
class="textarea min-h-24 w-full"
placeholder="Internal notes for administrators and trusted access"
></textarea>
</label>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.enable}
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Enabled</span>
<span class="text-xs opacity-60">
Allow access to this journal.
</span>
</div>
</label>
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.hide}
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Hidden</span>
<span class="text-xs opacity-60">
Hide this journal from standard lists.
</span>
</div>
</label>
<label class={field_card_class}>
<input
type="checkbox"
bind:checked={tmp_config.priority}
class="checkbox checkbox-primary" />
<div class="flex flex-col">
<span class="font-bold">Priority</span>
<span class="text-xs opacity-60">
Pin this journal ahead of the standard
order.
</span>
</div>
</label>
<label class="bg-surface-500/5 border-surface-500/10 flex items-center justify-between rounded-lg border p-3">
<div class="flex flex-col">
<span class="text-sm font-bold"
>Sort Order</span>
<span class="text-xs opacity-60">
Lower numbers appear earlier in lists.
</span>
</div>
<input
type="number"
bind:value={tmp_config.sort}
class="input input-sm w-24 text-right" />
</label>
</div>
<div class="rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
<p class="text-xs italic opacity-70">
Admin changes apply to the journal module state
and are saved with the rest of this config.
</p>
</div>
</div>
</section>
</div>
{:else if tab === 'local_json'}
<div class="h-full min-h-100">