feat: Add URL param filter option. #177
Conversation
This allows query parameters to be set, so that we can craft links to the backpack that show only badges that belong to certain badge class identifiers. e.g. backpack?filter.badgeclass_id=vwDwRDTbR_yeTV-r6m1lnw&filter.badgeclass_id=CiM7MSFASeGIrywCQlyjhg If a filter is active, we show this to the user and allow them to "remove the filter", ie. link to the /backpack. There is no UI to manage the filters. by design.
There was a problem hiding this comment.
Pull request overview
This PR adds URL parameter filtering to the backpack view, allowing users to filter badges by badge class identifiers through query parameters. When filters are active, users see a notification and can remove the filter to view all badges.
Key changes:
- Query parameter parsing for
filter.badgeclass_idto filter displayed badges - Visual indicator and link to clear filters when active
- GraphQL query enhancement to accept badge class entity IDs as filter parameters
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/routes/students/Backpack.svelte |
Implements URL param reading, passes filters to query, and adds UI for filter status |
src/locale/nl.js |
Adds Dutch translation for "show all badges" link |
src/locale/en.js |
Adds English translation for "show all badges" link |
src/api/queries.js |
Converts studentBadgeInstances to function accepting badge class entity IDs |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
When navigating from e.g. backpack?filter.badgeclass_id=11BR-001-01&filter.badgeclass_id=11BR-001-02 to backpack, onMount is not re-evaluated. So we must manually update some variables when clicking the link. For that, we've refactored the loading to be easier to follow and more modular. We needed this because we don't want to trigger a full rebuild. Now we can change only the variables that must be changed.
…n query Otherwise someone could craft a URL that contains graphql and the client would then query the backend with that.
|
@Iso5786 I have updated the PR with the suggestion from copilot and some additional next= logic And, most importantly, quite a big change in how we load the data from backend in the backpack onMount(). Because the onMount doesn't trigger when we navigate from backpack?some=argument to backpack - ie when only url arguments change. |
And not an absolute URL nor a relative path. Absolute urls can be abused to attack a user by redirecting to malicous sites or such. Relative paths will cause the redirect to behave unexpected by appending paths (i.e on /login, redirect to "foo" will redirect to "/login/foo")
|
Set to "draft" because PR #178 will change a lot how we'll implement this. |
This allows query parameters to be set, so that we can craft links to the backpack that show only badges that belong to certain badge class identifiers.
e.g. backpack?filter.badgeclass_id=vwDwRDTbR_yeTV-r6m1lnw&filter.badgeclass_id=CiM7MSFASeGIrywCQlyjhg
If a filter is active, we show this to the user and allow them to "remove the filter", ie. link to the /backpack.
There is no UI to manage the filters. by design.
Schermopname.van.2025-12-16.16-35-29.mp4