diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte index efb29d3e3a..91de64513c 100644 --- a/frontend/src/lib/components/home/ItemsList.svelte +++ b/frontend/src/lib/components/home/ItemsList.svelte @@ -35,6 +35,8 @@ import FlowIcon from './FlowIcon.svelte' import RawAppRow from '../common/table/RawAppRow.svelte' import { canWrite } from '$lib/utils' + import { page } from '$app/stores' + import { setQuery } from '$lib/navigation' type TableItem = T & { canWrite: boolean @@ -56,7 +58,7 @@ let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = [] - let itemKind: 'script' | 'flow' | 'app' | 'all' = 'all' + let itemKind = ($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all' let shareModal: ShareModal let moveDrawer: MoveDrawer @@ -281,7 +283,13 @@
- + { + setQuery($page.url, 'kind', itemKind) + }} + class="h-10" + > {#if HOME_SEARCH_SHOW_FLOW} diff --git a/frontend/src/lib/components/home/ListFilters.svelte b/frontend/src/lib/components/home/ListFilters.svelte index 8077c94b98..9ed6a9c7aa 100644 --- a/frontend/src/lib/components/home/ListFilters.svelte +++ b/frontend/src/lib/components/home/ListFilters.svelte @@ -5,11 +5,18 @@ import { fade } from 'svelte/transition' import { Badge } from '../common' import { APP_TO_ICON_COMPONENT } from '../icons' + import { setQuery } from '$lib/navigation' + import { page } from '$app/stores' export let filters: string[] export let selectedFilter: string | undefined = undefined export let resourceType = false + export let queryName = 'filter' + if (selectedFilter == undefined) { + let queryValue = $page.url.searchParams.get(queryName) ?? undefined + selectedFilter = queryValue + } function getIconComponent(name: string) { return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]] } @@ -32,6 +39,11 @@ )} on:click={() => { selectedFilter = selectedFilter == filter ? undefined : filter + if (selectedFilter) { + setQuery($page.url, queryName, selectedFilter) + } else { + setQuery($page.url, queryName, undefined) + } }} color={filter === selectedFilter ? 'blue' : 'gray'} baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'} diff --git a/frontend/src/lib/navigation.ts b/frontend/src/lib/navigation.ts index 0ef481cdeb..1f716c6a61 100644 --- a/frontend/src/lib/navigation.ts +++ b/frontend/src/lib/navigation.ts @@ -1,6 +1,10 @@ import { goto } from '$app/navigation' -export async function setQuery(url: URL, key: string, value: string): Promise { - url.searchParams.set(key, value) +export async function setQuery(url: URL, key: string, value: string | undefined): Promise { + if (value != undefined) { + url.searchParams.set(key, value) + } else { + url.searchParams.delete(key) + } await goto(`?${url.searchParams.toString()}`) } diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte index d2302a34a2..9633fa320a 100644 --- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte @@ -377,7 +377,12 @@
{#if tab != 'states'} - + {/if}