2016-12-14 03:55:25 +00:00
|
|
|
/* global Turbolinks */
|
|
|
|
|
2016-12-13 14:52:43 +00:00
|
|
|
(() => {
|
2016-11-04 21:27:11 +00:00
|
|
|
class FilteredSearchManager {
|
|
|
|
constructor() {
|
2016-12-09 17:44:09 +00:00
|
|
|
this.filteredSearchInput = document.querySelector('.filtered-search');
|
|
|
|
this.clearSearchButton = document.querySelector('.clear-search');
|
|
|
|
|
2017-01-09 18:15:10 +00:00
|
|
|
if (this.filteredSearchInput) {
|
|
|
|
this.tokenizer = gl.FilteredSearchTokenizer;
|
|
|
|
this.dropdownManager = new gl.FilteredSearchDropdownManager();
|
2016-12-08 21:42:58 +00:00
|
|
|
|
2017-01-09 18:15:10 +00:00
|
|
|
this.bindEvents();
|
|
|
|
this.loadSearchParamsFromURL();
|
|
|
|
this.dropdownManager.setDropdown();
|
|
|
|
|
|
|
|
this.cleanupWrapper = this.cleanup.bind(this);
|
|
|
|
document.addEventListener('page:fetch', this.cleanupWrapper);
|
|
|
|
}
|
2016-12-08 21:42:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
cleanup() {
|
2016-12-09 21:36:44 +00:00
|
|
|
this.unbindEvents();
|
2016-12-09 17:44:09 +00:00
|
|
|
document.removeEventListener('page:fetch', this.cleanupWrapper);
|
|
|
|
}
|
2016-12-08 21:42:58 +00:00
|
|
|
|
2016-11-04 21:27:11 +00:00
|
|
|
bindEvents() {
|
2016-12-12 15:21:38 +00:00
|
|
|
this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
|
2016-12-12 22:37:49 +00:00
|
|
|
this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
|
2016-12-09 21:36:44 +00:00
|
|
|
this.checkForEnterWrapper = this.checkForEnter.bind(this);
|
|
|
|
this.clearSearchWrapper = this.clearSearch.bind(this);
|
|
|
|
this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
|
2017-01-18 21:39:43 +00:00
|
|
|
this.showOnClick = this.showOnClick.bind(this);
|
2016-12-09 21:36:44 +00:00
|
|
|
|
|
|
|
this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
|
2016-12-12 22:37:49 +00:00
|
|
|
this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
|
2016-12-09 21:36:44 +00:00
|
|
|
this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
|
|
|
|
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
|
2017-01-18 21:39:43 +00:00
|
|
|
this.filteredSearchInput.addEventListener('click', this.showOnClick);
|
2016-12-09 21:36:44 +00:00
|
|
|
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
|
|
|
|
}
|
|
|
|
|
|
|
|
unbindEvents() {
|
|
|
|
this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
|
2016-12-12 22:37:49 +00:00
|
|
|
this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
|
2016-12-09 21:36:44 +00:00
|
|
|
this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
|
|
|
|
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
|
2017-01-18 21:39:43 +00:00
|
|
|
this.filteredSearchInput.removeEventListener('click', this.showOnClick);
|
2016-12-09 21:36:44 +00:00
|
|
|
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
|
2016-12-07 18:55:03 +00:00
|
|
|
}
|
|
|
|
|
2016-12-09 21:36:44 +00:00
|
|
|
checkForBackspace(e) {
|
2016-12-12 22:27:10 +00:00
|
|
|
// 8 = Backspace Key
|
|
|
|
// 46 = Delete Key
|
|
|
|
if (e.keyCode === 8 || e.keyCode === 46) {
|
2016-12-09 21:36:44 +00:00
|
|
|
// Reposition dropdown so that it is aligned with cursor
|
2016-12-12 15:21:38 +00:00
|
|
|
this.dropdownManager.updateCurrentDropdownOffset();
|
2016-12-09 21:36:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-14 16:37:55 +00:00
|
|
|
checkForEnter(e) {
|
|
|
|
if (e.keyCode === 13) {
|
|
|
|
e.preventDefault();
|
2016-12-09 21:20:41 +00:00
|
|
|
|
|
|
|
// Prevent droplab from opening dropdown
|
2016-12-12 15:21:38 +00:00
|
|
|
this.dropdownManager.destroyDroplab();
|
2016-12-09 21:20:41 +00:00
|
|
|
|
2016-11-04 21:27:11 +00:00
|
|
|
this.search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-12 22:37:49 +00:00
|
|
|
toggleClearSearchButton(e) {
|
|
|
|
if (e.target.value) {
|
|
|
|
this.clearSearchButton.classList.remove('hidden');
|
|
|
|
} else {
|
|
|
|
this.clearSearchButton.classList.add('hidden');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
clearSearch(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
this.filteredSearchInput.value = '';
|
|
|
|
this.clearSearchButton.classList.add('hidden');
|
|
|
|
|
|
|
|
this.dropdownManager.resetDropdowns();
|
|
|
|
}
|
|
|
|
|
|
|
|
loadSearchParamsFromURL() {
|
2016-12-13 03:24:55 +00:00
|
|
|
const params = gl.utils.getUrlParamsArray();
|
2017-01-20 21:35:39 +00:00
|
|
|
const usernameParams = this.getUsernameParams();
|
2016-12-13 14:52:43 +00:00
|
|
|
const inputValues = [];
|
2016-12-12 22:37:49 +00:00
|
|
|
|
|
|
|
params.forEach((p) => {
|
|
|
|
const split = p.split('=');
|
2016-12-13 04:15:31 +00:00
|
|
|
const keyParam = decodeURIComponent(split[0]);
|
2016-12-12 22:37:49 +00:00
|
|
|
const value = split[1];
|
|
|
|
|
2016-12-13 04:15:31 +00:00
|
|
|
// Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys
|
|
|
|
const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(p);
|
2016-12-12 22:37:49 +00:00
|
|
|
|
2016-12-13 04:15:31 +00:00
|
|
|
if (condition) {
|
|
|
|
inputValues.push(`${condition.tokenKey}:${condition.value}`);
|
2016-12-12 22:37:49 +00:00
|
|
|
} else {
|
|
|
|
// Sanitize value since URL converts spaces into +
|
|
|
|
// Replace before decode so that we know what was originally + versus the encoded +
|
|
|
|
const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
|
2016-12-13 04:15:31 +00:00
|
|
|
const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam);
|
2016-12-12 22:37:49 +00:00
|
|
|
|
|
|
|
if (match) {
|
2016-12-16 16:22:09 +00:00
|
|
|
const indexOf = keyParam.indexOf('_');
|
|
|
|
const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
|
2016-12-12 22:37:49 +00:00
|
|
|
const symbol = match.symbol;
|
2016-12-13 04:15:31 +00:00
|
|
|
let quotationsToUse = '';
|
2016-12-12 22:37:49 +00:00
|
|
|
|
2016-12-13 04:15:31 +00:00
|
|
|
if (sanitizedValue.indexOf(' ') !== -1) {
|
2016-12-12 22:37:49 +00:00
|
|
|
// Prefer ", but use ' if required
|
|
|
|
quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
|
|
|
|
}
|
|
|
|
|
2016-12-13 04:15:31 +00:00
|
|
|
inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
|
2017-01-20 21:35:39 +00:00
|
|
|
} else if (!match && keyParam === 'assignee_id') {
|
|
|
|
const id = parseInt(value, 10);
|
|
|
|
if (usernameParams[id]) {
|
|
|
|
inputValues.push(`assignee:@${usernameParams[id]}`);
|
|
|
|
}
|
|
|
|
} else if (!match && keyParam === 'author_id') {
|
|
|
|
const id = parseInt(value, 10);
|
|
|
|
if (usernameParams[id]) {
|
|
|
|
inputValues.push(`author:@${usernameParams[id]}`);
|
|
|
|
}
|
2016-12-13 04:15:31 +00:00
|
|
|
} else if (!match && keyParam === 'search') {
|
2016-12-12 22:42:00 +00:00
|
|
|
inputValues.push(sanitizedValue);
|
2016-12-12 22:37:49 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Trim the last space value
|
2016-12-12 22:42:00 +00:00
|
|
|
this.filteredSearchInput.value = inputValues.join(' ');
|
2016-12-12 22:37:49 +00:00
|
|
|
|
2016-12-12 22:42:00 +00:00
|
|
|
if (inputValues.length > 0) {
|
2016-12-12 22:37:49 +00:00
|
|
|
this.clearSearchButton.classList.remove('hidden');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-04 21:27:11 +00:00
|
|
|
search() {
|
2016-12-13 14:52:43 +00:00
|
|
|
const paths = [];
|
2016-12-12 16:28:22 +00:00
|
|
|
const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value);
|
2016-12-13 03:15:50 +00:00
|
|
|
const currentState = gl.utils.getParameterByName('state') || 'opened';
|
2016-12-12 22:42:00 +00:00
|
|
|
paths.push(`state=${currentState}`);
|
2016-12-13 03:15:50 +00:00
|
|
|
|
2016-11-09 23:07:30 +00:00
|
|
|
tokens.forEach((token) => {
|
2016-12-13 14:52:43 +00:00
|
|
|
const condition = gl.FilteredSearchTokenKeys
|
|
|
|
.searchByConditionKeyValue(token.key, token.value.toLowerCase());
|
2016-12-13 04:15:31 +00:00
|
|
|
const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key);
|
2016-12-17 19:22:00 +00:00
|
|
|
const keyParam = param ? `${token.key}_${param}` : token.key;
|
2016-11-14 19:22:32 +00:00
|
|
|
let tokenPath = '';
|
|
|
|
|
2016-12-17 19:22:00 +00:00
|
|
|
if (condition) {
|
2016-12-13 04:15:31 +00:00
|
|
|
tokenPath = condition.url;
|
2016-12-13 05:16:45 +00:00
|
|
|
} else {
|
2017-01-06 19:56:34 +00:00
|
|
|
let tokenValue = token.value;
|
|
|
|
|
|
|
|
if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
|
|
|
|
(tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
|
|
|
|
tokenValue = tokenValue.slice(1, tokenValue.length - 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
|
2016-11-14 19:22:32 +00:00
|
|
|
}
|
|
|
|
|
2016-12-12 22:42:00 +00:00
|
|
|
paths.push(tokenPath);
|
2016-11-04 21:27:11 +00:00
|
|
|
});
|
|
|
|
|
2016-11-09 23:07:30 +00:00
|
|
|
if (searchToken) {
|
2016-12-12 22:42:00 +00:00
|
|
|
paths.push(`search=${encodeURIComponent(searchToken)}`);
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
|
|
|
|
2016-12-13 03:19:16 +00:00
|
|
|
Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
2017-01-20 21:35:39 +00:00
|
|
|
|
|
|
|
getUsernameParams() {
|
|
|
|
const usernamesById = {};
|
|
|
|
try {
|
|
|
|
const attribute = this.filteredSearchInput.getAttribute('data-username-params');
|
|
|
|
JSON.parse(attribute).forEach((user) => {
|
|
|
|
usernamesById[user.id] = user.username;
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
// do nothing
|
|
|
|
}
|
|
|
|
return usernamesById;
|
|
|
|
}
|
2017-01-18 21:39:43 +00:00
|
|
|
|
|
|
|
showOnClick() {
|
2017-01-19 10:10:53 +00:00
|
|
|
const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
|
|
|
|
const currentDropdownRef = dropdown.reference;
|
2017-01-18 21:39:43 +00:00
|
|
|
|
|
|
|
this.setDropdownWrapper();
|
|
|
|
currentDropdownRef.dispatchInputEvent();
|
|
|
|
}
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
|
|
|
|
2016-12-13 14:52:43 +00:00
|
|
|
window.gl = window.gl || {};
|
|
|
|
gl.FilteredSearchManager = FilteredSearchManager;
|
|
|
|
})();
|