Enhance alias filtering functionality in IP routes
- Added a new function to apply alias changes dynamically based on user selection, improving the responsiveness of the alias filter. - Updated the alias selection logic to ensure consistency with URL parameters, enhancing user experience when navigating between different aliases. - Refactored the alias filter component to include a class for better z-index management, ensuring proper display layering in the UI.
This commit is contained in:
@@ -36,7 +36,7 @@
|
|||||||
<Select.Trigger class="mt-1 w-[220px]">
|
<Select.Trigger class="mt-1 w-[220px]">
|
||||||
{selectedLabel}
|
{selectedLabel}
|
||||||
</Select.Trigger>
|
</Select.Trigger>
|
||||||
<Select.Content>
|
<Select.Content class="z-[1200]">
|
||||||
<Select.Item value="all">{allLabel}</Select.Item>
|
<Select.Item value="all">{allLabel}</Select.Item>
|
||||||
{#each availableAliases as alias (alias)}
|
{#each availableAliases as alias (alias)}
|
||||||
<Select.Item value={alias}>{alias}</Select.Item>
|
<Select.Item value={alias}>{alias}</Select.Item>
|
||||||
|
|||||||
@@ -349,6 +349,20 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function applyAliasIfChanged(nextAlias: string) {
|
||||||
|
const currentAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
|
||||||
|
if (nextAlias === currentAlias) return;
|
||||||
|
const q = new URLSearchParams(page.url.searchParams);
|
||||||
|
if (nextAlias === 'all') q.delete('aliases');
|
||||||
|
else q.set('aliases', nextAlias);
|
||||||
|
const qs = q.toString();
|
||||||
|
await goto(`${page.url.pathname}${qs ? `?${qs}` : ''}`, {
|
||||||
|
replaceState: true,
|
||||||
|
noScroll: true,
|
||||||
|
keepFocus: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let queryKey = $derived(page.url.searchParams.toString());
|
let queryKey = $derived(page.url.searchParams.toString());
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
queryKey;
|
queryKey;
|
||||||
@@ -361,6 +375,12 @@
|
|||||||
void load();
|
void load();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
const nextAlias = aliasFilter;
|
||||||
|
void applyAliasIfChanged(nextAlias);
|
||||||
|
});
|
||||||
|
|
||||||
let staleSeconds = $derived.by(() =>
|
let staleSeconds = $derived.by(() =>
|
||||||
lastSuccessAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastSuccessAtMs) / 1000))
|
lastSuccessAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastSuccessAtMs) / 1000))
|
||||||
);
|
);
|
||||||
@@ -427,11 +447,9 @@
|
|||||||
max="300"
|
max="300"
|
||||||
class="mt-1 h-9 w-28 rounded-md border bg-background px-2 text-sm"
|
class="mt-1 h-9 w-28 rounded-md border bg-background px-2 text-sm"
|
||||||
bind:value={refreshInput}
|
bind:value={refreshInput}
|
||||||
|
onchange={() => void applyControls()}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<Button variant="outline" size="sm" onclick={() => void applyControls()} disabled={loading}>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if partial}
|
{#if partial}
|
||||||
|
|||||||
Reference in New Issue
Block a user