Work in progress of moving the session list out to a separate component.

src/routes/events_pres_mgmt/ae_comp__event_presenter_obj_li.svelte

@@ -3,10 +3,10 @@
 import { createEventDispatcher, onMount } from 'svelte';
 
 import type { key_val } from '$lib/ae_stores';
-import { ae_util } from '$lib/ae_utils';
+// import { ae_util } from '$lib/ae_utils';
-import { api, send_email } from '$lib/api';
+// import { api, send_email } from '$lib/api';
-import Element_ae_crud from '$lib/element_ae_crud.svelte';
+// import Element_ae_crud from '$lib/element_ae_crud.svelte';
-import Element_data_store from '$lib/element_data_store.svelte';
+// import Element_data_store from '$lib/element_data_store.svelte';
 
 import { liveQuery } from "dexie";
 import { core_func } from '$lib/ae_core_functions';
@@ -34,11 +34,11 @@ if ($ae_loc.administrator_access) {
     allow_moderator = true;
 }
 
-let ae_promises: key_val = {};
+// let ae_promises: key_val = {};
 let ae_tmp: key_val = {};
-let ae_triggers: key_val = {};
+// let ae_triggers: key_val = {};
 
-let dq__where_type_val: string = link_to_type; // "event", "event_session", "event_presentation"
+// let dq__where_type_val: string = link_to_type; // "event", "event_session", "event_presentation"
 let dq__where_type_id_val: string = `${link_to_type}_id_random`;
 let dq__where_eq_id_val: string = link_to_id;
 
@@ -330,3 +330,7 @@ onMount(() => {
 
 </section>
 
+
+<style>
+
+</style>

src/routes/events_pres_mgmt/event/[slug]/+page.svelte

@@ -13,8 +13,9 @@ import { ae_util } from '$lib/ae_utils';
 import { api } from '$lib/api';
 import Element_ae_crud from '$lib/element_ae_crud.svelte';
 import Element_data_store from '$lib/element_data_store.svelte';
-import Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
+// import Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
-import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
+import Comp_event_session_obj_li from './ae_comp__event_session_obj_li.svelte';
+// import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
 
 import { liveQuery } from "dexie";
 import { core_func } from '$lib/ae_core_functions';
@@ -527,7 +528,15 @@ async function handle_search__event_session(
     {/if}
 {/await}
 
-{#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq_kv__event_session_obj_li?.length}
+{#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length}
+<Comp_event_session_obj_li
+    link_to_type={'event'}
+    link_to_id={$events_slct.event_id}
+    event_session_id_random_li={event_session_id_random_li}
+    />
+{/if}
+
+{#if 1==3 && $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq_kv__event_session_obj_li?.length}
 <!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} -->
 <section class="ae_h_scrollfix py-2 space-y-2">
     <h2 class="h3">
@@ -579,7 +588,7 @@ async function handle_search__event_session(
             {/if}
         </a>
 
-        {#if $ae_loc.administrator_access}
+        <!-- {#if $ae_loc.administrator_access}
         <Comp_event_presenter_obj_li
             link_to_type={'event_session'}
             link_to_id={session_obj.event_session_id_random}
@@ -598,7 +607,7 @@ async function handle_search__event_session(
             container_class_li={''}
             display_mode={'minimal'}
             />
-        {/if}
+        {/if} -->
 
     </td>
     <td>

src/routes/events_pres_mgmt/event/[slug]/ae_comp__event_session_obj_li.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+// Imports
+// import { createEventDispatcher, onMount } from 'svelte';
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+// import { api, send_email } from '$lib/api';
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+// import Element_data_store from '$lib/element_data_store.svelte';
+import Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
+import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
+
+import { liveQuery } from "dexie";
+import { core_func } from '$lib/ae_core_functions';
+import { db_events } from "$lib/db_events";
+import { ae_html, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+// Exports
+export let container_class_li: string|Array<string> = [];
+export let link_to_type: string;
+export let link_to_id: string;
+export let event_session_id_random_li: Array<string> = ['VSBH-19-41-50'];
+// export let allow_basic: boolean = false;
+// export let allow_moderator: boolean = false;
+
+// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+
+// let ae_promises: key_val = {};
+let ae_tmp: key_val = {};
+let ae_triggers: key_val = {};
+
+// let dq__where_type_val: string = link_to_type; // "event", "event_location", "event_track"
+let dq__where_type_id_val: string = `${link_to_type}_id_random`;
+let dq__where_eq_id_val: string = link_to_id;
+
+
+// Functions and Logic
+import { browser } from '$app/environment';
+if (browser) {
+    console.log('Browser environment detected.');
+}
+
+// let lq__event_obj = liveQuery(
+//     () => db_events.events.get($events_slct.event_id)
+// );
+
+// let lq__event_session_obj_li = liveQuery(
+//     () => db_events.sessions
+//         .where(dq__where_type_id_val)
+//         .equals(dq__where_eq_id_val)
+//         .sortBy('name')
+// );
+
+
+let lq_kv__event_session_obj_li = liveQuery(
+    () => db_events.sessions
+    .bulkGet(event_session_id_random_li)
+    .then(results => {
+        // console.log(`LQ Results:`, results);
+        // If the results are an array
+        if (results.length == 1) {
+            // If the first item is undefined we need to do something.
+            if (results[0] == undefined) {
+                console.log('Something went wrong! No sessions found?');
+                // return [];
+                // return [{ id: '' }];
+                // return 'NOTHING???';
+            }
+            return results;
+        }else if (results.length > 1) {
+            return results;
+        } else {
+            return ['No sessions found.'];
+        }
+        // return results;
+    })
+    .catch(error => {
+        console.error(`LQ Error: ${error}`);
+        return ['No sessions found.'];
+    })
+    .finally(() => {
+        console.log(`LQ Finally:`, $lq_kv__event_session_obj_li);
+    })
+);
+
+
+</script>
+
+
+<section class="ae_comp event_session_obj_li {container_class_li} max-w-100 outline overflow-x-scroll">
+
+
+{#if event_session_id_random_li && $events_slct.event_session_obj_li?.length == $lq_kv__event_session_obj_li?.length}
+<!-- {#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq__event_session_obj_li?.length} -->
+<!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} -->
+<!-- <section class="ae_h_scrollfix py-2 space-y-2"> -->
+<section class="py-2 space-y-2">
+    <h2 class="h3">
+        <span class="text-md">
+        Results:
+        </span>
+
+        {#if $events_slct.event_session_obj_li.length}
+        <span class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-200"
+                title="Count {$events_slct.event_session_obj_li.length ?? 'None'}"
+                >
+            <span class="fas fa-list-ol mx-4"></span>
+            {$events_slct.event_session_obj_li.length ?? 'None'}
+        </span>
+        {/if}
+    </h2>
+<table class="table">
+<thead>
+    <tr>
+        <th>Session</th>
+        <th>Date</th>
+        <th>Start/End</th>
+        <th>Location</th>
+        <th>POC</th>
+    </tr>
+</thead>
+<tbody>
+<!-- {#each $events_slct?.event_session_obj_li as session_obj} -->
+{#each $lq_kv__event_session_obj_li as session_obj}
+<tr>
+    <td>
+        <a
+            href="/events_pres_mgmt/session/{session_obj.event_session_id_random}"
+            class="btn btn-md variant-ghost-secondary hover:variant-filled-secondary min-w-full max-w-md"
+            title="{session_obj.name} - {session_obj.event_session_id_random}"
+            >
+            <span class="fas fa-eye mx-1"></span>
+            <!-- overflow-x-scroll -->
+            <span class="grow overflow-hidden">
+            <strong>{session_obj.name}</strong>
+            </span>
+            {#if session_obj.file_count_all}
+                <span class="badge variant-glass-success hover:variant-filled-success" title="{session_obj.file_count}x files under session">
+                    <span class="fas fa-file-alt mx-1"></span>
+                    {session_obj.file_count_all}x
+                </span>
+            {:else}
+                <!-- Nothing -->
+            {/if}
+        </a>
+
+        <!-- {#if $ae_loc.administrator_access}
+        <Comp_event_presenter_obj_li
+            link_to_type={'event_session'}
+            link_to_id={session_obj.event_session_id_random}
+            display_mode={'minimal'}
+            >
+        </Comp_event_presenter_obj_li>
+        {/if} -->
+
+
+        <!-- {#if $ae_loc.administrator_access}
+        <Element_manage_event_file_li
+            link_to_type={'event_session'}
+            link_to_id={session_obj.event_session_id_random}
+            allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] || $events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
+            allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
+            container_class_li={''}
+            display_mode={'minimal'}
+            />
+        {/if} -->
+
+    </td>
+    <td>
+        <span style="break-inside: avoid;">
+            {ae_util.iso_datetime_formatter(session_obj.start_datetime,'dddd')}
+            {ae_util.iso_datetime_formatter(session_obj.start_datetime,'date_long_month_day')}
+        </span>
+    <td>
+        {#if session_obj.start_datetime}
+        <span style="break-inside: avoid;">
+            {ae_util.iso_datetime_formatter(session_obj.start_datetime,'time_short')}
+        </span>
+        &ndash;<wbr>
+        <span style="break-inside: avoid;">
+            {ae_util.iso_datetime_formatter(session_obj.end_datetime,'time_short')}
+        </span>
+        {:else}
+        {@html ae_html.not_set}
+        {/if}
+    </td>
+    <td>{session_obj.event_location_name ?? '-- not set --'}</td>
+    <td>
+        {#if session_obj.poc_person_full_name}
+            <span style="break-inside: avoid;">
+                <span class="fas fa-user mx-1"></span>
+                {session_obj.poc_person_full_name}
+            </span>
+            <!-- <br> -->
+            {#if $ae_loc.trusted_access}
+            <span style="break-inside: avoid;">
+                <a href="mailto:{session_obj.poc_person_primary_email}" class="hover:underline">
+                    <span class="fas fa-envelope mx-1"></span>
+                    {session_obj.poc_person_primary_email}
+                </a>
+            </span>
+            {/if}
+        {:else}
+        {@html ae_html.not_set}
+        {/if}
+
+        {#if $ae_loc.trusted_access}
+
+        {#if session_obj.event_session_id_random == $events_slct.event_session_id && ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
+        <Element_ae_crud
+            trigger_patch={ae_triggers.update_person_poc}
+            api_cfg={$ae_api}
+            object_type={'event_session'}
+            object_id={$events_slct?.event_session_id}
+            field_name={'poc_person_id_random'}
+            field_type={'button'}
+            field_value={ae_tmp[$events_slct.event_session_id].poc_person_id}
+            allow_null={false}
+            hide_edit_btn={true}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            class_li={'m-1'}
+            on:ae_crud_updated={e => {
+                console.log(`ae_crud_updated:`, e.detail);
+
+                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $events_slct?.event_session_id, log_lvl: 1})
+                .then(function (load_results) {
+                    ae_tmp[$events_slct.event_session_id].poc_person_id = null;
+                    ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
+
+                    $events_slct.event_session_id = null;
+                    $events_slct.event_obj = null;
+
+                    // Careful with the trigger_patch. It will keep firing if not reset.
+                    ae_triggers.update_person_poc = false;
+
+                    // Maybe reload page?
+                    // window.location.reload();
+                });
+            }}
+            >
+            {#await $slct.person_obj_li}
+                <span class="fas fa-spinner fa-spin mx-1"></span>
+            {:then person_obj_li}
+            {#if  person_obj_li && person_obj_li.length > 0}
+                <label class="text-sm">PoC:
+                <select
+                    bind:value={ae_tmp[$events_slct.event_session_id].poc_person_id}
+                    class="select min-w-fit max-w-md text-sm"
+                    >
+                <option value="">-- Select a person --</option>
+                {#each person_obj_li as person_obj}
+                    <option
+                        value={person_obj.person_id_random}
+                        selected={person_obj.person_id_random == $events_slct?.event_session_obj?.poc_person_id_random}
+                        >
+                        {person_obj.full_name}
+                        ({person_obj.primary_email})
+                        <!-- (ID: {person_obj.person_id_random}) -->
+                    </option>
+                {/each}
+                </select>
+                </label>
+
+                <button
+                    type="button"
+                    disabled={ae_tmp[$events_slct.event_session_id].poc_person_id == $events_slct?.event_session_obj?.poc_person_id_random}
+                    on:click={() => {
+                        console.log('Save the POC person for the session.');
+
+                        let person_id = ae_tmp[$events_slct.event_session_id].poc_person_id;
+                        console.log('Selected person ID:', person_id);
+
+                        ae_triggers.update_person_poc = true;
+                    }}
+                    class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+                    >
+                    <span class="fas fa-save mx-1"></span>
+                    Save
+                </button>
+            {/if}
+            {/await}
+        </Element_ae_crud>
+        {/if}
+
+        {#if ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
+        <button
+            type="button"
+            on:click={() => {
+                console.log('Cancel the POC person for the session.');
+
+                ae_tmp[$events_slct.event_session_id].poc_person_id = null;
+                ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
+
+                $events_slct.event_session_id = null;
+                $events_slct.event_obj = null;
+            }}
+            class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+            >
+            <span class="fas fa-times mx-1"></span>
+            Cancel
+        </button>
+        {:else}
+        <button
+            type="button"
+            on:click={() => {
+                console.log('Edit the POC person for the session.');
+
+                let params = {
+                    qry__limit: 300,
+                }
+
+                $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
+
+                $events_slct.event_session_id = session_obj?.event_session_id_random;
+
+                ae_tmp[$events_slct.event_session_id] = {
+                    poc_person_id: session_obj?.poc_person_id_random,
+                    show__edit_poc_person: true,
+                };
+                // }
+                // ae_tmp[$events_slct.event_session_id].poc_person_id = $events_slct?.event_session_obj?.poc_person_id_random;
+                // ae_tmp[$events_slct.event_session_id].show__edit_poc_person = true;
+            }}
+            class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+            >
+            <span class="fas fa-edit mx-1"></span>
+            Edit
+        </button>
+        {/if}
+
+        {/if} <!-- $ae_loc.trusted_access -->
+    </td>
+</tr>
+{/each}
+</tbody>
+</table>
+</section>
+{:else}
+    <p class="text-center text-2xl bg-gray-100 p-4 rounded-md">
+        No results to show. Please use the search above to find your session.
+    </p>
+    <div class="text-sm text-gray-500 text-center">
+    Query results length: {$events_slct.event_session_obj_li?.length};
+    <!-- ID list length: {event_session_id_random_li?.length}; -->
+    <!-- LQ results length: {$lq__event_session_obj_li?.length} -->
+    LQ KV results length: {$lq_kv__event_session_obj_li?.length}
+    </div>
+{/if}
+
+<!-- This is to help correct a bug(?) with Dexie and LiveQuery and Svelte. The LiveQuery value may not be updated if no results are found. This a problem on the very first run. -->
+<!-- This needs to be in here so it works correctly with the liveQuery. -->
+<!-- {#if $events_slct.event_session_obj_li?.length == $lq__event_session_obj_li?.length} -->
+<!-- {#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq__event_session_obj_li?.length} -->
+    <!-- <div
+        class="text-sm text-gray-500 text-center"
+        class:hidden={!$ae_loc.administrator_access}
+        > -->
+        <!-- Count: -->
+        <!-- {event_session_id_random_li.length} -->
+        <!-- {$lq__event_session_obj_li?.map(event_session_obj => event_session_obj?.event_session_id_random)} -->
+         <!-- {#if $lq__event_session_obj_li?.length > 0}
+            <div class="flex flex-row flex-wrap justify-center items-center space-x-2 space-y-2">
+            {#each $lq__event_session_obj_li as event_session_obj}
+                <span>
+                {event_session_obj?.event_session_id_random}
+                </span>
+            {/each}
+            </div>
+        {:else}
+            <div class="text-center">
+                <span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
+                <span class="text-lg">No results found.</span>
+            </div>
+        {/if} -->
+    <!-- </div>
+{:else} -->
+    <!-- No match -->
+<!-- {/if} -->
+
+</section>