Changes. Work on new review page searching.

src/lib/ae_events_stores.ts

@@ -0,0 +1,154 @@
+import { localStorageStore } from '@skeletonlabs/skeleton';
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+
+import type { key_val } from '$lib/ae_stores';
+
+/* *** BEGIN *** Initialize events_local_data_struct */
+// Longer-term app data. This should be stored to *local* storage.
+// Updated 2024-03-06
+let events_local_data_struct: key_val = {
+    'ver': '2024-03-06_17',
+    // Shared
+    'name': 'Aether - Events (SvelteKit 2.x Svelte 4.x)',
+    'title': `OSIT's Æ Events - Dev SvelteKit`, // Æ
+
+    'ds': {},
+
+    'events_cfg_json': {},
+
+    'default__event_id': null, // OSIT Demo pjrcghqwert
+    'default__location_id': null,
+    'default__session_id': null,
+
+    // all, disabled, enabled
+    'qry__enabled': 'enabled',
+    // all, hidden, not_hidden
+    'qry__hidden': 'not_hidden',
+    'qry__limit': 20,
+    'qry__offset': 0,
+
+    // Badge Printing
+    'badges': {
+        'show_element__cfg': true,
+        'show_element__cfg_detail': false,
+        'show_element__access_type': true,
+        'theme_mode': 'dark',
+        'theme_name': 'wintry',
+
+        'classes__form': 'border border-surface-200 p-4 space-y-4 rounded-container-token',
+    },
+
+    // Lead Retrievals (Exhibit)
+
+    // Presentation Management (Distributing)
+
+    // Speakers Management (Collection)
+    'speakers': {
+        'default__session_id': null, // Assign to new presenters by default
+        status__submit: null, // 'saving', 'created', 'updated'
+    },
+
+    // other
+}
+console.log(`AE Stores - App Events Local Storage Data:`, events_local_data_struct);
+
+// This works, but does not uses local storage:
+// export let ae_loc = writable(events_local_data_struct);
+
+// This works and uses *local* storage:
+export let events_loc: Writable<key_val> = localStorageStore('ae_ events_loc', events_local_data_struct);
+// console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
+
+
+/* *** BEGIN *** Initialize events_session_data_struct */
+// Temporary app data. This should be stored to session storage.
+// Updated 2024-03-06
+let events_session_data_struct: key_val = {
+    'ver': '2024-03-06_17',
+    // Shared
+    'ds': {
+        'submit_status': null,
+    },
+    'ds_loaded': {
+    },
+
+    // Badge Printing
+    'badges': {
+        'status_qry__search': null,
+    },
+
+    // Lead Retrievals (Exhibit)
+
+    // Presentation Management (Distributing)
+
+    // Speakers Management (Collection)
+
+    // other
+};
+console.log(`AE Stores - App Events Session Storage Data:`, events_session_data_struct);
+export let events_sess = writable(events_session_data_struct);
+
+
+/* *** BEGIN *** Initialize ae_events_slct */
+// Updated 2024-03-06
+let events_slct_obj_template: key_val = {
+    // Top level
+    'event_id': null,
+    'event_obj': {},
+    'event_obj_li': [],
+
+    // Sub-level event_
+    'abstract_id': null,
+    'abstract_obj': {},
+    'abstract_obj_li': [],
+    'badge_id': null,
+    'badge_obj': {},
+    'badge_obj_li': [],
+    'badge_template_id': null,
+    'badge_template_obj': {},
+    'badge_template_obj_li': [],
+    'device_id': null,
+    'device_obj': {},
+    'device_obj_li': [],
+    'exhibit_id': null,
+    'exhibit_obj': {},
+    'exhibit_obj_li': [],
+
+    // Rename these to badge_tracking_*?
+    'exhibit_tracking_id': null,
+    'exhibit_tracking_obj': {},
+    'exhibit_tracking_obj_li': [],
+
+    'file_id': null,
+    'file_obj': {},
+    'file_obj_li': [],
+    'location_id': null,
+    'location_obj': {},
+    'location_obj_li': [],
+    'person_id': null,
+    'person_obj': {},
+    'person_obj_li': [],
+    'presentation_id': null,
+    'presentation_obj': {},
+    'presentation_obj_li': [],
+    'presenter_id': null,
+    'presenter_obj': {},
+    'presenter_obj_li': [],
+    'session_id': null,
+    'session_obj': {},
+    'session_obj_li': [],
+};
+// console.log(`AE Stores - Selected Events Objects:`, events_slct_obj_template);
+
+// This works, but does not uses local storage:
+// export let slct = writable(events_slct_obj_template);
+
+// This works and uses *local* storage:
+export let events_slct: Writable<key_val> = localStorageStore('ae_events_slct', events_slct_obj_template);
+
+
+/* *** BEGIN *** Initialize ae_events_trigger */
+// Updated 2024-03-06
+export let events_trigger: any = writable(null);
+// console.log(`AE Stores - Selected Trigger:`, ae_events_trigger);

