Finally got the horizontal scroll working correctly with the table.

2024-07-02 18:17:38 -04:00
parent d8e062b8c7
commit 889500e80d
4 changed files with 166 additions and 395 deletions
--- a/src/lib/ae_events__event.ts
+++ b/src/lib/ae_events__event.ts
@@ -3,10 +3,10 @@ import { api } from '$lib/api';

 import { db_events } from "$lib/db_events";

-let ae_promises: key_val = {}; // Promise<any>;
+let ae_promises: key_val = {};


-// Updated 2024-06-24
+// Updated 2024-07-02
 export async function handle_load_ae_obj_id__event(
        {
            api_cfg,
@@ -36,6 +36,7 @@ export async function handle_load_ae_obj_id__event(
        })
    .then(function (event_obj_get_result) {
        if (event_obj_get_result) {
+            handle_db_save_ae_obj_li__event({obj_type: 'event', obj_li: [event_obj_get_result]});
            return event_obj_get_result;
        } else {
            console.log('No results returned.');
@@ -113,7 +114,6 @@ export async function handle_load_ae_obj_li__event(
 }


-
 // This function will loop through the event_obj_li and save each one to the DB.
 export function handle_db_save_ae_obj_li__event(
        {
--- a/src/routes/events_pres_mgmt/+layout.svelte
+++ b/src/routes/events_pres_mgmt/+layout.svelte
@@ -168,4 +168,6 @@ $: if ($events_trigger == 'load__event_session_obj_id' && $events_trig_kv['event

 {/if}

+<!-- <div class="container m-auto"> -->
 <slot></slot>
+<!-- </div> -->
--- a/src/routes/events_pres_mgmt/event/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/event/[slug]/+page.svelte
@@ -13,9 +13,7 @@ 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_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';
@@ -41,7 +39,7 @@ $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;

 // let param_slug_event_id = data.params.slug;

-let event_obj = liveQuery(
+let lq__event_obj = liveQuery(
    () => db_events.events.get($events_slct.event_id)
 );

@@ -69,36 +67,36 @@ let event_session_id_random_li: string[] = ['VSBH-19-41-50'];
 //     .sortBy('start_datetime')
 // );

-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);
-    })
-);
+// 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);
+//     })
+// );


 let load_obj_li_results: Promise<any>|key_val;
@@ -315,7 +313,7 @@ async function handle_search__event_session(

                if (log_lvl > 1) {
                    console.log(`TEST SEARCH - event_session_id_random_li:`, event_session_id_random_li);
-                    console.log(`TEST SEARCH - search live query: ${$lq_kv__event_session_obj_li}`);
+                    // console.log(`TEST SEARCH - search live query: ${$lq_kv__event_session_obj_li}`);
                }

            });
@@ -384,53 +382,39 @@ async function handle_search__event_session(


 <section
-    class="ae_events_pres_mgmt_event md:container h-full mx-auto flex flex-col items-center space-y-2 pt-0 pb-8"
+    class="
+        ae_events_pres_mgmt_event
+        h-full mx-auto
+        flex flex-col
+        items-center
+        space-y-2 pt-0 pb-8
+        min-w-fit
+        w-3/4
+        max-w-max
+        "
    >
+    <!-- lg:bg-green-100
+    xl:bg-green-200 -->


+{#if $lq__event_obj}
+<header>
+<h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
+<h3 class="h4 text-center">Presentation Management Hub</h3>
+</header>
+{/if}
+
 <div
-    class="pres_mgmt__session_search_help flex flex-col items-center space-y-2 border border-blue-200 rounded-md p-2 hover:bg-blue-100"
+    class="pres_mgmt__session_search_help flex flex-col items-center space-y-1 border border-blue-200 rounded-md py-1 px-2 hover:bg-blue-100"
    class:border-none={!$events_loc.pres_mgmt.show_content__session_search_help}
    >
-<div>
-<button
-    type="button"
-    on:click={() => {
-        $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help;
-    }}
-    class="btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800"
-    title="Help and information about the session search"
-    >
-    <span class="fas fa-question-circle mx-1"></span>
-    {#if $events_loc.pres_mgmt.show_content__session_search_help}
-        Hide
-    {:else}
-        Show
-    {/if}
-    Help?
-</button>
-</div>
-
-<Element_data_store
-    ds_code="events__pres_mgmt__session_search_help"
-    ds_name="Default: Events - Pres Mgmt Session Search Help"
-    ds_type="html"
-    for_type="event"
-    for_id={$events_slct.event_id}
-    class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
-    show_edit={false}
-    show_edit_btn={true}
-    hide={!$events_loc.pres_mgmt.show_content__session_search_help}
-    />
-
-<div>
+    <div>
    <button
        type="button"
        on:click={() => {
            $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help;
        }}
-        class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
-        class:hidden={!$events_loc.pres_mgmt.show_content__session_search_help}
+        class="btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800"
        title="Help and information about the session search"
        >
        <span class="fas fa-question-circle mx-1"></span>
@@ -441,14 +425,40 @@ async function handle_search__event_session(
        {/if}
        Help?
    </button>
-</div>
-</div>
+    </div>

+    <Element_data_store
+        ds_code="events__pres_mgmt__session_search_help"
+        ds_name="Default: Events - Pres Mgmt Session Search Help"
+        ds_type="html"
+        for_type="event"
+        for_id={$events_slct.event_id}
+        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
+        show_edit={false}
+        show_edit_btn={true}
+        hide={!$events_loc.pres_mgmt.show_content__session_search_help}
+        />

-{#if $events_slct.event_id && $event_obj}
-<h2 class="h3 text-center">{$event_obj.name}</h2>
-<h3 class="h4 text-center">Presentation Management Hub</h3>
-{/if}
+    <div>
+        <button
+            type="button"
+            on:click={() => {
+                $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help;
+            }}
+            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
+            class:hidden={!$events_loc.pres_mgmt.show_content__session_search_help}
+            title="Help and information about the session search"
+            >
+            <span class="fas fa-question-circle mx-1"></span>
+            {#if $events_loc.pres_mgmt.show_content__session_search_help}
+                Hide
+            {:else}
+                Show
+            {/if}
+            Help?
+        </button>
+    </div>
+</div>

 <div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center">

@@ -509,9 +519,6 @@ async function handle_search__event_session(
 </div>


-
-
-
 {#await load_obj_li_results}
    <span class="modal-loading">
        <span class="fas fa-spinner fa-spin"></span>
@@ -529,291 +536,33 @@ async function handle_search__event_session(
 {/await}

 {#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length}
+<!-- <div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl overflow-x-scroll outline"> -->
+<div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-white">
 <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">
-        <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>
+</div>
 {:else}
-    <p class="text-center text-2xl bg-gray-100 p-4 rounded-md">
+<section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2">
+    <p>
+        <span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
        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_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 == event_session_id_random_li?.length && event_session_id_random_li.length == $lq_kv__event_session_obj_li?.length}
-    <div
-        class="text-sm text-gray-500 text-center"
-        class:hidden={!$ae_loc.administrator_access}
+    <div>
+    <strong>Search by:</strong>
+    <ul
+        class="list-disc list-inside text-lg text-left"
        >
-        <!-- Count: -->
-        <!-- {event_session_id_random_li.length} -->
-        <!-- {$lq_kv__event_session_obj_li?.map(event_session_obj => event_session_obj?.event_session_id_random)} -->
-        <div
-            class="flex flex-row flex-wrap justify-center items-center space-x-2 space-y-2"
-            >
-        {#each $lq_kv__event_session_obj_li as event_session_obj}
-            <span>
-            {event_session_obj?.event_session_id_random}
-            </span>
-        {/each}
-        </div>
+        <li>Session name</li>
+        <li>Session description</li>
+        <li>Presentation name</li>
+        <li>Presenter names</li>
+        <li>Presenter ID (LCI member ID)</li>
+    </ul>
    </div>
-{:else}
-    <!-- No match -->
+</section>
 {/if}

 </section>
--- a/src/routes/events_pres_mgmt/event/[slug]/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events_pres_mgmt/event/[slug]/ae_comp__event_session_obj_li.svelte
@@ -21,7 +21,7 @@ import { events_func } from '$lib/ae_events_functions';
 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 event_session_id_random_li: Array<string> = ['']; // 'VSBH-19-41-50'
 // export let allow_basic: boolean = false;
 // export let allow_moderator: boolean = false;

@@ -89,14 +89,14 @@ let lq_kv__event_session_obj_li = liveQuery(
 </script>


-<section class="ae_comp event_session_obj_li {container_class_li} max-w-100 outline overflow-x-scroll">
+<section class="ae_comp event_session_obj_li {container_class_li}">


 {#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">
+<section class="py-2 space-y-2 xs:max-w-sm lg:max-w-100 container overflow-x-scroll">
    <h2 class="h3">
        <span class="text-md">
        Results:
@@ -111,7 +111,7 @@ let lq_kv__event_session_obj_li = liveQuery(
        </span>
        {/if}
    </h2>
-<table class="table">
+<table class="table table-auto table-striped table-hover">
 <thead>
    <tr>
        <th>Session</th>
@@ -127,19 +127,27 @@ let lq_kv__event_session_obj_li = liveQuery(
 <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}"
+            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
+                sm:w-80
+                md:max-w-xs md:p-2
+                sm:btn-sm
+                md:btn-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>
+            <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">
+            {#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
+                    {session_obj?.file_count_all}x
                </span>
            {:else}
                <!-- Nothing -->
@@ -149,7 +157,7 @@ let lq_kv__event_session_obj_li = liveQuery(
        <!-- {#if $ae_loc.administrator_access}
        <Comp_event_presenter_obj_li
            link_to_type={'event_session'}
-            link_to_id={session_obj.event_session_id_random}
+            link_to_id={session_obj?.event_session_id_random}
            display_mode={'minimal'}
            >
        </Comp_event_presenter_obj_li>
@@ -159,7 +167,7 @@ let lq_kv__event_session_obj_li = liveQuery(
        <!-- {#if $ae_loc.administrator_access}
        <Element_manage_event_file_li
            link_to_type={'event_session'}
-            link_to_id={session_obj.event_session_id_random}
+            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={''}
@@ -169,36 +177,46 @@ let lq_kv__event_session_obj_li = liveQuery(

    </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 class="flex flex-col">
+            <span>
+            {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'dddd')}
+            </span>
            <span style="break-inside: avoid;">
+            {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'date_long_month_day')}
+            </span>
+        </span>
+    <td>
+        <span class="flex flex-col items-center md:flex-row md:items-start">
+            {#if session_obj?.start_datetime}
+            <span style="break-inside: avoid;">
+                {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'time_short')}
+            </span>
+            <span class="grow">
+            &ndash;
+            </span>
+            <span style="break-inside: avoid;">
+                {ae_util.iso_datetime_formatter(session_obj?.end_datetime,'time_short')}
+            </span>
+            {:else}
+            {@html ae_html.not_set}
+            {/if}
+        </span>
+    </td>
+    <td>{session_obj?.event_location_name ?? '-- not set --'}</td>
+    <td
+        >
+        <span class="flex flex-col items-start lg:flex-row lg:items-center lg:justify-between">
+        {#if session_obj?.poc_person_full_name}
+            <span style="break-inside: avoid;" class="">
                <span class="fas fa-user mx-1"></span>
-                {session_obj.poc_person_full_name}
+                {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 style="break-inside: avoid;" class="text-xs">
+                <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}
+                    {session_obj?.poc_person_primary_email}
                </a>
            </span>
            {/if}
@@ -208,7 +226,7 @@ let lq_kv__event_session_obj_li = liveQuery(

        {#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}
+        {#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}
@@ -333,6 +351,8 @@ let lq_kv__event_session_obj_li = liveQuery(
        {/if}

        {/if} <!-- $ae_loc.trusted_access -->
+
+        </span> <!-- flex flex-col items-center md:flex-row md:items-start -->
    </td>
 </tr>
 {/each}