Sponsorships and Speakers are working and looking pretty well. Other general clean up.

src/routes/events_speakers/+page.svelte

@@ -19,20 +19,79 @@ const modalStore = getModalStore();
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import type { key_val } from '$lib/ae_stores';
 
-
+import Edit_modal_event_presenter_obj from './10_edit_modal__event_presenter_obj.svelte';
 import List_event_presenter_obj from './10_list__event_presenter_obj.svelte';
+import View_modal_event_presenter_obj from './10_view_modal__event_presenter_obj.svelte';
 
-type key_val = {
-    [key: string]: any;
+
+// Editing
+const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
+
+const modal_edit__event_presenter_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentEditEventPresenterObj,
+    title: 'Edit Event Presenter',
+    position: '', // default is "items-center"
 };
 
-// console.log($slct, $slct_trigger);
-// if ($slct.event_id) {
-//     // $slct_trigger = 'load__event_obj';
-//     console.log(`$slct.event_id = `, $slct.event_id);
-// }
+// Viewing
+const modalComponentViewEventPresenterObj: ModalComponent = { ref: View_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
 
+const modal_view__event_presenter_obj: ModalSettings = {
+    type: 'component',
+    component: modalComponentViewEventPresenterObj,
+    title: 'View Event Presenter',
+    position: '', // default is "items-center"
+
+    // Provide arbitrary classes to the backdrop and modal elements:
+    // backdropClasses: '!bg-green-500',
+    // modalClasses: 'w-modal-wide',
+    // modalClasses: 'w-full',
+
+    // Provide arbitrary metadata to your modal instance:
+    // meta: {
+        // component_root_classes: 'w-full',
+        // fn: do_something_function
+    // },
+};
+
+// We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show the view modal.
+$ae_loc.mod.events.show_edit__event_presenter_obj = false;
+$ae_loc.mod.sponsorships.show_view__event_presenter_obj = false;
+
+$: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.show_edit__event_presenter_obj) {
+    console.log('Show Modal Edit');
+    $slct_trigger = null;
+
+    let location = window.location.href;
+    const url = new URL(location);
+    url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
+    history.pushState({}, '', url);
+
+    // modalStore.clear();
+    modalStore.trigger(modal_edit__event_presenter_obj);
+}
+$: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.show_view__event_presenter_obj) {
+    console.log('Show Modal View');
+    $slct_trigger = null;
+
+    let location = window.location.href;
+    const url = new URL(location);
+    url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
+    history.pushState({}, '', url);
+
+    // modalStore.clear();
+    modalStore.trigger(modal_view__event_presenter_obj);
+}
+
+
+if ($slct.event_id && !$slct.event_presenter_obj_li) {
+    console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
+
+    $slct_trigger = 'load__event_presenter_obj_li';
+}
 
 onMount(() => {
     console.log('Events - Speakers: +page.svelte');
@@ -47,8 +106,8 @@ onMount(() => {
 });
 
 
-$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
-    console.log('Selected Event ID:', $slct.event_id);
+$: if ($slct_trigger == 'load__event_presenter_obj_li' && $slct.event_id) {
+    console.log(`load__event_presenter_obj_li event_id: ${$slct.event_id}`);
 
     $slct_trigger = null;
 
@@ -113,6 +172,47 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
     return ae_event_presenter_obj_li_get_promise;
 }
 
+
+// Load the Event Presenter Obj with ID based on the URL param.
+$: if ($slct_trigger == 'load__event_presenter_obj' && $slct.event_presenter_id) {
+    console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
+
+    $slct_trigger = null;
+
+    handle_load_ae_obj_id__event_presenter({event_presenter_id: $slct.event_presenter_id, try_cache: false});
+}
+
+let ae_event_presenter_obj_get_promise: Promise<any>;
+
+async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__event_presenter() *** event_presenter_id=${event_presenter_id}`);
+
+    let params = {};
+
+    // $ae_loc.hub.event_presenter_id_qry_status = 'loading';
+    ae_event_presenter_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event_presenter',
+        obj_id: event_presenter_id,
+        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
+        params: params,
+        log_lvl: 0
+        })
+    .then(function (event_presenter_obj_get_result) {
+        if (event_presenter_obj_get_result) {
+            $slct.event_presenter_obj = event_presenter_obj_get_result;
+            console.log(`event presenter object:`, $slct.event_presenter_obj);
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_event_presenter_obj_get_promise;
+
+}
+
 </script>