[Admin] Add dynamic filters to ui/table component
#5376
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
github-actions
bot
added
changelog:solidus_admin
changelog:solidus_core
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
11 times, most recently
from
f41c658
to
a273d3a
Compare
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
2 times, most recently
from
1820224
to
d32b379
Compare
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
d32b379
to
4acbb72
Compare
rainerdema
changed the title
ui/table componentui/table component
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
4acbb72
to
e54dff5
Compare
elia
reviewed
Sep 25, 2023
admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
Outdated
Show resolved
Hide resolved
admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
Outdated
Show resolved
Hide resolved
admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
Outdated
Show resolved
Hide resolved
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
e54dff5
to
27a6e10
Compare
3 tasks
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
3 times, most recently
from
baac1b0
to
eaed670
Compare
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
3 times, most recently
from
ba7dcbf
to
79ffb75
Compare
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
79ffb75
to
19a522f
Compare
github-actions
bot
removed
the
changelog:solidus_core
Removing "_or_order_promotions_promotion_code_value" from the `order_search_key` preference. This part of the search key was causing exceptions during pagination due to missing columns in the SQLite database. Specifically, the exception was : "ActiveRecord::StatementInvalid (SQLite3::SQLException: no such column: order_promotions_spree_orders.promotion_code_id)". Note: This bug fix will be evaluated in a separate PR.
The ransack search param can now be dynamically set through the `ui/table` component with a default value of `:q`.
In this way, the search will be triggered if there is any change in the form and all the other internal data actions can be removed.
elia
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
19a522f
to
55217e4
Compare
Introduces a new Ransack filter component to dynamically generate advanced,
grouped query parameters.
Suppose you have a dropdown for: 'State', 'Variants', and 'Promotions',
And checkboxes for: 'state_eq', 'line_items_variant_id' and 'promotions_id'.
The component will dynamically create the following query parameters:
q[g][0][c][0][a][]: state
q[g][0][c][0][p]: eq
q[g][0][c][0][v][]: checkout
...
q[g][1][c][31][a][]: line_items_variant_id
q[g][1][c][31][p]: in
q[g][1][c][31][v][]: 2
...
q[g][2][c][42][a][]: promotions_id
q[g][2][c][42][p]: in
q[g][2][c][42][v][]: 8
This provides greater flexibility when configuring filters for the table component.
Usage in table component:
The `filters` method within the table component can be used to define the
attributes, predicates, and options for the dynamic filter.
This makes it convenient to set up intricate filters directly from the table
component's configuration.
For instance:
```
<%= render component('ui/table').new(
...
filters: [
{
presentation: t('.filters.status'),
combinator: 'or',
attribute: "state",
predicate: "eq",
options: Spree::Order.state_machines[:state].states.map { |state| [state.value.titleize, state.value] }
}
]
...
) %>
```
Sorts checkboxes based on their checked state, moving selected checkboxes to the top. Improves user experience by making it easier to see active filters.
Implements a click-outside event with `stimulus-use` to automatically close the filter details dropdown.
Adds a search input field inside the details dropdown whenever the number of selections exceeds 6. The search input allows for quick filtering of available options.
Uses URL query parameters to automatically check or uncheck checkboxes when the component loads. This is useful for sharing URLs with pre-applied filters.
Switched from using `stimulus-use` dispatch to explicit bubbling. While using `stimulus-use`, targeting an upstream controller without specifying the controller's name wasn't feasible in this context. I've reverted to explicitly setting the event's bubbling property.
elia
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
55217e4
to
0d54847
Compare
Enable functionality to allow users to toggle checkboxes by clicking associated labels.
rainerdema
force-pushed
the
rainerd/add-dropdown-filter-component
branch
from
f2443dc
to
6e78e0a
Compare
elia
approved these changes
Oct 10, 2023
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.
Summary
This PR enhances the
ui/tablecomponent by introducing dynamic filtering capabilities.Note:
order_search_keypreference.Add.dynamic.filters.to.ui.table.component.mov
Lookbock:
Checklist
Check out our PR guidelines for more details.
The following are mandatory for all PRs:
The following are not always needed: