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);
|
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>
|
</script>
|
||||||
|
|
||||||
<!-- preset-filled-surface-200-800 -->
|
<!-- preset-filled-surface-200-800 -->
|
||||||
@@ -235,90 +253,67 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
|
|||||||
|
|
||||||
<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 max-w-full flex-row flex-wrap items-center justify-center gap-2 p-1">
|
||||||
<!-- Max events select options -->
|
<!-- Sort + Limit chips -->
|
||||||
<span class="flex flex-row items-center justify-around gap-1">
|
<span class="flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||||
<label
|
|
||||||
class="form-group w-32 text-sm md:w-42"
|
|
||||||
for="qry_limit__events">
|
|
||||||
Max results:
|
|
||||||
|
|
||||||
<select
|
<!-- Sort: mutually exclusive chips -->
|
||||||
id="qry_limit__events"
|
<div class="flex flex-row flex-wrap items-center gap-1">
|
||||||
bind:value={$idaa_loc.recovery_meetings.qry__limit}
|
<span class="text-xs opacity-50">Sort:</span>
|
||||||
class="
|
{#each [
|
||||||
select preset-tonal-tertiary preset-outline-tertiary-200-800 form-control
|
['updated_on', 'Last Updated', 'fa-clock'],
|
||||||
col-sm-12
|
['name_asc', 'Name A–Z', 'fa-sort-alpha-down'],
|
||||||
inline-block
|
['name_desc', 'Name Z–A', 'fa-sort-alpha-up-alt']
|
||||||
w-20
|
] as [mode, label, icon]}
|
||||||
px-1 text-sm
|
{@const active = $idaa_loc.recovery_meetings.qry__order_by === mode}
|
||||||
">
|
<button
|
||||||
<option value={10}>10</option>
|
type="button"
|
||||||
<option value={25}>25</option>
|
onclick={() => set_sort_mode(mode)}
|
||||||
<option value={50}>50</option>
|
aria-pressed={active}
|
||||||
<option value={75}>75</option>
|
title="Sort by {label}"
|
||||||
<option value={100}>100</option>
|
class="novi_btn btn btn-sm transition-all
|
||||||
<option value={150}>150</option>
|
{active
|
||||||
<option value={200} class:hidden={!$ae_loc.trusted_access}
|
? 'preset-filled-tertiary-400-600'
|
||||||
>200</option>
|
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||||
<option value={500} class:hidden={!$ae_loc.trusted_access}
|
<span class="fas {icon} mr-1"></span>{label}
|
||||||
>500</option>
|
</button>
|
||||||
</select>
|
{/each}
|
||||||
</label>
|
</div>
|
||||||
<!-- </span> -->
|
|
||||||
|
|
||||||
<!-- Sort by last updated date or by name -->
|
<!-- Limit: mutually exclusive chips; 200/500 for trusted staff only -->
|
||||||
<!-- <span
|
<div class="flex flex-row flex-wrap items-center gap-1">
|
||||||
class="flex flex-row gap-1 items-center justify-around"
|
<span class="text-xs opacity-50">Max:</span>
|
||||||
> -->
|
{#each [25, 50, 100, 150] as n}
|
||||||
<label
|
{@const active = $idaa_loc.recovery_meetings.qry__limit === n}
|
||||||
class="form-group w-32 text-sm md:w-42"
|
<button
|
||||||
for="qry_order_by__events">
|
type="button"
|
||||||
Sort by:
|
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>
|
||||||
|
|
||||||
<span class="flex flex-row items-center justify-around gap-1">
|
<span class="flex flex-row items-center justify-around gap-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user