From 7051cb92d5f8385fcc63341044c28c46ea5b25c5 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Sun, 3 Mar 2024 12:51:14 -0500
Subject: [PATCH] Event presenter now has a slug directory

---
 .../10_edit_modal__event_presenter_obj.svelte |   4 +-
 src/routes/events_speakers/[slug]/+layout.ts  | 137 ++++++++
 .../events_speakers/[slug]/+page.svelte       | 332 ++++++++++++++++++
 3 files changed, 471 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/events_speakers/[slug]/+layout.ts
 create mode 100644 src/routes/events_speakers/[slug]/+page.svelte

diff --git a/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte b/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
index 71075de4..ea2193d8 100644
--- a/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
+++ b/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
@@ -41,8 +41,8 @@ onMount(() => {
     console.log('** Component Mounted: ** View Modal - Presenter Obj');
 
     if ($slct.event_presenter_id && $ae_loc.href_url) {
-        // $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
-        $ae_loc.mod.events.presenter_link = `${$ae_loc.site_domain}/events_speakers/load?ae_id=${$slct.event_presenter_id}`;
+        // $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?event_presenter_id=${$slct.event_presenter_id}`;
+        $ae_loc.mod.events.presenter_link = `${$ae_loc.site_domain}/events_speakers/load?event_presenter_id=${$slct.event_presenter_id}`;
         console.log('Speaker link:', $ae_loc.mod.events.presenter_link);
     }
 });
