feat: connect the sort on the Elements page #134
Closed
+479
−23
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The sort button on the Elements page now works. It opens a menu where the user chooses the field (Code, Difficulty, Name) and the direction (Ascending, Descending), and the choice is sent to the API as
sort: CatalogSort.Closes #128
What is in it
SortMenu: the Base UIMenuwith two labelled radio groups ("Sort by" and "Direction"). This is the menu button pattern of the WAI-ARIA Authoring Practices: the arrow keys, Enter, Space, Escape and type-ahead work, items have the rolemenuitemradio, and the chosen one isaria-checked. The menu stays open after a choice, so field and direction can be chosen one after the other. The button still reads "Sort by Code · Ascending" and shows the current choice.?sort=difficulty&dir=desc, next to?search=. The default (code, ascending) is left out, so the address is clean and the first request is the same as before. An unknown value is ignored. Changing the search keeps the sort and the other way round (before, the search overwrote the whole query string).sortandfilterare part of the cache key ofsearchCatalog(already so incache.ts), so a new sort is a new list that starts at page one. "Load more" is sent with the same sort.BAD_USER_INPUTotherwise): the item is disabled but can still be reached with the keyboard, and the reason is read with it (aria-describedby).?sort=difficultywithout an apparatus sorts by code and is not sent.SORT_FIELDSinsearchOperations.ts), with aneedsApparatusflag. A new field is one line there (and in the API); the menu and the address are built from the list. The sorting itself is on the server with an index and a cursor per sort, so it does not depend on how many elements are loaded.Choices
?apparatus=<id>and send it asfilter.apparatusId, so the rule works and is tested now, and the filter issue only has to write that parameter. If that issue chooses another name for the parameter,apparatusIdinElementsPage.tsxis the one place to change.Menuand not a native<select>: a<select>cannot have two groups with a disabled item that explains itself, and the project already uses Base UI.Testing
ElementsPage.test.tsx(11 new tests): each field and direction is sent and shown on the button; the address, the clean default, an unknown address, the search and the sort keeping each other; a new sort starts from the first page and "Load more" keeps the sort; Difficulty is disabled with the reason without an apparatus, and works with one (sendsfilterandsort).tsc,eslint,vite buildand the 250 frontend tests pass. The backend tests in this worktree could not load the Prisma client (not generated here); the backend is not changed.🤖 Generated with Claude Code