Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Admin] Add dynamic filters to ui/table component #5376

Merged
merged 15 commits into from
Oct 10, 2023
Merged

[Admin] Add dynamic filters to ui/table component #5376

merged 15 commits into from
Oct 10, 2023

Commits on Oct 10, 2023

  1. Remove order promotions promotion code value from search key 

    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.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    68915c7 View commit details
    Browse the repository at this point in the history

  2. Include search_param in ui/table component 

    The ransack search param can now be dynamically set through the `ui/table`
component with a default value of `:q`.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    679001c View commit details
    Browse the repository at this point in the history

  3. Update Stimulus actions for improved search behavior 

    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.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    c3744d4 View commit details
    Browse the repository at this point in the history

  4. Round table borders directly instead of relying overflow:hidden

    @elia
    elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    1850b99 View commit details
    Browse the repository at this point in the history

  5. Introduce dynamic ransack filter component for complex queries 

    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] }
      }
    ]
    ...
  ) %>
```
    @elia
    elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    53e5b45 View commit details
    Browse the repository at this point in the history

  6. Implement dynamic checkboxes sorting within options 

    Sorts checkboxes based on their checked state, moving selected checkboxes to the top.
Improves user experience by making it easier to see active filters.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    01f75cf View commit details
    Browse the repository at this point in the history

  7. Add click outside to close details 

    Implements a click-outside event with `stimulus-use` to automatically close
the filter details dropdown.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    5f9aad1 View commit details
    Browse the repository at this point in the history

  8. Introduce dynamic search bar when selections are more than 6 

    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.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    2f41a2b View commit details
    Browse the repository at this point in the history

  9. Initialize checkboxes based on URL parameters 

    Uses URL query parameters to automatically check or uncheck checkboxes when
the component loads.
This is useful for sharing URLs with pre-applied filters.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    f48eef8 View commit details
    Browse the repository at this point in the history

  10. Highlight the filter if there are selected options

    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    983dcc9 View commit details
    Browse the repository at this point in the history

  11. Introduce new filters for the products index

    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    ca9e9f8 View commit details
    Browse the repository at this point in the history

  12. Introduce new filters for the orders index

    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    58d4bda View commit details
    Browse the repository at this point in the history

  13. Refactor event dispatching in Stimulus controllers 

    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.
    @rainerdema @elia
    rainerdema authored and elia committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    0d54847 View commit details
    Browse the repository at this point in the history

  14. Enable clickable filter labels for checkboxes 

    Enable functionality to allow users to toggle checkboxes by clicking
associated labels.
    @rainerdema
    rainerdema committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    ef86996 View commit details
    Browse the repository at this point in the history

  15. Add no-options message for empty filter

    @rainerdema
    rainerdema committed Oct 10, 2023
    Configuration menu
    Copy the full SHA
    6e78e0a View commit details
    Browse the repository at this point in the history