Significant work on getting badges ready again.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osit-aether-app-svelte",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "One Sky IT's Aether App created with Svelte, SvelteKit, Tailwind CSS, Lucide, Font Awesome, and Skeleton UI. -Scott Idem",
   "homepage": "https://oneskyit.com/",
   "private": true,

src/lib/ae_events_stores.ts

@@ -89,6 +89,9 @@ let events_local_data_struct: key_val = {
         // 'theme_mode': 'dark',
         // 'theme_name': 'wintry',
 
+        'fulltext_search_qry_str': null,
+        'status_qry__search': null,
+
         'classes__form': 'border border-surface-200 p-4 space-y-4 rounded-container',
     },
 

src/routes/events/[event_id]/(badges)/badges/+layout.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 interface Props {
-    /** @type {import('./$types').PageData} */
+    /** @type {import('./$types').LayoutData} */
     data: any;
+    children?: import('svelte').Snippet;
     log_lvl?: number;
 }
 
 let {
     data,
+    children,
     log_lvl = 0
 }: Props = $props();
 
 
 // *** Import Svelte specific
-
 import { liveQuery } from "dexie";
 
 import type { key_val } from '$lib/ae_stores';
@@ -24,13 +25,40 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
 
-
 let lq__event_obj = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
+    }
     let results = await db_events.event
-        .get($events_slct.event_id);
+        .get($events_slct?.event_id ?? '');
+
     return results;
 }));
 
