feat(idaa): replace Max Results and Sort By selects with pill chips
- Max: 25 / 50 / 100 / 150 chips for all users; 200 / 500 visible to trusted_access staff only (consistent with previous select behavior). - Sort: Last Updated / Name A-Z / Name Z-A chips; clicking triggers the same qry__order_by_li update and search_version bump as the old select onchange. - Sort logic extracted into set_sort_mode() helper to keep onclick clean. - Active state: preset-filled-tertiary-400-600; inactive: outlined + opacity-60. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -56,6 +56,24 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
|
||||
fn(event);
|
||||
};
|
||||
}
|
||||
|
||||
function set_sort_mode(mode: string) {
|
||||
$idaa_loc.recovery_meetings.qry__order_by = mode;
|
||||
if (mode === 'updated_on') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC', sort: 'DESC', updated_on: 'DESC', created_on: 'DESC', name: 'ASC'
|
||||
};
|
||||
} else if (mode === 'name_asc') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC', sort: 'DESC', name: 'ASC', updated_on: 'DESC', created_on: 'DESC'
|
||||
};
|
||||
} else if (mode === 'name_desc') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC', sort: 'DESC', name: 'DESC', updated_on: 'DESC', created_on: 'DESC'
|
||||
};
|
||||
}
|
||||
handle_search_trigger();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- preset-filled-surface-200-800 -->
|
||||
@@ -235,90 +253,67 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
|
||||
|
||||
<div
|
||||
class="ae_group ae_row flex w-full max-w-full flex-row flex-wrap items-center justify-center gap-2 p-1">
|
||||
<!-- Max events select options -->
|
||||
<span class="flex flex-row items-center justify-around gap-1">
|
||||
<label
|
||||
class="form-group w-32 text-sm md:w-42"
|
||||
for="qry_limit__events">
|
||||
Max results:
|
||||
<!-- Sort + Limit chips -->
|
||||
<span class="flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||
|
||||
<select
|
||||
id="qry_limit__events"
|
||||
bind:value={$idaa_loc.recovery_meetings.qry__limit}
|
||||
class="
|
||||
select preset-tonal-tertiary preset-outline-tertiary-200-800 form-control
|
||||
col-sm-12
|
||||
inline-block
|
||||
w-20
|
||||
px-1 text-sm
|
||||
">
|
||||
<option value={10}>10</option>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
<option value={75}>75</option>
|
||||
<option value={100}>100</option>
|
||||
<option value={150}>150</option>
|
||||
<option value={200} class:hidden={!$ae_loc.trusted_access}
|
||||
>200</option>
|
||||
<option value={500} class:hidden={!$ae_loc.trusted_access}
|
||||
>500</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- </span> -->
|
||||
<!-- Sort: mutually exclusive chips -->
|
||||
<div class="flex flex-row flex-wrap items-center gap-1">
|
||||
<span class="text-xs opacity-50">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
|
||||
type="button"
|
||||
onclick={() => set_sort_mode(mode)}
|
||||
aria-pressed={active}
|
||||
title="Sort by {label}"
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{active
|
||||
? 'preset-filled-tertiary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
<span class="fas {icon} mr-1"></span>{label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Sort by last updated date or by name -->
|
||||
<!-- <span
|
||||
class="flex flex-row gap-1 items-center justify-around"
|
||||
> -->
|
||||
<label
|
||||
class="form-group w-32 text-sm md:w-42"
|
||||
for="qry_order_by__events">
|
||||
Sort by:
|
||||
<!-- Limit: mutually exclusive chips; 200/500 for trusted staff only -->
|
||||
<div class="flex flex-row flex-wrap items-center gap-1">
|
||||
<span class="text-xs opacity-50">Max:</span>
|
||||
{#each [25, 50, 100, 150] as n}
|
||||
{@const active = $idaa_loc.recovery_meetings.qry__limit === n}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { $idaa_loc.recovery_meetings.qry__limit = n; }}
|
||||
aria-pressed={active}
|
||||
title="Show up to {n} results"
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{active
|
||||
? 'preset-filled-tertiary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
{n}
|
||||
</button>
|
||||
{/each}
|
||||
{#if $ae_loc.trusted_access}
|
||||
{#each [200, 500] as n}
|
||||
{@const active = $idaa_loc.recovery_meetings.qry__limit === n}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { $idaa_loc.recovery_meetings.qry__limit = n; }}
|
||||
aria-pressed={active}
|
||||
title="Show up to {n} results"
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{active
|
||||
? 'preset-filled-tertiary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
{n}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<select
|
||||
id="qry_order_by__events"
|
||||
bind:value={$idaa_loc.recovery_meetings.qry__order_by}
|
||||
onchange={() => {
|
||||
const mode = $idaa_loc.recovery_meetings.qry__order_by;
|
||||
if (mode === 'updated_on') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC',
|
||||
sort: 'DESC',
|
||||
updated_on: 'DESC',
|
||||
created_on: 'DESC',
|
||||
name: 'ASC'
|
||||
};
|
||||
} else if (mode === 'name_asc') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC',
|
||||
sort: 'DESC',
|
||||
name: 'ASC',
|
||||
updated_on: 'DESC',
|
||||
created_on: 'DESC'
|
||||
};
|
||||
} else if (mode === 'name_desc') {
|
||||
$idaa_loc.recovery_meetings.qry__order_by_li = {
|
||||
priority: 'DESC',
|
||||
sort: 'DESC',
|
||||
name: 'DESC',
|
||||
updated_on: 'DESC',
|
||||
created_on: 'DESC'
|
||||
};
|
||||
}
|
||||
handle_search_trigger();
|
||||
}}
|
||||
class="
|
||||
select preset-tonal-tertiary preset-outline-tertiary-200-800 form-control
|
||||
col-sm-12
|
||||
inline-block
|
||||
w-40
|
||||
px-1 text-sm
|
||||
">
|
||||
<option value="updated_on">Last Updated</option>
|
||||
<option value="name_asc">Meeting Name (A-Z)</option>
|
||||
<option value="name_desc">Meeting Name (Z-A)</option>
|
||||
</select>
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<span class="flex flex-row items-center justify-around gap-1">
|
||||
|
||||
Reference in New Issue
Block a user