refactor: Use random IDs as primary keys in IDB

This commit refactors the IndexedDB schema to use the string-based random IDs as primary keys instead of the numeric auto-incrementing IDs. This change affects the 'badge' table and all related components that interact with it. The badge detail page and list component have been updated to use the new primary key for more efficient and consistent data retrieval.

src/lib/ae_events/db_events.ts

@@ -807,7 +807,7 @@ export class MySubClassedDexie extends Dexie {
 
 			// badge: '++id, full_name, email' // Primary key and indexed props
 			badge: `
-                id, id_random, event_badge_id, event_badge_id_random,
+                event_badge_id_random, event_badge_id, id,
                 event_id, event_id_random,
                 full_name, full_name_override, email, email_override,
                 affiliations, affiliations_override,

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

@@ -48,10 +48,7 @@
 			if (log_lvl) {
 				console.log(`*** LiveQuery: lq__event_badge_obj *** event_badge_id=${event_badge_id}`);
 			}
-			let results = await db_events.badge
-				.where('event_badge_id_random')
-				.equals(event_badge_id)
-				.first();
+			let results = await db_events.badge.get(event_badge_id);
 			if (log_lvl) {
 				console.log(`*** LiveQuery: lq__event_badge_obj *** results=`, results);
 			}

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

@@ -3,15 +3,7 @@
 		// Exports
 		container_class_li?: string | Array<string>;
 		// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
-		use_id_li?: boolean;
-		event_badge_id_li?: Array<string>;
-		qry_idb?: boolean;
-		qry_str?: string;
-		qry_type_code?: string;
-		// event_badge_obj_li?: Array<any>;
-		link_to_type?: string;
-		link_to_id?: string;
-		// export let lq__event_presentation_obj
+		badge_obj_li?: Array<any>;
 		log_lvl?: number;
 		show_sensitive_fields?: boolean;
 		hide_affiliations?: boolean;
@@ -22,8 +14,6 @@
 	let {
 		container_class_li = [],
 		badge_obj_li = [],
-		link_to_type,
-		link_to_id,
 		log_lvl = $bindable(0),
 		show_sensitive_fields = true,
 		hide_affiliations = false,
@@ -31,52 +21,38 @@
 		hide_badge_type = false
 	}: Props = $props();
 
-	// *** Import Svelte specific
-	// import { goto } from '$app/navigation';
+	import { liveQuery } from 'dexie';
+	import { db_events } from '$lib/ae_events/db_events';
+	import { ae_loc } from '$lib/stores/ae_stores';
 
-	// *** Import other supporting libraries
-	// import { liveQuery } from 'dexie'; // No longer needed
+	let trusted_access = $derived(ae_loc.trusted_access);
 
-	// *** Import Aether specific variables and functions
-	// import type { key_val } from '$lib/stores/ae_stores';
-	// import { ae_util } from '$lib/ae_utils/ae_utils'; // No longer needed
-	// import { api } from '$lib/api/api'; // No longer needed
-	import {
-		ae_snip,
-		ae_loc,
-		ae_sess,
-		ae_api,
-		ae_trig,
-		slct,
-		slct_trigger
-	} from '$lib/stores/ae_stores';
-
-	import {
-		events_loc,
-		events_sess,
-		events_slct,
-		events_trigger
-	} from '$lib/stores/ae_events_stores';
-	// import { db_events } from '$lib/ae_events/db_events'; // No longer needed
-
-	let trusted_access = $derived($ae_loc.trusted_access);
+	let lq__event_badge_obj_li = $derived(
+		liveQuery(async () => {
+			if (badge_obj_li?.length) {
+				const ids = badge_obj_li.map((b) => b.event_badge_id_random);
+				return await db_events.badge.bulkGet(ids);
+			}
+			return [];
+		})
+	);
 </script>
 
 <section class="px-1 flex flex-col gap-1 items-center justify-center space-y-1">
 	<!-- event_badge_id_li?.length &&  -->
-	{#if badge_obj_li?.length}
+	{#if $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>
-				{badge_obj_li.length}&times;
+				{$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 badge_obj_li as event_badge_obj (event_badge_obj.event_badge_id_random)}
+			{#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
@@ -106,17 +82,17 @@
 							{/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>
+									<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}
@@ -162,4 +138,4 @@
 			<p>No results available to show.</p>
 		</div>
 	{/if}
-</section>
+</section>