diff --git a/src/routes/events_speakers/[slug]/+layout.ts b/src/routes/events_speakers/[slug]/+layout.ts
new file mode 100644
index 00000000..f87b007c
--- /dev/null
+++ b/src/routes/events_speakers/[slug]/+layout.ts
@@ -0,0 +1,137 @@
+/** @type {import('./$types').LayoutLoad} */
+
+import { get } from 'svelte/store';
+
+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';
+
+
+export async function load({ params, url }) { // route
+    // console.log(`Svelte Events Speakers layout.ts data = params:`, params);
+    // console.log(`Svelte Events Speakers layout.ts data = route:`, route);
+    // console.log(`Svelte Events Speakers layout.ts data = url:`, url);
+
+    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 Presenter' },
+			{ slug: 'manage', title: 'Manage' },
+            { slug: 'test', title: 'Test' },
+		],
+        url: url,
+
+    };
+
+    let loading_results = null;
+
+    ds_code = 'hub__page__events__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__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;
+// }
diff --git a/src/routes/events_speakers/[slug]/+page.svelte b/src/routes/events_speakers/[slug]/+page.svelte
new file mode 100644
index 00000000..3a078c39
--- /dev/null
+++ b/src/routes/events_speakers/[slug]/+page.svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+export let data;
+console.log(`ae_ Svelte Events Speakers [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 { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import type { key_val } from '$lib/ae_stores';
+
+import Edit_modal_event_presenter from '../10_edit_modal__event_presenter_obj.svelte';
+
+
+// Editing
+const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_presenter, props: {container_class_li: 'w-full p-4 space-y-4 card ae_modal_scrollfix'} };
+
+const modal_edit__event_presenter: ModalSettings = {
+	type: 'component',
+	component: modalComponentEditEventPresenterObj,
+    title: 'Edit Speaker 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_presenter_id', null);
+
+    // We want to keep these values in case they want to re-open the modal. Do NOT clear.
+    // $slct.event_presenter_id = null;
+    // $slct.event_presenter_obj = null;
+}
+
+if ($slct_trigger == 'msg_parent' && $slct.event_id) {
+    console.log(`Message parent with event_id ${$slct.event_id}`);
+    $slct_trigger = null
+
+    let message = {'event_id': $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.
+$ae_loc.mod.events.show_edit__event_presenter_obj = false;
+$ae_loc.mod.events.show_view__event_presenter_obj = false;
+
+let ae_event_presenter_get_promise: Promise<any>;
+
+
+onMount(() => {
+    console.log('Events Presenters [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_presenter_id', $slct.event_presenter_id);
+    if ($slct.event_presenter_id) {
+        console.log(`Got an ID. Let's show the modal!`);
+        modalStore.trigger(modal_edit__event_presenter);
+    } 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);
+
+
+// Load the Event Obj with ID based on the URL param.
+$slct.event_id = data.url.searchParams.get('event_id');
+$slct_trigger = 'load__event_obj';
+
+
+$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
+    console.log('Selected Event ID:', $slct.event_id);
+
+    $slct_trigger = null;
+
+    handle_load_ae_obj_id__event({event_id: $slct.event_id, try_cache: false});
+}
+
+let ae_event_obj_get_promise;
+
+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 = {};
+
+	// $ae_loc.hub.event_id_qry_status = '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) {
+            $slct.event_obj = event_obj_get_result;
+            console.log(`sponsorship object:`, $slct.event_obj);
+        }
+
+        // Auto show the selected sponsorship ID
+        // Is this pushState needed here?
+        // Set the URL param "event_id" to the current sponsorship ID.
+        // const url = new URL(location);
+        // url.searchParams.set('event_id', $slct.event_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'event_id': $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.
+// $slct.event_presenter_id = data.url.searchParams.get('ae_id');
+$slct.event_presenter_id = data.url.searchParams.get('event_presenter_id');
+if ($slct.event_presenter_id) {
+    console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
+    $slct_trigger = 'load__event_presenter';
+
+    // $ae_loc.mod.events.show_edit__event_presenter_obj = true;
+    // $slct_trigger = 'show_edit__event_presenter';
+}
+
+
+$: if ($slct_trigger == 'load__event_presenter' && $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});
+
+    // modalStore.trigger(modal_edit__event_presenter);
+    // $slct_trigger = 'show_edit__event_presenter';
+}
+
+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_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_get_result) {
+        if (event_presenter_get_result) {
+            $slct.event_presenter_obj = event_presenter_get_result;
+            console.log(`sponsorship object:`, $slct.event_presenter);
+        }
+
+        // Auto show the selected sponsorship ID
+        // Is this pushState needed here?
+        // Set the URL param "event_presenter_id" to the current sponsorship ID.
+        // const url = new URL(location);
+        // url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'event_presenter_id': $slct.event_presenter_id};
+        // window.parent.postMessage(message, "*");
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_event_presenter_get_promise;
+}
+
+let testing = false;
+
+// $: if ($slct_trigger == 'show_edit__event_presenter' && $ae_loc.mod.events.show_edit__event_presenter) {
+$: if (testing) {
+//  && $ae_loc.mod.events.show_edit__event_presenter
+// $: if ($slct_trigger == 'show_edit__event_presenter') {
+    console.log('Show Modal Edit');
+    $slct_trigger = null;
+    testing = false;
+    // $ae_trig.m_events__show_modal_edit = false;
+
+    // if ($slct.event_presenter_id) {
+    //     let location = window.location.href;
+    //     const url = new URL(location);
+    //     url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
+    //     history.pushState({}, '', url);
+
+    //     let message = {'event_presenter_id': $slct.event_presenter_id};
+    //     window.parent.postMessage(message, "*");
+    //     // console.log('Message sent to parent (iframe):', message);
+    // }
+
+    // modalStore.clear();
+    modalStore.trigger(modal_edit__event_presenter);
+}
+
+
+// KEEP and MOVE: This is the original function.
+// The name should be something like "example_id".
+function handle_url_and_message(name: string, value: null|string) {
+    console.log(`*** handle_url_and_message() *** name=${name} value=${value}`);
+
+    if (value) {
+        let location = window.location.href;
+        const url = new URL(location);
+        url.searchParams.set(name, value);
+        history.pushState({}, '', url);
+
+        let message = {name: value};
+        window.parent.postMessage(message, "*");
+    } else {
+        let location = window.location.href;
+        const url = new URL(location);
+        url.searchParams.delete(name);
+        history.pushState({}, '', url);
+
+        let message = {name: null};
+        window.parent.postMessage(message, "*");
+    }
+    // console.log('Message sent to parent (iframe):', message);
+}
+</script>
+
+
+<section
+    class="container h-full mx-auto flex flex-col items-center space-y-4"
+    >
+
+{#if $ae_loc.ds.hub__page__events__create_info_header}
+{@html $ae_loc.ds.hub__page__events__create_info_header}
+{:else}
+<header>
+    <h1 class="h1">Information Goes Here</h1>
+</header>
+{/if}
+
+<!-- <section class="btn btn-group"> -->
+
+
+{#if $slct.event_presenter_id}
+<button
+    class="btn variant-ghost-primary w-96"
+    on:click={() => {
+        ae_util.handle_url_and_message('event_presenter_id', $slct.event_presenter_id);
+        modalStore.trigger(modal_edit__event_presenter);
+
+
+        // $ae_loc.mod.events.show_edit__event_presenter_obj = true;
+        // $slct_trigger = 'load__event_presenter';
+        // $slct_trigger = 'show_edit__event_presenter';
+        // modalStore.trigger(modal_edit__event_presenter);
+        // $ae_trig.m_events__show_modal_edit = true;
+    }}
+    >
+    <span class="fas fa-edit mx-1"></span>
+    Edit Sponsorship {$slct.event_presenter_id}
+</button>
+{:else}
+<button
+    class="btn variant-ghost-primary w-96"
+    on:click={() => {
+        ae_util.handle_url_and_message('event_presenter_id', null);
+        modalStore.trigger(modal_edit__event_presenter);
+
+        // $slct_trigger = 'load__event_presenter';
+
+        $slct_trigger = 'show_edit__event_presenter';
+        $ae_loc.mod.events.show_edit__event_presenter_obj = true;
+
+        // modalStore.trigger(modal_edit__event_presenter);
+    }}
+    >
+    <span class="fas fa-edit mx-1"></span>
+    Start Sponsor Submission Form
+</button>
+{/if}
+<!-- </section> -->
+
+{#if $ae_loc.ds.hub__page__events__create_info}
+{@html $ae_loc.ds.hub__page__events__create_info}
+{:else}
+<section>
+        <div class="alert alert-info">
+            More information goes here.
+        </div>
+</section>
+{/if}
+
+
+</section>