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 {
|
class DropdownHint extends gl.FilteredSearchDropdown {
|
||||||
constructor(droplab, dropdown, input) {
|
constructor(droplab, dropdown, input) {
|
||||||
super(droplab, dropdown, input);
|
super(droplab, dropdown, input);
|
||||||
this.listId = 'js-dropdown-hint';
|
this.listId = dropdown.id;
|
||||||
this.config = {
|
this.config = {
|
||||||
droplabFilter: {
|
droplabFilter: {
|
||||||
template: 'hint',
|
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 */
|
/*= require filtered_search/filtered_search_dropdown */
|
||||||
|
|
||||||
((global) => {
|
((global) => {
|
||||||
class DropdownMilestone extends gl.FilteredSearchDropdown {
|
class DropdownNonUser extends gl.FilteredSearchDropdown {
|
||||||
constructor(droplab, dropdown, input) {
|
constructor(droplab, dropdown, input, endpoint, symbol) {
|
||||||
super(droplab, dropdown, input);
|
super(droplab, dropdown, input);
|
||||||
this.listId = 'js-dropdown-milestone';
|
this.listId = dropdown.id;
|
||||||
this.config = {
|
this.config = {
|
||||||
droplabAjax: {
|
droplabAjax: {
|
||||||
endpoint: 'milestones.json',
|
endpoint: endpoint,
|
||||||
method: 'setData',
|
method: 'setData',
|
||||||
loadingTemplate: this.loadingTemplate,
|
loadingTemplate: this.loadingTemplate,
|
||||||
},
|
},
|
||||||
droplabFilter: {
|
droplabFilter: {
|
||||||
filterFunction: this.filterWithSymbol.bind(this, '%'),
|
filterFunction: this.filterWithSymbol.bind(this, symbol),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -22,9 +22,9 @@
|
||||||
const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
|
const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
|
||||||
|
|
||||||
if (!dataValueSet) {
|
if (!dataValueSet) {
|
||||||
const milestoneTitle = e.detail.selected.querySelector('.btn-link').innerText.trim();
|
const title = e.detail.selected.querySelector('.js-data-value').innerText.trim();
|
||||||
const milestoneName = `%${this.getEscapedText(milestoneTitle)}`;
|
const name = `%${this.getEscapedText(title)}`;
|
||||||
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName));
|
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dismissDropdown(!dataValueSet);
|
this.dismissDropdown(!dataValueSet);
|
||||||
|
@ -40,5 +40,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
global.DropdownMilestone = DropdownMilestone;
|
global.DropdownNonUser = DropdownNonUser;
|
||||||
})(window.gl || (window.gl = {}));
|
})(window.gl || (window.gl = {}));
|
|
@ -2,10 +2,10 @@
|
||||||
/*= require filtered_search/filtered_search_dropdown */
|
/*= require filtered_search/filtered_search_dropdown */
|
||||||
|
|
||||||
((global) => {
|
((global) => {
|
||||||
class DropdownAssignee extends gl.FilteredSearchDropdown {
|
class DropdownUser extends gl.FilteredSearchDropdown {
|
||||||
constructor(droplab, dropdown, input) {
|
constructor(droplab, dropdown, input) {
|
||||||
super(droplab, dropdown, input);
|
super(droplab, dropdown, input);
|
||||||
this.listId = 'js-dropdown-assignee';
|
this.listId = dropdown.id;
|
||||||
this.config = {
|
this.config = {
|
||||||
droplabAjaxFilter: {
|
droplabAjaxFilter: {
|
||||||
endpoint: '/autocomplete/users.json',
|
endpoint: '/autocomplete/users.json',
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
},
|
},
|
||||||
searchValueFunction: this.getSearchInput,
|
searchValueFunction: this.getSearchInput,
|
||||||
loadingTemplate: this.loadingTemplate,
|
loadingTemplate: this.loadingTemplate,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,11 +45,7 @@
|
||||||
const hasPrefix = valueWithoutColon[0] === '@';
|
const hasPrefix = valueWithoutColon[0] === '@';
|
||||||
const valueWithoutPrefix = valueWithoutColon.slice(1);
|
const valueWithoutPrefix = valueWithoutColon.slice(1);
|
||||||
|
|
||||||
if (hasPrefix) {
|
return hasPrefix ? valueWithoutPrefix : valueWithoutColon;
|
||||||
return valueWithoutPrefix;
|
|
||||||
} else {
|
|
||||||
return valueWithoutColon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
configure() {
|
configure() {
|
||||||
|
@ -57,5 +53,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
global.DropdownAssignee = DropdownAssignee;
|
global.DropdownUser = DropdownUser;
|
||||||
})(window.gl || (window.gl = {}));
|
})(window.gl || (window.gl = {}));
|
|
@ -103,22 +103,24 @@
|
||||||
this.mapping = {
|
this.mapping = {
|
||||||
author: {
|
author: {
|
||||||
reference: null,
|
reference: null,
|
||||||
gl: 'DropdownAuthor',
|
gl: 'DropdownUser',
|
||||||
element: document.querySelector('#js-dropdown-author'),
|
element: document.querySelector('#js-dropdown-author'),
|
||||||
},
|
},
|
||||||
assignee: {
|
assignee: {
|
||||||
reference: null,
|
reference: null,
|
||||||
gl: 'DropdownAssignee',
|
gl: 'DropdownUser',
|
||||||
element: document.querySelector('#js-dropdown-assignee'),
|
element: document.querySelector('#js-dropdown-assignee'),
|
||||||
},
|
},
|
||||||
milestone: {
|
milestone: {
|
||||||
reference: null,
|
reference: null,
|
||||||
gl: 'DropdownMilestone',
|
gl: 'DropdownNonUser',
|
||||||
|
extraArguments: ['milestones.json', '%'],
|
||||||
element: document.querySelector('#js-dropdown-milestone'),
|
element: document.querySelector('#js-dropdown-milestone'),
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
reference: null,
|
reference: null,
|
||||||
gl: 'DropdownLabel',
|
gl: 'DropdownNonUser',
|
||||||
|
extraArguments: ['labels.json', '~'],
|
||||||
element: document.querySelector('#js-dropdown-label'),
|
element: document.querySelector('#js-dropdown-label'),
|
||||||
},
|
},
|
||||||
hint: {
|
hint: {
|
||||||
|
@ -160,7 +162,11 @@
|
||||||
let forceShowList = false;
|
let forceShowList = false;
|
||||||
|
|
||||||
if (!this.mapping[key].reference) {
|
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) {
|
if (firstLoad) {
|
||||||
|
|
|
@ -67,7 +67,7 @@
|
||||||
%li.divider
|
%li.divider
|
||||||
%ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
|
%ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
|
||||||
%li.filter-dropdown-item
|
%li.filter-dropdown-item
|
||||||
%button.btn.btn-link
|
%button.btn.btn-link.js-data-value
|
||||||
{{title}}
|
{{title}}
|
||||||
#js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
|
#js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
|
||||||
%ul{ 'data-dropdown' => true }
|
%ul{ 'data-dropdown' => true }
|
||||||
|
@ -79,7 +79,7 @@
|
||||||
%li.filter-dropdown-item
|
%li.filter-dropdown-item
|
||||||
%button.btn.btn-link
|
%button.btn.btn-link
|
||||||
%span.dropdown-label-box{ 'style': 'background: {{color}}'}
|
%span.dropdown-label-box{ 'style': 'background: {{color}}'}
|
||||||
%span.label-title
|
%span.label-title.js-data-value
|
||||||
{{title}}
|
{{title}}
|
||||||
.pull-right
|
.pull-right
|
||||||
- if boards_page
|
- if boards_page
|
||||||
|
|
Loading…
Reference in a new issue