From 9691ceca4310c78f3042e3a3d47b226f8abc4dc6 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 18 Nov 2025 20:10:01 -0500
Subject: [PATCH] feat: Add form-based UIs and view toggles for event settings

This commit introduces form-based UI components for 'mod_badges_json' and 'mod_abstracts_json', and expands the form for 'mod_pres_mgmt_json'. It also adds view toggles to switch between form and raw JSON editing for each of these sections, providing greater flexibility for the user.
---
 .../events/[event_id]/settings/+page.svelte   | 162 +++++++++++++-----
 ...comp__event_settings_abstracts_form.svelte |  99 +++++++++++
 ...ae_comp__event_settings_badges_form.svelte |  90 ++++++++++
 ...comp__event_settings_pres_mgmt_form.svelte | 130 ++++++++++++--
 4 files changed, 427 insertions(+), 54 deletions(-)
 create mode 100644 src/routes/events/[event_id]/settings/ae_comp__event_settings_abstracts_form.svelte
 create mode 100644 src/routes/events/[event_id]/settings/ae_comp__event_settings_badges_form.svelte

diff --git a/src/routes/events/[event_id]/settings/+page.svelte b/src/routes/events/[event_id]/settings/+page.svelte
index 4a1cb22a..43f51bef 100644
--- a/src/routes/events/[event_id]/settings/+page.svelte
+++ b/src/routes/events/[event_id]/settings/+page.svelte
@@ -9,9 +9,15 @@
 	import Ae_comp_event_settings_form from './ae_comp__event_settings_form.svelte';
 	import Ae_comp_event_settings_pres_mgmt_form from './ae_comp__event_settings_pres_mgmt_form.svelte';
 	import Ae_comp_event_settings_basic_form from './ae_comp__event_settings_basic_form.svelte';
+	import Ae_comp_event_settings_badges_form from './ae_comp__event_settings_badges_form.svelte';
+	import Ae_comp_event_settings_abstracts_form from './ae_comp__event_settings_abstracts_form.svelte';
 
 	let event_id = $page.params.event_id;
 	let event_obj = $state(null);
