141 lines
3.8 KiB
JavaScript
141 lines
3.8 KiB
JavaScript
import $ from 'jquery';
|
|
import FilterableList from '~/filterable_list';
|
|
import { normalizeHeaders } from '../lib/utils/common_utils';
|
|
import { getParameterByName } from '../lib/utils/url_utility';
|
|
import eventHub from './event_hub';
|
|
|
|
export default class GroupFilterableList extends FilterableList {
|
|
constructor({
|
|
form,
|
|
filter,
|
|
holder,
|
|
filterEndpoint,
|
|
pagePath,
|
|
dropdownSel,
|
|
filterInputField,
|
|
action,
|
|
}) {
|
|
super(form, filter, holder, filterInputField);
|
|
this.form = form;
|
|
this.filterEndpoint = filterEndpoint;
|
|
this.pagePath = pagePath;
|
|
this.filterInputField = filterInputField;
|
|
this.$dropdown = $(dropdownSel);
|
|
this.action = action;
|
|
}
|
|
|
|
getFilterEndpoint() {
|
|
return this.filterEndpoint;
|
|
}
|
|
|
|
getPagePath(queryData) {
|
|
const params = queryData ? $.param(queryData) : '';
|
|
const queryString = params ? `?${params}` : '';
|
|
const path = this.pagePath || window.location.pathname;
|
|
return `${path}${queryString}`;
|
|
}
|
|
|
|
bindEvents() {
|
|
super.bindEvents();
|
|
|
|
this.onFilterOptionClickWrapper = this.onOptionClick.bind(this);
|
|
|
|
this.$dropdown.on('click', 'a', this.onFilterOptionClickWrapper);
|
|
}
|
|
|
|
onFilterInput() {
|
|
const queryData = {};
|
|
const $form = $(this.form);
|
|
const archivedParam = getParameterByName('archived');
|
|
const filterGroupsParam = $form.find(`[name="${this.filterInputField}"]`).val();
|
|
|
|
if (filterGroupsParam) {
|
|
queryData[this.filterInputField] = filterGroupsParam;
|
|
}
|
|
|
|
if (archivedParam) {
|
|
queryData.archived = archivedParam;
|
|
}
|
|
|
|
this.filterResults(queryData);
|
|
|
|
if (this.setDefaultFilterOption) {
|
|
this.setDefaultFilterOption();
|
|
}
|
|
}
|
|
|
|
setDefaultFilterOption() {
|
|
const defaultOption = $.trim(
|
|
this.$dropdown.find('.dropdown-menu li.js-filter-sort-order a').first().text(),
|
|
);
|
|
this.$dropdown.find('.dropdown-label').text(defaultOption);
|
|
}
|
|
|
|
onOptionClick(e) {
|
|
e.preventDefault();
|
|
|
|
const queryData = {};
|
|
|
|
// Get type of option selected from dropdown
|
|
const currentTargetClassList = e.currentTarget.parentElement.classList;
|
|
const isOptionFilterBySort = currentTargetClassList.contains('js-filter-sort-order');
|
|
const isOptionFilterByArchivedProjects = currentTargetClassList.contains(
|
|
'js-filter-archived-projects',
|
|
);
|
|
|
|
// Get option query param, also preserve currently applied query param
|
|
const sortParam = getParameterByName(
|
|
'sort',
|
|
isOptionFilterBySort ? e.currentTarget.search : window.location.search,
|
|
);
|
|
const archivedParam = getParameterByName(
|
|
'archived',
|
|
isOptionFilterByArchivedProjects ? e.currentTarget.search : window.location.search,
|
|
);
|
|
|
|
if (sortParam) {
|
|
queryData.sort = sortParam;
|
|
}
|
|
|
|
if (archivedParam) {
|
|
queryData.archived = archivedParam;
|
|
}
|
|
|
|
this.filterResults(queryData);
|
|
|
|
// Active selected option
|
|
if (isOptionFilterBySort) {
|
|
this.$dropdown.find('.dropdown-label').text($.trim(e.currentTarget.text));
|
|
this.$dropdown.find('.dropdown-menu li.js-filter-sort-order a').removeClass('is-active');
|
|
} else if (isOptionFilterByArchivedProjects) {
|
|
this.$dropdown
|
|
.find('.dropdown-menu li.js-filter-archived-projects a')
|
|
.removeClass('is-active');
|
|
}
|
|
|
|
$(e.target).addClass('is-active');
|
|
|
|
// Clear current value on search form
|
|
this.form.querySelector(`[name="${this.filterInputField}"]`).value = '';
|
|
}
|
|
|
|
onFilterSuccess(res, queryData) {
|
|
const currentPath = this.getPagePath(queryData);
|
|
|
|
window.history.replaceState(
|
|
{
|
|
page: currentPath,
|
|
},
|
|
document.title,
|
|
currentPath,
|
|
);
|
|
|
|
eventHub.$emit(
|
|
`${this.action}updateGroups`,
|
|
res.data,
|
|
Object.prototype.hasOwnProperty.call(queryData, this.filterInputField),
|
|
);
|
|
eventHub.$emit(`${this.action}updatePagination`, normalizeHeaders(res.headers));
|
|
}
|
|
}
|