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

chore(badges): add 'Start Here' helper button to focus fulltext search input

Browse Source
This commit is contained in:
Scott Idem
2026-04-08 15:14:18 -04:00
parent d5b2b557f3
commit 3659fef17c
1 changed files with 103 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,10 @@ import {
LoaderCircle, LoaderCircle,
QrCode, QrCode,
RemoveFormatting, RemoveFormatting,
Search Search,
StepForward
} from '@lucide/svelte'; } from '@lucide/svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores'; import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { events_sess } from '$lib/stores/ae_events_stores'; import { events_sess } from '$lib/stores/ae_events_stores';
@@ -92,82 +95,115 @@ function handle_qr_scan_result(event: {
handle_search_trigger(); handle_search_trigger();
})} })}
autocomplete="off" autocomplete="off"
class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-7xl flex-col sm:flex-row flex-wrap items-center justify-center gap-2 rounded-lg px-2 py-2 shadow-md md:px-12"> class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-4xl flex-col sm:flex-row flex-wrap items-center justify-center gap-2 rounded-lg px-2 py-2 shadow-lg md:px-12 outline">
<div <div
class="flex grow flex-col md:flex-row flex-wrap items-center justify-center gap-2"> class="flex grow flex-col xl:flex-row flex-wrap items-center justify-center gap-2">
{#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $ae_loc.manager_access} {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $ae_loc.manager_access}
<span class="flex flex-row flex-wrap items-center justify-center gap-1"> <div class="flex flex-row flex-wrap items-center justify-center gap-1">
<select <span class="flex flex-row flex-wrap items-center justify-center gap-1">
bind:value={badges_loc.current.search_badge_type_code} <select
onchange={handle_search_trigger} bind:value={badges_loc.current.search_badge_type_code}
class="select select-sm max-w-fit px-1 text-xs"> onchange={handle_search_trigger}
<option value="">-- All Badge Types --</option> class="select select-sm max-w-fit px-1 text-xs">
{#each badge_type_code_li as badge_type_code (badge_type_code.code)} <option value="">-- All Badge Types --</option>
<option value={badge_type_code.code} {#each badge_type_code_li as badge_type_code (badge_type_code.code)}
>{badge_type_code.name}</option> <option value={badge_type_code.code}
{/each} >{badge_type_code.name}</option>
</select> {/each}
</select>
<select <select
bind:value={badges_loc.current.qry_printed_status} bind:value={badges_loc.current.qry_printed_status}
onchange={handle_search_trigger} onchange={handle_search_trigger}
class="select select-sm max-w-fit px-1 text-xs"> class="select select-sm max-w-fit px-1 text-xs">
<option value="all">-- All Print Status --</option> <option value="all">-- All Print Status --</option>
<option value="printed">Printed</option> <option value="printed">Printed</option>
<option value="not_printed">Not Printed</option> <option value="not_printed">Not Printed</option>
</select> </select>
<select <select
bind:value={badges_loc.current.qry_sort_order} bind:value={badges_loc.current.qry_sort_order}
onchange={handle_search_trigger} onchange={handle_search_trigger}
class="select select-sm max-w-fit px-1 text-xs"> class="select select-sm max-w-fit px-1 text-xs">
<option value="">-- Default Sort --</option> <option value="">-- Default Sort --</option>
<option value="name_asc">Name ASC</option> <option value="name_asc">Name ASC</option>
<option value="name_desc">Name DESC</option> <option value="name_desc">Name DESC</option>
<option value="updated_desc">Updated DESC</option> <option value="updated_desc">Updated DESC</option>
<option value="updated_asc">Updated ASC</option> <option value="updated_asc">Updated ASC</option>
<option value="print_count_desc" <option value="print_count_desc"
>Print Count DESC</option> >Print Count DESC</option>
<option value="print_first_desc" <option value="print_first_desc"
>First Printed DESC</option> >First Printed DESC</option>
<option value="print_last_desc" <option value="print_last_desc"
>Last Printed DESC</option> >Last Printed DESC</option>
<option value="badge_type_asc">Badge Type ASC</option> <option value="badge_type_asc">Badge Type ASC</option>
<option value="affiliations_asc" <option value="affiliations_asc"
>Affiliations ASC</option> >Affiliations ASC</option>
</select> </select>
</span> </span>
<input
type="search"
placeholder="Affiliations"
bind:value={badges_loc.current.qry_affiliations}
onkeyup={(e) => {
if (
e.key === 'Enter' ||
(badges_loc.current.qry_affiliations?.length ??
0) >= 3
) {
handle_search_trigger();
}
}}
class="input input-sm max-w-fit px-1 text-xs" />
</div>
{/if}
<div class="flex grow flex-row items-center justify-center gap-2">
<!-- An extra "start" button that will just set the focus to the input form field -->
<button
type="button"
onclick={() => document.getElementById('badge_fulltext_search_qry_str')?.focus()}
aria-label="Start here — focus search field"
data-testid="badge-start-btn"
class="btn btn-sm preset-filled-secondary-300-700"
class:opacity-30={!!badges_loc.current.fulltext_search_qry_str}
>
<StepForward size="1em" class="mx-1" />
Start Here
</button>
<!-- svelte-ignore a11y_autofocus -->
<input <input
type="search" type="search"
placeholder="Affiliations" autofocus
bind:value={badges_loc.current.qry_affiliations} placeholder="name, email, company, organization, etc."
id="badge_fulltext_search_qry_str"
bind:value={badges_loc.current.fulltext_search_qry_str}
autocomplete="off"
data-lpignore="true"
class="
input grow
min-w-96 md:max-w-1/2
transition-all
font-mono text-lg
bg-red-50-900 dark:bg-red-50-950
focus:bg-white
focus:text-black
border border-l-2 border-b-2
border-l-primary-500 border-b-primary-500
border-r-primary-300 border-t-primary-300
dark:border-l-primary-800 dark:border-b-primary-800
"
onkeyup={(e) => { onkeyup={(e) => {
if ( if (e.key === 'Enter') {
e.key === 'Enter' ||
(badges_loc.current.qry_affiliations?.length ??
0) >= 3
) {
handle_search_trigger(); handle_search_trigger();
} }
}} }}
class="input input-sm max-w-fit px-1 text-xs" /> title="Search by name, email, etc. Press Enter." />
{/if}
<input </div>
type="search"
placeholder="name, email, company, organization, etc."
id="badge_fulltext_search_qry_str"
bind:value={badges_loc.current.fulltext_search_qry_str}
autocomplete="off"
data-lpignore="true"
class="input grow font-mono text-lg transition-all focus:bg-white min-w-96 md:max-w-1/2 border-l-2 border-b-2 border-l-primary-500 border-b-primary-500"
onkeyup={(e) => {
if (e.key === 'Enter') {
handle_search_trigger();
}
}}
title="Search by name, email, etc. Press Enter." />
</div> </div>
{#if (badges_loc.current.fulltext_search_qry_str ?? '').trim().length < effective_min_chars} {#if (badges_loc.current.fulltext_search_qry_str ?? '').trim().length < effective_min_chars}
@@ -202,6 +238,8 @@ function handle_qr_scan_result(event: {
badges_loc.current.qry_printed_status = 'all'; badges_loc.current.qry_printed_status = 'all';
badges_loc.current.qry_affiliations = ''; badges_loc.current.qry_affiliations = '';
handle_search_trigger(); handle_search_trigger();
document.getElementById('badge_fulltext_search_qry_str')?.focus();
}} }}
class=" class="
hover:text-tertiary-800-200 hover:bg-tertiary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-sm font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-outlined-tertiary rounded-lg border border-tertiary-200-800 hover:text-tertiary-800-200 hover:bg-tertiary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-sm font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-outlined-tertiary rounded-lg border border-tertiary-200-800