src/lib/ae_stores.ts

@@ -36,8 +36,8 @@ export type key_val = {
 
 // *** BEGIN *** Longer-term app data. This should be stored to local storage.
 export let ae_app_local_data_struct: key_val = {
-    'ver': '2024-03-04_10',
+    'ver': '2024-03-06_18',
-    'name': 'Aether App SvelteKit Template',
+    'name': 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
     'theme': 'light',
     'iframe': false,
     'title': `OSIT's Æ - Dev SvelteKit`, // Æ

src/lib/element_data_store.svelte

@@ -9,10 +9,11 @@ import { ae_util } from '$lib/ae_utils';
 import type { key_val } from '$lib/ae_stores';
 
 export let ds_code: string;
-export let ds_name: string;
+export let ds_name: null|string = null;
 export let ds_type: string = 'text';
 export let for_type: null|string;
 export let for_id: null|string;
+console.log(`ae_e_data_store ${ds_code} for_type=${for_type} for_id=${for_id}`);
 
 export let store: string = 'local';
 export let display: string = 'block';

src/routes/+layout.ts

@@ -244,7 +244,7 @@ export async function load({ params, url }) { // params, route, url
 
             data_struct['ae_ds'] = ds_code_li;
 
-            console.log(`root layout.ts finally load...`);
+            console.log(`ae_root +layout.ts loaded inital DS`);
 
             return true;
         });
@@ -294,10 +294,12 @@ export async function load({ params, url }) { // params, route, url
         // }
 
         // data_struct['ae_loc'] = loading_results;
+        console.log(`ae_root +layout.ts load after DS loading?`);
         return data_struct;
     }
 
-    console.log(`ae_root layout.ts load is finally finished`);
+    // Currently we should never make it to this point! 2024-03-06
+    console.log(`ae_root +layout.ts load function end`);
     return data_struct;
 }
 

src/routes/events_badges/+layout.svelte

@@ -2,6 +2,82 @@
 /** @type {import('./$types').LayoutData} */
 export let data;
 import { goto } from '$app/navigation';
