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

fix: Update event settings forms for Svelte 5 reactivity

Browse Source 
Corrected event settings components to use Svelte 5 bindable props for two-way data binding. This ensures that changes in child form components (ae_comp__event_settings_form.svelte, ae_comp__event_settings_pres_mgmt_form.svelte) are reactively reflected in the parent page (settings/+page.svelte) and properly handled during save operations.
This commit is contained in:
Scott Idem
2025-11-18 19:23:33 -05:00
parent f7d1f304fe
commit 74140f41db
3 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,7 @@
<div> <div>
<h2 class="h2">General Config (cfg_json)</h2> <h2 class="h2">General Config (cfg_json)</h2>
<Ae_comp_event_settings_form <Ae_comp_event_settings_form
cfg_json={event_obj.cfg_json} bind:cfg_json={event_obj.cfg_json}
on:save={(e) => handle_save('cfg_json', e.detail)} on:save={(e) => handle_save('cfg_json', e.detail)}
/> />
</div> </div>
@@ -58,7 +58,7 @@
<div> <div>
<h2 class="h2">Presentation Management (mod_pres_mgmt_json)</h2> <h2 class="h2">Presentation Management (mod_pres_mgmt_json)</h2>
<Ae_comp_event_settings_pres_mgmt_form <Ae_comp_event_settings_pres_mgmt_form
mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json} bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)} on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
/> />
</div> </div>

10
src/routes/events/[event_id]/settings/ae_comp__event_settings_form.svelte
View File

@@ -6,14 +6,12 @@
cfg_json: key_val; cfg_json: key_val;
} }
let { cfg_json }: Props = $props(); let { cfg_json = $bindable() }: Props = $props();
let local_cfg_json = $state(cfg_json);
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function save() { function save() {
dispatch('save', local_cfg_json); dispatch('save', cfg_json);
} }
</script> </script>
@@ -21,13 +19,13 @@
<div> <div>
<label class="label"> <label class="label">
<span>Short Name</span> <span>Short Name</span>
<input type="text" class="input" bind:value={local_cfg_json.short_name} /> <input type="text" class="input" bind:value={cfg_json.short_name} />
</label> </label>
</div> </div>
<div> <div>
<label class="label"> <label class="label">
<span>Medium Name</span> <span>Medium Name</span>
<input type="text" class="input" bind:value={local_cfg_json.med_name} /> <input type="text" class="input" bind:value={cfg_json.med_name} />
</label> </label>
</div> </div>
<button class="btn preset-tonal-primary" on:click={save}>Save</button> <button class="btn preset-tonal-primary" on:click={save}>Save</button>

10
src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte
View File

@@ -6,21 +6,19 @@
mod_pres_mgmt_json: key_val; mod_pres_mgmt_json: key_val;
} }
let { mod_pres_mgmt_json }: Props = $props(); let { mod_pres_mgmt_json = $bindable() }: Props = $props();
let local_mod_pres_mgmt_json = $state(mod_pres_mgmt_json);
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function save() { function save() {
dispatch('save', local_mod_pres_mgmt_json); dispatch('save', mod_pres_mgmt_json);
} }
</script> </script>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="label"> <label class="label">
<input type="checkbox" class="checkbox" bind:checked={local_mod_pres_mgmt_json.lock_config} /> <input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.lock_config} />
<span>Lock Config</span> <span>Lock Config</span>
</label> </label>
</div> </div>
@@ -29,7 +27,7 @@
<input <input
type="checkbox" type="checkbox"
class="checkbox" class="checkbox"
bind:checked={local_mod_pres_mgmt_json.hide__location_code} bind:checked={mod_pres_mgmt_json.hide__location_code}
/> />
<span>Hide Location Code</span> <span>Hide Location Code</span>
</label> </label>