Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Resolve badge search reactivity and SSR issues

Browse Source 
This commit fixes several issues with the new badge search functionality. It resolves a 500 Internal Error by moving the Dexie liveQuery into an onMount block to prevent server-side execution. It also fixes a Svelte 5 reactivity issue by using a more explicit subscription pattern for the liveQuery and by correctly accessing state variables in the template. The badge search results are now correctly displayed.
This commit is contained in:
Scott Idem
2025-11-18 17:30:57 -05:00
parent d678f97324
commit 69c34fa4bc
11 changed files with 117 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,16 +50,20 @@
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 ?? '');
import { onMount } from 'svelte';
return results;
})
);
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`;
@@ -95,7 +99,7 @@
<svelte:head>
<title>
Badges -
{ae_util.shorten_string({ string: $lq__event_obj?.name ?? '-- not set --', max_length: 12 })}
{ae_util.shorten_string({ string: lq__event_obj?.name ?? '-- not set --', max_length: 12 })}
- OSIT's &AElig; Events
</title>
</svelte:head>
@@ -106,7 +110,6 @@
<Comp_badge_search
event_id={$events_slct?.event_id ?? ''}
bind:use_id_li={$events_sess.badges.use_id_li}
bind:event_badge_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}
@@ -123,8 +126,7 @@
<!-- 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
bind:use_id_li={$events_sess.badges.use_id_li}
{event_badge_id_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}

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

@@ -48,7 +48,7 @@
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);
let results = await db_events.badge.where('event_badge_id').equals(event_badge_id).first();
return results;
})

7
src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Page for printing badges
</script>
<h1 class="h1">Print Badges</h1>
<p>This page will be used for printing badges.</p>

7
src/routes/events/[event_id]/(badges)/badges/[badge_id]/review/+page.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Page for reviewing badges
</script>
<h1 class="h1">Review Badges</h1>
<p>This page will be used for reviewing badges.</p>

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

@@ -21,12 +21,7 @@
let {
container_class_li = [],
use_id_li = $bindable(true),
event_badge_id_li = $bindable([]),
qry_idb = false,
qry_str = '',
qry_type_code = '',
// event_badge_obj_li = $bindable(),
badge_obj_li = [],
link_to_type,
link_to_id,
log_lvl = $bindable(0),
@@ -40,9 +35,12 @@
// import { goto } from '$app/navigation';
// *** Import other supporting libraries
import { liveQuery } from 'dexie';
// import { liveQuery } from 'dexie'; // No longer needed
// *** 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,
@@ -59,177 +57,26 @@
events_slct,
events_trigger
} from '$lib/stores/ae_events_stores';
import { db_events } from '$lib/ae_events/db_events';
// import { db_events } from '$lib/ae_events/db_events'; // No longer needed
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([]);
// *** Functions and Logic
let lq__event_badge_obj_li = $derived(
liveQuery(async () => {
let results: any;
log_lvl = 1;
if (use_id_li && 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 (qry_str && qry_str?.length) {
if (log_lvl) {
console.log(`LQ - Using qry_str to get event badges. qry_str=${qry_str}`);
}
// let ft_query = ae_util.sanitize_fulltext_search(qry_str);
// let ft_query = qry_str;
if (log_lvl) {
console.log(`Fulltext search query: ${qry_str}`);
}
if (qry_type_code && qry_type_code !== 'all') {
if (log_lvl) {
console.log(`Also filtering by badge type code: ${qry_type_code}`);
}
results = await db_events.badge
.where('default_qry_string')
.equalsIgnoreCase(qry_str)
// .equals(ft_query)
// .and((badge) => badge.badge_type_code === qry_type_code && badge.event_id === $events_slct.event_id)
.sortBy('tmp_sort_2');
} else {
// .matches(/testing/i).toArray()
// .matches(/middle_text/i).toArray()
results = await db_events.badge
.where('full_name')
.startsWithIgnoreCase(qry_str)
// .startsWithIgnoreCase(qry_str)
// .where('default_qry_string')
// .equalsIgnoreCase(qry_str)
// .equals(ft_query)
// .and((badge) => badge.event_id === $events_slct.event_id)
.sortBy('tmp_sort_2');
}
// event_badge_id_li = results.map((badge) => badge.event_badge_id);
// } 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) {
let dq__where_type_id_val: string = `${link_to_type}_id_random`;
let dq__where_eq_id_val: string = 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('tmp_sort_2');
// event_badge_id_li = results.map((badge) => badge.event_badge_id);
// } 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.event_id}`,
$events_slct.event_badge_obj_li
);
}
} else if (!$events_slct?.event_badge_obj_li) {
$events_slct.event_badge_obj_li = [...results];
if (log_lvl) {
console.log(
`Session slct li stored version was not set for ID = ${$events_slct.event_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.event_id}`,
$events_slct.event_badge_obj_li
);
}
}
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;
// }
})
);
let trusted_access = $derived($ae_loc.trusted_access);
</script>
<section class="px-1 flex flex-col gap-1 items-center justify-center space-y-1">
<!-- event_badge_id_li?.length && -->
{#if $lq__event_badge_obj_li?.length}
{#if 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;
{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)}
{#each 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
@@ -251,25 +98,25 @@
<!-- Show a green checkmark -->
<span class="fas fa-check text-green-500"></span>
{#if $ae_loc.trusted_access}
{#if trusted_access}
<span class="print_count preset-tonal-warning px-1"
>{event_badge_obj.print_count}×</span
>{event_badge_obj.print_count}&times;</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>
<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}
@@ -315,4 +162,4 @@
<p>No results available to show.</p>
</div>
{/if}
</section>
</section>

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

@@ -164,6 +164,9 @@
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;
if (log_lvl) {
console.log(`Found badge: ${event_badge_obj.full_name}, id_random: ${event_badge_id_random}`);
}
tmp_event_badge_id_li.push(event_badge_id_random);
}
event_badge_id_li = tmp_event_badge_id_li;

7
src/routes/events/[event_id]/(badges)/badges/stats/+page.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Page for badge statistics
</script>
<h1 class="h1">Badge Stats</h1>
<p>This page will show statistics for badges.</p>

7
src/routes/events/[event_id]/(leads)/leads/+layout.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Basic layout for the leads module
</script>
<div class="leads-module">
<slot />
</div>

32
src/routes/events/[event_id]/(leads)/leads/+page.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts">
import { onMount } from 'svelte';
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import { events_slct } from '$lib/stores/ae_events_stores';
import { page } from '$app/stores';
let event_exhibit_obj_li = liveQuery(() => {
const event_id = $page.params.event_id;
if (!event_id) return [];
return db_events.exhibit.where({ event_id_random: event_id }).sortBy('name');
});
</script>
<section class="ae_events_leads_new h-full w-full flex flex-col items-center space-y-4">
<h1 class="h2">Exhibitor Leads</h1>
{#if $event_exhibit_obj_li && $event_exhibit_obj_li.length > 0}
<h2 class="h3">Select your exhibit from the list</h2>
<ul class="list">
{#each $event_exhibit_obj_li as exhibit_obj}
<li>
<a href="/events/{$page.params.event_id}/leads/exhibit/{exhibit_obj.id_random}">
{exhibit_obj.name} (Booth #{exhibit_obj.code})
</a>
</li>
{/each}
</ul>
{:else}
<p>No exhibits found for this event.</p>
{/if}
</section>

7
src/routes/events/[event_id]/(leads)/leads/[lead_id]/+page.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Page for viewing/editing a single lead
</script>
<h1 class="h1">Lead Details</h1>
<p>This page will show the details for a single lead.</p>

7
src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/+page.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
// Page for an exhibitor's leads
</script>
<h1 class="h1">Exhibitor Leads</h1>
<p>This page will list all leads for a specific exhibitor.</p>