+	let cfg_json_view = $state('form');
+	let pres_mgmt_json_view = $state('form');
+	let badges_json_view = $state('form');
+	let abstracts_json_view = $state('form');
 
 	onMount(() => {
 		const observable = liveQuery(() => db_events.event.get(event_id));
@@ -65,64 +71,140 @@
 		<details class="details">
 			<summary class="summary">General Config (cfg_json)</summary>
 			<div class="p-4">
-				<Ae_comp_event_settings_form
-					bind:cfg_json={event_obj.cfg_json}
-					on:save={(e) => handle_save('cfg_json', e.detail)}
-				/>
+				<div class="flex justify-end">
+					<button class="btn btn-sm" on:click={() => (cfg_json_view = 'form')}>Form</button>
+					<button class="btn btn-sm" on:click={() => (cfg_json_view = 'json')}>JSON</button>
+				</div>
+				{#if cfg_json_view === 'form'}
+					<Ae_comp_event_settings_form
+						bind:cfg_json={event_obj.cfg_json}
+						on:save={(e) => handle_save('cfg_json', e.detail)}
+					/>
+				{:else}
+					<E_app_codemirror_v5
+						editable={true}
+						readonly={false}
+						content={JSON.stringify(event_obj.cfg_json, null, 4)}
+						show_line_numbers={true}
+						placeholder="JSON config"
+						class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+						on:change={(e) => {
+							event_obj.cfg_json = e.detail;
+						}}
+					/>
+					<button
+						class="btn preset-tonal-primary"
+						on:click={() => handle_save('cfg_json', event_obj.cfg_json)}>Save</button
+					>
+				{/if}
 			</div>
 		</details>
 
 		<details class="details">
 			<summary class="summary">Presentation Management (mod_pres_mgmt_json)</summary>
 			<div class="p-4">
-				<Ae_comp_event_settings_pres_mgmt_form
-					bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
-					on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
-				/>
+				<div class="flex justify-end">
+					<button class="btn btn-sm" on:click={() => (pres_mgmt_json_view = 'form')}
+						>Form</button
+					>
+					<button class="btn btn-sm" on:click={() => (pres_mgmt_json_view = 'json')}
+						>JSON</button
+					>
+				</div>
+				{#if pres_mgmt_json_view === 'form'}
+					<Ae_comp_event_settings_pres_mgmt_form
+						bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
+						on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
+					/>
+				{:else}
+					<E_app_codemirror_v5
+						editable={true}
+						readonly={false}
+						content={JSON.stringify(event_obj.mod_pres_mgmt_json, null, 4)}
+						show_line_numbers={true}
+						placeholder="JSON config"
+						class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+						on:change={(e) => {
+							event_obj.mod_pres_mgmt_json = e.detail;
+						}}
+					/>
+					<button
+						class="btn preset-tonal-primary"
+						on:click={() =>
+							handle_save('mod_pres_mgmt_json', event_obj.mod_pres_mgmt_json)}
+						>Save</button
+					>
+				{/if}
 			</div>
 		</details>
 
 		<details class="details">
 			<summary class="summary">Badges (mod_badges_json)</summary>
 			<div class="p-4">
-				<E_app_codemirror_v5
-					editable={true}
-					readonly={false}
-					content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
-					show_line_numbers={true}
-					placeholder="JSON config"
-					class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
-					on:change={(e) => {
-						event_obj.mod_badges_json = e.detail;
-					}}
-				/>
-				<button
-					class="btn preset-tonal-primary"
-					on:click={() => handle_save('mod_badges_json', event_obj.mod_badges_json)}
-					>Save</button
-				>
+				<div class="flex justify-end">
+					<button class="btn btn-sm" on:click={() => (badges_json_view = 'form')}>Form</button>
+					<button class="btn btn-sm" on:click={() => (badges_json_view = 'json')}>JSON</button>
+				</div>
+				{#if badges_json_view === 'form'}
+					<Ae_comp_event_settings_badges_form
+						bind:mod_badges_json={event_obj.mod_badges_json}
+						on:save={(e) => handle_save('mod_badges_json', e.detail)}
+					/>
+				{:else}
+					<E_app_codemirror_v5
+						editable={true}
+						readonly={false}
+						content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
+						show_line_numbers={true}
+						placeholder="JSON config"
+						class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+						on:change={(e) => {
+							event_obj.mod_badges_json = e.detail;
+						}}
+					/>
+					<button
+						class="btn preset-tonal-primary"
+						on:click={() => handle_save('mod_badges_json', event_obj.mod_badges_json)}
+						>Save</button
+					>
+				{/if}
 			</div>
 		</details>
 
 		<details class="details">
 			<summary class="summary">Abstracts (mod_abstracts_json)</summary>
 			<div class="p-4">
-				<E_app_codemirror_v5
-					editable={true}
-					readonly={false}
-					content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
-					show_line_numbers={true}
-					placeholder="JSON config"
-					class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
-					on:change={(e) => {
-						event_obj.mod_abstracts_json = e.detail;
-					}}
-				/>
-				<button
-					class="btn preset-tonal-primary"
-					on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)}
-					>Save</button
-				>
+				<div class="flex justify-end">
+					<button class="btn btn-sm" on:click={() => (abstracts_json_view = 'form')}
+						>Form</button
+					>
+					<button class="btn btn-sm" on:click={() => (abstracts_json_view = 'json')}
+						>JSON</button
+					>
+				</div>
+				{#if abstracts_json_view === 'form'}
+					<Ae_comp_event_settings_abstracts_form
+						bind:mod_abstracts_json={event_obj.mod_abstracts_json}
+						on:save={(e) => handle_save('mod_abstracts_json', e.detail)}
+					/>
+				{:else}
+					<E_app_codemirror_v5
+						editable={true}
+						readonly={false}
+						content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
+						show_line_numbers={true}
+						placeholder="JSON config"
+						class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+						on:change={(e) => {
+							event_obj.mod_abstracts_json = e.detail;
+						}}
+					/>
+					<button
+						class="btn preset-tonal-primary"
+						on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)}
+						>Save</button
+					>
+				{/if}
 			</div>
 		</details>
 
diff --git a/src/routes/events/[event_id]/settings/ae_comp__event_settings_abstracts_form.svelte b/src/routes/events/[event_id]/settings/ae_comp__event_settings_abstracts_form.svelte
new file mode 100644
index 00000000..54525c0c
--- /dev/null
+++ b/src/routes/events/[event_id]/settings/ae_comp__event_settings_abstracts_form.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { key_val } from '$lib/stores/ae_stores';
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		mod_abstracts_json: key_val;
+	}
+
+	let { mod_abstracts_json = $bindable() }: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	function save() {
+		dispatch('save', mod_abstracts_json);
+	}
+</script>
+
+<div class="space-y-4">
+	<div class="space-y-2">
+		<div>
+			<label class="label">
+				<span>Name Character Limit</span>
+				<input
+					type="number"
+					class="input"
+					bind:value={mod_abstracts_json.name_char_limit}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Text Character Limit</span>
+				<input
+					type="number"
+					class="input"
+					bind:value={mod_abstracts_json.text_char_limit}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Deadline for New Abstracts</span>
+				<input
+					type="datetime-local"
+					class="input"
+					bind:value={mod_abstracts_json.deadline_new}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Deadline for Updates</span>
+				<input
+					type="datetime-local"
+					class="input"
+					bind:value={mod_abstracts_json.deadline_updates}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_abstracts_json.confirm_email_w_link}
+				/>
+				<span>Confirm Email with Link</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Confirmation From Email</span>
+				<input
+					type="email"
+					class="input"
+					bind:value={mod_abstracts_json.confirm_from_email}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Confirmation From Name</span>
+				<input type="text" class="input" bind:value={mod_abstracts_json.confirm_from_name} />
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Confirmation To Email Override</span>
+				<input
+					type="email"
+					class="input"
+					bind:value={mod_abstracts_json.confirm_to_email_override}
+				/>
+			</label>
+		</div>
+	</div>
+
+	<button class="btn preset-tonal-primary" on:click={save}>Save</button>
+</div>
diff --git a/src/routes/events/[event_id]/settings/ae_comp__event_settings_badges_form.svelte b/src/routes/events/[event_id]/settings/ae_comp__event_settings_badges_form.svelte
new file mode 100644
index 00000000..26048445
--- /dev/null
+++ b/src/routes/events/[event_id]/settings/ae_comp__event_settings_badges_form.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { key_val } from '$lib/stores/ae_stores';
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		mod_badges_json: key_val;
+	}
+
+	let { mod_badges_json = $bindable() }: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	function save() {
+		dispatch('save', mod_badges_json);
+	}
+</script>
+
+<div class="space-y-4">
+	<div class="grid grid-cols-2 gap-4">
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_badges_json.badge_id_only_search}
+				/>
+				<span>Badge ID Only Search</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_badges_json.enable_mass_print}
+				/>
+				<span>Enable Mass Print</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_badges_json.enable_add_badge_btn}
+				/>
+				<span>Enable Add Badge Button</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_badges_json.enable_upload_badge_li_btn}
+				/>
+				<span>Enable Upload Badge List Button</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input type="checkbox" class="checkbox" bind:checked={mod_badges_json.enable_search_qr} />
+				<span>Enable Search by QR</span>
+			</label>
+		</div>
+	</div>
+
+	<div class="space-y-2">
+		<div>
+			<label class="label">
+				<span>QR Type</span>
+				<input type="text" class="input" bind:value={mod_badges_json.qr_type} />
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Trusted Passcode</span>
+				<input type="text" class="input" bind:value={mod_badges_json.trusted_passcode} />
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Administrator Passcode</span>
+				<input type="text" class="input" bind:value={mod_badges_json.administrator_passcode} />
+			</label>
+		</div>
+	</div>
+
+	<button class="btn preset-tonal-primary" on:click={save}>Save</button>
+</div>
diff --git a/src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte b/src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte
index 89032a47..61414323 100644
--- a/src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte
+++ b/src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte
@@ -16,21 +16,123 @@
 </script>
 
 <div class="space-y-4">
