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

feat: Add basic event fields and collapsible sections to settings page

Browse Source 
This commit introduces a new component for editing basic event fields and adds collapsible sections to the event settings page for better organization. The new fields include code, conference, name, summary, description, timezone, start/end datetimes, and notes.
This commit is contained in:
Scott Idem
2025-11-18 19:42:15 -05:00
parent 1d0620085f
commit c06f50c21e
2 changed files with 195 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/routes/events/[event_id]/settings/+page.svelte
View File

@@ -8,6 +8,7 @@
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte'; import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import Ae_comp_event_settings_form from './ae_comp__event_settings_form.svelte'; 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_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';
let event_id = $page.params.event_id; let event_id = $page.params.event_id;
let event_obj = $state(null); let event_obj = $state(null);
@@ -23,11 +24,15 @@
}; };
}); });
async function handle_save(field_name: string, json_data: string | object) { async function handle_save(field_name: string, data: string | object) {
try { try {
const data_to_save = let data_kv = {};
typeof json_data === 'string' ? JSON.parse(json_data) : json_data; if (field_name === 'basic_fields') {
const data_kv = { [field_name]: data_to_save }; data_kv = data;
} else {
const data_to_save = typeof data === 'string' ? JSON.parse(data) : data;
data_kv = { [field_name]: data_to_save };
}
await events_func.update_ae_obj__event({ await events_func.update_ae_obj__event({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -47,100 +52,123 @@
{#if event_obj} {#if event_obj}
<div class="space-y-4"> <div class="space-y-4">
<div> <details class="details" open>
<h2 class="h2">General Config (cfg_json)</h2> <summary class="summary">Basic Info</summary>
<Ae_comp_event_settings_form <div class="p-4">
bind:cfg_json={event_obj.cfg_json} <Ae_comp_event_settings_basic_form
on:save={(e) => handle_save('cfg_json', e.detail)} bind:event_obj={event_obj}
/> on:save={(e) => handle_save('basic_fields', e.detail)}
</div> />
</div>
</details>
<div> <details class="details">
<h2 class="h2">Presentation Management (mod_pres_mgmt_json)</h2> <summary class="summary">General Config (cfg_json)</summary>
<Ae_comp_event_settings_pres_mgmt_form <div class="p-4">
bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json} <Ae_comp_event_settings_form
on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)} bind:cfg_json={event_obj.cfg_json}
/> on:save={(e) => handle_save('cfg_json', e.detail)}
</div> />
</div>
</details>
<div> <details class="details">
<h2 class="h2">Badges (mod_badges_json)</h2> <summary class="summary">Presentation Management (mod_pres_mgmt_json)</summary>
<E_app_codemirror_v5 <div class="p-4">
editable={true} <Ae_comp_event_settings_pres_mgmt_form
readonly={false} bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
content={JSON.stringify(event_obj.mod_badges_json, null, 4)} on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
show_line_numbers={true} />
placeholder="JSON config" </div>
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg" </details>
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>
<div> <details class="details">
<h2 class="h2">Abstracts (mod_abstracts_json)</h2> <summary class="summary">Badges (mod_badges_json)</summary>
<E_app_codemirror_v5 <div class="p-4">
editable={true} <E_app_codemirror_v5
readonly={false} editable={true}
content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)} readonly={false}
show_line_numbers={true} content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
placeholder="JSON config" show_line_numbers={true}
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg" placeholder="JSON config"
on:change={(e) => { class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
event_obj.mod_abstracts_json = e.detail; on:change={(e) => {
}} event_obj.mod_badges_json = e.detail;
/> }}
<button />
class="btn preset-tonal-primary" <button
on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)} class="btn preset-tonal-primary"
>Save</button on:click={() => handle_save('mod_badges_json', event_obj.mod_badges_json)}
> >Save</button
</div> >
</div>
</details>
<div> <details class="details">
<h2 class="h2">Exhibits (mod_exhibits_json)</h2> <summary class="summary">Abstracts (mod_abstracts_json)</summary>
<E_app_codemirror_v5 <div class="p-4">
editable={true} <E_app_codemirror_v5
readonly={false} editable={true}
content={JSON.stringify(event_obj.mod_exhibits_json, null, 4)} readonly={false}
show_line_numbers={true} content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
placeholder="JSON config" show_line_numbers={true}
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg" placeholder="JSON config"
on:change={(e) => { class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
event_obj.mod_exhibits_json = e.detail; on:change={(e) => {
}} event_obj.mod_abstracts_json = e.detail;
/> }}
<button />
class="btn preset-tonal-primary" <button
on:click={() => handle_save('mod_exhibits_json', event_obj.mod_exhibits_json)} class="btn preset-tonal-primary"
>Save</button on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)}
> >Save</button
</div> >
</div>
</details>
<div> <details class="details">
<h2 class="h2">Meetings (mod_meetings_json)</h2> <summary class="summary">Exhibits (mod_exhibits_json)</summary>
<E_app_codemirror_v5 <div class="p-4">
editable={true} <E_app_codemirror_v5
readonly={false} editable={true}
content={JSON.stringify(event_obj.mod_meetings_json, null, 4)} readonly={false}
show_line_numbers={true} content={JSON.stringify(event_obj.mod_exhibits_json, null, 4)}
placeholder="JSON config" show_line_numbers={true}
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg" placeholder="JSON config"
on:change={(e) => { class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
event_obj.mod_meetings_json = e.detail; on:change={(e) => {
}} event_obj.mod_exhibits_json = e.detail;
/> }}
<button />
class="btn preset-tonal-primary" <button
on:click={() => handle_save('mod_meetings_json', event_obj.mod_meetings_json)} class="btn preset-tonal-primary"
>Save</button on:click={() => handle_save('mod_exhibits_json', event_obj.mod_exhibits_json)}
> >Save</button
</div> >
</div>
</details>
<details class="details">
<summary class="summary">Meetings (mod_meetings_json)</summary>
<div class="p-4">
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_meetings_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_meetings_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('mod_meetings_json', event_obj.mod_meetings_json)}
>Save</button
>
</div>
</details>
</div> </div>
{:else} {:else}
<p>Loading event data...</p> <p>Loading event data...</p>

