diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2016-12-12 03:05:55 +0300 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-01-10 01:01:17 +0300 |
commit | 46a1f36986aa61597f54d14c76b1d2258b0933e5 (patch) | |
tree | c71216ae2f63cf9436e0139ff0a5635726135da8 /app | |
parent | 5c0802deae6a3a87e7a497d3250cbeb98e61045b (diff) |
Refactor dropdown filters
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/filtered_search/dropdown_author.js.es6 | 57 | ||||
-rw-r--r-- | app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 2 | ||||
-rw-r--r-- | app/assets/javascripts/filtered_search/dropdown_label.js.es6 | 45 | ||||
-rw-r--r-- | app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 (renamed from app/assets/javascripts/filtered_search/dropdown_milestone.js.es6) | 18 | ||||
-rw-r--r-- | app/assets/javascripts/filtered_search/dropdown_user.js.es6 (renamed from app/assets/javascripts/filtered_search/dropdown_assignee.js.es6) | 14 | ||||
-rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 16 | ||||
-rw-r--r-- | app/views/shared/issuable/_search_bar.html.haml | 4 |
7 files changed, 28 insertions, 128 deletions
diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 deleted file mode 100644 index 3dc649cc17d..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ /dev/null @@ -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 = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index ea384af09a9..d445a796f43 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -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', diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 deleted file mode 100644 index bf009454de5..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ /dev/null @@ -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 = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 7f5822aed84..05c9284bc96 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -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 = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 0ce4eebedc9..1a597bbbc9d 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -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 = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 055f229cd45..c92d669114e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -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) { diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml index f7c72e3ced8..335552c0a26 100644 --- a/app/views/shared/issuable/_search_bar.html.haml +++ b/app/views/shared/issuable/_search_bar.html.haml @@ -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 |