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

feat(leads): implement reactive search for exhibitors and lead tracking

Browse Source 
- Implemented V3-style reactive search (Local Cache -> Remote Revalidation) for exhibitors.
- Standardized search fields to 'name' for Exhibits and 'event_badge_full_name' for Lead Tracking.
- Refactored Leads UI with standardized search components and grid layout.
- Updated event routing to exclusively use string-based IDs (Triple-ID pattern).
- Hardened 'ae_EventSession' type definitions to handle null values from V3 API/Dexie.
This commit is contained in:
Scott Idem
2026-01-28 12:05:42 -05:00
parent f145b4dcac
commit cc3a6b0f59
11 changed files with 937 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/lib/ae_events/ae_events__exhibit.ts
View File

@@ -104,7 +104,7 @@ async function _process_generic_props<T extends Record<string, any>>({
}
const randomIdKey = `${obj_type}_id_random`;
if (processed_obj[randomIdKey]) {
(processed_obj as any).id = processed_obj[randomIdKey];
(processed_obj as any).id = String(processed_obj[randomIdKey]);
}
const group = processed_obj.group ?? '0';
@@ -514,4 +514,179 @@ export async function download_export__event_exhibit_tracking({
auto_download: true,
log_lvl
});
}
// Updated 2026-01-28 to V3
export async function search__exhibit_tracking({
api_cfg,
event_exhibit_id,
fulltext_search_qry_str = null,
enabled = 'enabled',
hidden = 'all',
order_by_li = { created_on: 'DESC' },
limit = 100,
offset = 0,
log_lvl = 0
}: {
api_cfg: any;
event_exhibit_id: string;
fulltext_search_qry_str?: string | null;
enabled?: 'enabled' | 'all' | 'not_enabled';
hidden?: 'hidden' | 'all' | 'not_hidden';
order_by_li?: any;
limit?: number;
offset?: number;
log_lvl?: number;
}): Promise<ae_EventExhibitTracking[]> {
if (log_lvl) {
console.log(`*** search__exhibit_tracking() *** exhibit_id=${event_exhibit_id} ft=${fulltext_search_qry_str}`);
}
const search_query: any = {
q: '',
and: []
};
const params: key_val = {};
if (fulltext_search_qry_str && fulltext_search_qry_str.trim().length > 0) {
const qry = fulltext_search_qry_str.trim();
// Search across badge name and notes
search_query.and.push({ field: 'event_badge_full_name', op: 'like', value: `%${qry}%` });
params['lk_qry'] = { event_badge_full_name: qry };
}
if (enabled === 'enabled') search_query.and.push({ field: 'enable', op: 'eq', value: 1 });
else if (enabled === 'not_enabled') search_query.and.push({ field: 'enable', op: 'eq', value: 0 });
if (hidden === 'hidden') search_query.and.push({ field: 'hide', op: 'eq', value: 1 });
else if (hidden === 'not_hidden') search_query.and.push({ field: 'hide', op: 'eq', value: 0 });
try {
const result_get = await api.search_ae_obj_v3({
api_cfg,
obj_type: 'event_exhibit_tracking',
for_obj_type: 'event_exhibit',
for_obj_id: event_exhibit_id,
search_query,
params,
order_by_li,
limit,
offset,
log_lvl
});
let result_li: ae_EventExhibitTracking[] = [];
if (Array.isArray(result_get)) {
result_li = result_get;
} else if (result_get?.data && Array.isArray(result_get.data)) {
result_li = result_get.data;
}
if (result_li.length > 0) {
const processed_obj_li = await process_ae_obj__exhibit_tracking_props({
obj_li: result_li,
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'exhibit_tracking',
obj_li: processed_obj_li,
properties_to_save: properties_to_save_exhibit_tracking,
log_lvl
});
return processed_obj_li;
}
} catch (error: any) {
console.error('search__exhibit_tracking V3 Request failed.', error);
}
return [];
}
// Updated 2026-01-28 to V3
export async function search__exhibit({
api_cfg,
event_id,
fulltext_search_qry_str = null,
enabled = 'enabled',
hidden = 'not_hidden',
order_by_li = { name: 'ASC' },
limit = 100,
offset = 0,
log_lvl = 0
}: {
api_cfg: any;
event_id: string;
fulltext_search_qry_str?: string | null;
enabled?: 'enabled' | 'all' | 'not_enabled';
hidden?: 'hidden' | 'all' | 'not_hidden';
order_by_li?: any;
limit?: number;
offset?: number;
log_lvl?: number;
}): Promise<ae_EventExhibit[]> {
if (log_lvl) {
console.log(`*** search__exhibit() *** event_id=${event_id} ft=${fulltext_search_qry_str}`);
}
const search_query: any = {
q: '',
and: []
};
const params: key_val = {};
if (fulltext_search_qry_str && fulltext_search_qry_str.trim().length > 0) {
const qry = fulltext_search_qry_str.trim();
search_query.and.push({ field: 'name', op: 'like', value: `%${qry}%` });
params['lk_qry'] = { name: qry };
}
if (enabled === 'enabled') search_query.and.push({ field: 'enable', op: 'eq', value: 1 });
else if (enabled === 'not_enabled') search_query.and.push({ field: 'enable', op: 'eq', value: 0 });
if (hidden === 'hidden') search_query.and.push({ field: 'hide', op: 'eq', value: 1 });
else if (hidden === 'not_hidden') search_query.and.push({ field: 'hide', op: 'eq', value: 0 });
try {
const result_get = await api.search_ae_obj_v3({
api_cfg,
obj_type: 'event_exhibit',
for_obj_type: 'event',
for_obj_id: event_id,
search_query,
params,
order_by_li,
limit,
offset,
log_lvl
});
let result_li: ae_EventExhibit[] = [];
if (Array.isArray(result_get)) {
result_li = result_get;
} else if (result_get?.data && Array.isArray(result_get.data)) {
result_li = result_get.data;
}
if (result_li.length > 0) {
const processed_obj_li = await process_ae_obj__exhibit_props({
obj_li: result_li,
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'exhibit',
obj_li: processed_obj_li,
properties_to_save,
log_lvl
});
return processed_obj_li;
}
} catch (error: any) {
console.error('search__exhibit V3 Request failed.', error);
}
return [];
}

