OSIT-AE-App-Svelte/src/routes/events/ae_comp__event_session_obj_tbl.svelte

<script lang="ts">
    interface Props {
        container_class_li?: string | Array<string>;
        // export let event_session_id_random_li: Array<string>;
        lq__event_session_obj_li: any;
        log_lvl?: number;
        show_location_fields?: boolean;
        hide_session_code?: boolean;
    }

    let {
        container_class_li = [],
        lq__event_session_obj_li,
        log_lvl = $bindable(0),
        show_location_fields = true,
        hide_session_code = false
    }: Props = $props();

    // Imports
    // import type { key_val } from '$lib/ae_stores';

    // import { liveQuery } from "dexie";
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { ListOrdered } from '@lucide/svelte';
    // Imports - events specific
    // import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
    // import { db_events } from "$lib/db_events";

    // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher';
    // export let link_to_type: string;
    // export let link_to_id: string;

    // *** Functions and Logic
    $effect(() => {
        if (log_lvl) {
            console.log(
                `container_class_li: ${container_class_li}; show_location_fields: ${show_location_fields}`
            );
            // console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
        }
    });

    let horiz_scroll_warning: boolean = $state(false);
    let horiz_check_element: HTMLElement | null = $state(null);

    // Check if element is scrolling horizontally
    $effect(() => {
        if (
            horiz_check_element &&
            horiz_check_element.scrollWidth > horiz_check_element.offsetWidth
        ) {
            horiz_scroll_warning = true;
            // console.log('Element is too wide for the container. Horizontal scrolling detected.');
        } else {
            horiz_scroll_warning = false;
            // console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
        }
    });
</script>

<section
    class:border-r-2={horiz_scroll_warning}
    class:border-dashed={horiz_scroll_warning}
    class:border-warning-900-100={horiz_scroll_warning}
    class="ae_comp event_session_obj_tbl {container_class_li} container overflow-auto max-w-screen"
>
    {#if $lq__event_session_obj_li && $lq__event_session_obj_li?.length}
        <div
            bind:this={horiz_check_element}
            id="tbl_container"
            class="space-y-2 pb-48"
        >
            <h2 class="h3">
                <span class="text-base"> Results: </span>

                {#if $lq__event_session_obj_li?.length}
                    <span
                        class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
                        title="Count {$lq__event_session_obj_li.length ??
                            'None'}"
                    >
                        <ListOrdered size="1em" class="mx-4" />
                        {$lq__event_session_obj_li.length ?? 'None'}&times;
                    </span>
                {/if}
            </h2>

            <table
                class="table table-auto table-striped w-full text-xs lg:text-sm"
            >
                <thead class="">
                    <tr>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">Start Datetime</th>
                        {#if show_location_fields}
                            <th class="px-4 py-2">Location</th>
                        {/if}
                        <th class="px-4 py-2">Session Files</th>
                        <th class="px-4 py-2">Presenter Files</th>
                    </tr>
                </thead>
                <tbody class="">
                    {#each $lq__event_session_obj_li as event_session_obj, index (event_session_obj.event_session_id)}
                        <tr class:dim={event_session_obj?.hide}>
                            <td class="px-4 py-2">
                                <a
                                    href="/events/{event_session_obj?.event_id}/session/{event_session_obj?.event_session_id}"
                                    class="text-blue-500 hover:text-blue-800 hover:underline"
                                >
                                    {event_session_obj?.name}
                                </a>
                            </td>
                            <td class="px-4 py-2">
                                {ae_util.iso_datetime_formatter(
                                    event_session_obj?.start_datetime,
                                    'datetime_iso_12_no_seconds'
                                )}
                            </td>
                            {#if show_location_fields}
                                <td class="px-4 py-2">
                                    {event_session_obj?.event_location_name}
                                </td>
                            {/if}
                            <td class="px-4 py-2">
                                {event_session_obj?.file_count ?? '0'}
                            </td>
                            <td class="px-4 py-2">
                                {event_session_obj?.file_count_all ?? '0'}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <p class="text-sm">No sessions available to show.</p>
    {/if}
</section>