1 files changed, 87 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js
new file mode 100644
index 00000000000..439a931ddad
--- /dev/null
+++ b/app/assets/javascripts/groups/groups_filterable_list.js
@@ -0,0 +1,87 @@
+import FilterableList from '~/filterable_list';
+import eventHub from './event_hub';
+
+export default class GroupFilterableList extends FilterableList {
+  constructor({ form, filter, holder, filterEndpoint, pagePath }) {
+    super(form, filter, holder);
+    this.form = form;
+    this.filterEndpoint = filterEndpoint;
+    this.pagePath = pagePath;
+    this.$dropdown = $('.js-group-filter-dropdown-wrap');
+  }
+
+  getFilterEndpoint() {
+    return this.filterEndpoint;
+  }
+
+  getPagePath(queryData) {
+    const params = queryData ? $.param(queryData) : '';
+    const queryString = params ? `?${params}` : '';
+    return `${this.pagePath}${queryString}`;
+  }
+
+  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();
+
+    const $form = $(this.form);
+    const filterGroupsParam = $form.find('[name="filter_groups"]').val();
+    const queryData = {};
+
+    if (filterGroupsParam) {
+      queryData.filter_groups = filterGroupsParam;
+    }
+
+    this.filterResults(queryData);
+    this.setDefaultFilterOption();
+  }
+
+  setDefaultFilterOption() {
+    const defaultOption = $.trim(this.$dropdown.find('.dropdown-menu a:first-child').text());
+    this.$dropdown.find('.dropdown-label').text(defaultOption);
+  }
+
+  onOptionClick(e) {
+    e.preventDefault();
+
+    const queryData = {};
+    const sortParam = gl.utils.getParameterByName('sort', e.currentTarget.href);
+
+    if (sortParam) {
+      queryData.sort = sortParam;
+    }
+
+    this.filterResults(queryData);
+
+    // Active selected option
+    this.$dropdown.find('.dropdown-label').text($.trim(e.currentTarget.text));
+
+    // Clear current value on search form
+    this.form.querySelector('[name="filter_groups"]').value = '';
+  }
+
+  onFilterSuccess(data, xhr, queryData) {
+    super.onFilterSuccess(data, xhr, queryData);
+
+    const paginationData = {
+      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
+      'X-Page': xhr.getResponseHeader('X-Page'),
+      'X-Total': xhr.getResponseHeader('X-Total'),
+      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
+      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
+      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
+    };
+
+    eventHub.$emit('updateGroups', data);
+    eventHub.$emit('updatePagination', paginationData);
+  }
+}