+import type { Writable } from 'svelte/store';
+import { localStorageStore } from '@skeletonlabs/skeleton';
+
+import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils';
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
+import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
+
+// import Element_data_store from '$lib/element_data_store.svelte';
+
+
+// let ae_slct_loc: Writable<key_val> = localStorageStore(`ae_slct__event_id`, ds_code_obj);
+// console.log(`ae_ Data Store ${ds_code} = `, $ae_slct_loc);
+
+let ae_promises: key_val = {};
+
+
+if (data.url.searchParams.get('event_id')) {
+    $events_slct.event_id = data.url.searchParams.get('event_id');
+}
+
+if ($events_slct.event_id) {
+    $events_trigger = 'load__event_obj';
+}
+
+
+// Updated 2024-03-06
+$: if ($events_trigger == 'load__event_obj' && $events_slct.event_id) {
+    console.log(`$events_slct.event_id=${$events_slct.event_id}`);
+    $events_trigger = null;
+
+    let load_obj_results = handle_load_ae_obj_id__event({event_id: $events_slct.event_id, try_cache: false})
+    .then(function (load_obj_results) {
+        if (load_obj_results) {
+            console.log(`load_obj_results=`, load_obj_results);
+        } else {
+            console.log('No results returned.');
+        }
+    });
+    $events_slct.event_obj = load_obj_results;
+    console.log(`load_obj_results=`, load_obj_results);
+}
+
+
+// Updated 2024-03-06
+async function handle_load_ae_obj_id__event({event_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__event() *** event_id=${event_id}`);
+
+    let params = {};
+
+	// $events_sess.badges.status_load__event_obj = 'loading';
+    ae_promises.load__event_obj = await api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event',
+        obj_id: event_id, // NOTE: This is the FQDN, not normally the 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_obj_get_result) {
+        if (event_obj_get_result) {
+            return event_obj_get_result;
+        } else {
+            console.log('No results returned.');
+            return null;
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_promises.load__event_obj;
+}
+
 </script>
 
 

src/routes/events_badges/+layout.ts

@@ -1,31 +1,40 @@
 /** @type {import('./$types').LayoutLoad} */
 
-import { get } from 'svelte/store';
+// import { get } from 'svelte/store';
 
-import { api } from '$lib/api';
+// import { api } from '$lib/api';
-import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
-import type { key_val } from '$lib/ae_stores';
+// import { ae_events_loc, ae_events_sess, ae_events_triggers, ae_events_badges_loc, ae_events_badges_sess, ae_events_badges_triggers } from '$lib/ae_events_stores';
+// import { ae_events_loc, ae_events_slct, ae_events_trigger } from '$lib/ae_events_stores';
+// import type { key_val } from '$lib/ae_stores';
 
 
 export async function load({ params, parent, url }) { // route
-    // console.log(`Svelte Events Badges layout.ts data = params:`, params);
+    // console.log(`ae_events_badges +layout.ts data.params:`, params);
-    // console.log(`Svelte Events Badges layout.ts data = route:`, route);
+    // console.log(`ae_events_badges +layout.ts data.route:`, route);
-    // console.log(`Svelte Events Badges layout.ts data = url:`, url);
+    // console.log(`ae_events_badges +layout.ts data.url:`, url);
 
     // const { ae_init, root_layout_ts } = await parent();
     let data = await parent();
-    console.log(`Svelte Events Badges layout.ts data = data:`, data);
+    // console.log(`ae_events_badges +layout.ts data:`, data);
+
+    if (data.ae_loc.account_id) {
+        console.log(`ae_events_badges +layout.ts data = data.ae_loc:`, data.ae_loc);
+    } else {
+        console.log(`ae_events_badges +layout.ts data = data.ae_loc:`, data.ae_loc);
+    }
+
 
     data.ae_events_badges_layout_ts = true;
 
     let submenu = {
         main: {name: 'Main', href: '/events_badges', access: false},
-        manage: {name: 'Manage', href: '/events_badges/manage', access: 'administrator', disable: true},
+        manage: {name: 'Manage', href: '/events_badges/manage', access: 'administrator', disable: true, hide: true},
-        review: {name: 'Review', href: '/events_badges/review', access: false},
+        review: {name: 'Review', href: '/events_badges/review', access: false, disable: false, hide: false},
-        print: {name: 'Print', href: '/events_badges/print', access: 'trusted', disable: true},
+        print: {name: 'Print', href: '/events_badges/print', access: 'trusted', disable: false, hide: false},
         view: {name: 'View', href: '/events_badges/view', access: 'trusted', hide: true}, // event_badge_id
         // new: {name: 'New', href: '/events_badges/new'},
-        test: {name: 'Test', href: '/sponsorships'},
+        // sponsorships: {name: 'Sponsorships', href: '/sponsorships', disable: true, hide: true},
         };
     data.submenu = submenu
 

src/routes/events_badges/+page.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
 export let data;
-// console.log(`ae_ Svelte Events Badges +page data:`, data);
+console.log(`ae_events_badges +page data:`, data);
+console.log(`ae_events_badges Data Params:`, data.url.searchParams.get('event_id'));
 
 import { onMount } from 'svelte';
 
+import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { ae_util } from '$lib/ae_utils';
 
 import Element_data_store from '$lib/element_data_store.svelte';
 
 
+if (data.url.searchParams.get('event_id')) {
+    $events_slct.event_id = data.url.searchParams.get('event_id');
+}
+
+
 onMount(() => {
     console.log('Events Badges: +page.svelte');
 
+    console.log('ae_ slct:', $slct);
+
     let href_url = window.location.href;
     // console.log(href_url);
 
@@ -20,11 +30,11 @@ onMount(() => {
     // console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
 
     // $slct_trigger = 'msg_parent';
-    ae_util.handle_url_and_message('event_id', $slct.event_id);
+    ae_util.handle_url_and_message('event_id', $events_slct.event_id);
-    ae_util.handle_url_and_message('event_badge_id', $slct.event_badge_id);
+    ae_util.handle_url_and_message('badge_id', $events_slct.badge_id);
-    // if ($slct.event_badge_id) {
+    // if ($events_slct.badge_id) {
     //     console.log(`Got an ID. Let's show the modal!`);
-    //     modalStore.trigger(modal_edit__event_badge_obj);
+    //     modalStore.trigger(modal_edit__badge_obj);
     // }
 });
 </script>