4
src/lib/ae_events_functions.ts
View File

@@ -9,6 +9,8 @@ import * as event_file from '$lib/ae_events/ae_events__event_file';
import {
load_ae_obj_id__exhibit,
load_ae_obj_li__exhibit,
search__exhibit,
search__exhibit_tracking,
load_ae_obj_id__exhibit_tracking,
load_ae_obj_li__exhibit_tracking,
create_ae_obj__exhibit_tracking,
@@ -68,8 +70,10 @@ const export_obj = {
// Event Exhibits
handle_load_ae_obj_id__exhibit: load_ae_obj_id__exhibit,
handle_load_ae_obj_li__exhibit: load_ae_obj_li__exhibit,
search__exhibit: search__exhibit,
handle_load_ae_obj_id__exhibit_tracking: load_ae_obj_id__exhibit_tracking,
handle_load_ae_obj_li__exhibit_tracking: load_ae_obj_li__exhibit_tracking,
search__exhibit_tracking: search__exhibit_tracking,
handle_create_ae_obj__exhibit_tracking: create_ae_obj__exhibit_tracking,
handle_update_ae_obj__exhibit_tracking: update_ae_obj__exhibit_tracking,
handle_download_export__event_exhibit_tracking: download_export__event_exhibit_tracking,

14
src/lib/stores/ae_events_stores.ts
View File

@@ -209,6 +209,18 @@ const events_local_data_struct: key_val = {
refresh_interval__tracking_li: 30000, // 30 seconds
// Standardized Search Pattern 2026-01-28
search_version: 0,
qry__remote_first: false,
qry__search_text: '',
qry__sort_order: 'name_asc',
// Standardized Search Pattern (Tracking) 2026-01-28
tracking__search_version: 0,
tracking__qry__remote_first: false,
tracking__qry__search_text: '',
tracking__qry__sort_order: 'created_desc',
// The entered_passcode is the exhibit booths shared passcode for staff. This is used to initially access the lead retrieval service.
entered_passcode: null,
@@ -696,4 +708,4 @@ const tmp__events_trig_kv: key_val = {};
// 'a-rand-id-6': Promise.resolve('This is a test promise.'),
// },
// };
export const events_trig_kv = writable(tmp__events_trig_kv);
export const events_trig_kv = writable(tmp__events_trig_kv);

26
src/lib/types/ae_types.ts
View File

@@ -550,22 +550,22 @@ export interface ae_EventSession extends ae_BaseObj {
event_session_id_random: string;
event_id: string;
event_id_random: string;
event_location_id?: string;
event_location_id_random?: string;
event_track_id?: string;
event_track_id_random?: string;
event_location_id?: string | null;
event_location_id_random?: string | null;
event_track_id?: string | null;
event_track_id_random?: string | null;
type_code?: string;
start_datetime?: string | Date;
end_datetime?: string | Date;
type_code?: string | null;
start_datetime?: string | Date | null;
end_datetime?: string | Date | null;
internal_use?: boolean;
record_audio?: boolean;
record_video?: boolean;
internal_use?: boolean | null;
record_audio?: boolean | null;
record_video?: boolean | null;
status?: number;
approve?: boolean;
ready?: boolean;
status?: number | null;
approve?: boolean | null;
ready?: boolean | null;
data_json?: any;

12
src/routes/events/+page.svelte
View File

@@ -127,7 +127,7 @@
{event_obj.name}
</strong>
<!-- <a
href="/events/{event_obj.event_id_random}"
href="/events/{event_obj.event_id}"
class="btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500"
>
{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
@@ -157,28 +157,28 @@
{#if $ae_loc.authenticated_access}
<a
data-sveltekit-reload
href="/events/{event_obj.event_id_random}"
href="/events/{event_obj.event_id}"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
title="Presentation Management for {event_obj.name}"
>
Pres Mgmt
</a>
<a
href="/events/{event_obj.event_id_random}/badges"
href="/events/{event_obj.event_id}/badges"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
title="Badge Management for {event_obj.name}"
>
Badges
</a>
<a
href="/events/{event_obj.event_id_random}/leads"
href="/events/{event_obj.event_id}/leads"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
title="Exhibitor Leads for {event_obj.name}"
>
Leads
</a>
<a
href="/events/{event_obj.event_id_random}/launcher"
href="/events/{event_obj.event_id}/launcher"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
title="Event Launcher for {event_obj.name}"
>
@@ -188,7 +188,7 @@
{#if $ae_loc.trusted_access}
<a
data-sveltekit-reload
href="/event/{event_obj.event_id_random}"
href="/event/{event_obj.event_id}"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500"
title="Legacy Presentation Management System (Flask/Svelte) for {event_obj.name}"
>

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

@@ -144,7 +144,7 @@
placeholder="name, email"
id="badge_fulltext_search_qry_str"
bind:value={$events_loc.badges.fulltext_search_qry_str}
suggest="off"
autocomplete="off"
data-lpignore="true"
class="input text-lg font-mono grow transition-all"
onkeyup={(e) => {

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

@@ -1,32 +1,193 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount, untrack } 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 { events_loc, events_sess, events_slct } from '$lib/stores/ae_events_stores';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { page } from '$app/state';
import { events_func } from '$lib/ae_events_functions';
import { LoaderCircle, Store } from 'lucide-svelte';
import Comp_exhibit_search from './ae_comp__exhibit_search.svelte';
let event_exhibit_obj_li = liveQuery(() => {
// *** Initialization & Store Guard ***
if ($events_loc.leads) {
if (typeof $events_loc.leads.search_version === 'undefined') $events_loc.leads.search_version = 0;
if (typeof $events_loc.leads.qry__remote_first === 'undefined') $events_loc.leads.qry__remote_first = false;
if (typeof $events_loc.leads.qry__search_text === 'undefined') $events_loc.leads.qry__search_text = '';
if (typeof $events_loc.leads.qry__sort_order === 'undefined') $events_loc.leads.qry__sort_order = 'name_asc';
}
let exhibit_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = '';
let log_lvl = 1;
// Stable LiveQuery Pattern
let lq__event_exhibit_obj_li = $derived.by(() => {
const ids = exhibit_id_li;
const event_id = page.params.event_id;
if (!event_id) return [];
return db_events.exhibit.where({ event_id_random: event_id }).sortBy('name');
return liveQuery(async () => {
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
const results = await db_events.exhibit.bulkGet(ids);
return results.filter(item => item !== undefined);
}
// SCENARIO 2: Fallback broad search
if (event_id && !$events_loc.leads.qry__search_text) {
return await db_events.exhibit
.where('event_id_random')
.equals(event_id)
.sortBy('name');
}
return [];
});
});
// Standardized Reactive Search Pattern
let search_params = $derived({
v: $events_loc.leads.search_version,
str: ($events_loc.leads.qry__search_text ?? '').toLowerCase().trim(),
sort: $events_loc.leads.qry__sort_order,
event_id: page.params.event_id,
remote_first: $events_loc.leads.qry__remote_first
});
$effect(() => {
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
untrack(() => {
handle_search_refresh(params);
});
}, 300);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const event_id = params.event_id;
const remote_first = params.remote_first;
if (!event_id) return;
untrack(() => {
$events_sess.leads.submit_status__search = 'searching';
});
const qry_str = params.str;
// 1. Local Search
if (!remote_first) {
try {
let local_results = await db_events.exhibit
.where('event_id_random')
.equals(event_id)
.filter(exhibit => {
if (qry_str) {
const name = (exhibit.name ?? '').toLowerCase();
const code = (exhibit.code ?? '').toLowerCase();
if (!name.includes(qry_str) && !code.includes(qry_str)) return false;
}
return true;
})
.toArray();
local_results.sort((a, b) => {
switch (params.sort) {
case 'name_asc': return (a.name ?? '').localeCompare(b.name ?? '');
case 'name_desc': return (b.name ?? '').localeCompare(a.name ?? '');
case 'code_asc': return (a.code ?? '').localeCompare(b.code ?? '');
case 'code_desc': return (b.code ?? '').localeCompare(a.code ?? '');
case 'updated_desc': return new Date(b.updated_on || 0).getTime() - new Date(a.updated_on || 0).getTime();
default: return (a.name ?? '').localeCompare(b.name ?? '');
}
});
const local_ids = local_results.map(e => String(e.id || e.event_exhibit_id_random)).filter(Boolean);
if (current_search_id === last_search_id) {
untrack(() => {
exhibit_id_li = local_ids;
});
}
} catch (e) {
console.warn('Exhibit Local Search failed.', e);
}
}
// 2. Remote Revalidation
try {
let order_by_li: any = {};
switch (params.sort) {
case 'name_asc': order_by_li = { name: 'ASC' }; break;
case 'name_desc': order_by_li = { name: 'DESC' }; break;
case 'code_asc': order_by_li = { code: 'ASC' }; break;
case 'code_desc': order_by_li = { code: 'DESC' }; break;
case 'updated_desc': order_by_li = { updated_on: 'DESC' }; break;
default: order_by_li = { name: 'ASC' };
}
const results = await events_func.search__exhibit({
api_cfg: $ae_api,
event_id: event_id,
fulltext_search_qry_str: qry_str || null,
order_by_li,
limit: 100
});
if (current_search_id === last_search_id) {
const api_ids = results.map((e: any) => String(e.id || e.event_exhibit_id_random)).filter(Boolean);
untrack(() => {
exhibit_id_li = api_ids;
$events_sess.leads.submit_status__search = 'done';
});
}
} catch (error) {
if (current_search_id === last_search_id) {
untrack(() => {
$events_sess.leads.submit_status__search = 'error';
});
}
}
}
</script>
<section class="ae_events_leads_new h-full w-full flex flex-col items-center space-y-4">
<section class="ae_events_leads_new h-full w-full flex flex-col items-center space-y-4 p-4">
<h1 class="h2">Exhibitor Leads</h1>
{#if $event_exhibit_obj_li && $event_exhibit_obj_li.length > 0}
<Comp_exhibit_search
event_id={page.params.event_id ?? ''}
/>
{#if $events_sess.leads.submit_status__search === 'searching' && exhibit_id_li.length === 0}
<div class="flex flex-col items-center justify-center p-10 opacity-50 text-center">
<LoaderCircle size="3em" class="animate-spin mb-4 mx-auto" />
<p class="text-xl">Searching exhibits...</p>
</div>
{:else if $lq__event_exhibit_obj_li && $lq__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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-6xl">
{#each $lq__event_exhibit_obj_li as exhibit_obj}
<a
href="/events/{page.params.event_id}/leads/exhibit/{exhibit_obj.id_random}"
class="card card-hover p-4 flex flex-col items-center justify-center text-center space-y-2 preset-tonal"
>
<Store size="2em" />
<div class="font-bold text-lg">{exhibit_obj.name}</div>
<div class="badge preset-filled-surface-500">Booth #{exhibit_obj.code}</div>
</a>
{/each}
</ul>
</div>
{:else}
<p>No exhibits found for this event.</p>
<p class="opacity-50 mt-10">No exhibits found matching your search.</p>
{/if}
</section>
</section>

123
src/routes/events/[event_id]/(leads)/leads/ae_comp__exhibit_search.svelte Normal file
View File

@@ -0,0 +1,123 @@
<script lang="ts">
interface Props {
event_id: string;
log_lvl?: number;
}
let {
event_id,
log_lvl = 0
}: Props = $props();
// *** Import other supporting libraries
import {
Library,
RemoveFormatting,
Search,
LoaderCircle
} from 'lucide-svelte';
import {
ae_loc
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess
} from '$lib/stores/ae_events_stores';
function handle_search_trigger() {
if ($events_loc.leads.search_version === undefined) {
$events_loc.leads.search_version = 0;
}
$events_loc.leads.search_version++;
}
function preventDefault<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
</script>
<div class="ae_group filters_and_search flex flex-col items-center justify-center gap-2 w-full">
<form
onsubmit={preventDefault(() => {
handle_search_trigger();
})}
autocomplete="off"
class="search_form flex flex-row flex-wrap gap-1 items-center justify-center w-full max-w-7xl px-2 md:px-12 py-2 preset-tonal-success rounded-lg shadow-sm"
>
<div class="flex flex-col md:flex-row items-center justify-center gap-1 grow">
<input
type="search"
placeholder="Exhibitor name or code..."
id="exhibit_fulltext_search_qry_str"
bind:value={$events_loc.leads.qry__search_text}
autocomplete="off"
data-lpignore="true"
class="input text-lg font-mono grow transition-all"
onkeyup={(e) => {
if (e.key === 'Enter') {
handle_search_trigger();
}
}}
title="Search by name or code. Press Enter."
/>
<select
bind:value={$events_loc.leads.qry__sort_order}
onchange={handle_search_trigger}
class="select select-sm text-xs px-1 max-w-fit"
>
<option value="name_asc">Name ASC</option>
<option value="name_desc">Name DESC</option>
<option value="code_asc">Booth # ASC</option>
<option value="code_desc">Booth # DESC</option>
<option value="updated_desc">Updated DESC</option>
</select>
</div>
<div class="flex flex-row items-center justify-center gap-1">
<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"
>
{#if $events_sess.leads.submit_status__search === 'searching'}
<LoaderCircle class="animate-spin mx-1" />
{:else}
<Search class="mx-1" />
{/if}
Search
</button>
<button
type="button"
class:hidden={!$events_loc.leads.qry__search_text}
onclick={() => {
$events_loc.leads.qry__search_text = '';
handle_search_trigger();
}}
class="btn btn-sm text-xs preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 transition-all"
title="Clear search query"
>
<RemoveFormatting size="1.25em" />
<span class="hidden md:inline"> Clear </span>
</button>
</div>
</form>
<div class="flex flex-row flex-wrap items-center justify-center gap-2 opacity-70 hover:opacity-100 transition-all">
{#if $ae_loc.edit_mode}
<label class="flex items-center gap-1 cursor-pointer bg-surface-200-800 px-2 py-1 rounded-token text-xs font-semibold">
<span> Remote First </span>
<input
type="checkbox"
bind:checked={$events_loc.leads.qry__remote_first}
onchange={handle_search_trigger}
class="checkbox checkbox-sm"
/>
</label>
{/if}
</div>
</div>

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

@@ -1,7 +1,211 @@
<script lang="ts">
// Page for an exhibitor's leads
import { onMount, untrack } from 'svelte';
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import { events_loc, events_sess, events_slct } from '$lib/stores/ae_events_stores';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { page } from '$app/state';
import { events_func } from '$lib/ae_events_functions';
import { LoaderCircle, UserPlus, Download } from 'lucide-svelte';
import Comp_exhibit_tracking_search from './ae_comp__exhibit_tracking_search.svelte';
import Comp_exhibit_tracking_obj_li from './ae_comp__exhibit_tracking_obj_li.svelte';
// *** Initialization & Store Guard ***
if ($events_loc.leads) {
if (typeof $events_loc.leads.tracking__search_version === 'undefined') $events_loc.leads.tracking__search_version = 0;
if (typeof $events_loc.leads.tracking__qry__remote_first === 'undefined') $events_loc.leads.tracking__qry__remote_first = false;
if (typeof $events_loc.leads.tracking__qry__search_text === 'undefined') $events_loc.leads.tracking__qry__search_text = '';
if (typeof $events_loc.leads.tracking__qry__sort_order === 'undefined') $events_loc.leads.tracking__qry__sort_order = 'created_desc';
}
let tracking_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = '';
let log_lvl = 1;
// Stable LiveQuery Pattern
let lq__event_exhibit_tracking_obj_li = $derived.by(() => {
const ids = tracking_id_li;
const exhibit_id = page.params.exhibit_id;
return liveQuery(async () => {
if (Array.isArray(ids) && ids.length > 0) {
const results = await db_events.exhibit_tracking.bulkGet(ids);
return results.filter(item => item !== undefined);
}
if (exhibit_id && !$events_loc.leads.tracking__qry__search_text) {
return await db_events.exhibit_tracking
.where('event_exhibit_id_random')
.equals(exhibit_id)
.reverse()
.sortBy('created_on');
}
return [];
});
});
// Exhibit Info
let lq__exhibit_obj = liveQuery(() => {
const exhibit_id = page.params.exhibit_id;
if (!exhibit_id) return null;
return db_events.exhibit.get(exhibit_id);
});
// Standardized Reactive Search Pattern
let search_params = $derived({
v: $events_loc.leads.tracking__search_version,
str: ($events_loc.leads.tracking__qry__search_text ?? '').toLowerCase().trim(),
sort: $events_loc.leads.tracking__qry__sort_order,
exhibit_id: page.params.exhibit_id,
remote_first: $events_loc.leads.tracking__qry__remote_first
});
$effect(() => {
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
untrack(() => {
handle_search_refresh(params);
});
}, 300);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const exhibit_id = params.exhibit_id;
const remote_first = params.remote_first;
if (!exhibit_id) return;
untrack(() => {
$events_sess.leads.submit_status__search = 'searching';
});
const qry_str = params.str;
// 1. Local Search
if (!remote_first) {
try {
let local_results = await db_events.exhibit_tracking
.where('event_exhibit_id_random')
.equals(exhibit_id)
.filter(tracking => {
if (qry_str) {
const name = (tracking.event_badge_full_name ?? '').toLowerCase();
const email = (tracking.event_badge_email ?? '').toLowerCase();
const notes = (tracking.exhibitor_notes ?? '').toLowerCase();
if (!name.includes(qry_str) && !email.includes(qry_str) && !notes.includes(qry_str)) return false;
}
return true;
})
.toArray();
local_results.sort((a, b) => {
switch (params.sort) {
case 'name_asc': return (a.event_badge_full_name ?? '').localeCompare(b.event_badge_full_name ?? '');
case 'name_desc': return (b.event_badge_full_name ?? '').localeCompare(a.event_badge_full_name ?? '');
case 'created_asc': return new Date(a.created_on || 0).getTime() - new Date(b.created_on || 0).getTime();
case 'created_desc': return new Date(b.created_on || 0).getTime() - new Date(a.created_on || 0).getTime();
default: return new Date(b.created_on || 0).getTime() - new Date(a.created_on || 0).getTime();
}
});
const local_ids = local_results.map(e => String(e.id || e.event_exhibit_tracking_id_random)).filter(Boolean);
if (current_search_id === last_search_id) {
untrack(() => {
tracking_id_li = local_ids;
});
}
} catch (e) {
console.warn('Exhibit Tracking Local Search failed.', e);
}
}
// 2. Remote Revalidation
try {
let order_by_li: any = {};
switch (params.sort) {
case 'name_asc': order_by_li = { event_badge_full_name: 'ASC' }; break;
case 'name_desc': order_by_li = { event_badge_full_name: 'DESC' }; break;
case 'created_asc': order_by_li = { created_on: 'ASC' }; break;
case 'created_desc': order_by_li = { created_on: 'DESC' }; break;
default: order_by_li = { created_on: 'DESC' };
}
const results = await events_func.search__exhibit_tracking({
api_cfg: $ae_api,
event_exhibit_id: exhibit_id,
fulltext_search_qry_str: qry_str || null,
order_by_li,
limit: 150
});
if (current_search_id === last_search_id) {
const api_ids = results.map((e: any) => String(e.id || e.event_exhibit_tracking_id_random)).filter(Boolean);
untrack(() => {
tracking_id_li = api_ids;
$events_sess.leads.submit_status__search = 'done';
});
}
} catch (error) {
if (current_search_id === last_search_id) {
untrack(() => {
$events_sess.leads.submit_status__search = 'error';
});
}
}
}
async function handle_export() {
const exhibit_id = page.params.exhibit_id;
if (!exhibit_id) return;
await events_func.handle_download_export__event_exhibit_tracking({
api_cfg: $ae_api,
exhibit_id: exhibit_id,
log_lvl: 1
});
}
</script>
<h1 class="h1">Exhibitor Leads</h1>
<section class="ae_events_leads_tracking_new h-full w-full flex flex-col items-center space-y-4 p-4">
<div class="w-full max-w-6xl flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-center md:text-left">
<h1 class="h2">Leads for {$lq__exhibit_obj?.name ?? 'Exhibitor'}</h1>
<p class="opacity-50">Booth #{$lq__exhibit_obj?.code ?? '...'}</p>
</div>
<div class="flex gap-2">
<button class="btn preset-tonal-secondary" onclick={handle_export}>
<Download size="1.25em" class="mr-2" /> Export CSV
</button>
<a href={`/events/${page.params.event_id}/leads/exhibit/${page.params.exhibit_id}/scan`} class="btn preset-filled-primary">
<UserPlus size="1.25em" class="mr-2" /> Add Lead
</a>
</div>
</div>
<p>This page will list all leads for a specific exhibitor.</p>
<Comp_exhibit_tracking_search
exhibit_id={page.params.exhibit_id ?? ''}
/>
{#if $events_sess.leads.submit_status__search === 'searching' && tracking_id_li.length === 0}
<div class="flex flex-col items-center justify-center p-10 opacity-50 text-center">
<LoaderCircle size="3em" class="animate-spin mb-4 mx-auto" />
<p class="text-xl">Searching leads...</p>
</div>
{:else}
<Comp_exhibit_tracking_obj_li
lq__event_exhibit_tracking_obj_li={lq__event_exhibit_tracking_obj_li}
/>
{/if}
</section>

94
src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_obj_li.svelte Normal file
View File

@@ -0,0 +1,94 @@
<script lang="ts">
interface Props {
lq__event_exhibit_tracking_obj_li: any;
log_lvl?: number;
}
let { lq__event_exhibit_tracking_obj_li, log_lvl = 0 }: Props = $props();
import {
User,
Mail,
MapPin,
Clock,
FileText,
ChevronRight
} from 'lucide-svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { page } from '$app/state';
// Helper to format date
function format_date(date_str: string) {
if (!date_str) return '';
return new Date(date_str).toLocaleString();
}
</script>
<div class="ae_comp__exhibit_tracking_obj_li w-full max-w-6xl mx-auto px-4">
{#if !$lq__event_exhibit_tracking_obj_li}
<div class="flex justify-center p-10">
<span class="fas fa-spinner fa-spin fa-2x opacity-20"></span>
</div>
{:else if $lq__event_exhibit_tracking_obj_li.length === 0}
<div class="card p-8 text-center variant-soft-surface">
<p class="text-xl opacity-50">No leads found yet.</p>
<p class="text-sm opacity-50 mt-2">Start scanning badges to collect leads!</p>
</div>
{:else}
<div class="space-y-4">
<div class="flex justify-between items-center px-2">
<span class="text-sm font-semibold opacity-50">
{$lq__event_exhibit_tracking_obj_li.length} Leads Collected
</span>
</div>
<div class="grid grid-cols-1 gap-4">
{#each $lq__event_exhibit_tracking_obj_li as tracking_obj}
<a
href={`/events/${page.params.event_id}/leads/exhibit/${tracking_obj.event_exhibit_id_random}/lead/${tracking_obj.id_random || tracking_obj.event_exhibit_tracking_id_random}`}
class="card card-hover p-4 variant-filled-surface border-l-4 border-primary-500 flex flex-col md:flex-row gap-4 items-start md:items-center"
>
<div class="flex-grow space-y-1">
<div class="flex items-center gap-2">
<User size="1.25em" class="text-primary-500" />
<span class="text-xl font-bold">
{tracking_obj.event_badge_full_name || tracking_obj.event_badge_full_name_override || 'Unknown Attendee'}
</span>
</div>
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm opacity-70">
{#if tracking_obj.event_badge_email}
<div class="flex items-center gap-1">
<Mail size="1em" />
{tracking_obj.event_badge_email}
</div>
{/if}
{#if tracking_obj.event_badge_affiliations}
<div class="flex items-center gap-1">
<MapPin size="1em" />
{tracking_obj.event_badge_affiliations}
</div>
{/if}
<div class="flex items-center gap-1">
<Clock size="1em" />
{format_date(tracking_obj.created_on)}
</div>
</div>
{#if tracking_obj.exhibitor_notes}
<div class="mt-2 p-2 bg-surface-100-900 rounded text-sm italic border-l-2 border-surface-300-700">
<FileText size="1em" class="inline mr-1" />
{ae_util.shorten_string({ string: tracking_obj.exhibitor_notes, max_length: 100 })}
</div>
{/if}
</div>
<div class="flex-shrink-0 self-center hidden md:block">
<ChevronRight size="2em" class="opacity-20" />
</div>
</a>
{/each}
</div>
</div>
{/if}
</div>

122
src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_search.svelte Normal file
View File

@@ -0,0 +1,122 @@
<script lang="ts">
interface Props {
exhibit_id: string;
log_lvl?: number;
}
let {
exhibit_id,
log_lvl = 0
}: Props = $props();
// *** Import other supporting libraries
import {
Library,
RemoveFormatting,
Search,
LoaderCircle
} from 'lucide-svelte';
import {
ae_loc
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess
} from '$lib/stores/ae_events_stores';
function handle_search_trigger() {
if ($events_loc.leads.tracking__search_version === undefined) {
$events_loc.leads.tracking__search_version = 0;
}
$events_loc.leads.tracking__search_version++;
}
function preventDefault<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
</script>
<div class="ae_group filters_and_search flex flex-col items-center justify-center gap-2 w-full">
<form
onsubmit={preventDefault(() => {
handle_search_trigger();
})}
autocomplete="off"
class="search_form flex flex-row flex-wrap gap-1 items-center justify-center w-full max-w-7xl px-2 md:px-12 py-2 preset-tonal-primary rounded-lg shadow-sm"
>
<div class="flex flex-col md:flex-row items-center justify-center gap-1 grow">
<input
type="search"
placeholder="Search leads (name, email, notes)..."
id="exhibit_tracking_fulltext_search_qry_str"
bind:value={$events_loc.leads.tracking__qry__search_text}
autocomplete="off"
data-lpignore="true"
class="input text-lg font-mono grow transition-all"
onkeyup={(e) => {
if (e.key === 'Enter') {
handle_search_trigger();
}
}}
title="Search by name, email or notes. Press Enter."
/>
<select
bind:value={$events_loc.leads.tracking__qry__sort_order}
onchange={handle_search_trigger}
class="select select-sm text-xs px-1 max-w-fit"
>
<option value="created_desc">Newest First</option>
<option value="created_asc">Oldest First</option>
<option value="name_asc">Name ASC</option>
<option value="name_desc">Name DESC</option>
</select>
</div>
<div class="flex flex-row items-center justify-center gap-1">
<button
type="submit"
class="btn btn-lg preset-tonal-primary border border-primary-500 hover:preset-tonal-primary text-2xl font-bold w-48 transition-all"
>
{#if $events_sess.leads.submit_status__search === 'searching'}
<LoaderCircle class="animate-spin mx-1" />
{:else}
<Search class="mx-1" />
{/if}
Search
</button>
<button
type="button"
class:hidden={!$events_loc.leads.tracking__qry__search_text}
onclick={() => {
$events_loc.leads.tracking__qry__search_text = '';
handle_search_trigger();
}}
class="btn btn-sm text-xs preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 transition-all"
title="Clear search query"
>
<RemoveFormatting size="1.25em" />
<span class="hidden md:inline"> Clear </span>
</button>
</div>
</form>
<div class="flex flex-row flex-wrap items-center justify-center gap-2 opacity-70 hover:opacity-100 transition-all">
{#if $ae_loc.edit_mode}
<label class="flex items-center gap-1 cursor-pointer bg-surface-200-800 px-2 py-1 rounded-token text-xs font-semibold">
<span> Remote First </span>
<input
type="checkbox"
bind:checked={$events_loc.leads.tracking__qry__remote_first}
onchange={handle_search_trigger}
class="checkbox checkbox-sm"
/>
</label>
{/if}
</div>
</div>