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

refactor(idaa): filter bar polish — cycling sort, centered layout, move into form

Browse Source 
- Replace three sort chips with single cycling button (Last Updated → Name A→Z → Name Z→A → repeat)
- Add min-w-36 to sort button to prevent layout bounce between labels
- Move My Meetings chip to filter row (first position) alongside Virtual/In-Person
- Widen filter chips row from max-w-xl to max-w-2xl to match search bar
- Move sort/max/actions section inside <form> so all rows share the same width constraint
- Flatten span wrappers in bottom row — all buttons are direct flex children of justify-center container, fixing left-drift when conditional buttons are hidden
- Add keyed {#each (val)} to Type chip loop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-18 17:50:43 -04:00
parent 6857f1226c
commit 429f38996a
1 changed files with 221 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
View File

@@ -65,21 +65,22 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
}; };
} }
function set_sort_mode(mode: string) { const sort_modes = [
$idaa_loc.recovery_meetings.qry__order_by = mode; { mode: 'updated_on', label: 'Last Updated', icon: 'fa-clock', order_by_li: { priority: 'DESC', sort: 'DESC', updated_on: 'DESC', created_on: 'DESC', name: 'ASC' } },
if (mode === 'updated_on') { { mode: 'name_asc', label: 'Name A→Z', icon: 'fa-sort-alpha-down', order_by_li: { priority: 'DESC', sort: 'DESC', name: 'ASC', updated_on: 'DESC', created_on: 'DESC' } },
$idaa_loc.recovery_meetings.qry__order_by_li = { { mode: 'name_desc', label: 'Name Z→A', icon: 'fa-sort-alpha-up-alt', order_by_li: { priority: 'DESC', sort: 'DESC', name: 'DESC', updated_on: 'DESC', created_on: 'DESC' } }
priority: 'DESC', sort: 'DESC', updated_on: 'DESC', created_on: 'DESC', name: 'ASC' ];
};
} else if (mode === 'name_asc') { let sort_cycle_idx = $derived.by(() => {
$idaa_loc.recovery_meetings.qry__order_by_li = { const idx = sort_modes.findIndex(m => m.mode === $idaa_loc.recovery_meetings.qry__order_by);
priority: 'DESC', sort: 'DESC', name: 'ASC', updated_on: 'DESC', created_on: 'DESC' return idx >= 0 ? idx : 0;
}; });
} else if (mode === 'name_desc') { let current_sort = $derived(sort_modes[sort_cycle_idx]);
$idaa_loc.recovery_meetings.qry__order_by_li = {
priority: 'DESC', sort: 'DESC', name: 'DESC', updated_on: 'DESC', created_on: 'DESC' function cycle_sort() {
}; const next = sort_modes[(sort_cycle_idx + 1) % sort_modes.length];
} $idaa_loc.recovery_meetings.qry__order_by = next.mode;
$idaa_loc.recovery_meetings.qry__order_by_li = next.order_by_li;
handle_search_trigger(); handle_search_trigger();
} }
</script> </script>
@@ -186,9 +187,29 @@ function set_sort_mode(mode: string) {
</button> </button>
</div> </div>
<!-- Filter chips: Location + Type --> <!-- Filter chips: My Meetings + Location + Type -->
<div <div
class="border-surface-300-700 flex w-full max-w-xl flex-row flex-wrap items-center justify-start gap-x-4 gap-y-1 border-b p-1"> class="border-surface-300-700 flex w-full max-w-2xl flex-row flex-wrap items-center justify-center gap-x-4 gap-y-1 border-b p-1">
<!-- My Meetings: favorites filter — shown only to logged-in Novi members -->
{#if $idaa_loc.novi_uuid}
<button
type="button"
onclick={() => {
$idaa_loc.recovery_meetings.qry__favorites_only =
!$idaa_loc.recovery_meetings.qry__favorites_only;
}}
class="novi_btn btn-star btn btn-sm transition-all
{$idaa_loc.recovery_meetings.qry__favorites_only
? 'preset-filled-warning-300-700'
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}"
title={$idaa_loc.recovery_meetings.qry__favorites_only
? 'Showing My Meetings only — click to show all'
: 'Show only My Meetings (starred)'}>
<span class="fas fa-star m-1 {$idaa_loc.recovery_meetings.qry__favorites_only ? 'text-yellow-600' : ''}"></span>
My Meetings
</button>
{/if}
<!-- Location: independent toggles (a meeting can be both virtual and in-person) --> <!-- Location: independent toggles (a meeting can be both virtual and in-person) -->
<div class="flex flex-row flex-wrap items-center gap-1"> <div class="flex flex-row flex-wrap items-center gap-1">
@@ -225,7 +246,7 @@ function set_sort_mode(mode: string) {
['IDAA', 'IDAA', 'Open to IDAA members only'], ['IDAA', 'IDAA', 'Open to IDAA members only'],
['Caduceus', 'Caduceus', 'Open to all healthcare workers including those who do not qualify for IDAA'], ['Caduceus', 'Caduceus', 'Open to all healthcare workers including those who do not qualify for IDAA'],
['Family Recovery', 'Family Recovery', 'Open to spouses, parents, and children of medical professionals in recovery'] ['Family Recovery', 'Family Recovery', 'Open to spouses, parents, and children of medical professionals in recovery']
] as [val, label, tip]} ] as [val, label, tip] (val)}
{@const active = val === '' ? !$idaa_loc.recovery_meetings.qry__type : $idaa_loc.recovery_meetings.qry__type === val} {@const active = val === '' ? !$idaa_loc.recovery_meetings.qry__type : $idaa_loc.recovery_meetings.qry__type === val}
<button <button
type="button" type="button"
@@ -257,34 +278,20 @@ function set_sort_mode(mode: string) {
</label> </label>
{/if} {/if}
</div> </div>
</form>
<div <div
class="ae_group ae_row flex w-full max-w-full flex-row flex-wrap items-center justify-center gap-2 p-1"> class="ae_group ae_row flex w-full flex-row flex-wrap items-center justify-center gap-2 p-1">
<!-- Sort chips + Max results stepper --> <!-- Sort: single cycling button -->
<span class="flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-1"> <div class="flex flex-row items-center gap-1">
<!-- Sort: mutually exclusive chips -->
<div class="flex flex-row flex-wrap items-center gap-1">
<span class="sr-only">Sort:</span> <span class="sr-only">Sort:</span>
{#each [
['updated_on', 'Last Updated', 'fa-clock'],
['name_asc', 'Name A–Z', 'fa-sort-alpha-down'],
['name_desc', 'Name Z–A', 'fa-sort-alpha-up-alt']
] as [mode, label, icon]}
{@const active = $idaa_loc.recovery_meetings.qry__order_by === mode}
<button <button
type="button" type="button"
onclick={() => set_sort_mode(mode)} onclick={cycle_sort}
aria-pressed={active} title="Currently: {current_sort.label} — click to change sort order"
title="Sort by {label}" class="novi_btn btn btn-sm preset-outlined-surface-300-700 opacity-80 hover:opacity-100 transition-all min-w-36">
class="novi_btn btn btn-sm transition-all <span class="fas {current_sort.icon} mr-1"></span>{current_sort.label}
{active <span class="fas fa-redo fa-xs ml-1 opacity-40"></span>
? 'preset-filled-tertiary-400-600'
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
<span class="fas {icon} mr-1"></span>{label}
</button> </button>
{/each}
</div> </div>
<!-- Max results: +/- stepper through predefined steps --> <!-- Max results: +/- stepper through predefined steps -->
@@ -315,9 +322,7 @@ function set_sort_mode(mode: string) {
</button> </button>
</div> </div>
</span> <!-- Staff: toggle hidden events visibility (trusted + edit mode) -->
<span class="flex flex-row items-center justify-around gap-1">
{#if $ae_loc.edit_mode && $ae_loc.trusted_access && (!$idaa_loc.recovery_meetings.qry__hidden || $idaa_loc.recovery_meetings.qry__hidden == 'not_hidden')} {#if $ae_loc.edit_mode && $ae_loc.trusted_access && (!$idaa_loc.recovery_meetings.qry__hidden || $idaa_loc.recovery_meetings.qry__hidden == 'not_hidden')}
<button <button
type="button" type="button"
@@ -325,30 +330,21 @@ function set_sort_mode(mode: string) {
$idaa_loc.recovery_meetings.qry__hidden = 'all'; $idaa_loc.recovery_meetings.qry__hidden = 'all';
$idaa_loc.recovery_meetings.qry__limit = 200; $idaa_loc.recovery_meetings.qry__limit = 200;
}} }}
class=" class="novi_btn btn_show_recovery_mtg_event ae_btn btn-info btn btn-sm
novi_btn btn_show_recovery_mtg_event ae_btn btn-info preset-tonal-secondary preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800 transition">
btn btn-sm
preset-tonal-secondary preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800
transition
">
<span class="fas fa-eye m-1"></span> Show Hidden Events <span class="fas fa-eye m-1"></span> Show Hidden Events
</button> </button>
{:else if $ae_loc.trusted_access && $idaa_loc.recovery_meetings.qry__hidden != 'not_hidden'} {:else if $ae_loc.trusted_access && $idaa_loc.recovery_meetings.qry__hidden != 'not_hidden'}
<button <button
type="button" type="button"
onclick={() => { onclick={() => { $idaa_loc.recovery_meetings.qry__hidden = 'not_hidden'; }}
$idaa_loc.recovery_meetings.qry__hidden = 'not_hidden'; class="novi_btn btn_hide_recovery_mtg_event ae_btn btn-info btn btn-sm
}} preset-tonal-secondary preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800 transition">
class="
novi_btn btn_hide_recovery_mtg_event ae_btn btn-info
btn btn-sm
preset-tonal-secondary preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800
transition
">
<span class="fas fa-eye-slash m-1"></span> Hide Hidden Events <span class="fas fa-eye-slash m-1"></span> Hide Hidden Events
</button> </button>
{/if} {/if}
<!-- Staff: toggle disabled events visibility (manager + edit mode) -->
{#if $ae_loc.edit_mode && $ae_loc.manager_access && (!$idaa_loc.recovery_meetings.qry__enabled || $idaa_loc.recovery_meetings.qry__enabled == 'enabled')} {#if $ae_loc.edit_mode && $ae_loc.manager_access && (!$idaa_loc.recovery_meetings.qry__enabled || $idaa_loc.recovery_meetings.qry__enabled == 'enabled')}
<button <button
type="button" type="button"
@@ -358,55 +354,21 @@ function set_sort_mode(mode: string) {
// NOTE: I may re-enable this limit reset later. It is sometimes useful. // NOTE: I may re-enable this limit reset later. It is sometimes useful.
// $idaa_loc.recovery_meetings.qry__limit = 500; // $idaa_loc.recovery_meetings.qry__limit = 500;
}} }}
class=" class="novi_btn btn_show_recovery_mtg_event ae_btn btn-warning btn btn-sm
novi_btn btn_show_recovery_mtg_event ae_btn btn-warning preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 transition">
btn btn-sm
preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800
transition
">
<span class="fas fa-eye m-1"></span> Show Disabled Events <span class="fas fa-eye m-1"></span> Show Disabled Events
</button> </button>
{:else if $ae_loc.edit_mode && $ae_loc.manager_access && $idaa_loc.recovery_meetings.qry__enabled != 'enabled'} {:else if $ae_loc.edit_mode && $ae_loc.manager_access && $idaa_loc.recovery_meetings.qry__enabled != 'enabled'}
<button <button
type="button" type="button"
onclick={() => { onclick={() => { $idaa_loc.recovery_meetings.qry__enabled = 'enabled'; }}
$idaa_loc.recovery_meetings.qry__enabled = 'enabled'; class="novi_btn btn_hide_recovery_mtg_event ae_btn btn-warning btn btn-sm
}} preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 transition">
class="
novi_btn btn_hide_recovery_mtg_event ae_btn btn-warning
btn btn-sm
preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800
transition
">
<span class="fas fa-eye-slash m-1"></span> Hide Disabled Events <span class="fas fa-eye-slash m-1"></span> Hide Disabled Events
</button> </button>
{/if} {/if}
</span>
<span class="flex flex-row items-center justify-around gap-1">
{#if $idaa_loc.novi_uuid}
<button
type="button"
onclick={() => {
$idaa_loc.recovery_meetings.qry__favorites_only =
!$idaa_loc.recovery_meetings.qry__favorites_only;
}}
class="
novi_btn btn-star
btn btn-sm
transition-all
{$idaa_loc.recovery_meetings.qry__favorites_only
? 'preset-filled-warning-300-700'
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}
"
title={$idaa_loc.recovery_meetings.qry__favorites_only
? 'Showing My Meetings only — click to show all'
: 'Show only My Meetings (starred)'}>
<span class="fas fa-star m-1 {$idaa_loc.recovery_meetings.qry__favorites_only ? 'text-yellow-600' : ''}"></span>
My Meetings
</button>
{/if}
<!-- Create new meeting (Novi members and trusted staff in edit mode) -->
{#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $idaa_loc.novi_uuid} {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $idaa_loc.novi_uuid}
<button <button
type="button" type="button"
@@ -425,7 +387,7 @@ function set_sort_mode(mode: string) {
const ls_json = JSON.parse(ls_val); const ls_json = JSON.parse(ls_val);
novi_uuid = ls_json.novi_uuid; novi_uuid = ls_json.novi_uuid;
} }
} catch (e) { } catch {
// Ignore storage errors // Ignore storage errors
} }
} }
@@ -470,18 +432,14 @@ function set_sort_mode(mode: string) {
alert('Failed to create new event.'); alert('Failed to create new event.');
}); });
}} }}
class=" class="novi_btn btn-tertiary btn btn-sm preset-tonal-warning
novi_btn btn-tertiary preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 text-xs transition"
btn
btn-sm preset-tonal-warning
preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 text-xs
transition
"
disabled={!$ae_loc.authenticated_access}> disabled={!$ae_loc.authenticated_access}>
<span class="fas fa-plus m-1"></span> Create New Meeting <span class="fas fa-plus m-1"></span> Create New Meeting
</button> </button>
{/if} {/if}
<!-- Staff: export all meeting data to Excel (trusted + edit mode) -->
{#if $ae_loc.edit_mode && $ae_loc.trusted_access} {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<button <button
type="button" type="button"
@@ -503,13 +461,8 @@ function set_sort_mode(mode: string) {
log_lvl: 1 log_lvl: 1
}); });
}} }}
class=" class="novi_btn btn-tertiary btn btn-sm preset-tonal-warning
novi_btn btn-tertiary preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 text-xs transition"
btn
btn-sm preset-tonal-warning
preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 text-xs
transition
"
title={`Download meeting data for ${$ae_loc.account_name}`}> title={`Download meeting data for ${$ae_loc.account_name}`}>
{#await ae_promises.download__events_export} {#await ae_promises.download__events_export}
<span class="fas fa-spinner fa-spin m-1"></span> <span class="fas fa-spinner fa-spin m-1"></span>
@@ -519,6 +472,6 @@ function set_sort_mode(mode: string) {
Export All Data Export All Data
</button> </button>
{/if} {/if}
</span>
</div> </div>
</form>
</section> </section>