From 4a7ac31197f8861eca12c666467a3cdc201448db Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 16 Feb 2026 19:11:59 -0500
Subject: [PATCH] Resolved Svelte check errors and modernized component event
 handling.

Implemented Svelte 5 callback props (onsuccess, oncancel) for Badge create and upload forms, replacing legacy dispatchers.

Updated the AE Field Editor to accept an optional 'id' prop, resolving property mismatch errors.

Updated the Event Settings page to use the new callback prop interface, clearing type assignment errors reported by 'npm run check'.
---
 .../element_ae_obj_field_editor_v3.svelte     |  2 ++
 .../badges/ae_comp__badge_create_form.svelte  |  6 +++++-
 .../badges/ae_comp__badge_upload_form.svelte  | 21 ++++++++++++-------
 .../events/[event_id]/settings/+page.svelte   |  8 +++----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/lib/elements/element_ae_obj_field_editor_v3.svelte b/src/lib/elements/element_ae_obj_field_editor_v3.svelte
index 4ac0262b..eedc2913 100644
--- a/src/lib/elements/element_ae_obj_field_editor_v3.svelte
+++ b/src/lib/elements/element_ae_obj_field_editor_v3.svelte
@@ -9,6 +9,7 @@
 
     interface Props {
         // Core Identifiers
+        id?: string;
         object_type: string;
         object_id: string;
         field_name: string;
@@ -42,6 +43,7 @@
     }
 
     let {
+        id,
         object_type,
         object_id,
         field_name,
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
index 660ca5f7..c9d7b852 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
@@ -6,9 +6,11 @@
 
     interface Props {
         event_id: string;
+        onsuccess?: (badge: any) => void;
+        oncancel?: () => void;
     }
 
-    let { event_id }: Props = $props();
+    let { event_id, onsuccess, oncancel }: Props = $props();
 
     // const dispatch = createEventDispatcher();
 
@@ -61,6 +63,7 @@
             if (new_badge) {
                 submit_status = 'success';
                 // dispatch('success', new_badge);
+                if (onsuccess) onsuccess(new_badge);
             } else {
                 submit_status = 'error';
                 // dispatch('error', 'Failed to create badge');
@@ -74,6 +77,7 @@
 
     function handle_cancel() {
         // dispatch('cancel');
+        if (oncancel) oncancel();
     }
 </script>
 
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
index aef6e3ea..694bd89e 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    // 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';
 
     interface Props {
         event_id: string;
+        onsuccess?: () => void;
+        oncancel?: () => void;
+        onerror?: (error: any) => void;
     }
 
-    let { event_id }: Props = $props();
+    let { event_id, onsuccess, oncancel, onerror }: Props = $props();
 
-    const dispatch = createEventDispatcher();
+    // const dispatch = createEventDispatcher();
 
     let file_input: HTMLInputElement | undefined = $state();
     let selected_file: File | null = $state(null);
@@ -97,25 +100,29 @@
 
                 upload_status = 'success';
                 upload_message = `Successfully uploaded ${processed_badges_count} out of ${total_badges_in_file} badges.`;
-                dispatch('success');
+                // dispatch('success');
+                if (onsuccess) onsuccess();
             } catch (error: any) {
                 upload_status = 'error';
                 upload_message = `Error processing file: ${error?.message || 'Unknown error'}`;
                 console.error('Error during file upload:', error);
-                dispatch('error', error);
+                // dispatch('error', error);
+                if (onerror) onerror(error);
             }
         };
         reader.onerror = (e) => {
             upload_status = 'error';
             upload_message = `Error reading file: ${reader.error?.message}`;
             console.error('FileReader error:', reader.error);
-            dispatch('error', reader.error);
+            // dispatch('error', reader.error);
+            if (onerror) onerror(reader.error);
         };
         reader.readAsText(selected_file);
     }
 
     function handle_cancel() {
-        dispatch('cancel');
+        // dispatch('cancel');
+        if (oncancel) oncancel();
     }
 </script>
 
diff --git a/src/routes/events/[event_id]/settings/+page.svelte b/src/routes/events/[event_id]/settings/+page.svelte
index b4b628cc..09f68e02 100644
--- a/src/routes/events/[event_id]/settings/+page.svelte
+++ b/src/routes/events/[event_id]/settings/+page.svelte
@@ -411,10 +411,10 @@
             <h3 class="h3">Create New Badge</h3>
             <Comp_badge_create_form
                 {event_id}
-                on:success={() => {
+                onsuccess={() => {
                     show_create_badge_modal = false;
                 }}
-                on:cancel={() => (show_create_badge_modal = false)}
+                oncancel={() => (show_create_badge_modal = false)}
             />
         </div>
     </Modal>
@@ -426,10 +426,10 @@
             <h3 class="h3">Upload Badges (CSV)</h3>
             <Comp_badge_upload_form
                 {event_id}
-                on:success={() => {
+                onsuccess={() => {
                     show_upload_badge_modal = false;
                 }}
-                on:cancel={() => (show_upload_badge_modal = false)}
+                oncancel={() => (show_upload_badge_modal = false)}
             />
         </div>
     </Modal>