2020-04-08 14:13:33 +05:30
|
|
|
import { last } from 'lodash';
|
2017-08-17 22:00:37 +05:30
|
|
|
import FilteredSearchContainer from './container';
|
2018-03-27 19:54:05 +05:30
|
|
|
import FilteredSearchTokenizer from './filtered_search_tokenizer';
|
|
|
|
import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
|
|
|
|
import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
export default class DropdownUtils {
|
2017-08-17 22:00:37 +05:30
|
|
|
static getEscapedText(text) {
|
|
|
|
let escapedText = text;
|
|
|
|
const hasSpace = text.indexOf(' ') !== -1;
|
|
|
|
const hasDoubleQuote = text.indexOf('"') !== -1;
|
|
|
|
|
|
|
|
// Encapsulate value with quotes if it has spaces
|
|
|
|
// Known side effect: values's with both single and double quotes
|
|
|
|
// won't escape properly
|
|
|
|
if (hasSpace) {
|
|
|
|
if (hasDoubleQuote) {
|
|
|
|
escapedText = `'${text}'`;
|
|
|
|
} else {
|
|
|
|
// Encapsulate singleQuotes or if it hasSpace
|
|
|
|
escapedText = `"${text}"`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return escapedText;
|
|
|
|
}
|
|
|
|
|
|
|
|
static filterWithSymbol(filterSymbol, input, item) {
|
|
|
|
const updatedItem = item;
|
2018-03-27 19:54:05 +05:30
|
|
|
const searchInput = DropdownUtils.getSearchInput(input);
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
const title = updatedItem.title.toLowerCase();
|
|
|
|
let value = searchInput.toLowerCase();
|
|
|
|
let symbol = '';
|
|
|
|
|
|
|
|
// Remove the symbol for filter
|
|
|
|
if (value[0] === filterSymbol) {
|
2018-11-08 19:23:39 +05:30
|
|
|
[symbol] = value;
|
2017-08-17 22:00:37 +05:30
|
|
|
value = value.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Removes the first character if it is a quotation so that we can search
|
|
|
|
// with multiple words
|
2018-12-13 13:39:08 +05:30
|
|
|
if ((value[0] === '"' || value[0] === "'") && title.indexOf(' ') !== -1) {
|
2017-08-17 22:00:37 +05:30
|
|
|
value = value.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Eg. filterSymbol = ~ for labels
|
|
|
|
const matchWithoutSymbol = symbol === filterSymbol && title.indexOf(value) !== -1;
|
|
|
|
const match = title.indexOf(`${symbol}${value}`) !== -1;
|
|
|
|
|
|
|
|
updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
|
|
|
|
|
|
|
|
return updatedItem;
|
|
|
|
}
|
|
|
|
|
2017-09-10 17:25:29 +05:30
|
|
|
static filterHint(config, item) {
|
|
|
|
const { input, allowedKeys } = config;
|
2017-08-17 22:00:37 +05:30
|
|
|
const updatedItem = item;
|
2018-03-27 19:54:05 +05:30
|
|
|
const searchInput = DropdownUtils.getSearchQuery(input);
|
2018-12-13 13:39:08 +05:30
|
|
|
const { lastToken, tokens } = FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
|
2017-08-17 22:00:37 +05:30
|
|
|
const lastKey = lastToken.key || lastToken || '';
|
|
|
|
const allowMultiple = item.type === 'array';
|
|
|
|
const itemInExistingTokens = tokens.some(t => t.key === item.hint);
|
2020-03-13 15:44:24 +05:30
|
|
|
const isSearchItem = updatedItem.hint === 'search';
|
|
|
|
|
|
|
|
if (isSearchItem) {
|
|
|
|
updatedItem.droplab_hidden = true;
|
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
if (!allowMultiple && itemInExistingTokens) {
|
|
|
|
updatedItem.droplab_hidden = true;
|
2020-04-08 14:13:33 +05:30
|
|
|
} else if (!isSearchItem && (!lastKey || last(searchInput.split('')) === ' ')) {
|
2017-08-17 22:00:37 +05:30
|
|
|
updatedItem.droplab_hidden = false;
|
|
|
|
} else if (lastKey) {
|
|
|
|
const split = lastKey.split(':');
|
2020-04-08 14:13:33 +05:30
|
|
|
const tokenName = last(split[0].split(' '));
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
const match = isSearchItem
|
|
|
|
? allowedKeys.some(key => key.startsWith(tokenName.toLowerCase()))
|
|
|
|
: updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
|
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
updatedItem.droplab_hidden = tokenName ? match : false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return updatedItem;
|
|
|
|
}
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
static setDataValueIfSelected(filter, operator, selected) {
|
2017-08-17 22:00:37 +05:30
|
|
|
const dataValue = selected.getAttribute('data-value');
|
|
|
|
|
|
|
|
if (dataValue) {
|
2020-03-13 15:44:24 +05:30
|
|
|
FilteredSearchDropdownManager.addWordToInput({
|
|
|
|
tokenName: filter,
|
|
|
|
tokenOperator: operator,
|
|
|
|
tokenValue: dataValue,
|
|
|
|
clicked: true,
|
|
|
|
options: {
|
|
|
|
capitalizeTokenValue: selected.hasAttribute('data-capitalize'),
|
|
|
|
},
|
2018-12-05 23:21:45 +05:30
|
|
|
});
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
// Return boolean based on whether it was set
|
|
|
|
return dataValue !== null;
|
|
|
|
}
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
static getVisualTokenValues(visualToken) {
|
|
|
|
const tokenName = visualToken && visualToken.querySelector('.name').textContent.trim();
|
2018-12-13 13:39:08 +05:30
|
|
|
let tokenValue =
|
|
|
|
visualToken &&
|
|
|
|
visualToken.querySelector('.value') &&
|
|
|
|
visualToken.querySelector('.value').textContent.trim();
|
2018-03-17 18:26:18 +05:30
|
|
|
if (tokenName === 'label' && tokenValue) {
|
|
|
|
// remove leading symbol and wrapping quotes
|
|
|
|
tokenValue = tokenValue.replace(/^~("|')?(.*)/, '$2').replace(/("|')$/, '');
|
|
|
|
}
|
2020-03-13 15:44:24 +05:30
|
|
|
|
|
|
|
const operatorEl = visualToken && visualToken.querySelector('.operator');
|
|
|
|
const tokenOperator = operatorEl && operatorEl.textContent.trim();
|
|
|
|
|
|
|
|
return { tokenName, tokenOperator, tokenValue };
|
2018-03-17 18:26:18 +05:30
|
|
|
}
|
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
// Determines the full search query (visual tokens + input)
|
|
|
|
static getSearchQuery(untilInput = false) {
|
2018-11-08 19:23:39 +05:30
|
|
|
const { container } = FilteredSearchContainer;
|
2017-08-17 22:00:37 +05:30
|
|
|
const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
|
|
|
|
const values = [];
|
|
|
|
|
|
|
|
if (untilInput) {
|
2020-04-08 14:13:33 +05:30
|
|
|
const inputIndex = tokens.findIndex(t => t.classList.contains('input-token'));
|
2017-08-17 22:00:37 +05:30
|
|
|
// Add one to include input-token to the tokens array
|
|
|
|
tokens.splice(inputIndex + 1);
|
|
|
|
}
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
tokens.forEach(token => {
|
2017-08-17 22:00:37 +05:30
|
|
|
if (token.classList.contains('js-visual-token')) {
|
|
|
|
const name = token.querySelector('.name');
|
2020-03-13 15:44:24 +05:30
|
|
|
const operatorContainer = token.querySelector('.operator');
|
2017-08-17 22:00:37 +05:30
|
|
|
const value = token.querySelector('.value');
|
2017-09-10 17:25:29 +05:30
|
|
|
const valueContainer = token.querySelector('.value-container');
|
2017-08-17 22:00:37 +05:30
|
|
|
const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
|
|
|
|
let valueText = '';
|
2020-03-13 15:44:24 +05:30
|
|
|
let operator = '';
|
|
|
|
|
|
|
|
if (operatorContainer) {
|
|
|
|
operator = operatorContainer.textContent.trim();
|
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2017-09-10 17:25:29 +05:30
|
|
|
if (valueContainer && valueContainer.dataset.originalValue) {
|
|
|
|
valueText = valueContainer.dataset.originalValue;
|
|
|
|
} else if (value && value.innerText) {
|
2017-08-17 22:00:37 +05:30
|
|
|
valueText = value.innerText;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (token.className.indexOf('filtered-search-token') !== -1) {
|
2020-03-13 15:44:24 +05:30
|
|
|
values.push(`${name.innerText.toLowerCase()}:${operator}${symbol}${valueText}`);
|
2017-08-17 22:00:37 +05:30
|
|
|
} else {
|
|
|
|
values.push(name.innerText);
|
|
|
|
}
|
|
|
|
} else if (token.classList.contains('input-token')) {
|
2018-12-13 13:39:08 +05:30
|
|
|
const {
|
|
|
|
isLastVisualTokenValid,
|
|
|
|
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
|
|
|
|
const inputValue = input && input.value;
|
|
|
|
|
|
|
|
if (isLastVisualTokenValid) {
|
|
|
|
values.push(inputValue);
|
|
|
|
} else {
|
|
|
|
const previous = values.pop();
|
|
|
|
values.push(`${previous}${inputValue}`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
return values.map(value => value.trim()).join(' ');
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
static getSearchInput(filteredSearchInput) {
|
|
|
|
const inputValue = filteredSearchInput.value;
|
2018-03-27 19:54:05 +05:30
|
|
|
const { right } = DropdownUtils.getInputSelectionPosition(filteredSearchInput);
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
return inputValue.slice(0, right);
|
|
|
|
}
|
|
|
|
|
|
|
|
static getInputSelectionPosition(input) {
|
2018-11-08 19:23:39 +05:30
|
|
|
const { selectionStart } = input;
|
2017-08-17 22:00:37 +05:30
|
|
|
let inputValue = input.value;
|
|
|
|
// Replace all spaces inside quote marks with underscores
|
|
|
|
// (will continue to match entire string until an end quote is found if any)
|
|
|
|
// This helps with matching the beginning & end of a token:key
|
2018-12-13 13:39:08 +05:30
|
|
|
inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str =>
|
|
|
|
str.replace(/\s/g, '_'),
|
|
|
|
);
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
// Get the right position for the word selected
|
|
|
|
// Regex matches first space
|
|
|
|
let right = inputValue.slice(selectionStart).search(/\s/);
|
|
|
|
|
|
|
|
if (right >= 0) {
|
|
|
|
right += selectionStart;
|
|
|
|
} else if (right < 0) {
|
|
|
|
right = inputValue.length;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Get the left position for the word selected
|
|
|
|
// Regex matches last non-whitespace character
|
|
|
|
let left = inputValue.slice(0, right).search(/\S+$/);
|
|
|
|
|
|
|
|
if (selectionStart === 0) {
|
|
|
|
left = 0;
|
|
|
|
} else if (selectionStart === inputValue.length && left < 0) {
|
|
|
|
left = inputValue.length;
|
|
|
|
} else if (left < 0) {
|
|
|
|
left = selectionStart;
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
left,
|
|
|
|
right,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|