import $ from 'jquery'; import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result'; import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; import { deprecatedCreateFlash as Flash } from '~/flash'; import Api from '~/api'; import { __ } from '~/locale'; import Project from '~/pages/projects/project'; import { visitUrl, queryToObject } from '~/lib/utils/url_utility'; import refreshCounts from './refresh_counts'; export default class Search { constructor() { setHighlightClass(); // Code Highlighting const $projectDropdown = $('.js-search-project-dropdown'); this.searchInput = '.js-search-input'; this.searchClear = '.js-search-clear'; const query = queryToObject(window.location.search); this.groupId = query?.group_id; this.eventListeners(); refreshCounts(); initDeprecatedJQueryDropdown($projectDropdown, { selectable: true, filterable: true, filterRemote: 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, { type: '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; }, clicked: () => Search.submitSearch(), }); Project.initRefSwitcher(); } 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)); $('a.js-search-clear') .off('click', this.clearSearchFilter) .on('click', this.clearSearchFilter); } 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(); } // We need to manually follow the link on the anchors // that have this event bound, as their `click` default // behavior is prevented by the toggle logic. /* eslint-disable-next-line class-methods-use-this */ clearSearchFilter(ev) { const $target = $(ev.currentTarget); visitUrl($target.href); ev.stopPropagation(); } getProjectsData(term) { return new Promise(resolve => { if (this.groupId) { Api.groupProjects(this.groupId, term, {}, resolve); } else { Api.projects( term, { order_by: 'id', }, resolve, ); } }); } }