import FilterableList from '~/filterable_list';

export default class GroupFilterableList extends FilterableList {
  constructor(form, filter, holder, store) {
    super(form, filter, holder);

    this.store = store;
    this.$dropdown = $('.js-group-filter-dropdown-wrap');
  }

  bindEvents() {
    super.bindEvents();

    this.onFormSubmitWrapper = this.onFormSubmit.bind(this);
    this.onFilterOptionClikWrapper = this.onOptionClick.bind(this);

    this.filterForm.addEventListener('submit', this.onFormSubmitWrapper);
    this.$dropdown.on('click', 'a', this.onFilterOptionClikWrapper);
  }

  onFormSubmit(e) {
    e.preventDefault();

    this.filterResults();
  }

  onOptionClick(e) {
    e.preventDefault();
    const currentOption = $.trim(e.currentTarget.text);

    this.filterUrl = e.currentTarget.href;
    this.$dropdown.find('.dropdown-label').text(currentOption);
    this.filterResults(this.filterUrl);
  }

  onFilterSuccess(data) {
    super.onFilterSuccess(data);

    this.store.setGroups(data);
  }
}

@@ -946,16 +946,33 @@
 ess(data
+, textStatus, xhr
 ) %7B%0A    
@@ -1033,14 +1033,393 @@
 (data);%0A
+    this.store.storePagination(%7B%0A      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),%0A      'X-Page': xhr.getResponseHeader('X-Page'),%0A      'X-Total': xhr.getResponseHeader('X-Total'),%0A      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),%0A      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),%0A      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),%0A    %7D);%0A
   %7D%0A%7D%0A

Fix pagination when sorting by option