I should have saved this long ago. Lots of changes. Learning a lot as well!

src/routes/sponsorships/+page.svelte

@@ -5,21 +5,37 @@ import { onMount } from 'svelte';
 import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
 import type {
     DrawerSettings,
-    // ModalSettings, ModalComponent, ModalStore
+    ModalSettings
+    , ModalComponent, ModalStore
     } from '@skeletonlabs/skeleton';
 const modalStore = getModalStore();
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
-import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
+// import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
+import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
 import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
 import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';
 
+
+import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
+
+const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
+
+const modal_view__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentViewSponsorshipObj,
+};
+
+
 type key_val = {
     [key: string]: any;
 };
 
+export let data;
+console.log(`page data:`, data);
+
 let ae_account_obj_get_promise;
 let ae_sponsorship_obj_li_get_promise;
 
@@ -155,7 +171,83 @@ async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
     return ae_sponsorship_obj_li_get_promise;
 }
 
+$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+    console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+    console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
 
+    $slct_trigger = null;
+
+    handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
+}
+
+let ae_sponsorship_obj_get_promise;
+async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
+    console.log('*** handle_load_sponsorship_id_obj() ***');
+
+    let params = {};
+
+	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'sponsorship',
+        obj_id: sponsorship_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: 2
+        })
+    .then(function (sponsorship_obj_get_result) {
+        if (sponsorship_obj_get_result) {
+            $slct.sponsorship_obj = sponsorship_obj_get_result;
+            console.log(`sponsorship object:`, $slct.sponsorship_obj);
+        }
+
+        // Auto show the selected sponsorship ID
+        // Is this pushState needed here?
+        // Set the URL param "sponsorship_id" to the current sponsorship ID.
+        // const url = new URL(location);
+        // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'sponsorship_id': $slct.sponsorship_id};
+        // window.parent.postMessage(message, "*");
+
+        // modalStore.trigger(modal_view__sponsorship_obj);
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_sponsorship_obj_get_promise;
+}
+
+const modal_edit__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: 'modalComponentEditSponsorshipObj',
+    title: 'Edit Sponsorship',
+};
+
+// const modal_view__sponsorship_obj: ModalSettings = {
+// 	type: 'component',
+// 	component: 'modal_component_view__sponsorship_obj',
+// };
+
+// $: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+//     console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+//     console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
+
+//     $slct_trigger = null;
+// }
+
+$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
+    console.log('Show Modal Edit');
+    modalStore.trigger(modal_edit__sponsorship_obj);
+} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
+    console.log('Show Modal View');
+    // modalStore.trigger(modalComponentViewSponsorshipObj);
+    modalStore.trigger(modal_view__sponsorship_obj);
+}
 
 // const modal: ModalSettings = {
 // 	type: 'alert',
@@ -232,19 +324,19 @@ const drawer_settings_y: DrawerSettings = {
         {/if}
         </section>
 
-        <section class="sponsorships_editing">
+        <!-- <section class="sponsorships_editing">
         {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
             <p>Edit!</p>
             <Edit_sponsorship_obj />
         {/if}
-        </section>
+        </section> -->
 
-        <section class="sponsorships_viewing">
+        <!-- <section class="sponsorships_viewing">
         {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_view__sponsorship_obj}
             <p>Viewing!</p>
             <View_sponsorship_obj />
         {/if}
-        </section>
+        </section> -->
 
 	</div>
 </div>