+let nav_y_height = $state(0);
+
+let box: any;
+let xLeft = $state(0);
+let xScroll = $state(0);
+let xWidth = $state(0);
+let yTop = $state(0);
+let yScroll = $state(0);
+let yHeight = $state(0);
+
+let scroll_x = $state(0);
+let scroll_y = $state(0);
+
+function parse_scroll() {
+    // console.log(`parse_scroll() called`);
+    xLeft = box.scrollLeft;
+    xScroll = box.scrollWidth;
+    xWidth = box.clientWidth;
+    yTop = box.scrollTop;
+    yHeight = box.clientHeight;
+    yScroll = box.scrollHeight;
+    // console.log(`parse_scroll() called: ${yTop}`);
+}
+
 // *** Functions and Logic
 $effect(() => {
     // if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
@@ -43,8 +71,16 @@ $effect(() => {
 
 <svelte:head>
 	<title>
-        &AElig;:
+        Badges -
         {ae_util.shorten_string({string: $lq__event_obj?.name ?? '-- not set --', max_length: 12})}
+        - OSIT's &AElig; Events
     </title>
 </svelte:head>
-<!-- - Badges - {$events_loc?.title} -->
+<!-- - Badges - {$events_loc?.title} -->
+
+
+<!-- +layout: Where is here??? -->
+
+
+
+{@render children?.()}

src/routes/events/[event_id]/(badges)/badges/+page.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+interface Props {
+    /** @type {import('./$types').PageData} */
+    data: any;
+    log_lvl?: number;
+}
+
+let {
+    data,
+    log_lvl = 0
+}: Props = $props();
+
+// *** Import Svelte specific
+// import { goto } from '$app/navigation';
+
+// *** Import other supporting libraries
+// import { browser } from '$app/environment';
+import { liveQuery } from "dexie";
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+// import { core_func } from '$lib/ae_core_functions';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+
+// import Element_ae_crud from '$lib/element_ae_crud
+// import Element_data_store from '$lib/element_data_store_v2.svelte';
+// import MyClipboard from '$lib/e_app_clipboard.svelte';
+
+import { db_events } from "$lib/ae_events/db_events";
+// import { ae_snip, 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 { events_func } from '$lib/ae_events_functions';
+
+import Comp_badge_search from './ae_comp__badge_search.svelte';
+import Comp_badge_obj_li from './ae_comp__badge_obj_li.svelte';
+
+
+// *** Variables
+// let test_event_id = data.params.event_id;
+// console.log(`Data Params: event_id=${test_event_id}`);
+let url_test_val = data.url.searchParams.get('test_val');
+console.log(`URL test_val = ${url_test_val}`);
+
+let lq__event_obj = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
+    }
+    let results = await db_events.event
+        .get($events_slct?.event_id ?? '');
+
+    return results;
+}));
+
+let event_badge_id_li: Array<string> = $state([]);
+// let dq__where_type_id_val: string = `event_id_random`;
+// let dq__where_eq_id_val: string = $events_slct?.event_id ?? '';
+
+// let lq__event_badge_obj_li = $derived(liveQuery(async () => {
+//     if (event_badge_id_li.length > 0) {
+//         let results = await db_events.badge
+//             .bulkGet(event_badge_id_li);
+
+//         return results;
+//     } else {
+//         let results = await db_events.badge
+//             .where(dq__where_type_id_val)
+//             .equals(dq__where_eq_id_val)
+//             .sortBy('given_name')
+//             // This should be sorted by a custom sort field
+
+//         return results;
+//     }
+// }));
+
+// *** Functions and Logic
+
+
+// if (browser) {
+//     console.log('Browser environment detected.');
+
+//     let url_test_val = data.url.searchParams.get('test_val');
+//     console.log(`URL test_val = ${url_test_val}`);
+// }
+
+
+
+
+</script>
+
+
+<svelte:head>
+	<title>
+        Badges -
+        {ae_util.shorten_string({string: $lq__event_obj?.name ?? '-- not set --', max_length: 12})}
+        - OSIT's &AElig; Events
+    </title>
+</svelte:head>
+
+
+<!-- badges +page: Where is here??? -->
+
+
+<!-- event_badge_obj_li={$lq__event_badge_obj_li} -->
+<Comp_badge_search
+    event_id={$events_slct?.event_id ?? ''}
+    bind:event_badge_id_li={event_badge_id_li}
+    log_lvl={1}
+    >
+</Comp_badge_search>
+
+
+<!-- {#await $lq__event_badge_obj_li}
+    Loading....
+    {:then event_badge_obj_li}
+
+{/await} -->
+
+
+{#if event_badge_id_li && event_badge_id_li?.length > 0}
+    <Comp_badge_obj_li
+        event_badge_id_li={event_badge_id_li}
+        log_lvl={1}
+        >
+    </Comp_badge_obj_li>
+{:else}
+    <p class="p-4 italic text-sm text-surface-400">No badges found for this event.</p>
+{/if}

src/routes/events/[event_id]/(badges)/badges/[badge_id]/+page.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+interface Props {
+    /** @type {import('./$types').PageData} */
+    data: any;
+    log_lvl?: number;
+}
+
+let {
+    data,
+    log_lvl = 0
+}: Props = $props();
+
+// *** Import Svelte specific
+// import { goto } from '$app/navigation';
+
+// *** Import other supporting libraries
+// import { browser } from '$app/environment';
+import { liveQuery } from "dexie";
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+// import { core_func } from '$lib/ae_core_functions';
+// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+
+// import Element_ae_crud from '$lib/element_ae_crud
+// import Element_data_store from '$lib/element_data_store_v2.svelte';
+// import MyClipboard from '$lib/e_app_clipboard.svelte';
+
+import { db_events } from "$lib/ae_events/db_events";
+// import { ae_snip, 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 { events_func } from '$lib/ae_events_functions';
+
+
+
+
+// *** Variables
+// let test_event_id = data.params.event_id;
+let event_badge_id = data.params.badge_id;
+// console.log(`Data Params: event_id=${test_event_id}; badge_id=${test_event_badge_id}`);
+let url_test_val = data.url.searchParams.get('test_val');
+console.log(`URL test_val = ${url_test_val}`);
+
+let lq__event_badge_obj = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`*** LiveQuery: lq__event_badge_obj *** event_badge_id=${event_badge_id}`);
+    }
+    let results = await db_events.badge
+        .get(event_badge_id);
+
+    return results;
+}));
+
+
+
+// *** Functions and Logic
+
+
+// if (browser) {
+//     console.log('Browser environment detected.');
+
+//     let url_test_val = data.url.searchParams.get('test_val');
+//     console.log(`URL test_val = ${url_test_val}`);
+// }
+
+</script>
+
+
+<svelte:head>
+	<title>
+        Badges -
+        {ae_util.shorten_string({string: $lq__event_badge_obj?.full_name ?? '-- not set --', max_length: 12})}
+        - OSIT's &AElig; Events
+    </title>
+</svelte:head>
+
+
+<!-- badge ID +page: Where is here??? -->
+
+event {data.params.event_id} / badge {data.params.badge_id}
+
+{#if $lq__event_badge_obj}
+<header
+    class="
+        w-full
+        flex flex-row gap-1 items-center justify-between
+        border-b border-gray-300
+        mb-2
+        pb-2
+        "
+    >
+    <h2 class="text-2xl font-bold">
+        Badge:
+        {#if $lq__event_badge_obj.full_name}
+            {$lq__event_badge_obj.full_name}
+        {:else if $lq__event_badge_obj.given_name}
+            {$lq__event_badge_obj.given_name}
+        {:else}
+            -- no name --
+        {/if}
+    </h2>
+    <a href={`/events/${$lq__event_badge_obj.event_id}/badges`} class="text-sm italic text-blue-600 hover:underline">
+        <span class="fas fa-search"></span>
+        Back to Search
+    </a>
+</header>
+
+    <pre class="whitespace-pre-wrap break-words">
+        {JSON.stringify($lq__event_badge_obj, null, 2)}
+    </pre>
+{:else}
+    <p>No IDB record found for ID: {event_badge_id}</p>
+{/if}

src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+interface Props {
+    // Exports
+    container_class_li?: string|Array<string>;
+    // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+    event_badge_id_li?: Array<string>;
+    // event_badge_obj_li?: Array<any>;
+    link_to_type?: string;
+    link_to_id?: string;
+    // export let lq__event_presentation_obj
+    log_lvl?: number;
+    show_sensitive_fields?: boolean;
+    hide_affiliations?: boolean;
+    hide_location?: boolean;
+    hide_badge_type?: boolean;
+}
+
+let {
+    container_class_li = [],
+    event_badge_id_li = $bindable([]),
+    // event_badge_obj_li = $bindable(),
+    link_to_type,
+    link_to_id,
+    log_lvl = $bindable(0),
+    show_sensitive_fields = true,
+    hide_affiliations = false,
+    hide_location = false,
+    hide_badge_type = false,
+}: Props = $props();
+
+
+// *** Import Svelte specific
+// import { goto } from '$app/navigation';
+
+// *** Import other supporting libraries
+import { liveQuery } from "dexie";
+
+// *** Import Aether specific variables and functions
+import { ae_snip, 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 { db_events } from "$lib/ae_events/db_events";
+
+if (log_lvl) {
+    if (link_to_type && link_to_id) {
+        console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
+    } else {
+        console.log(`No link_to_type or link_to_id defined.`);
+    }
+}
+
+
+// Variables
+// let ae_promises: key_val = {};
+// let ae_tmp: key_val = {};
+// let ae_triggers: key_val = {};
+
+// let event_badge_id_li: Array<string> = $state([]);
+
+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
+let lq__event_badge_obj_li = $derived(liveQuery(async () => {
+    let results: any;
+    log_lvl = 2;
+
+    if (event_badge_id_li?.length) {
+        if (log_lvl) {
+            console.log(`LQ - Using event_badge_id_li to get event badges.`, event_badge_id_li);
+        }
+
+        results = await db_events.badge
+            .bulkGet(event_badge_id_li);
+
+    // } else if (event_badge_obj_li?.length) {
+    //     if (log_lvl) {
+    //         console.log(`LQ - Using event_badge_obj_li to get event badges.`);
+    //     }
+
+    //     event_badge_id_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
+
+    //     for (let i = 0; i < event_badge_obj_li.length; i++) {
+    //         let event_badge_obj = event_badge_obj_li[i];
+    //         let event_badge_id_random = event_badge_obj.event_badge_id_random;
+    //         event_badge_id_li.push(event_badge_id_random);
+    //     }
+
+    //     results = await db_events.badge
+    //         .bulkGet(event_badge_id_li);
+
+    } else if (link_to_type && link_to_id) {
+        if (log_lvl) {
+            console.log(`LQ - Trying where: ${dq__where_type_id_val}; equals: ${dq__where_eq_id_val}`);
+        }
+        event_badge_id_li = [];
+        results = await db_events.badge
+            .where(dq__where_type_id_val)
+            .equals(dq__where_eq_id_val)
+            .sortBy('name');
+
+    } else {
+        event_badge_id_li = [];
+        results = [];
+
+    }
+
+    // log_lvl = 1;
+    // Check if results are different than the current badge version stored under $events_slct
+    if ($events_slct.event_badge_obj_li && JSON.stringify($events_slct.event_badge_obj_li) !== JSON.stringify(results)) {
+        $events_slct.event_badge_obj_li = [...results];
+        if (log_lvl) {
+            console.log(`Session slct li stored version has changed for ID = ${$events_slct.journal_id}`, $events_slct.event_badge_obj_li);
+        }
+    } else {
+        if (log_lvl > 1) {
+            console.log(`Session slct li stored version has not changed for ID = ${$events_slct.journal_id}`);
+        }
+    }
+
+    return results;
+
+    // if (event_badge_id_li.length) {
+    //     let results = await db_events.badge
+    //         .bulkGet(event_badge_id_li);
+
+    //     return results;
+    // } else if (link_to_type && link_to_id) {
+    //     console.log(`Trying where: ${dq__where_type_id_val}; equals: ${dq__where_eq_id_val}`);
+    //     let results = await db_events.badge
+    //         .where(dq__where_type_id_val)
+    //         .equals(dq__where_eq_id_val)
+    //         .sortBy('name')
+
+    //     return results;
+    // } else {
+    //     return null;
+    // }
+}));
+
+</script>
+
+
+<section class="px-1 flex flex-col gap-1 items-center justify-center space-y-1">
+
+{#if event_badge_id_li?.length && $lq__event_badge_obj_li && $lq__event_badge_obj_li?.length}
+    <header class="w-full flex flex-row gap-1 items-center justify-start">
+        <h2 class="text-base">Results:</h2>
+        <div class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg">
+            <span class="fas fa-list-ol mx-4"></span>
+            {$lq__event_badge_obj_li.length}&times;
+        </div>
+    </header>
+
+    <!-- The email should only be the first 3 chars and then @domain name. -->
+
+    <ul class="list-disc list-inside">
+    {#each $lq__event_badge_obj_li as event_badge_obj (event_badge_obj.event_badge_id_random)}
+        <li
+            class="
+                border-b border-gray-300 dark:border-gray-600 py-0.5
+                flex flex-row gap-1 items-center justify-between w-full
+                "
+            >
+        <a
+            href={`/events/${event_badge_obj.event_id}/badges/${event_badge_obj.event_badge_id}`}
+            class="flex flex-row gap-1 items-center justify-start min-w-fit"
+            title={`Badge: ${event_badge_obj.full_name ?? event_badge_obj.given_name ?? '-- no name --'}\nID: ${event_badge_obj.event_badge_id}`}
+            >
+            <span>
+            {#if event_badge_obj.hide}
+                <span class="fas fa-eye-slash mx-1"></span>
+            {:else}
+                <span class="fas fa-id-badge mx-1"></span>
+            {/if}
+            {#if event_badge_obj.print_count >= 1}
+                <!-- Show a green checkmark -->
+                <span class="fas fa-check text-green-500"></span>
+
+                {#if $ae_loc.trusted_access}
+                    <span class="print_count preset-tonal-warning px-1">{event_badge_obj.print_count}×</span>
+                {/if}
+            {/if}
+            </span>
+
+            <span class="font-bold">
+            {#if event_badge_obj.full_name_override}
+                {event_badge_obj.full_name_override}
+            {:else if event_badge_obj.full_name}
+                {event_badge_obj.full_name}
+            {:else if event_badge_obj.given_name}
+                {event_badge_obj.given_name} {event_badge_obj.family_name}
+            {:else}
+                -- no name --
+            {/if}
+            </span>
+        </a>
+
+
+        {#if show_sensitive_fields}
+            -
+            <span class="min-w-fit">
+            <!-- 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"></span>
+            {event_badge_obj.email ? event_badge_obj.email.replace(/^(.{3}).*@/, '$1...@') : ''}
+            </span>
+        {/if}
+        {#if !hide_affiliations}
+            -
+            {event_badge_obj?.affiliations ?? '-- no affiliations --'}
+        {/if}
+        {#if !hide_location}
+            -
+            {event_badge_obj?.location ?? '-- no location --'}
+        {/if}
+        {#if !hide_badge_type}
+            -
+            <span class="italic">{event_badge_obj?.badge_type}</span>
+        {/if}
+        </li>
+    {/each}
+    </ul>
+
+    <!-- <table class="table">
+        <thead>
+        <tr>
+            <th>Badge</th>
+            <th>Email / Affiliations / Location</th>
+            <th>Affiliations / Location</th>
+            <th>Badge Type</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr><td class=""></td><td class=""></td></tr>
+        </tbody>
+    </table> -->
+{:else}
+    <div class="">
+        <p>No badges available to show in table.</p>
+    </div>
+{/if}
+</section>

src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte

@@ -0,0 +1,521 @@
+<script lang="ts">
+interface Props {
+    event_id: string;
+    event_badge_id_li?: Array<string>;
+    // event_badge_obj_li?: Array<any>;
+    search_status?: string;
+    search_complete?: boolean;
+    log_lvl?: number;
+}
+
+let {
+    event_id,
+    event_badge_id_li = $bindable([]),
+    // event_badge_obj_li = $bindable(),
+    search_status = $bindable('idle'),
+    search_complete = $bindable(true),
+    log_lvl = 0,
+}: Props = $props();
+
+// *** Import Svelte specific
+
+// *** Import other supporting libraries
+import {
+        ArrowDown01, ArrowDown10, ArrowDownUp,
+        BetweenVerticalEnd, BetweenVerticalStart,
+        BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
+        Check, Copy,
+        Expand, Eye, EyeOff,
+        Flag, FlagOff, FilePlus, Fingerprint,
+        Globe,
+        Library,
+        MessageSquareWarning, Minus,
+        Notebook,
+        Pencil, Plus,
+        RemoveFormatting,
+        SquareLibrary,
+        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
+        Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
+        X
+    } from '@lucide/svelte';
+
+
+import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_snip, 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 { events_func } from '$lib/ae_events_functions';
+
+
+// *** Variables
+let ae_promises: key_val = $state({});
+let ae_tmp: key_val = $state({});
+let ae_triggers: key_val = $state({});
+
+// ISHLT 2024 badge type codes
+let badge_type_code_li = [{"code":"current_member","name":"Member"},{"code":"inactive_member","name":"Non-Member"},{"code":"current_member_trainee","name":"Trainee Member"},{"code":"inactive_member_trainee","name":"Trainee Non-Member"},{"code":"ex_all","name":"Exhibitor All Access"},{"code":"ex_booth","name":"Exhibitor Booth Staff"},{"code":"hftx","name":"HFTX Master Academy"},{"code":"mcs","name":"MCS Master Academy"},{"code":"pediatric","name":"Pediatric"},{"code":"guest","name":"Guest"},{"code":"staff","name":"Staff"},{"code":"volunteer","name":"Volunteer"},{"code":"test","name":"Test"}];
+
+// *** Functions and Logic
+function preventDefault(fn) {
+    return function (event) {
+        event.preventDefault();
+        fn.call(this, event);
+    };
+}
+
+
+
+// Trigger doing a search query for event badges
+$effect(() => {
+if (ae_triggers.event_badge_qry) {
+    ae_triggers.event_badge_qry = false;
+    search_status = 'loading';
+    search_complete = false;
+    event_badge_id_li = [];
+
+    if (log_lvl) {
+        console.log(`Triggered: event_badge_qry: ft search qry str:=${$events_loc.badges.fulltext_search_qry_str}`);
+    }
+
+    // ae_promises.load__event_badge_obj_li = events_func.qry__event_badge({
+    ae_promises.load__event_badge_obj_li = events_func.search__event_badge({
+        api_cfg: $ae_api,
+        event_id: event_id,
+        // qry_str: $events_loc.badges.fulltext_search_qry_str,
+        type_code: $events_sess.badges.search_badge_type_code,
+        fulltext_search_qry_str: $events_loc.badges.fulltext_search_qry_str,
+
+        // qry_created_on: null,
+        // qry_alert: null,
+        // qry_priority: null,
+        // qry_type: and_type,
+
+        // enabled: $events_loc.recovery_meetings.qry__enabled,
+        // hidden: $events_loc.recovery_meetings.qry__hidden,
+        // order_by_li: $events_loc.recovery_meetings.qry__order_by_li,
+        // limit: $events_loc.recovery_meetings.qry__limit,
+        // try_cache: try_cache,
+        log_lvl: log_lvl,
+    })
+    .then(function (search_results) {
+        search_status = 'processing';
+        let tmp_event_badge_id_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
+
+        for (let i = 0; i < search_results.length; i++) {
+            let event_badge_obj = search_results[i];
+            let event_badge_id_random = event_badge_obj.event_badge_id_random;
+            tmp_event_badge_id_li.push(event_badge_id_random);
+        }
+        event_badge_id_li = tmp_event_badge_id_li
+        console.log('event_badge_id_li', event_badge_id_li);
+
+        $events_sess.badge_li = search_results
+
+        return search_results;
+    })
+    .finally(() => {
+        search_status = 'done';
+        search_complete = true;
+    });
+}
+});
+
+
+// Updated 2024-06-12 late
+$effect(() => {
+    if (ae_triggers.event_badge_qry == 'load__event_badge_obj_li' && $events_slct.event_id) {
+        console.log(`load__event_badge_obj_li() $events_slct.event_id=${$events_slct.event_id}`);
+        log_lvl = 1;
+        ae_triggers.event_badge_qry = null;
+
+        if ($events_loc.badges.save_search_text) {
+            if (log_lvl) {
+                console.log(`*** Save search text *** ${$events_loc.badges.save_search_text}`);
+            }
+            $events_loc.badges.saved_search__badge = $events_loc.badges.fulltext_search_qry_str;
+            $events_loc.badges.saved_search__badge_location_name = $events_sess.badges.location_name_qry_str;
+        }
+
+        if ( $events_loc.badges.fulltext_search_qry_str?.length > 2 ) {
+            console.log('*** Search string is valid ***');
+            process_search_string($events_loc.badges.fulltext_search_qry_str);
+        } else if ( $ae_loc.authenticated_access ) {
+            console.log('*** Administrator Access or Trusted Access ***');
+            process_search_string($events_loc.badges.fulltext_search_qry_str);
+        } else {
+            console.log('*** Check permissions and or search string. Not allowed or too short. ***');
+            $events_slct.event_badge_obj_li = [];
+            event_badge_id_li = [];
+        }
+    }
+
+    // if ($events_sess.badges.status_qry__search == 'done' && $events_slct?.event_badge_obj_li) {
+    log_lvl = 1;
+    if (ae_triggers.event_badge_qry == 'search_done') {
+        ae_triggers.event_badge_qry = null;
+        $events_sess.badges.status_qry__search = null;
+
+        if (log_lvl) {
+            console.log('TEST search done: Pulling out the event_badge_id_randoms...');
+        }
+
+        // We need to loop through the array of objects and get the event_badge_id_random from each object a new list of event_badge_id_randoms. Then we can use this list to get the full objects from the database.
+        let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
+        if ($events_slct.event_badge_obj_li && $events_slct.event_badge_obj_li.length) {
+            event_badge_id_li = [];
+            // console.log(`TEST SEARCH - Get ids:`, $events_slct.event_badge_obj_li);
+            for (let i = 0; i < $events_slct.event_badge_obj_li.length; i++) {
+                tmp_li.push($events_slct.event_badge_obj_li[i].event_badge_id_random);
+            }
+        }
+        event_badge_id_li = tmp_li;
+        console.log(`TEST search results: event_badge_id_li`, $state.snapshot(event_badge_id_li));
+    }
+});
+
+
+// function process_search_string(search_str: string) {
+//     if (log_lvl) {
+//         console.log(`process_search_string() search_str=${search_str}`);
+//     }
+
+//     if (search_str?.length) {
+//         // console.log(`*** Search string length: ${search_str.length} ***`);
+//     } else {
+//         // console.log(`*** Search string is empty ***`);
+//     }
+
+//     // let type_code = $events_sess.badges.search_badge_type_code;
+
+//     // let search_str = $events_loc.badges.fulltext_search_qry_str.trim();
+
+//     let search_method = 'lk'; // 'ft', 'lk', 'eq'
+//     let ft_search_str_new = '';
+//     let lk_search_str_new = '';
+
+//     if (search_method == 'ft') {
+//         // Add quotes around the search string to make it an exact match.
+//         ft_search_str_new = `${search_str}`;
+//         // ft_search_str_new = `"${search_str}"`;
+//     } else if (search_method == 'lk') {
+//         if (search_str == null) {
+//             search_str = '';
+//         }
+//         // Add a wildcard to the search string to make it a like match.
+//         lk_search_str_new = search_str.trim().replace(',', ' ').replace(';', ' ').replaceAll('  ', '%').replaceAll(' ', '%');
+//         lk_search_str_new = `%${lk_search_str_new}%`;
+//     }
+
+//     if (log_lvl) {
+//         // console.log(`*** Search method: ${search_method} ***`);
+//         console.log(`*** Search string: ${search_str} ***`);
+//         // console.log(`*** Fulltext search string: ${ft_search_str_new} ***`);
+//         // console.log(`*** Like search string: ${lk_search_str_new} ***`);
+//     }
+
+//     let type_code = '';
+//     if ($events_sess.badges.type_code_qry_str?.length) {
+//         type_code = $events_sess.badges.type_code_qry_str;
+//         console.log(`Type code: ${type_code}`);
+//     }
+
+
+//     handle_search__event_badge({
+//         ft_search_str: ft_search_str_new,
+//         lk_search_str: lk_search_str_new,
+//         and_lk_type_code: type_code,
+//         // fulltext_search_qry_str: ft_search_str_new,
+//         // ft_presenter_search_qry_str: null,
+//         // like_search_qry_str: lk_search_str_new,
+//         // like_presentation_search_qry_str: lk_search_str_new,
+//         // like_presenter_search_qry_str: lk_search_str_new,
+//         // params: params,
+//         try_cache: true,
+//         log_lvl: log_lvl,
+//     });
+// }
+
+
+async function handle_search__event_badge(
+        {
+            ft_search_str = '',
+            lk_search_str = '',
+            and_lk_type_code = '',
+            search_delay = 0,
+            max_tries = 5,
+            enabled = $events_loc.badges.qry_enabled ?? 'enabled',
+            hidden = $events_loc.badges.qry_hidden ?? 'not_hidden',
+            limit = $events_loc.badges.qry_limit__badges ?? 35,
+            try_cache = true,
+            log_lvl = 0,
+        }: {
+            ft_search_str?: string,
+            lk_search_str?: string,
+            and_lk_type_code?: string,
+            search_delay?: number, // In milliseconds
+            max_tries?: number,
+            enabled?: string,
+            hidden?: string,
+            limit?: number,
+            try_cache?: boolean,
+            log_lvl?: number,
+        }
+    ) {
+    if (log_lvl) {
+        console.log('handle_search__event_badge()');
+    }
+
+    if ($events_sess.badges?.status_qry__search != null && $events_sess.badges?.status_qry__search != 'done') {
+        // WARNING: This is a temporary fix for the search string. It needs to be fixed in the future. Using lk_search_str for now.
+        $events_sess.badges.status_qry__last_request_str = lk_search_str;
+
+        // We want to delay the initial search request to give the previous search request to finish.
+        let random_delay = Math.floor(Math.random() * 50);
+        search_delay += 50+random_delay;
+    }
+
+    // log_lvl = 1;
+
+    let count = 0;
+    let request_loop = setInterval(() => {
+        count++;
+        if (log_lvl) {
+            console.log(`*** TEST SEARCH - Search delay: ${search_delay} *** loop count=${count}`);
+        }
+        if (count >= max_tries) {
+            console.log('*** TEST SEARCH - Max tries reached ***');
+            clearInterval(request_loop);
+        }
+
+        if ($events_sess.badges?.status_qry__search != null && $events_sess.badges?.status_qry__search != 'done') {
+
+            let random_delay = Math.floor(Math.random() * 25);
+            search_delay += 25+random_delay;
+            console.log(`*** TEST SEARCH - $events_sess.badges.status_qry__search == loading wait *** search_delay=${search_delay}`);
+            // $events_sess.status_qry__last_request_str = lk_search_str;
+
+        } else {
+            // console.log('*** TEST SEARCH - $events_sess.badges.status_qry__search != loading ***');
+
+            ae_triggers.event_badge_qry = 'loading_search_results';
+            $events_sess.badges.status_qry__search = 'loading';
+
+            event_badge_id_li = []; // Resetting this seems to help trigger the new results to show correctly???
+
+            search_submit_results = events_func.search__event_badge({
+                api_cfg: $ae_api,
+                event_id: $events_slct.event_id,
+                // type_code: type_code,
+                fulltext_search_qry_str: ft_search_str,
+                ft_presenter_search_qry_str: null,
+                like_search_qry_str: lk_search_str,
+                like_presentation_search_qry_str: lk_search_str,
+                like_presenter_search_qry_str: lk_search_str,
+                like_poc_name_qry_str: lk_search_str,
+                // external_event_id: $events_loc.badges.default__external_registration_id,
+                location_name: and_lk_location_name,
+                enabled: enabled,
+                hidden: hidden,
+                limit: limit,
+                try_cache: try_cache,
+                log_lvl: log_lvl,
+            })
+            .then(function (search_results) {
+                // Processing the results from the search.
+                ae_triggers.event_badge_qry = 'process_search_results';
+                $events_sess.badges.status_qry__search = 'processing';
+                $events_slct.event_badge_obj_li = search_results;
+            })
+            .finally(() => {
+                // Finally done with the search.
+                ae_triggers.event_badge_qry = 'search_done';
+                $events_sess.badges.status_qry__search = 'done';
+            });
+            clearInterval(request_loop);
+        }
+    }, search_delay);
+}
+</script>
+
+
+<section
+    class="
+    m-2 p-2 md:px-12
+    flex flex-row gap-1 items-center justify-center
+    min-w-sm w-full
+    preset-tonal-success
+    "
+    >
+    <span class="text-sm text-gray-500 hidden">
+        Search:
+    </span>
+
+
+
+
+{#if $events_sess.badges.show_form__search}
+<form
+    onsubmit={preventDefault(() => {
+        // ae_triggers.event_badge_qry = 'load__event_badge_obj_li';
+        ae_triggers.event_badge_qry = true;
+    })}
+    autocomplete="off"
+    class="
+        form grow
+        flex flex-row flex-wrap gap-1 items-center justify-center
+        w-full
+        "
+    >
+
+
+<!-- Clear search text button -->
+<button
+    type="button"
+    class:hidden={!$events_loc.badges.fulltext_search_qry_str}
+    onclick={() => {
+        console.log(`TESTING - 1 - Cleared search query: ${$events_loc.badges.fulltext_search_qry_str}`);
+        $events_loc.badges.fulltext_search_qry_str = '';
+        console.log(`TESTING - 2 - Cleared search query: ${$events_loc.badges.fulltext_search_qry_str}`);
+        ae_triggers.event_badge_qry = true;
+    }}
+    class="
+        btn btn-sm
+        w-48
+        preset-tonal-tertiary
+        preset-outlined-tertiary-100-900
+        hover:preset-filled-tertiary-100-900
+        transition-all
+        "
+    title="Clear search query text"
+    >
+    <RemoveFormatting size="1.25em" class="text-neutral-800/60 dark:text-neutral-50/60" />
+    <span class="hidden md:inline">
+        Clear
+    </span>
+
+    {#await ae_promises.load__event_badge_obj_li}
+        <span class="text-xs text-gray-500 italic">
+            Loading...
+        </span>
+    {:then load_result}
+        {#if load_result === null}
+            <span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic font-semibold">
+                No entries found - null
+            </span>
+        {:else if load_result?.length === 0}
+            <span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic font-semibold">
+                No entries found
+            </span>
+        {:else if event_badge_id_li?.length === 0}
+            <span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic">
+                Enter to search
+            </span>
+        {:else}
+            <span class="text-xs text-gray-600/80 dark:text-gray-400/80 italic">
+                {load_result?.length ?? 0} found
+            </span>
+        {/if}
+    {:catch error}
+        <span class="text-xs text-red-600/80 dark:text-red-400/80 italic">
+            Error loading entries.
+        </span>
+    {/await}
+</button>
+
+<span class="">
+{#if $ae_loc.trusted_access && badge_type_code_li}
+    <select
+        bind:value={$events_sess.badges.search_badge_type_code}
+        onchange={() => {
+            // ae_triggers.event_badge_qry = 'load__event_badge_obj_li';
+            ae_triggers.event_badge_qry = true;
+        }}
+        class="select text-xs px-1 max-w-fit"
+        >
+        <option value="">-- All Badge Types --</option>
+        {#each badge_type_code_li as badge_type_code}
+            <option value={badge_type_code.code}>{badge_type_code.name}</option>
+        {/each}
+    </select>
+
+{/if}
+
+
+    <!--
+    class="input text-xl hover:text-3xl font-bold font-mono w-96"
+    hover:w-2/5
+    -->
+    <input
+        type="search"
+        placeholder="name, email, affiliations"
+        id="badge_fulltext_search_qry_str"
+        name="fulltext_search_qry_str"
+        bind:value={$events_loc.badges.fulltext_search_qry_str}
+        class="input text-1xl hover:text-3xl font-bold font-mono w-96 transition-all"
+        onkeyup={() => {
+            if ($events_loc.badges.fulltext_search_qry_str.length >= 7) {
+                ae_triggers.event_badge_qry = true;
+            }
+        }}
+        autofocus
+        suggest="off"
+        data-lpignore="true"
+        />
+</span>
+
+<button
+    type="submit"
+    class="btn btn-lg preset-tonal-success border border-success-500 hover:preset-tonal-success text-2xl font-bold w-48 transition-all"
+    onclick={() => {
+        ae_triggers.event_badge_qry = true;
+    }}
+    >
+    {#if !search_complete}
+        <span class="fas fa-spinner fa-spin"></span>
+    {:else }
+        <!-- Nothing -->
+    {/if}
+    <span class="fas fa-search mx-1"></span>
+    Search
+</button>
+</form>
+
+<!-- **BEGIN** Scan Form -->
+{:else if $events_sess.badges.show_form__scan}
+    Not implemented yet.
+{/if}
+
+
+<div class="opacity-50 hover:opacity-100 transition-all">
+    {#if $events_sess.badges.show_form__search}
+    <button
+        type="button"
+        onclick={() => {
+            $events_sess.badges.show_form__search = false;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = true;
+            $events_sess.badges.qr_scan_start = true;
+        }}
+        class="btn btn-sm preset-tonal-primary border border-primary-500 transition-all"
+        >
+        <span class="fas fa-qrcode"></span>
+        QR Scan
+    </button>
+    {:else if $events_sess.badges.show_form__scan}
+    <button
+        type="button"
+        onclick={() => {
+            $events_sess.badges.show_form__search = true;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = false;
+            $events_sess.badges.qr_scan_start = false;
+        }}
+        class="btn btn-sm preset-tonal-primary border border-primary-500 transition-all"
+        >
+        <span class="fas fa-search"></span>
+        Search
+    </button>
+    {/if}
+</div>
+
+</section>

src/routes/events/ae_comp__event_session_obj_li_wrapper.svelte

@@ -36,7 +36,7 @@ if (log_lvl > 1) {
 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
+
 let lq__event_session_obj_li = $derived(liveQuery(async () => {
     if (link_to_type && link_to_id) {
         let results = await db_events.session
@@ -56,6 +56,9 @@ let lq__event_session_obj_li = $derived(liveQuery(async () => {
         return null;
     }
 }));
+
+// *** Functions and Logic
+
 </script>
 
 <!-- {#if $lq__event_session_obj_li?.length > 0} -->

src/routes/journals/+layout.svelte

@@ -253,7 +253,7 @@ function scroll_container() {
         pb-48
         "
     >
-    {@render children()}
+    {@render children?.()}
 </section>
 
 

src/routes/journals/[journal_id]/+layout.svelte

@@ -421,7 +421,7 @@ let lq__journal_obj = $derived(liveQuery(async () => {
 
 
 <!-- <div class="overflow-auto"> -->
-{@render children()}
+{@render children?.()}
 <!-- </div> -->
 
 

src/routes/journals/hold+layout.svelte

@@ -59,7 +59,7 @@ import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_journals/ae_journa
 </section>
 
 <section class="main_content outline">
-    {@render children()}
+    {@render children?.()}
 </section>
 
 </div>