fix(ui): defer catalogue filter navigation to explicit Apply button
Some checks failed
CI / Backend (push) Failing after 11s
Release / Check ui (push) Successful in 34s
Release / Test backend (push) Successful in 52s
CI / UI (push) Successful in 55s
Release / Docker / caddy (push) Successful in 48s
CI / UI (pull_request) Successful in 39s
CI / Backend (pull_request) Successful in 43s
Release / Docker / runner (push) Failing after 38s
Release / Docker / ui (push) Successful in 1m55s
Release / Docker / backend (push) Successful in 3m30s
Release / Gitea Release (push) Has been skipped
Some checks failed
CI / Backend (push) Failing after 11s
Release / Check ui (push) Successful in 34s
Release / Test backend (push) Successful in 52s
CI / UI (push) Successful in 55s
Release / Docker / caddy (push) Successful in 48s
CI / UI (pull_request) Successful in 39s
CI / Backend (pull_request) Successful in 43s
Release / Docker / runner (push) Failing after 38s
Release / Docker / ui (push) Successful in 1m55s
Release / Docker / backend (push) Successful in 3m30s
Release / Gitea Release (push) Has been skipped
Removed onchange→navigateWithFilters from all three selects — the immediate navigation on every change was the root cause of both bugs: 1. Filters applied before the user finished selecting all options. 2. Svelte 5 bind:value updates state after onchange fires, so the navigateWithFilters call read stale values → wrong URL params → no results. Renamed navigateWithFilters to applyFilters (no overrides arg needed). Added an amber Apply button next to Reset; selects now only update local state until the user presses Apply.
This commit is contained in:
@@ -22,11 +22,11 @@
|
|||||||
filterStatus = data.status;
|
filterStatus = data.status;
|
||||||
});
|
});
|
||||||
|
|
||||||
function navigateWithFilters(overrides: { sort?: string; genre?: string; status?: string }) {
|
function applyFilters() {
|
||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
params.set('sort', overrides.sort ?? filterSort);
|
params.set('sort', filterSort);
|
||||||
params.set('genre', overrides.genre ?? filterGenre);
|
params.set('genre', filterGenre);
|
||||||
params.set('status', overrides.status ?? filterStatus);
|
params.set('status', filterStatus);
|
||||||
params.set('page', '1');
|
params.set('page', '1');
|
||||||
goto(`/catalogue?${params.toString()}`);
|
goto(`/catalogue?${params.toString()}`);
|
||||||
}
|
}
|
||||||
@@ -414,7 +414,6 @@
|
|||||||
id="filter-sort"
|
id="filter-sort"
|
||||||
name="sort"
|
name="sort"
|
||||||
bind:value={filterSort}
|
bind:value={filterSort}
|
||||||
onchange={() => navigateWithFilters({ sort: filterSort })}
|
|
||||||
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 w-full"
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 w-full"
|
||||||
>
|
>
|
||||||
{#each sorts as s}
|
{#each sorts as s}
|
||||||
@@ -429,7 +428,6 @@
|
|||||||
id="filter-genre"
|
id="filter-genre"
|
||||||
name="genre"
|
name="genre"
|
||||||
bind:value={filterGenre}
|
bind:value={filterGenre}
|
||||||
onchange={() => navigateWithFilters({ genre: filterGenre })}
|
|
||||||
disabled={isRankView}
|
disabled={isRankView}
|
||||||
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
||||||
>
|
>
|
||||||
@@ -445,7 +443,6 @@
|
|||||||
id="filter-status"
|
id="filter-status"
|
||||||
name="status"
|
name="status"
|
||||||
bind:value={filterStatus}
|
bind:value={filterStatus}
|
||||||
onchange={() => navigateWithFilters({ status: filterStatus })}
|
|
||||||
disabled={isRankView}
|
disabled={isRankView}
|
||||||
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
||||||
>
|
>
|
||||||
@@ -464,6 +461,13 @@
|
|||||||
<a href="/catalogue" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
|
<a href="/catalogue" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
|
||||||
Reset
|
Reset
|
||||||
</a>
|
</a>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={applyFilters}
|
||||||
|
class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user