ActiveAdminAutoSelect
This gem is a nifty UI widget, which combines the Select2 library, PostgeSQL and ActiveAdmin, for helping you filter records in ActiveAdmin using auto-completion, based on certain database columns of your choice.
Installation
Add this line to your application's Gemfile:
gem 'active_admin_auto_select'Currently, Select2 3.5 is required. Select2 versions 4+ are not compatible as the API contains breaking changes. We are looking to remedy this as soon as possible.
And then execute:
> bundleAdd the following directives to your Javascript manifest file:
//= require select2
//= require underscore
//= require autoselectOr for Coffeescript flavor, add this:
#= require select2
#= require underscore
#= require autoselectAdd the following directive to your Stylesheet manifest file:
@import "select2";Usage
After installing the gem, you have to add some lines into the ActiveAdmin controller you want to auto_select.
For example, say you want to add the widget in order to filter to the users' id filter, by searching in their full names or emails:
Call the auto_select method in order to create the collection_action
auto_select :first_name, :last_name, :email,
{
'users_with_properties' => ->{ User.joins(:properties).uniq }
}In the example above, first_name, :last_name and :email are the database columns that help you find the desired user.
Anything that is typed into the autocomplete field will be lookup in the columns specified here. Last argument is a Hash of
scopes that will make sense by reading through the next example.
Define the relevant filter in your controller
filter :id_eq, label: 'User',
input_html: {
data: {
scope: 'users_with_properties',
url: 'users/autoselect',
placeholder: 'Select a user'
}
}Notice
-
:id_eq(required) is the column being filteredid+ the_eqsuffix (Ransack style). -
data-scopeoption is the desired scope that will be used by the widget in order to fetch the similar users. -
data-url(required) is the url generated by the action, which is defined in the ActiveAdmin controller.
Instantiate the AutoSelect Javascript class in your active_admin's javascript file.
$(document).ready ->
newAutoSelect = new AutoSelect(input: $('#q_id_eq'))
newAutoSelect.init()Where #q_user_id_eq use the generated input's id of the filter you added. For instance,
if your filter's name in the ActiveAdmin controller is defined as id_eq, then the id
attribute of the generated input will be q_id_eq.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/spyrbri/admin_auto_select. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
License
The gem is available as open source under the terms of the MIT License.