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
@@ -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