Show active filters; Toolbar refactor #37
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jeffdaley
changed the title
jeffdaley
changed the title
jeffdaley
commented
Feb 8, 2023
Comment on lines
-14
to
-19
| export enum FacetNames { | ||
| DocType = "docType", | ||
| Owners = "owners", | ||
| Status = "status", | ||
| Product = "product", | ||
| } |
There was a problem hiding this comment.
Moved this to toolbar.ts
jeffdaley
commented
Feb 8, 2023
Comment on lines
-68
to
-121
| handleClick(name, value) { | ||
| // Build filters (selected facet values). | ||
| let filters = { | ||
| docType: [], | ||
| owners: [], | ||
| status: [], | ||
| product: [], | ||
| }; | ||
| for (const facet in this.args.facets) { | ||
| let selectedFacetVals = []; | ||
| for (const facetVal in this.args.facets[facet]) { | ||
| if (this.args.facets[facet][facetVal]["selected"]) { | ||
| selectedFacetVals.push(facetVal); | ||
| } | ||
| } | ||
| filters[facet] = selectedFacetVals; | ||
| } | ||
|
|
||
| // Update filters based on what facet value was clicked and if it was | ||
| // previously selected or not. | ||
| if (this.args.facets[name][value]["selected"]) { | ||
| // Facet value was already selected so we need to remove it. | ||
| const index = filters[name].indexOf(value); | ||
| if (index > -1) { | ||
| filters[name].splice(index, 1); | ||
| } | ||
| } else { | ||
| // Facet value wasn't selected before so now we need to add it. | ||
| filters[name].push(value); | ||
| } | ||
|
|
||
| this.router.transitionTo({ | ||
| queryParams: { | ||
| docType: filters["docType"], | ||
| owners: filters["owners"], | ||
| page: 1, | ||
| product: filters["product"], | ||
| status: filters["status"], | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| @action | ||
| updateSortBy(value, closeDropdown) { | ||
| this.toolbar.sortBy = value; | ||
|
|
||
| this.router.transitionTo({ | ||
| queryParams: { | ||
| sortBy: value, | ||
| }, | ||
| }); | ||
| closeDropdown(); | ||
| } | ||
| } |
There was a problem hiding this comment.
This is the removed chunk
jfreda
approved these changes
Feb 22, 2023
There was a problem hiding this comment.
Looks reasonable to me - excited for this!
Design q (not blocking, just something I was thinking about): do you think we might want to differentiate the type of active filters somehow? It's probably mostly obvious which type each one is, but wondering if we'd want to label them something like type:RFC, product:Terraform etc. Not totally sure how I feel about this right now (there's a tradeoff of it looking busier) but wanted to see what you think.
|
@jfreda I tried it early on but it felt redundant, like the filters were obvious enough as types/products, etc. But I'll explore it further; it has potential to be helpful. |
anuragprafulla
referenced
this pull request
in razorpay/hermes
Jun 27, 2023
* Merge Facet types * Convert toolbar to TS * Add Toolbar types * Documentation * Add tests * Cleanup * Renames, docs, cleanup * Refactor `handleClick` * Toolbar Service with working filters on all routes * Working LinkTo filters * Design tags * Route-based filters * Improve dropdown closing and model loading * Tests, cleanup and rearranging * Move styles to SCSS; Documentation; Cleanup * Test `get-facet-query-hash` * Refactor route promises
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Shows which filters are active for a given route.
The newly created
ActiveFiltersservice captures a route's queryParams (i.e., active filters) whenever its model is loaded or refreshed. This creates a shared index of active filters for components and helpers to compute off. In general, this lets us be more efficient with queryParams: You'll notice the URLs are more concise, for example.You'll also see that the facet and sort controls have switched from
buttons toLinkTos. Instead of computing the queryParamsonClick, we do it beforehand, which means we can pass them directly to the component's@queryargument and ouronClickfunction only has to close the dropdown.