-	<div>
-		<label class="label">
-			<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.lock_config} />
-			<span>Lock Config</span>
-		</label>
+	<div class="grid grid-cols-2 gap-4">
+		<div>
+			<label class="label">
+				<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.lock_config} />
+				<span>Lock Config</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.hide__location_code}
+				/>
+				<span>Hide Location Code</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.hide__presentation_code}
+				/>
+				<span>Hide Presentation Code</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.hide__presenter_code}
+				/>
+				<span>Hide Presenter Code</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.hide__session_code}
+				/>
+				<span>Hide Session Code</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.limit__navigation}
+				/>
+				<span>Limit Navigation</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.limit__options} />
+				<span>Limit Options</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.require__presenter_agree}
+				/>
+				<span>Require Presenter Agreement</span>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<input
+					type="checkbox"
+					class="checkbox"
+					bind:checked={mod_pres_mgmt_json.require__session_agree}
+				/>
+				<span>Require Session Agreement</span>
+			</label>
+		</div>
 	</div>
-	<div>
-		<label class="label">
-			<input
-				type="checkbox"
-				class="checkbox"
-				bind:checked={mod_pres_mgmt_json.hide__location_code}
-			/>
-			<span>Hide Location Code</span>
-		</label>
+
+	<div class="space-y-2">
+		<div>
+			<label class="label">
+				<span>Label for Person External ID</span>
+				<input
+					type="text"
+					class="input"
+					bind:value={mod_pres_mgmt_json.label__person_external_id}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Label for Session POC Type</span>
+				<input
+					type="text"
+					class="input"
+					bind:value={mod_pres_mgmt_json.label__session_poc_type}
+				/>
+			</label>
+		</div>
+		<div>
+			<label class="label">
+				<span>Label for Session POC Name</span>
+				<input
+					type="text"
+					class="input"
+					bind:value={mod_pres_mgmt_json.label__session_poc_name}
+				/>
+			</label>
+		</div>
 	</div>
+
 	<button class="btn preset-tonal-primary" on:click={save}>Save</button>
 </div>