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

refactor(sessions): standardize reactive search and fix list layout

Browse Source 
- Migrated Session search to the debounced  pattern with Search Guards and shared observables.
- Implemented 'Remote First' toggle support (Edit Mode only) for background-only revalidation.
- Resolved 'each_key_duplicate' crash and fixed icon scaling issues in the session list.
- Restored missing session alert visibility for managers.
- Standardized store initialization to prevent reactivity loops.
This commit is contained in:
Scott Idem
2026-01-27 18:41:19 -05:00
parent 8680ad89c1
commit 811afb2fd7
4 changed files with 496 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -247,6 +247,10 @@ const events_local_data_struct: key_val = {
qry__files_offset_seconds: null, qry__files_offset_seconds: null,
qry__files_sort: 'created_on', qry__files_sort: 'created_on',
// New additions for search stabilization (Standardized Pattern 2026-01-27)
search_version: 0,
qry__remote_first: false,
qry_and__file_count: true, // Essentially it should be greater than 0 qry_and__file_count: true, // Essentially it should be greater than 0
save_search_text: true, save_search_text: true,

615
src/routes/events/[event_id]/+page.svelte
View File

@@ -5,20 +5,17 @@
log_lvl?: number; log_lvl?: number;
} }
let { data, log_lvl = 0 }: Props = $props(); let { data, log_lvl = $bindable(0) }: Props = $props();
// *** Import Svelte specific // *** Import Svelte specific
import { untrack } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
// import { goto, invalidate, pushState, replaceState } from '$app/navigation';
import type { key_val } from '$lib/stores/ae_stores'; import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
// import Comp_event_session_obj_li from '../ae_comp__event_session_obj_li.svelte';
import Comp_event_session_obj_li_wrapper from '../ae_comp__event_session_obj_li_wrapper.svelte'; import Comp_event_session_obj_li_wrapper from '../ae_comp__event_session_obj_li_wrapper.svelte';
import { liveQuery } from 'dexie'; import { liveQuery } from 'dexie';
// import { core_func } from '$lib/ae_core_functions';
import { db_events } from '$lib/ae_events/db_events'; import { db_events } from '$lib/ae_events/db_events';
import { import {
ae_snip, ae_snip,
@@ -42,42 +39,28 @@
import Event_page_menu from './event_page_menu.svelte'; import Event_page_menu from './event_page_menu.svelte';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
// $slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id]; let ae_acct = data[$slct.account_id];
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
if (log_lvl) {
console.log(`event_id layout A: ${data.params.event_id}`);
console.log(`event_id layout B: ${ae_acct.slct.event_id}`);
console.log(`event_id layout C: ${$events_slct.event_id}`);
}
let event_id = data.params.event_id; let event_id = data.params.event_id;
$events_slct.event_id = ae_acct.slct.event_id; $events_slct.event_id = ae_acct.slct.event_id;
// $events_slct.event_device_id = null;
// $events_slct.event_location_id = null; // *** Initialization & Store Guard ***
// $events_slct.event_session_id = null; if ($events_loc.pres_mgmt) {
if (typeof $events_loc.pres_mgmt.search_version === 'undefined') $events_loc.pres_mgmt.search_version = 0;
if (typeof $events_loc.pres_mgmt.qry__remote_first === 'undefined') $events_loc.pres_mgmt.qry__remote_first = false;
if (typeof $events_loc.pres_mgmt.fulltext_search_qry_str === 'undefined') $events_loc.pres_mgmt.fulltext_search_qry_str = '';
if (typeof $events_loc.pres_mgmt.location_name_qry_str === 'undefined') $events_loc.pres_mgmt.location_name_qry_str = '';
}
let lq__event_obj = $derived( let lq__event_obj = $derived(
liveQuery(async () => { liveQuery(async () => {
if (log_lvl) { if (log_lvl) console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`); return await db_events.event.get($events_slct?.event_id ?? '');
}
let results = await db_events.event.get($events_slct?.event_id ?? '');
return results;
}) })
); );
// JSON formatted configuration options for an event, and specifically for the presentation management module. // JSON formatted configuration options for an event, and specifically for the presentation management module.
$effect(() => { $effect(() => {
if ($lq__event_obj?.mod_pres_mgmt_json) { if ($lq__event_obj?.mod_pres_mgmt_json) {
// if (log_lvl) {
// console.log(`*** Event Pres Mgmt JSON *** pres_mgmt_cfg_local`, $events_loc.pres_mgmt);
// }
// $events_loc.pres_mgmt =
events_func.sync_config__event_pres_mgmt({ events_func.sync_config__event_pres_mgmt({
pres_mgmt_cfg_remote: $lq__event_obj.mod_pres_mgmt_json, pres_mgmt_cfg_remote: $lq__event_obj.mod_pres_mgmt_json,
pres_mgmt_cfg_local: $events_loc.pres_mgmt, pres_mgmt_cfg_local: $events_loc.pres_mgmt,
@@ -86,33 +69,37 @@
} }
}); });
let event_session_id_random_li: Array<string> = $state([]); let event_session_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = ''; // Search Guard Key
// OMG THIS WORKS!!! 2024-09-17 // Stable LiveQuery Pattern (Aether UI V3)
// Using the $: seems to have fixed it along with the async await? let lq__event_session_obj_li = $derived.by(() => {
// let lq__event_session_obj_li = $derived(liveQuery(async () => { const ids = event_session_id_li;
// // console.log(`*** LiveQuery: lq__event_session_obj_li *** event_session_id_random_li`, $state.snapshot(event_session_id_random_li)); const event_id = $events_slct?.event_id;
// // if (!event_session_id_random_li) {
// // // return []; return liveQuery(async () => {
// // return; // SCENARIO 1: Specific IDs provided (Search Results)
// // } if (Array.isArray(ids) && ids.length > 0) {
// if (event_session_id_random_li.length) { if (log_lvl) console.log(`Session Page LQ: bulkGet ${ids.length} IDs`);
// console.log(`*** LiveQuery: lq__event_session_obj_li *** time to bulkGet`, $state.snapshot(event_session_id_random_li)); const results = await db_events.session.bulkGet(ids);
// let results = await db_events.session return results.filter(item => item !== undefined);
// .bulkGet(event_session_id_random_li); }
// SCENARIO 2: Fallback broad search (Only if no active filters)
if (event_id && !$events_loc.pres_mgmt.fulltext_search_qry_str && !$events_loc.pres_mgmt.location_name_qry_str) {
if (log_lvl) console.log(`Session Page LQ: Fallback search for event: ${event_id}`);
return await db_events.session
.where('event_id_random')
.equals(event_id)
.limit(50)
.sortBy('name');
}
// return results; return [];
// } else { });
// let results = await db_events.session });
// .where('event_id')
// .equals($events_slct?.event_id ?? '') // null or undefined does not reset things like '' does
// .reverse()
// .sortBy('name');
// return results;
// }
// }));
let lq__event_location_obj_li = $derived( let lq__event_location_obj_li = $derived(
liveQuery(async () => { liveQuery(async () => {
@@ -124,28 +111,144 @@
}) })
); );
// let load_obj_li_results: Promise<any>|key_val; // Standardized Reactive Search Pattern (Aether UI V3)
let search_submit_results: Promise<any> | key_val; let search_params = $derived({
v: $events_loc.pres_mgmt.search_version,
str: ($events_loc.pres_mgmt.fulltext_search_qry_str ?? '').toLowerCase().trim(),
location: $events_loc.pres_mgmt.location_name_qry_str,
event_id: $events_slct?.event_id,
remote_first: $events_loc.pres_mgmt.qry__remote_first
});
let ae_tmp: key_val = {}; $effect(() => {
let ae_triggers: key_val = {}; 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) {
// 1. Guard
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 (log_lvl) console.log(`[Session Search #${current_search_id}] Refreshing (remote=${remote_first}, event=${event_id}, str=${params.str})...`);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'loading';
});
const qry_str = params.str;
const location_name = params.location;
// 2. FAST PATH: Local IDB Search
if (!remote_first) {
try {
if (event_id) {
let local_results = await db_events.session
.where('event_id_random')
.equals(event_id)
.filter(session => {
if (location_name && session.event_location_name !== location_name) return false;
if (qry_str) {
const name = (session.name ?? '').toLowerCase();
const code = (session.code ?? '').toLowerCase();
const description = (session.description ?? '').toLowerCase();
const qry_string = (session.default_qry_str ?? '').toLowerCase();
const match = name.includes(qry_str) ||
code.includes(qry_str) ||
description.includes(qry_str) ||
qry_string.includes(qry_str);
if (!match) return false;
}
return true;
})
.toArray();
local_results.sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''));
const local_ids = local_results.map(s => s.id || s.event_session_id_random).filter(Boolean);
if (current_search_id === last_search_id) {
if (log_lvl) console.log(`[Session Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`);
untrack(() => {
event_session_id_li = local_ids;
if (local_ids.length > 0) $events_sess.pres_mgmt.status_qry__search = 'done';
});
}
}
} catch (e) {
if (log_lvl) console.warn('Session Fast Path failed.', e);
}
} else {
untrack(() => {
event_session_id_li = [];
});
}
// 3. REVALIDATE: API Request
try {
const results = await events_func.search__event_session({
api_cfg: $ae_api,
event_id: event_id,
fulltext_search_qry_str: qry_str || null,
like_search_qry_str: qry_str || null,
location_name: location_name || null,
enabled: $events_loc.pres_mgmt.qry_enabled ?? 'enabled',
hidden: $events_loc.pres_mgmt.qry_hidden ?? 'not_hidden',
limit: $events_loc.pres_mgmt.qry_limit__sessions ?? 100,
try_cache: true,
log_lvl: 0
});
if (current_search_id === last_search_id) {
const api_results = results || [];
const api_ids = api_results.map((s: any) => s.id || s.event_session_id_random).filter(Boolean);
untrack(() => {
$events_slct.event_session_obj_li = api_results;
event_session_id_li = api_ids;
$events_sess.pres_mgmt.status_qry__search = 'done';
});
if (log_lvl) console.log(`[Session Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`);
}
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Session revalidation failed:', error);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'error';
});
}
}
}
if ($events_loc.pres_mgmt?.save_search_text && $events_loc.pres_mgmt?.saved_search__session) { if ($events_loc.pres_mgmt?.save_search_text && $events_loc.pres_mgmt?.saved_search__session) {
$events_sess.pres_mgmt.fulltext_search_qry_str = $events_loc.pres_mgmt.fulltext_search_qry_str =
$events_loc.pres_mgmt.saved_search__session; $events_loc.pres_mgmt.saved_search__session;
} }
if ( if (
$events_loc.pres_mgmt?.save_search_text && $events_loc.pres_mgmt?.save_search_text &&
$events_loc.pres_mgmt?.saved_search__session_location_name $events_loc.pres_mgmt?.saved_search__session_location_name
) { ) {
$events_sess.pres_mgmt.location_name_qry_str = $events_loc.pres_mgmt.location_name_qry_str =
$events_loc.pres_mgmt.saved_search__session_location_name; $events_loc.pres_mgmt.saved_search__session_location_name;
} }
// *** Functions and Logic function handle_search_trigger() {
if (browser) { $events_loc.pres_mgmt.search_version++;
// console.log('Events Event [event_id]: +page.svelte');
$events_trigger = 'load__event_session_obj_li';
} }
function preventDefault<T extends Event>(fn: (event: T) => void) { function preventDefault<T extends Event>(fn: (event: T) => void) {
@@ -154,241 +257,6 @@
fn(event); fn(event);
}; };
} }
// Updated 2024-06-12 late
$effect(() => {
if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id) {
console.log(
`load__event_session_obj_li() $events_slct.event_id=${$events_slct.event_id}`
);
log_lvl = 1;
$events_trigger = null;
if ($events_loc.pres_mgmt.save_search_text) {
if (log_lvl) {
console.log(
`*** Save search text *** ${$events_loc.pres_mgmt.save_search_text}`
);
}
$events_loc.pres_mgmt.saved_search__session =
$events_sess.pres_mgmt.fulltext_search_qry_str;
$events_loc.pres_mgmt.saved_search__session_location_name =
$events_sess.pres_mgmt.location_name_qry_str;
}
if ($events_sess.pres_mgmt.fulltext_search_qry_str?.length > 2) {
console.log('*** Search string is valid ***');
process_search_string($events_sess.pres_mgmt.fulltext_search_qry_str);
} else if ($ae_loc.authenticated_access) {
console.log('*** Administrator Access or Trusted Access ***');
process_search_string($events_sess.pres_mgmt.fulltext_search_qry_str);
} else {
console.log(
'*** Check permissions and or search string. Not allowed or too short. ***'
);
$events_slct.event_session_obj_li = [];
event_session_id_random_li = [];
}
}
// if ($events_sess.pres_mgmt.status_qry__search == 'done' && $events_slct?.event_session_obj_li) {
log_lvl = 1;
if ($events_trigger == 'search_done') {
$events_trigger = null;
$events_sess.pres_mgmt.status_qry__search = null;
if (log_lvl) {
console.log('TEST search done: Pulling out the event_session_id_randoms...');
}
// We need to loop through the array of objects and get the event_session_id_random from each object a new list of event_session_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_session_obj_li && $events_slct.event_session_obj_li.length) {
event_session_id_random_li = [];
// console.log(`TEST SEARCH - Get ids:`, $events_slct.event_session_obj_li);
for (let i = 0; i < $events_slct.event_session_obj_li.length; i++) {
tmp_li.push($events_slct.event_session_obj_li[i].event_session_id_random);
}
}
event_session_id_random_li = tmp_li;
console.log(
`TEST search results: event_session_id_random_li`,
$state.snapshot(event_session_id_random_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.pres_mgmt.search_badge_type_code;
// let search_str = $events_sess.pres_mgmt.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 location_name = '';
if ($events_sess.pres_mgmt.location_name_qry_str?.length) {
location_name = $events_sess.pres_mgmt.location_name_qry_str;
console.log(`Location name: ${location_name}`);
}
handle_search__event_session({
ft_search_str: ft_search_str_new,
lk_search_str: lk_search_str_new,
and_lk_location_name: location_name,
// 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_session({
ft_search_str = '',
lk_search_str = '',
and_lk_location_name = '',
search_delay = 0,
max_tries = 5,
enabled = $events_loc.pres_mgmt.qry_enabled ?? 'enabled',
hidden = $events_loc.pres_mgmt.qry_hidden ?? 'not_hidden',
limit = $events_loc.pres_mgmt.qry_limit__sessions ?? 35,
try_cache = true,
log_lvl = 0
}: {
ft_search_str?: string;
lk_search_str?: string;
and_lk_location_name?: string;
search_delay?: number; // In milliseconds
max_tries?: number;
enabled?: 'enabled' | 'all' | 'not_enabled' | undefined;
hidden?: 'hidden' | 'all' | 'not_hidden' | undefined;
limit?: number;
try_cache?: boolean;
log_lvl?: number;
}) {
if (log_lvl) {
console.log('handle_search__event_session()');
}
if (
$events_sess.pres_mgmt?.status_qry__search != null &&
$events_sess.pres_mgmt?.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.pres_mgmt.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.pres_mgmt?.status_qry__search != null &&
$events_sess.pres_mgmt?.status_qry__search != 'done'
) {
let random_delay = Math.floor(Math.random() * 25);
search_delay += 25 + random_delay;
console.log(
`*** TEST SEARCH - $events_sess.pres_mgmt.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.pres_mgmt.status_qry__search != loading ***');
$events_trigger = 'loading_search_results';
$events_sess.pres_mgmt.status_qry__search = 'loading';
event_session_id_random_li = []; // Resetting this seems to help trigger the new results to show correctly???
search_submit_results = events_func
.search__event_session({
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.pres_mgmt.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.
$events_trigger = 'process_search_results';
$events_sess.pres_mgmt.status_qry__search = 'processing';
$events_slct.event_session_obj_li = search_results;
})
.finally(() => {
// Finally done with the search.
$events_trigger = 'search_done';
$events_sess.pres_mgmt.status_qry__search = 'done';
});
clearInterval(request_loop);
}
}, search_delay);
}
</script> </script>
<svelte:head> <svelte:head>
@@ -399,41 +267,17 @@
</title> </title>
</svelte:head> </svelte:head>
<!-- container h-full mx-auto
flex flex-col gap-1
py-1 px-2 pb-16
items-center
min-w-full
max-w-max -->
<!-- <section
class="
ae_events_pres_mgmt_event
md:container
flex flex-col gap-1
items-center
justify-start
mx-auto
py-1 px-2 pb-16
h-full
min-w-full
max-w-max
"
> -->
<!-- lg:bg-green-100
xl:bg-green-200 -->
<Event_page_menu {lq__event_obj} /> <Event_page_menu {lq__event_obj} />
{#if !$lq__event_obj} {#if !$lq__event_obj}
<div> <div class="flex items-center justify-center p-10 opacity-50">
<span class="fas fa-spinner fa-spin mx-1"></span> <span class="fas fa-spinner fa-spin mx-1 text-2xl"></span>
<span>Loading event information...</span> <span>Loading event information...</span>
</div> </div>
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access} {:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<header class="ae_module_header"> <header class="ae_module_header">
<span class="flex flex-row flex-wrap gap-1 items-center justify-center"> <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span> <span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<!-- Button to toggle between the regular event view and managing event files -->
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -444,15 +288,12 @@ max-w-max -->
} }
}} }}
class="btn ae_btn_secondary" class="btn ae_btn_secondary"
class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__event_view == class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
'manage_files'} class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__event_view != 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__event_view !=
'manage_files'}
class:hidden={!$ae_loc.administrator_access} class:hidden={!$ae_loc.administrator_access}
title="View event search or manage files for the event" title="View event search or manage files for the event"
> >
{#if $events_loc.pres_mgmt.show_content__event_view == 'manage_files'} {#if $events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
<!-- <span class="fas fa-info m-1"></span> -->
<span class="fas fa-search m-1"></span> <span class="fas fa-search m-1"></span>
Event Search? Event Search?
{:else} {:else}
@@ -462,7 +303,6 @@ max-w-max -->
class="badge preset-tonal-success" class="badge preset-tonal-success"
class:hidden={!$lq__event_obj?.file_count} class:hidden={!$lq__event_obj?.file_count}
> >
<!-- absolute -top-1.5 -right-1.5 z-10 -->
<span class="fas fa-file-alt m-1"></span> <span class="fas fa-file-alt m-1"></span>
{$lq__event_obj?.file_count}× {$lq__event_obj?.file_count}×
</span> </span>
@@ -484,49 +324,39 @@ max-w-max -->
</header> </header>
{#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'} {#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'}
<!-- This session search section should be moved to a separate Svelte component -->
<div class="ae_container_actions"> <div class="ae_container_actions">
<form <form
onsubmit={preventDefault(() => { onsubmit={preventDefault(() => handle_search_trigger())}
$events_trigger = 'load__event_session_obj_li';
})}
autocomplete="off" autocomplete="off"
class="form grow flex flex-row flex-wrap gap-1 justify-center items-center w-full" class="form grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
> >
<!-- Show/Hide session location name search button -->
<button <button
type="button" type="button"
class="btn btn-sm mx-1 ae_btn_warning" class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!$ae_loc.authenticated_access} class:hidden={!$ae_loc.authenticated_access}
onclick={() => { onclick={() => {
$events_sess.pres_mgmt.location_name_qry_str = ''; $events_loc.pres_mgmt.location_name_qry_str = '';
$events_loc.pres_mgmt.show_content__session_search_room_name = $events_loc.pres_mgmt.show_content__session_search_room_name = !$events_loc.pres_mgmt.show_content__session_search_room_name;
!$events_loc.pres_mgmt.show_content__session_search_room_name; handle_search_trigger();
}} }}
title="Search by location name" title="Search by location name"
> >
<span class="fas fa-search-location"></span> <span class="fas fa-search-location"></span>
<span class="hidden">Search on location</span>
</button> </button>
<select <select
name="location_name_list" name="location_name_list"
id="session_location_name_list" id="session_location_name_list"
bind:value={$events_sess.pres_mgmt.location_name_qry_str} bind:value={$events_loc.pres_mgmt.location_name_qry_str}
class="input text-xs font-bold font-mono min-w-fit w-min max-w-40 transition-all mx-1" class="input text-xs font-bold font-mono min-w-fit w-min max-w-40 transition-all mx-1"
class:hidden={!$ae_loc.authenticated_access || class:hidden={!$ae_loc.authenticated_access || !$events_loc.pres_mgmt.show_content__session_search_room_name}
!$events_loc.pres_mgmt.show_content__session_search_room_name} onchange={() => handle_search_trigger()}
onchange={() => {
$events_trigger = 'load__event_session_obj_li';
}}
title="Select to filter based on the location/room name" title="Select to filter based on the location/room name"
> >
{#if $lq__event_location_obj_li} {#if $lq__event_location_obj_li}
<option value="">Location / Room</option> <option value="">Location / Room</option>
{#each $lq__event_location_obj_li as event_location_obj} {#each $lq__event_location_obj_li as event_location_obj}
<option value={event_location_obj?.name} <option value={event_location_obj?.name}>{event_location_obj.name}</option>
>{event_location_obj.name}</option
>
{/each} {/each}
{/if} {/if}
</select> </select>
@@ -534,34 +364,24 @@ max-w-max -->
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
$events_sess.pres_mgmt.fulltext_search_qry_str = ''; $events_loc.pres_mgmt.fulltext_search_qry_str = '';
$events_trigger = 'load__event_session_obj_li'; handle_search_trigger();
}} }}
class:hidden={!$events_sess.pres_mgmt.fulltext_search_qry_str || class:hidden={!$events_loc.pres_mgmt.fulltext_search_qry_str}
$events_sess.pres_mgmt.fulltext_search_qry_str.length == 0}
class="btn btn-sm mx-1 ae_btn_warning" class="btn btn-sm mx-1 ae_btn_warning"
title="Clear search text" title="Clear search text"
> >
<!-- <span class="fas fa-backspace"></span> -->
<!-- <span class="fas fa-broom"></span> -->
<span class="fas fa-remove-format"></span> <span class="fas fa-remove-format"></span>
<!-- Clear text -->
</button> </button>
<!-- svelte-ignore a11y_autofocus -->
<input <input
type="search" type="search"
placeholder="Search for a session" placeholder="Search for a session"
id="session_fulltext_search_qry_str" id="session_fulltext_search_qry_str"
bind:value={$events_sess.pres_mgmt.fulltext_search_qry_str} bind:value={$events_loc.pres_mgmt.fulltext_search_qry_str}
class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1 ae_btn_info" class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1 ae_btn_info"
onkeyup={() => { onkeyup={(e) => {
if ( if (e.key === 'Enter') handle_search_trigger();
$events_sess.pres_mgmt?.fulltext_search_qry_str &&
$events_sess.pres_mgmt.fulltext_search_qry_str.length >= 3
) {
$events_trigger = 'load__event_session_obj_li';
}
}} }}
autofocus autofocus
data-ignore="true" data-ignore="true"
@@ -570,7 +390,6 @@ max-w-max -->
<button <button
type="submit" type="submit"
class="btn btn-lg text-2xl font-bold w-48 mx-1 ae_btn_primary" class="btn btn-lg text-2xl font-bold w-48 mx-1 ae_btn_primary"
onclick={() => {}}
title="Search for a session" title="Search for a session"
> >
{#if $events_sess.pres_mgmt.status_qry__search == 'loading'} {#if $events_sess.pres_mgmt.status_qry__search == 'loading'}
@@ -580,13 +399,24 @@ max-w-max -->
{/if} {/if}
Search Search
</button> </button>
{#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 opacity-70 hover:opacity-100 transition-all">
<span> Remote First </span>
<input
type="checkbox"
bind:checked={$events_loc.pres_mgmt.qry__remote_first}
onchange={() => handle_search_trigger()}
class="checkbox checkbox-sm"
/>
</label>
{/if}
</form> </form>
</div> </div>
<!-- This needs to be called only when there is a list of IDs ready. This should be done on the list wrapper the list itself. --> {#if event_session_id_li.length}
{#if event_session_id_random_li.length}
<Comp_event_session_obj_li_wrapper <Comp_event_session_obj_li_wrapper
{event_session_id_random_li} lq__event_session_obj_li={lq__event_session_obj_li}
hide__session_location={$events_loc.pres_mgmt?.hide__session_li_location_field} hide__session_location={$events_loc.pres_mgmt?.hide__session_li_location_field}
hide__session_poc={$events_loc.pres_mgmt?.hide__session_li_poc_field} hide__session_poc={$events_loc.pres_mgmt?.hide__session_li_poc_field}
hide__launcher_link_legacy={$events_loc.pres_mgmt?.hide__launcher_link_legacy} hide__launcher_link_legacy={$events_loc.pres_mgmt?.hide__launcher_link_legacy}
@@ -594,10 +424,13 @@ max-w-max -->
hide__location_link={$events_loc.pres_mgmt?.hide__location_link} hide__location_link={$events_loc.pres_mgmt?.hide__location_link}
log_lvl={1} log_lvl={1}
/> />
{:else if $events_sess.pres_mgmt.status_qry__search === 'loading'}
<div class="flex flex-col items-center justify-center p-20 opacity-50 text-center">
<span class="fas fa-spinner fa-spin text-4xl mb-4"></span>
<p class="text-xl">Searching sessions...</p>
</div>
{:else} {:else}
<section <section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2 mx-auto">
class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2"
>
<div> <div>
<span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span> <span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
<strong>No results to show</strong> <strong>No results to show</strong>
@@ -658,8 +491,7 @@ max-w-max -->
<Element_manage_event_file_li_wrap <Element_manage_event_file_li_wrap
link_to_type={'event'} link_to_type={'event'}
link_to_id={$lq__event_obj?.event_id_random} link_to_id={$lq__event_obj?.event_id_random}
allow_basic={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random] || allow_basic={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random]}
$events_loc.auth__kv.session[$lq__event_obj?.event_id_random]}
allow_moderator={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random]} allow_moderator={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random]}
container_class_li={''} container_class_li={''}
/> />
@@ -672,40 +504,9 @@ max-w-max -->
<span class="fas fa-exclamation-triangle text-red-500 m-1"></span> <span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
Event Disabled Event Disabled
</h2> </h2>
<p> <p>This event is currently disabled. Please contact the event organizer for more information.</p>
This event is currently disabled. Please contact the event organizer for more
information.
</p>
</div> </div>
{/if} {/if}
<!-- </section> -->
<style lang="postcss"> <style lang="postcss">
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */ </style>
/* div.ae_quick_modal_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: hsla(0, 0%, 0%, .5);
} */
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
/* section.ae_quick_popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: hsla(0, 0%, 100%, .95);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
min-height: 30%;
min-width: 80%;
} */
</style>

898
src/routes/events/ae_comp__event_session_obj_li.svelte
View File

File diff suppressed because it is too large Load Diff

52
src/routes/events/ae_comp__event_session_obj_li_wrapper.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
// Exports
container_class_li?: string | Array<string>; container_class_li?: string | Array<string>;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher' lq__event_session_obj_li?: any; // New Shared Observable Pattern
event_session_id_random_li?: Array<string>; event_session_id_random_li?: Array<string>;
link_to_type?: string; link_to_type?: string;
link_to_id?: string; link_to_id?: string;
@@ -17,6 +16,7 @@
let { let {
container_class_li = [], container_class_li = [],
lq__event_session_obj_li: lq__shared,
event_session_id_random_li = [], event_session_id_random_li = [],
link_to_type, link_to_type,
link_to_id, link_to_id,
@@ -31,50 +31,29 @@
// Imports // Imports
import Comp_event_session_obj_li from './ae_comp__event_session_obj_li.svelte'; import Comp_event_session_obj_li from './ae_comp__event_session_obj_li.svelte';
import { liveQuery } from 'dexie'; import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events'; import { db_events } from '$lib/ae_events/db_events';
if (log_lvl > 1) { // Logic: Use shared observable if provided, otherwise create internal one
console.log(`event_session list: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`); let lq__event_session_obj_li = $derived.by(() => {
console.log( if (lq__shared) return lq__shared;
`event_session list: event_session_id_random_li: ${event_session_id_random_li}`
);
}
// Variables return liveQuery(async () => {
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
let dq__where_type_id_val: string = `${link_to_type}_id_random`;
let dq__where_eq_id_val: string = link_to_id ?? '';
let lq__event_session_obj_li = $derived(
liveQuery(async () => {
if (link_to_type && link_to_id) { if (link_to_type && link_to_id) {
let results = await db_events.session const results = await db_events.session
.where(dq__where_type_id_val) .where(`${link_to_type}_id_random`)
.equals(dq__where_eq_id_val) .equals(link_to_id)
// .sortBy('name')
.sortBy('start_datetime'); .sortBy('start_datetime');
// This should be sorted by a custom sort field
return results; return results;
} else if (event_session_id_random_li.length > 0) { } else if (event_session_id_random_li.length > 0) {
let results = await db_events.session.bulkGet(event_session_id_random_li); const results = await db_events.session.bulkGet(event_session_id_random_li);
return results.filter(item => item !== undefined);
return results;
} else {
return null;
} }
}) return null;
); });
});
// *** Functions and Logic
</script> </script>
<!-- {#if $lq__event_session_obj_li?.length > 0} -->
<Comp_event_session_obj_li <Comp_event_session_obj_li
{container_class_li} {container_class_li}
{lq__event_session_obj_li} {lq__event_session_obj_li}
@@ -85,5 +64,4 @@
{hide__launcher_link} {hide__launcher_link}
{hide__location_link} {hide__location_link}
{log_lvl} {log_lvl}
></Comp_event_session_obj_li> ></Comp_event_session_obj_li>
<!-- {/if} -->