Skip to content

Create shared filterable dropdown HAML

Brandon Labuschagne requested to merge dropdown-filter-component into master

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! */ },
});

Merge request reports