fix: stabilize root layout reactivity and badge template form
- Fix infinite loops in '+layout.svelte' by using 'untrack' for store synchronization effects. - Correctly define 'ae_acct' as a derived rune to resolve ReferenceErrors and ensure site styles hydrate properly. - Modernize 'ae_comp__badge_template_form.svelte' with Svelte 5 Runes and callback props (onsuccess, onerror, oncancel). - Fix illegal async in badge form by moving logic to a dedicated load function untracked by the effect. - Add Presentation Management Reports to TODO list for tracking.
This commit is contained in:
Scott Idem
2
TODO.md
2
TODO.md
@@ -50,6 +50,8 @@ This is a list of tasks to be completed before the next event/show/conference.
|
||||
|
||||
|
||||
|
||||
- [ ] **Reports:** Investigate and fix Events Presentation Management Reports (currently not working).
|
||||
|
||||
## Recent Accomplishments (Jan 28, 2026)
|
||||
|
||||
- [x] **Search Standard:** Completed the migration of IDAA, Journals, Badges, Sessions, and Exhibits to the high-performance reactive pattern.
|
||||
|
||||
3192
final_check_landscape.txt
Normal file
3192
final_check_landscape.txt
Normal file
File diff suppressed because it is too large
Load Diff
@@ -48,19 +48,14 @@
|
||||
// import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
import { events_loc, events_slct } from '$lib/stores/ae_events_stores';
|
||||
// import type { key_val } from '$lib/ae_stores';
|
||||
import type { LayoutData } from './$types';
|
||||
|
||||
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
|
||||
import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
|
||||
import E_app_sys_menu from '$lib/app_components/e_app_sys_menu.svelte';
|
||||
// import Element_access_type from '$lib/element_access_type.svelte';
|
||||
// import Element_app_cfg from '$lib/element_app_cfg.svelte';
|
||||
// import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
|
||||
|
||||
// import Element_data_store from '$lib/element_data_store_v2.svelte';
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
data: LayoutData;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
@@ -70,51 +65,36 @@
|
||||
console.log(`ae_root +layout.svelte data:`, data);
|
||||
}
|
||||
|
||||
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file.
|
||||
$slct.account_id = data.account_id;
|
||||
if (log_lvl) {
|
||||
console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`);
|
||||
}
|
||||
let ae_acct = data[$slct.account_id];
|
||||
// Define ae_acct as a derived rune so it's reactive and available globally in the component
|
||||
let ae_acct = $derived(data.account_id ? (data as any)[data.account_id] : null);
|
||||
|
||||
if (ae_acct) {
|
||||
$ae_api = {
|
||||
...$ae_api,
|
||||
...(ae_acct.api || {})
|
||||
};
|
||||
if (log_lvl > 1) {
|
||||
console.log(`$ae_api = `, $ae_api);
|
||||
}
|
||||
// Use an effect to sync data to stores whenever it changes
|
||||
import { untrack } from 'svelte';
|
||||
$effect(() => {
|
||||
const account_id = data.account_id;
|
||||
const acct_data = ae_acct;
|
||||
|
||||
// FORCE UPDATE: If the incoming data is a valid site (not a fallback ghost),
|
||||
// we must ensure the ae_loc store is updated regardless of what's in localStorage.
|
||||
if (ae_acct.loc?.account_id && ae_acct.loc.account_id !== 'ghost') {
|
||||
$ae_loc = {
|
||||
...$ae_loc,
|
||||
...(ae_acct.loc || {})
|
||||
};
|
||||
} else {
|
||||
// If it IS a ghost, we still update it to show the correct fallback message
|
||||
$ae_loc = {
|
||||
...$ae_loc,
|
||||
...(ae_acct.loc || {})
|
||||
};
|
||||
if (account_id) {
|
||||
untrack(() => {
|
||||
if ($slct.account_id !== account_id) {
|
||||
$slct.account_id = account_id;
|
||||
}
|
||||
|
||||
if (acct_data) {
|
||||
// Merging stores with untracked reads to prevent loops
|
||||
if (acct_data.api) {
|
||||
$ae_api = { ...untrack(() => $ae_api), ...acct_data.api };
|
||||
}
|
||||
if (acct_data.loc) {
|
||||
$ae_loc = { ...untrack(() => $ae_loc), ...acct_data.loc };
|
||||
}
|
||||
if (acct_data.slct) {
|
||||
$slct = { ...untrack(() => $slct), ...acct_data.slct };
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (log_lvl > 1) {
|
||||
console.log(`$ae_loc = `, $ae_loc);
|
||||
}
|
||||
|
||||
$slct = {
|
||||
...$slct,
|
||||
...(ae_acct.slct || {})
|
||||
};
|
||||
if (log_lvl > 1) {
|
||||
console.log(`$slct = `, $slct);
|
||||
}
|
||||
} else {
|
||||
console.warn('ae_root +layout.svelte: ae_acct not found for account_id:', $slct.account_id);
|
||||
}
|
||||
});
|
||||
|
||||
let flag_clear_idb: boolean = $state(false);
|
||||
let flag_clear_local: boolean = $state(false);
|
||||
@@ -709,13 +689,16 @@
|
||||
|
||||
// Sync JWT from local storage to API config for V3 endpoints
|
||||
$effect(() => {
|
||||
if ($ae_api.jwt !== $ae_loc.jwt) {
|
||||
if (log_lvl) console.log('ROOT: Syncing JWT to API config');
|
||||
$ae_api = {
|
||||
...$ae_api,
|
||||
jwt: $ae_loc.jwt
|
||||
};
|
||||
}
|
||||
const loc_jwt = $ae_loc.jwt;
|
||||
untrack(() => {
|
||||
if ($ae_api.jwt !== loc_jwt) {
|
||||
if (log_lvl) console.log('ROOT: Syncing JWT to API config');
|
||||
$ae_api = {
|
||||
...$ae_api,
|
||||
jwt: loc_jwt
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let is_hydrating = $state(true);
|
||||
@@ -980,7 +963,7 @@
|
||||
title="Reload and clear the page cache"
|
||||
onclick={() => {
|
||||
clear_idb();
|
||||
window.location.reload(true);
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
<!-- <span class="fas fa-sync mx-1"></span> -->
|
||||
|
||||
@@ -1,79 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
event_id: string;
|
||||
template_id?: string | null; // Null for creation, string for editing
|
||||
onsuccess?: (result: any) => void;
|
||||
onerror?: (error: any) => void;
|
||||
oncancel?: () => void;
|
||||
}
|
||||
|
||||
let { event_id, template_id = null }: Props = $props();
|
||||
let {
|
||||
event_id,
|
||||
template_id = null,
|
||||
onsuccess,
|
||||
onerror,
|
||||
oncancel
|
||||
}: Props = $props();
|
||||
|
||||
function preventDefault<T extends Event>(fn: (event: T) => void) {
|
||||
return function (event: T) {
|
||||
function preventDefault(fn: () => void) {
|
||||
return function (event: Event) {
|
||||
event.preventDefault();
|
||||
fn(event);
|
||||
fn();
|
||||
};
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
// Form fields (Runes)
|
||||
let name = $state('');
|
||||
let header_path = $state('');
|
||||
let logo_path = $state('');
|
||||
let header_row_1 = $state('');
|
||||
let header_row_2 = $state('');
|
||||
let secondary_header_path = $state('');
|
||||
let footer_text = $state('');
|
||||
let show_qr_front = $state(true);
|
||||
let show_qr_back = $state(true);
|
||||
let wireless_ssid = $state('');
|
||||
let wireless_password = $state('');
|
||||
let ticket_1_text = $state('');
|
||||
let ticket_2_text = $state('');
|
||||
let ticket_3_text = $state('');
|
||||
|
||||
// Form fields
|
||||
let name: string = '';
|
||||
let header_path: string = '';
|
||||
let logo_path: string = '';
|
||||
let header_row_1: string = '';
|
||||
let header_row_2: string = '';
|
||||
let secondary_header_path: string = '';
|
||||
let footer_text: string = '';
|
||||
let show_qr_front: boolean = true;
|
||||
let show_qr_back: boolean = true;
|
||||
let wireless_ssid: string = '';
|
||||
let wireless_password: string = '';
|
||||
let ticket_1_text: string = '';
|
||||
let ticket_2_text: string = '';
|
||||
let ticket_3_text: string = '';
|
||||
|
||||
let submit_status: string = 'idle'; // idle, loading, success, error
|
||||
let submit_status = $state('idle'); // idle, loading, success, error
|
||||
|
||||
// Load template data if in edit mode
|
||||
$effect(async () => {
|
||||
$effect(() => {
|
||||
if (template_id) {
|
||||
submit_status = 'loading';
|
||||
try {
|
||||
const template_obj = await events_func.load_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: template_id
|
||||
});
|
||||
if (template_obj) {
|
||||
name = template_obj.name || '';
|
||||
header_path = template_obj.header_path || '';
|
||||
logo_path = template_obj.logo_path || '';
|
||||
header_row_1 = template_obj.header_row_1 || '';
|
||||
header_row_2 = template_obj.header_row_2 || '';
|
||||
secondary_header_path = template_obj.secondary_header_path || '';
|
||||
footer_text = template_obj.footer_text || '';
|
||||
show_qr_front = template_obj.show_qr_front ?? true;
|
||||
show_qr_back = template_obj.show_qr_back ?? true;
|
||||
wireless_ssid = template_obj.wireless_ssid || '';
|
||||
wireless_password = template_obj.wireless_password || '';
|
||||
ticket_1_text = template_obj.ticket_1_text || '';
|
||||
ticket_2_text = template_obj.ticket_2_text || '';
|
||||
ticket_3_text = template_obj.ticket_3_text || '';
|
||||
submit_status = 'idle';
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Template not found for editing.');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error loading template for editing:', error);
|
||||
}
|
||||
untrack(() => {
|
||||
load_template(template_id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function load_template(id: string) {
|
||||
submit_status = 'loading';
|
||||
try {
|
||||
const template_obj = await events_func.load_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: id
|
||||
});
|
||||
if (template_obj) {
|
||||
name = template_obj.name || '';
|
||||
header_path = template_obj.header_path || '';
|
||||
logo_path = template_obj.logo_path || '';
|
||||
header_row_1 = template_obj.header_row_1 || '';
|
||||
header_row_2 = template_obj.header_row_2 || '';
|
||||
secondary_header_path = template_obj.secondary_header_path || '';
|
||||
footer_text = template_obj.footer_text || '';
|
||||
show_qr_front = template_obj.show_qr_front ?? true;
|
||||
show_qr_back = template_obj.show_qr_back ?? true;
|
||||
wireless_ssid = template_obj.wireless_ssid || '';
|
||||
wireless_password = template_obj.wireless_password || '';
|
||||
ticket_1_text = template_obj.ticket_1_text || '';
|
||||
ticket_2_text = template_obj.ticket_2_text || '';
|
||||
ticket_3_text = template_obj.ticket_3_text || '';
|
||||
submit_status = 'idle';
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Template not found for editing.');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error loading template for editing:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit() {
|
||||
submit_status = 'loading';
|
||||
const data_to_save: key_val = {
|
||||
@@ -111,24 +124,24 @@
|
||||
|
||||
if (result) {
|
||||
submit_status = 'success';
|
||||
dispatch('success', result);
|
||||
if (onsuccess) onsuccess(result);
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
dispatch('error', 'Failed to save template');
|
||||
if (onerror) onerror('Failed to save template');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error saving template:', error);
|
||||
dispatch('error', error);
|
||||
if (onerror) onerror(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handle_cancel() {
|
||||
dispatch('cancel');
|
||||
if (oncancel) oncancel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={preventDefault(() => {handle_submit})} class="p-4 space-y-4">
|
||||
<form onsubmit={preventDefault(handle_submit)} class="p-4 space-y-4">
|
||||
<h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
|
||||
|
||||
<label class="label">
|
||||
|
||||
Reference in New Issue
Block a user