74
src/routes/events/[event_id]/settings/ae_comp__event_settings_basic_form.svelte Normal file
View File

@@ -0,0 +1,74 @@
<script lang="ts">
import type { key_val } from '$lib/stores/ae_stores';
import { createEventDispatcher } from 'svelte';
interface Props {
event_obj: key_val;
}
let { event_obj = $bindable() }: Props = $props();
const dispatch = createEventDispatcher();
function save() {
dispatch('save', event_obj);
}
</script>
<div class="space-y-4">
<div>
<label class="label">
<span>Name</span>
<input type="text" class="input" bind:value={event_obj.name} />
</label>
</div>
<div>
<label class="label">
<span>Code</span>
<input type="text" class="input" bind:value={event_obj.code} />
</label>
</div>
<div>
<label class="label">
<input type="checkbox" class="checkbox" bind:checked={event_obj.conference} />
<span>Conference</span>
</label>
</div>
<div>
<label class="label">
<span>Summary</span>
<textarea class="textarea" bind:value={event_obj.summary}></textarea>
</label>
</div>
<div>
<label class="label">
<span>Description</span>
<textarea class="textarea" bind:value={event_obj.description}></textarea>
</label>
</div>
<div>
<label class="label">
<span>Timezone</span>
<input type="text" class="input" bind:value={event_obj.timezone} />
</label>
</div>
<div>
<label class="label">
<span>Start Datetime</span>
<input type="datetime-local" class="input" bind:value={event_obj.start_datetime} />
</label>
</div>
<div>
<label class="label">
<span>End Datetime</span>
<input type="datetime-local" class="input" bind:value={event_obj.end_datetime} />
</label>
</div>
<div>
<label class="label">
<span>Notes</span>
<textarea class="textarea" bind:value={event_obj.notes}></textarea>
</label>
</div>
<button class="btn preset-tonal-primary" on:click={save}>Save</button>
</div>