From 62928a3f127907776a43b5503fbbff186eafa96f Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 10 Jan 2018 12:32:29 -0600 Subject: Refactor dispatcher search path --- app/assets/javascripts/dispatcher.js | 5 +- app/assets/javascripts/pages/search/show/index.js | 3 + app/assets/javascripts/pages/search/show/search.js | 113 +++++++++++++++++++++ app/assets/javascripts/search.js | 113 --------------------- 4 files changed, 119 insertions(+), 115 deletions(-) create mode 100644 app/assets/javascripts/pages/search/show/index.js create mode 100644 app/assets/javascripts/pages/search/show/search.js delete mode 100644 app/assets/javascripts/search.js diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index a282b67b0fc..9ce0adfbe7e 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -14,7 +14,6 @@ import GroupLabelSubscription from './group_label_subscription'; import LineHighlighter from './line_highlighter'; import BuildArtifacts from './build_artifacts'; import groupsSelect from './groups_select'; -import Search from './search'; import initAdmin from './admin'; import NamespaceSelect from './namespace_select'; import NewCommitForm from './new_commit_form'; @@ -528,7 +527,9 @@ import Activities from './activities'; VersionCheckImage.bindErrorEvent($('img.js-version-status-badge')); break; case 'search:show': - new Search(); + import('./pages/search/show') + .then(callDefault) + .catch(fail); break; case 'projects:settings:repository:show': // Initialize expandable settings panels diff --git a/app/assets/javascripts/pages/search/show/index.js b/app/assets/javascripts/pages/search/show/index.js new file mode 100644 index 00000000000..4264c5c9dbe --- /dev/null +++ b/app/assets/javascripts/pages/search/show/index.js @@ -0,0 +1,3 @@ +import Search from './search'; + +export default () => new Search(); diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js new file mode 100644 index 00000000000..d44195f6b72 --- /dev/null +++ b/app/assets/javascripts/pages/search/show/search.js @@ -0,0 +1,113 @@ +import Flash from '~/flash'; +import Api from '~/api'; + +export default class Search { + constructor() { + const $groupDropdown = $('.js-search-group-dropdown'); + const $projectDropdown = $('.js-search-project-dropdown'); + + this.searchInput = '.js-search-input'; + this.searchClear = '.js-search-clear'; + + this.groupId = $groupDropdown.data('group-id'); + this.eventListeners(); + + $groupDropdown.glDropdown({ + selectable: true, + filterable: true, + fieldName: 'group_id', + search: { + fields: ['full_name'], + }, + data(term, callback) { + return Api.groups(term, {}, (data) => { + data.unshift({ + full_name: 'Any', + }); + data.splice(1, 0, 'divider'); + return callback(data); + }); + }, + id(obj) { + return obj.id; + }, + text(obj) { + return obj.full_name; + }, + toggleLabel(obj) { + return `${($groupDropdown.data('default-label'))} ${obj.full_name}`; + }, + clicked: () => Search.submitSearch(), + }); + + $projectDropdown.glDropdown({ + selectable: true, + filterable: true, + fieldName: 'project_id', + search: { + fields: ['name'], + }, + data: (term, callback) => { + this.getProjectsData(term) + .then((data) => { + data.unshift({ + name_with_namespace: 'Any', + }); + data.splice(1, 0, 'divider'); + + return data; + }) + .then(data => callback(data)) + .catch(() => new Flash('Error fetching projects')); + }, + id(obj) { + return obj.id; + }, + text(obj) { + return obj.name_with_namespace; + }, + toggleLabel(obj) { + return `${($projectDropdown.data('default-label'))} ${obj.name_with_namespace}`; + }, + clicked: () => Search.submitSearch(), + }); + } + + eventListeners() { + $(document) + .off('keyup', this.searchInput) + .on('keyup', this.searchInput, this.searchKeyUp); + $(document) + .off('click', this.searchClear) + .on('click', this.searchClear, this.clearSearchField.bind(this)); + } + + static submitSearch() { + return $('.js-search-form').submit(); + } + + searchKeyUp() { + const $input = $(this); + if ($input.val() === '') { + $('.js-search-clear').addClass('hidden'); + } else { + $('.js-search-clear').removeClass('hidden'); + } + } + + clearSearchField() { + return $(this.searchInput).val('').trigger('keyup').focus(); + } + + getProjectsData(term) { + return new Promise((resolve) => { + if (this.groupId) { + Api.groupProjects(this.groupId, term, resolve); + } else { + Api.projects(term, { + order_by: 'id', + }, resolve); + } + }); + } +} diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js deleted file mode 100644 index 363322af47a..00000000000 --- a/app/assets/javascripts/search.js +++ /dev/null @@ -1,113 +0,0 @@ -import Flash from './flash'; -import Api from './api'; - -export default class Search { - constructor() { - const $groupDropdown = $('.js-search-group-dropdown'); - const $projectDropdown = $('.js-search-project-dropdown'); - - this.searchInput = '.js-search-input'; - this.searchClear = '.js-search-clear'; - - this.groupId = $groupDropdown.data('group-id'); - this.eventListeners(); - - $groupDropdown.glDropdown({ - selectable: true, - filterable: true, - fieldName: 'group_id', - search: { - fields: ['full_name'], - }, - data(term, callback) { - return Api.groups(term, {}, (data) => { - data.unshift({ - full_name: 'Any', - }); - data.splice(1, 0, 'divider'); - return callback(data); - }); - }, - id(obj) { - return obj.id; - }, - text(obj) { - return obj.full_name; - }, - toggleLabel(obj) { - return `${($groupDropdown.data('default-label'))} ${obj.full_name}`; - }, - clicked: () => Search.submitSearch(), - }); - - $projectDropdown.glDropdown({ - selectable: true, - filterable: true, - fieldName: 'project_id', - search: { - fields: ['name'], - }, - data: (term, callback) => { - this.getProjectsData(term) - .then((data) => { - data.unshift({ - name_with_namespace: 'Any', - }); - data.splice(1, 0, 'divider'); - - return data; - }) - .then(data => callback(data)) - .catch(() => new Flash('Error fetching projects')); - }, - id(obj) { - return obj.id; - }, - text(obj) { - return obj.name_with_namespace; - }, - toggleLabel(obj) { - return `${($projectDropdown.data('default-label'))} ${obj.name_with_namespace}`; - }, - clicked: () => Search.submitSearch(), - }); - } - - eventListeners() { - $(document) - .off('keyup', this.searchInput) - .on('keyup', this.searchInput, this.searchKeyUp); - $(document) - .off('click', this.searchClear) - .on('click', this.searchClear, this.clearSearchField.bind(this)); - } - - static submitSearch() { - return $('.js-search-form').submit(); - } - - searchKeyUp() { - const $input = $(this); - if ($input.val() === '') { - $('.js-search-clear').addClass('hidden'); - } else { - $('.js-search-clear').removeClass('hidden'); - } - } - - clearSearchField() { - return $(this.searchInput).val('').trigger('keyup').focus(); - } - - getProjectsData(term) { - return new Promise((resolve) => { - if (this.groupId) { - Api.groupProjects(this.groupId, term, resolve); - } else { - Api.projects(term, { - order_by: 'id', - }, resolve); - } - }); - } -} -- cgit v1.2.1