Refactor dropdown filters
This commit is contained in:
parent
5c0802deae
commit
46a1f36986
7 changed files with 28 additions and 128 deletions
|
@ -1,57 +0,0 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
/*= require filtered_search/filtered_search_dropdown */
|
||||
|
||||
((global) => {
|
||||
class DropdownAuthor extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input) {
|
||||
super(droplab, dropdown, input);
|
||||
this.listId = 'js-dropdown-author';
|
||||
this.config = {
|
||||
droplabAjaxFilter: {
|
||||
endpoint: '/autocomplete/users.json',
|
||||
searchKey: 'search',
|
||||
params: {
|
||||
per_page: 20,
|
||||
active: true,
|
||||
project_id: this.getProjectId(),
|
||||
current_user: true,
|
||||
},
|
||||
searchValueFunction: this.getSearchInput,
|
||||
loadingTemplate: this.loadingTemplate,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
itemClicked(e) {
|
||||
const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
|
||||
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
|
||||
|
||||
this.dismissDropdown();
|
||||
}
|
||||
|
||||
renderContent(forceShowList) {
|
||||
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
|
||||
super.renderContent(forceShowList);
|
||||
}
|
||||
|
||||
getSearchInput() {
|
||||
const query = document.querySelector('.filtered-search').value;
|
||||
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
|
||||
const valueWithoutColon = value.slice(1);
|
||||
const hasPrefix = valueWithoutColon[0] === '@';
|
||||
const valueWithoutPrefix = valueWithoutColon.slice(1);
|
||||
|
||||
if (hasPrefix) {
|
||||
return valueWithoutPrefix;
|
||||
} else {
|
||||
return valueWithoutColon;
|
||||
}
|
||||
}
|
||||
|
||||
configure() {
|
||||
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
|
||||
}
|
||||
}
|
||||
|
||||
global.DropdownAuthor = DropdownAuthor;
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -23,7 +23,7 @@
|
|||
class DropdownHint extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input) {
|
||||
super(droplab, dropdown, input);
|
||||
this.listId = 'js-dropdown-hint';
|
||||
this.listId = dropdown.id;
|
||||
this.config = {
|
||||
droplabFilter: {
|
||||
template: 'hint',
|
||||
|
|
|
@ -1,45 +0,0 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
/*= require filtered_search/filtered_search_dropdown */
|
||||
|
||||
((global) => {
|
||||
class DropdownLabel extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input) {
|
||||
super(droplab, dropdown, input);
|
||||
this.listId = 'js-dropdown-label';
|
||||
this.config = {
|
||||
droplabAjax: {
|
||||
endpoint: 'labels.json',
|
||||
method: 'setData',
|
||||
loadingTemplate: this.loadingTemplate,
|
||||
},
|
||||
droplabFilter: {
|
||||
filterFunction: this.filterWithSymbol.bind(this, '~'),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
itemClicked(e) {
|
||||
const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
|
||||
|
||||
if (!dataValueSet) {
|
||||
const labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim();
|
||||
const labelName = `~${this.getEscapedText(labelTitle)}`;
|
||||
gl.FilteredSearchManager.addWordToInput(labelName);
|
||||
}
|
||||
|
||||
// debugger
|
||||
this.dismissDropdown(!dataValueSet);
|
||||
}
|
||||
|
||||
renderContent(forceShowList) {
|
||||
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
|
||||
super.renderContent(forceShowList);
|
||||
}
|
||||
|
||||
configure() {
|
||||
this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
|
||||
}
|
||||
}
|
||||
|
||||
global.DropdownLabel = DropdownLabel;
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -2,18 +2,18 @@
|
|||
/*= require filtered_search/filtered_search_dropdown */
|
||||
|
||||
((global) => {
|
||||
class DropdownMilestone extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input) {
|
||||
class DropdownNonUser extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input, endpoint, symbol) {
|
||||
super(droplab, dropdown, input);
|
||||
this.listId = 'js-dropdown-milestone';
|
||||
this.listId = dropdown.id;
|
||||
this.config = {
|
||||
droplabAjax: {
|
||||
endpoint: 'milestones.json',
|
||||
endpoint: endpoint,
|
||||
method: 'setData',
|
||||
loadingTemplate: this.loadingTemplate,
|
||||
},
|
||||
droplabFilter: {
|
||||
filterFunction: this.filterWithSymbol.bind(this, '%'),
|
||||
filterFunction: this.filterWithSymbol.bind(this, symbol),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -22,9 +22,9 @@
|
|||
const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
|
||||
|
||||
if (!dataValueSet) {
|
||||
const milestoneTitle = e.detail.selected.querySelector('.btn-link').innerText.trim();
|
||||
const milestoneName = `%${this.getEscapedText(milestoneTitle)}`;
|
||||
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName));
|
||||
const title = e.detail.selected.querySelector('.js-data-value').innerText.trim();
|
||||
const name = `%${this.getEscapedText(title)}`;
|
||||
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name));
|
||||
}
|
||||
|
||||
this.dismissDropdown(!dataValueSet);
|
||||
|
@ -40,5 +40,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
global.DropdownMilestone = DropdownMilestone;
|
||||
global.DropdownNonUser = DropdownNonUser;
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -2,10 +2,10 @@
|
|||
/*= require filtered_search/filtered_search_dropdown */
|
||||
|
||||
((global) => {
|
||||
class DropdownAssignee extends gl.FilteredSearchDropdown {
|
||||
class DropdownUser extends gl.FilteredSearchDropdown {
|
||||
constructor(droplab, dropdown, input) {
|
||||
super(droplab, dropdown, input);
|
||||
this.listId = 'js-dropdown-assignee';
|
||||
this.listId = dropdown.id;
|
||||
this.config = {
|
||||
droplabAjaxFilter: {
|
||||
endpoint: '/autocomplete/users.json',
|
||||
|
@ -18,7 +18,7 @@
|
|||
},
|
||||
searchValueFunction: this.getSearchInput,
|
||||
loadingTemplate: this.loadingTemplate,
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -45,11 +45,7 @@
|
|||
const hasPrefix = valueWithoutColon[0] === '@';
|
||||
const valueWithoutPrefix = valueWithoutColon.slice(1);
|
||||
|
||||
if (hasPrefix) {
|
||||
return valueWithoutPrefix;
|
||||
} else {
|
||||
return valueWithoutColon;
|
||||
}
|
||||
return hasPrefix ? valueWithoutPrefix : valueWithoutColon;
|
||||
}
|
||||
|
||||
configure() {
|
||||
|
@ -57,5 +53,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
global.DropdownAssignee = DropdownAssignee;
|
||||
global.DropdownUser = DropdownUser;
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -103,22 +103,24 @@
|
|||
this.mapping = {
|
||||
author: {
|
||||
reference: null,
|
||||
gl: 'DropdownAuthor',
|
||||
gl: 'DropdownUser',
|
||||
element: document.querySelector('#js-dropdown-author'),
|
||||
},
|
||||
assignee: {
|
||||
reference: null,
|
||||
gl: 'DropdownAssignee',
|
||||
gl: 'DropdownUser',
|
||||
element: document.querySelector('#js-dropdown-assignee'),
|
||||
},
|
||||
milestone: {
|
||||
reference: null,
|
||||
gl: 'DropdownMilestone',
|
||||
gl: 'DropdownNonUser',
|
||||
extraArguments: ['milestones.json', '%'],
|
||||
element: document.querySelector('#js-dropdown-milestone'),
|
||||
},
|
||||
label: {
|
||||
reference: null,
|
||||
gl: 'DropdownLabel',
|
||||
gl: 'DropdownNonUser',
|
||||
extraArguments: ['labels.json', '~'],
|
||||
element: document.querySelector('#js-dropdown-label'),
|
||||
},
|
||||
hint: {
|
||||
|
@ -160,7 +162,11 @@
|
|||
let forceShowList = false;
|
||||
|
||||
if (!this.mapping[key].reference) {
|
||||
this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput);
|
||||
var dl = this.droplab;
|
||||
const defaultArguments = [null, dl, element, this.filteredSearchInput];
|
||||
const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []);
|
||||
|
||||
this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments));
|
||||
}
|
||||
|
||||
if (firstLoad) {
|
||||
|
|
|
@ -67,7 +67,7 @@
|
|||
%li.divider
|
||||
%ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
|
||||
%li.filter-dropdown-item
|
||||
%button.btn.btn-link
|
||||
%button.btn.btn-link.js-data-value
|
||||
{{title}}
|
||||
#js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
|
||||
%ul{ 'data-dropdown' => true }
|
||||
|
@ -79,7 +79,7 @@
|
|||
%li.filter-dropdown-item
|
||||
%button.btn.btn-link
|
||||
%span.dropdown-label-box{ 'style': 'background: {{color}}'}
|
||||
%span.label-title
|
||||
%span.label-title.js-data-value
|
||||
{{title}}
|
||||
.pull-right
|
||||
- if boards_page
|
||||
|
|
Loading…
Reference in a new issue