Create shared filterable dropdown HAML
What does this MR do?
This MR extracts the minimum code needed for a filterable, HAML based dropdown. It places the code in an easy to use, shared location.
Example usage
Render the view in HAML, passing through a unique identifier for the dropdown as well as a placeholder
= render 'shared/filterable_dropdown', container: 'js-group-filter-dropdown', placeholder: 'Choose a Group'
Initialise the dropdown in JS with the glDropdown
class, providing the required API and callback configuration
import $ from 'jquery';
import Api from '~/api';
const $groupFilterDropDown = $('.js-group-filter-dropdown');
$groupFilterDropDown.glDropdown({
selectable: true,
filterable: true,
filterRemote: true,
fieldName: 'group_id',
search: {
fields: ['full_name'],
},
data(term, callback) {
return Api.groups(term, {}, data => callback(data));
},
id(obj) {
return obj.id;
},
text(obj) {
return obj.full_name;
},
toggleLabel(obj) {
return obj.full_name;
},
clicked: () => { /* Do something! */ },
});