OSIT-AE-App-Svelte/src/routes/events/[event_id]/(badges)/badges/+page.svelte

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

	import { onMount } from 'svelte';

	let lq__event_obj = $state(null);

	onMount(() => {
		const observable = liveQuery(() => db_events.event.get($events_slct?.event_id ?? ''));
		const subscription = observable.subscribe((value) => {
			lq__event_obj = value;
		});

		return () => {
			subscription.unsubscribe();
		};
	});

	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:use_id_li={$events_sess.badges.use_id_li}
	bind:search_status={$events_sess.badges.search_status}
	bind:search_complete={$events_sess.badges.search_complete}
	bind:qry_str={$events_loc.badges.fulltext_search_qry_str}
	bind:qry_type_code={$events_loc.badges.search_badge_type_code}
	log_lvl={1}
></Comp_badge_search>

<!-- {#await $lq__event_badge_obj_li}
    Loading....
    {:then event_badge_obj_li}

{/await} -->

<!-- This is how we reset the Dixie liveQuery when the search parameters change. I wish there was a better way??? -->
{#if $events_sess?.badges?.search_status != 'loading' && $events_sess?.badges?.search_status != 'processing'}
	<Comp_badge_obj_li
		badge_obj_li={$events_sess.badge_li}
		qry_str={$events_loc.badges.fulltext_search_qry_str}
		qry_type_code={$events_loc.badges.search_badge_type_code}
		log_lvl={1}
	></Comp_badge_obj_li>
{:else}
	<p class="p-4 italic text-sm text-surface-400">Loading badges...</p>
{/if}

<!-- {#if event_badge_id_li && event_badge_id_li?.length > 0}
    <Comp_badge_obj_li
        event_badge_id_li={event_badge_id_li}
        qry_str={$events_loc.badges.fulltext_search_qry_str}
        qry_type_code={$events_loc.badges.search_badge_type_code}
        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} -->