@@ -38,17 +48,18 @@ onMount(() => {
     ds_code="events__badges__overview"
     ds_type="html"
     for_type="event"
-    for_id={$slct.event_id}
+    for_id={$events_slct.event_id}
     display="block"
     class_li="variant-ghost-surface p-2"
     />
 
+<a href="/{$events_slct.event_id}">Event ID {$events_slct.event_id}</a>
 
 <Element_data_store
     ds_code="events__badges__example"
     ds_type="html"
     for_type="event"
-    for_id={$slct.event_id}
+    for_id={$events_slct.event_id}
     ds_name="Default: Events Badges Example"
     store="local"
     display="block"

src/routes/events_badges/review/+layout.ts

@@ -0,0 +1,142 @@
+/** @type {import('./$types').LayoutLoad} */
+
+import { get } from 'svelte/store';
+
+import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils';
+// import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
+
+
+export async function load({ params, parent, url }) { // route
+    console.log(`ae_events_badges [slug] +layout.ts data.params:`, params);
+    // console.log(`ae_events_badges [slug] +layout.ts data.route:`, route);
+    // console.log(`ae_events_badges [slug] +layout.ts data.url:`, url);
+
+    let data = await parent();
+    console.log(`Svelte Events Badges [slug] +layout.ts data = data:`, data);
+
+    let ae_loc_tmp = get(ae_loc);
+    console.log(`ae_loc = `, ae_loc_tmp);
+
+    let ds_code_li: null|key_val = ae_loc_tmp.ds;
+    console.log(`ae_ ds_code_li = `, ds_code_li);
+    let ds_code: null|string = null;
+    let ds_type: null|string = null;
+
+
+    let data_struct = {
+        ae_init: ae_loc_tmp,
+        params: params,
+        sections: [
+			{ slug: 'new', title: 'New Event Badge' },
+			{ slug: 'manage', title: 'Manage' },
+            { slug: 'test', title: 'Test' },
+		],
+        url: url,
+
+    };
+
+    let loading_results = null;
+
+    ds_code = 'hub__page__events_badges__create_info';
+    ds_type = 'text';
+    // loading_results = await handle_get_data_store_obj_w_code({ code: ds_code })
+    // .then( function (ds_hub_page_events_create_info_results) {
+    //     if (ds_hub_page_events_create_info_results) {
+    //         console.log(`ae_ hub__page__events_badges__create_info = `, ds_hub_page_events_create_info_results);
+    //         // let ae_loc_tmp = get(ae_loc);
+
+    //         ds_code_li[ds_code] = ds_hub_page_events_create_info_results;
+
+    //         // ae_loc.set(ae_loc_tmp);
+    //         // console.log(`ae_loc = `, get(ae_loc));
+    //     }
+    // })
+    // .finally(function () {
+    //     console.log(`ae_ ds_code_li = `, ds_code_li);
+    //     ae_loc_tmp = {
+    //         ...ae_loc_tmp,
+    //         'ds': ds_code_li,
+    //     }
+    //     console.log(`ae_loc_tmp = `, ae_loc_tmp);
+
+    //     ae_loc.set(ae_loc_tmp);
+    //     console.log(`ae_loc = `, get(ae_loc));
+    // });
+
+    // loading_results = await api.get_data_store_obj_w_code({
+    //     api_cfg: get(ae_api),
+    //     data_store_code: ds_code,
+    //     data_type: ds_type,
+    //     log_lvl: 0
+    //     })
+    // .then( function (ds_results) {
+    //     if (ds_results) {
+    //         console.log(`ae_ Data Store ${ds_code} = `, ds_results);
+    //         // let ae_loc_tmp = get(ae_loc);
+
+    //         ds_code_li[ds_code] = ds_results.text;
+
+    //         // ae_loc.set(ae_loc_tmp);
+    //         // console.log(`ae_loc = `, get(ae_loc));
+    //     }
+    // })
+    // .finally(function () {
+    //     console.log(`ae_ ds_code_li = `, ds_code_li);
+    //     ae_loc_tmp = {
+    //         ...ae_loc_tmp,
+    //         'ds': ds_code_li,
+    //     }
+    //     console.log(`ae_loc_tmp = `, ae_loc_tmp);
+
+    //     ae_loc.set(ae_loc_tmp);
+    //     console.log(`ae_loc = `, get(ae_loc));
+    // });
+
+    return data_struct;
+}
+
+
+
+
+
+// async function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
+//     console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
+
+//     if (!code) {
+//         console.log('No code provided.');
+//         return;
+//     }
+
+//     let data_store_obj_get_promise = api.get_data_store_obj_w_code({
+//         api_cfg: get(ae_api),
+//         data_store_code: code,
+//         data_type: data_type,
+//         log_lvl: 0
+//         })
+//     .then(function (get_data_store_result) {
+//         let return_this = null;
+//         if (get_data_store_result) {
+
+//             if (data_type == 'text') {
+//                 // console.log(get_data_store_result.text);
+//                 return_this = get_data_store_result.text;
+//             } else if (data_type == 'json') {
+//                 // console.log(get_data_store_result.json);
+//                 return_this = get_data_store_result.json;
+//             }
+
+//         } else {
+//             console.log('No results returned.');
+//             return_this = null;
+//         }
+//         return return_this;
+//     })
+//     .catch(function (error) {
+//         console.log('No results returned or failed.', error);
+//     });
+
+//     return data_store_obj_get_promise;
+// }

src/routes/events_badges/review/+page.svelte

@@ -0,0 +1,425 @@
+<script lang="ts">
+export let data;
+console.log(`ae_events_badges [slug] +page data:`, data);
+
+import { onMount } from 'svelte';
+
+
+// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
+// To retrieve the store, getModalStore must be invoked at the top level of your component!
+// import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
+// import type {
+//     DrawerSettings,
+//     ModalSettings,
+//     ModalComponent,
+//     ModalStore
+//     } from '@skeletonlabs/skeleton';
+// const modalStore = getModalStore();
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+
+// import Edit_modal_event_badge from '../10_edit_modal__event_badge_obj.svelte';
+
+let ae_promises: key_val = {};
+let load_obj_li_results: Promise<any>|key_val;
+
+// Editing
+// const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_badge, props: {container_class_li: 'w-full p-4 space-y-4 card'} };
+
+// const modal_edit__event_badge: ModalSettings = {
+// 	type: 'component',
+// 	component: modalComponentEditEventPresenterObj,
+//     title: 'Edit Badge Submission',
+//     position: '', // default is "items-center"
+
+//     response: (r: boolean | undefined) => handle_modal_close(r)
+// };
+
+// This function waits for the response from one of the modals. Do stuff when the modal is closed.
+function handle_modal_close(response: boolean | undefined) {
+    console.log('Modal closed. Response:', response);
+
+    ae_util.handle_url_and_message('event_badge_id', null);
+
+    // We want to keep these values in case they want to re-open the modal. Do NOT clear.
+    // $events_slct.event_badge_id = null;
+    // $events_slct.event_badge_obj = null;
+}
+
+if ($events_trigger == 'msg_parent' && $events_slct.event_id) {
+    console.log(`Message parent with event_id ${$events_slct.event_id}`);
+    $events_trigger = null
+
+    let message = {'event_id': $events_slct.event_id};
+    window.parent.postMessage(message, "*");
+    // console.log('Message sent to parent (iframe):', message);
+}
+
+
+$ae_loc.hostname = data.url.hostname;
+$ae_loc.site_domain = data.url.origin;
+
+// 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 a modal.
+$events_loc.show_edit__event_badge_obj = false;
+$events_loc.show_view__event_badge_obj = false;
+
+let ae_event_badge_get_promise: Promise<any>;
+let ae_event_obj_get_promise;
+
+// Load the AE Obj with ID based on the URL param.
+if (data.url.searchParams.get('event_id')) {
+    console.log(`Got an event_id: ${data.url.searchParams.get('event_id')}`);
+    $events_slct.event_id = data.url.searchParams.get('event_id');
+}
+
+if ($events_slct.event_id) {
+    console.log('Selected Event ID:', $events_slct.event_id);
+    $events_trigger = 'load__event_badge_obj_li';
+    // $events_trigger = 'load__event_obj';
+}
+
+
+onMount(() => {
+    console.log('Events Badges [New/Edit]: +page.svelte');
+
+    // console.log(`$ae_loc = `, $ae_loc);
+
+	let url = window.location.href;
+	// console.log(url);
+
+    $ae_loc.href_url = url;
+    // console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
+
+    // ae_util.handle_url_and_message('event_badge_id', $events_slct.event_badge_id);
+    // if ($events_slct.event_badge_id) {
+    //     console.log(`Got an ID. Let's show the modal!`);
+    //     modalStore.trigger(modal_edit__event_badge);
+    // } else {
+    //     console.log(`No ID. Nothing to show.`);
+    // }
+});
+// console.log(`$ae_loc = `, $ae_loc);
+// $ae_loc.href_url = url;
+// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
+
+
+
+
+
+
+$: if ($events_trigger == 'load__event_obj' && $events_slct.event_id) {
+    console.log('Selected Event ID:', $events_slct.event_id);
+
+    $events_trigger = null;
+
+    handle_load_ae_obj_id__event({event_id: $events_slct.event_id, try_cache: false});
+}
+
+async function handle_load_ae_obj_id__event({event_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__event() *** event_id=${event_id}`);
+
+    let params = {};
+
+	// $events_sess.status_load__event_id = 'loading';
+    ae_event_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event',
+        obj_id: event_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_obj_get_result) {
+        if (event_obj_get_result) {
+            $events_slct.event_obj = event_obj_get_result;
+            console.log(`event object:`, $events_slct.event_obj);
+        }
+
+        // Auto show the selected event_badge ID
+        // Is this pushState needed here?
+        // Set the URL param "event_id" to the current event_badge ID.
+        // const url = new URL(location);
+        // url.searchParams.set('event_id', $events_slct.event_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'event_id': $events_slct.event_id};
+        // window.parent.postMessage(message, "*");
+
+        // modalStore.trigger(modal_view__event_obj);
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_event_obj_get_promise;
+}
+
+
+// Load the Event Presenter Obj with ID based on the URL param.
+// $events_slct.event_badge_id = data.url.searchParams.get('ae_id');
+$events_slct.event_badge_id = data.url.searchParams.get('event_badge_id');
+if ($events_slct.event_badge_id) {
+    console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
+    $events_trigger = 'load__event_badge';
+
+    // $events_loc.show_edit__event_badge_obj = true;
+    // $events_trigger = 'show_edit__event_badge';
+}
+
+
+$: if ($events_trigger == 'load__event_badge' && $events_slct.event_badge_id) {
+    console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
+
+    $events_trigger = null;
+
+    handle_load_ae_obj_id__event_badge({event_badge_id: $events_slct.event_badge_id, try_cache: false});
+
+    // modalStore.trigger(modal_edit__event_badge);
+    // $events_trigger = 'show_edit__event_badge';
+}
+
+async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__event_badge() *** event_badge_id=${event_badge_id}`);
+
+    let params = {};
+
+	// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
+    ae_event_badge_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event_badge',
+        obj_id: event_badge_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_badge_get_result) {
+        if (event_badge_get_result) {
+            $events_slct.event_badge_obj = event_badge_get_result;
+            console.log(`event_badge object:`, $events_slct.event_badge);
+        }
+
+        // Auto show the selected event_badge ID
+        // Is this pushState needed here?
+        // Set the URL param "event_badge_id" to the current event_badge ID.
+        // const url = new URL(location);
+        // url.searchParams.set('event_badge_id', $events_slct.event_badge_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'event_badge_id': $events_slct.event_badge_id};
+        // window.parent.postMessage(message, "*");
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_event_badge_get_promise;
+}
+
+
+// Updated 2024-03-06 late
+$: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
+    console.log(`$events_slct.event_id=${$events_slct.event_id}`);
+    $events_trigger = null;
+
+    load_obj_li_results = handle_load_ae_obj_li__badge({event_id: $events_slct.event_id, try_cache: false})
+    .then(function (load_obj_li_results) {
+        if (load_obj_li_results) {
+            console.log(`load_obj_li_results=`, load_obj_li_results);
+        } else {
+            console.log('No results returned.');
+        }
+        // return load_obj_li_results;
+        console.log(`load_obj_li_results=`, load_obj_li_results);
+        $events_slct.badge_obj_li = load_obj_li_results;
+    });
+}
+
+// Updated 2024-03-06
+async function handle_load_ae_obj_li__badge({event_id, try_cache=true}) {
+    console.log(`*** handle_load_ae_obj_li__badge() *** event_id=${event_id}`);
+
+    let enabled = $events_loc.qry_enabled;
+    let hidden = $events_loc.qry__hidden;
+    let limit = $events_loc.qry__limit;
+    let offset = $events_loc.qry__offset;
+
+    if ($ae_loc.trusted_access) {
+        // enabled = 'all';
+        hidden = 'all';
+        limit = 30;
+    }
+
+    let params = {};
+
+    let params_json: key_val = {};
+
+    // console.log('params_json:', params_json);
+    // console.log(params_json);
+
+    $events_sess.badges.status_qry__search = 'loading';
+    ae_promises.load__event_badge_obj_li = await api.get_ae_obj_li_for_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event_badge',
+        for_obj_type: 'event',
+        for_obj_id: event_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.
+        enabled: enabled,
+        hidden: hidden,
+        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+        // order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
+        limit: limit,
+        offset: offset,
+        params_json: params_json,
+        params: params,
+        log_lvl: 0
+        })
+
+    .then(function (badge_obj_li_get_result) {
+        if (badge_obj_li_get_result) {
+            // $slct.badge_obj_li = badge_obj_li_get_result;
+            return badge_obj_li_get_result;
+        } else {
+            // $slct.badge_obj_li = [];
+            return [];
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+    // .finally(function () {
+    //     $events_sess.badges.status_qry__search = 'done';
+    //     // console.log('Sponsorship list:', $slct.badge_obj_li);
+    // });
+
+    return ae_promises.load__event_badge_obj_li;
+}
+
+</script>
+
+
+<section
+    class="ae_events_badges_review md:container h-full mx-auto"
+    >
+
+{#if $ae_loc.ds.hub__page__events_badges__create_info_header}
+{@html $ae_loc.ds.hub__page__events_badges__create_info_header}
+{:else}
+<header>
+    <h1 class="h2">Badge Review - Search</h1>
+</header>
+{/if}
+
+<!-- <section class="btn btn-group"> -->
+
+<button
+    class="btn variant-ghost-primary w-96"
+    on:click={() => {
+        $events_trigger = 'load__event_badge_obj_li';
+        $events_trigger = $events_trigger;
+
+        // handle_badge_search('event_id', null);
+        // modalStore.trigger(modal_edit__event_badge);
+
+        // $events_trigger = 'load__event_badge';
+
+        // $events_loc.show_edit__event_badge_obj = true;
+
+        // modalStore.trigger(modal_edit__event_badge);
+    }}
+    >
+    <span class="fas fa-search mx-1"></span>
+    Search
+</button>
+
+{#await load_obj_li_results}
+    <div class="modal-loading">
+        <span class="fas fa-spinner fa-spin"></span>
+        <span class="loading-text">
+            Loading...
+        </span>
+    </div>
+{:then load_obj_li_results}
+    {#if load_obj_li_results}
+    <span class="fas fa-check text-green-500"></span>
+    <span class="saved-text">
+        Loaded
+    </span>
+    {/if}
+{/await}
+
+
+{#if $events_slct.badge_obj_li && $events_slct.badge_obj_li.length}
+<h2 class="h3">Results:</h2>
+<table class="table">
+<thead>
+<tr>
+    <th>Badge</th>
+    <!-- The email should only be the first 3 chars and then @domain name. -->
+    <th>Email</th>
+    <th>Affiliations</th>
+</tr>
+</thead>
+<tbody>
+{#each $events_slct.badge_obj_li as badge_obj}
+<tr>
+<td>
+    <button
+        class="btn variant-ghost-secondary w-96"
+        on:click={() => {
+            ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
+            // modalStore.trigger(modal_edit__event_badge);
+
+            // $events_trigger = 'load__event_badge';
+            // $events_trigger = 'show_edit__event_badge';
+            // $events_loc.show_edit__event_badge_obj = true;
+            // modalStore.trigger(modal_edit__event_badge);
+        }}
+        >
+        <span class="fas fa-id-badge mx-1"></span>
+        Badge: {badge_obj.full_name}
+    </button>
+</td>
+<td>
+    <!-- The email should only be the first 3 chars and then @domain name. -->
+    <!-- Example: original: scott.idem@oneskyit.com obscured: sco...@oneskyit.com -->
+    <span class="fas fa-envelope mx-1"></span>
+    {badge_obj.email ? badge_obj.email.replace(/^(.{3}).*@/, '$1...@') : ''}
+</td>
+<td>
+    <span class="fas fa-users mx-1"></span>
+    {badge_obj.affiliations}
+</td>
+</tr>
+{/each}
+</tbody>
+</table>
+
+{:else}
+    <div class="alert alert-info">
+        No badges found.
+    </div>
+{/if}
+
+
+
+{#if $ae_loc.ds.hub__page__events_badges__create_info}
+{@html $ae_loc.ds.hub__page__events_badges__create_info}
+{:else}
+<section>
+        <div class="alert alert-info">
+            More information goes here.
+        </div>
+</section>
+{/if}
+
+
+</section>

src/routes/sponsorships/+layout.ts

@@ -8,13 +8,13 @@ import type { key_val } from '$lib/ae_stores';
 
 
 export async function load({ params, parent, url }) { // route
-    // console.log(`Svelte Sponsorships layout.ts data = params:`, params);
+    // console.log(`Svelte Sponsorships +layout.ts data.params:`, params);
-    // console.log(`Svelte Sponsorships layout.ts data = route:`, route);
+    // console.log(`Svelte Sponsorships +layout.ts data.route:`, route);
-    // console.log(`Svelte Sponsorships layout.ts data = url:`, url);
+    // console.log(`Svelte Sponsorships +layout.ts data.url:`, url);
 
     // const { ae_init, root_layout_ts } = await parent();
     let data = await parent();
-    console.log(`Svelte Sponsorships layout.ts data = data:`, data);
+    // console.log(`ae_events_badges +layout.ts data:`, data);
 
     data.ae_sponsorships_layout_ts = true;
 

src/routes/sponsorships/hold 10_edit_modal__sponsorship_obj.svelte

@@ -1,154 +0,0 @@
-<script lang="ts">
-import type { SvelteComponent } from 'svelte';
-import { createEventDispatcher, onMount } from 'svelte';
-
-// const dispatch = createEventDispatcher();
-
-// import { localStorageStore } from '@skeletonlabs/skeleton';
-// import type { Writable } from 'svelte/store';
-// const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
-let store_current_tab: string = 'start';
-// console.log(`store_current_tab:`, $store_current_tab);
-
-// Stores
-import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
-
-
-import { ae_util } from '$lib/ae_utils';
-import { api } from '$lib/api';
-import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
-
-type key_val = {
-    [key: string]: any;
-};
-
-
-// Props
-/** Exposes parent props to this component. */
-export let parent: SvelteComponent;
-
-// const modalStore = getModalStore();
-
-
-
-
-onMount(() => {
-    console.log('** Component Mounted: ** Edit Modal - Sponsorship Obj');
-});
-
-
-
-// // Form Data
-// const formData = {
-//     name: 'Jane Doe',
-//     tel: '214-555-1234',
-//     email: 'jdoe@email.com'
-// };
-
-// const form_data = $slct.sponsorship_obj;
-
-// We've created a custom submit function to pass the response and close the modal.
-// function onFormSubmit(): void {
-//     if ($modalStore[0].response) $modalStore[0].response(formData);
-//     modalStore.close();
-// }
-
-
-
-
-// let tab_set = $store_current_tab;
-let tab_set = store_current_tab;
-
-$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
-let placeholder_li: key_val = {
-    file_logo_primary: '-- No File Selected --',
-    file_logo_secondary: '-- No File Selected --',
-    file_media_promo_video: '-- No File Selected --',
-};
-let ae_promises_init: key_val = {};
-let ae_promises: key_val = {};
-// let ae_promises.api_create__sponsorship_obj: Promise<any>;
-
-if ($slct.sponsorship_id && $slct.sponsorship_obj) {
-    console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
-    console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
-
-    // $slct_trigger = 'load__sponsorship_obj';
-} else {
-    $slct.sponsorship_id = null;
-    $slct.sponsorship_obj = {
-        sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.sponsorship_cfg_id,
-
-        name: null,
-        description: null,
-
-        poc_person_id: null,
-
-        logo_li_json: null,
-        media_li_json: null,
-
-        social_li_json: null,
-
-        guest_li_json: null,
-
-        level_num: null,
-        level_str: null,
-        amount: null,
-        paid: null,
-        enable: null,
-    };
-}
-
-
-
-
-// Base Classes
-const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
-// const cBase = 'bg-surface-100-800-token w-screen h-screen';
-// const cBase = 'card h-screen';
-// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
-
-const cHeader = 'text-2xl font-bold';
-const cForm = 'border border-surface-200 p-4 space-y-4 rounded-container-token';
-</script>
-
-<!-- @component This is the Sponsorships modal edit form. -->
-
-<!-- {#if $modalStore[0]} -->
-<section class="modal-example-form {cBase}">
-    <!-- <header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header> -->
-    <header class={cHeader}>Start/Edit Sponsorship</header>
-
-    here....
-
-    <!-- </form> -->
-    <!-- prettier-ignore -->
-    <footer class="modal-footer {parent.regionFooter}">
-        {#if $slct.sponsorship_id}
-        <!-- {#if $ae_loc.administrator_access} -->
-        <button
-            on:click={() => {
-                // if (!confirm('Are you sure you want to delete this sponsorship?')) {return false;}
-                // handle_delete_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, method: 'delete'});
-
-                // $slct.sponsorship_id = null;
-                // $slct.sponsorship_obj = {};
-            }}
-            class="btn {parent.buttonNegative}"
-            title="Delete record permanently"
-            >
-            <span class="fas fa-minus mx-1"></span> Delete
-        </button>
-        <!-- {/if} -->
-        {/if}
-        <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>
-            <span class="fas fa-window-close mx-1"></span>
-            {parent.buttonTextCancel}
-        </button>
-    </footer>
-</section>
-<!-- {/if} -->
-
-
-<style>
-</style>