2020-10-24 23:57:45 +05:30
|
|
|
import { deprecatedCreateFlash as createFlash } from '../flash';
|
2019-07-07 11:18:12 +05:30
|
|
|
import AjaxFilter from '../droplab/plugins/ajax_filter';
|
|
|
|
import FilteredSearchDropdown from './filtered_search_dropdown';
|
|
|
|
import DropdownUtils from './dropdown_utils';
|
|
|
|
import FilteredSearchTokenizer from './filtered_search_tokenizer';
|
|
|
|
import { __ } from '~/locale';
|
|
|
|
|
|
|
|
export default class DropdownAjaxFilter extends FilteredSearchDropdown {
|
|
|
|
constructor(options = {}) {
|
|
|
|
const { tokenKeys, endpoint, symbol } = options;
|
|
|
|
|
|
|
|
super(options);
|
|
|
|
|
|
|
|
this.tokenKeys = tokenKeys;
|
|
|
|
this.endpoint = endpoint;
|
|
|
|
this.symbol = symbol;
|
|
|
|
|
|
|
|
this.config = {
|
|
|
|
AjaxFilter: this.ajaxFilterConfig(),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
ajaxFilterConfig() {
|
|
|
|
return {
|
2021-01-29 00:20:46 +05:30
|
|
|
endpoint: this.endpoint,
|
2019-07-07 11:18:12 +05:30
|
|
|
searchKey: 'search',
|
|
|
|
searchValueFunction: this.getSearchInput.bind(this),
|
|
|
|
loadingTemplate: this.loadingTemplate,
|
|
|
|
onError() {
|
|
|
|
createFlash(__('An error occurred fetching the dropdown data.'));
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
itemClicked(e) {
|
2021-03-08 18:12:59 +05:30
|
|
|
super.itemClicked(e, (selected) => {
|
2021-01-29 00:20:46 +05:30
|
|
|
const title = selected.querySelector('.dropdown-light-content').innerText.trim();
|
|
|
|
|
|
|
|
return DropdownUtils.getEscapedText(title);
|
|
|
|
});
|
2019-07-07 11:18:12 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
renderContent(forceShowList = false) {
|
|
|
|
this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
|
|
|
|
super.renderContent(forceShowList);
|
|
|
|
}
|
|
|
|
|
|
|
|
getSearchInput() {
|
|
|
|
const query = DropdownUtils.getSearchInput(this.input);
|
2020-03-13 15:44:24 +05:30
|
|
|
const { lastToken } = FilteredSearchTokenizer.processTokens(query, this.tokenKeys.getKeys());
|
2019-07-07 11:18:12 +05:30
|
|
|
|
|
|
|
let value = lastToken || '';
|
|
|
|
|
|
|
|
if (value[0] === this.symbol) {
|
|
|
|
value = value.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Removes the first character if it is a quotation so that we can search
|
|
|
|
// with multiple words
|
|
|
|
if (value[0] === '"' || value[0] === "'") {
|
|
|
|
value = value.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
|
|
|
init() {
|
|
|
|
this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
|
|
|
|
}
|
|
|
|
}
|