BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit c9e202c1 by Alfredo Sumaran Committed by Jacob Schatz
Options

Working version of autocomplete with categorized results

parent eba00325
Showing with 229 additions and 49 deletions
app/assets/javascripts/dispatcher.js.coffee
......@@ -152,9 +152,4 @@ class Dispatcher
new Shortcuts()
initSearch: ->
opts = $('.search-autocomplete-opts')
path = opts.data('autocomplete-path')
project_id = opts.data('autocomplete-project-id')
project_ref = opts.data('autocomplete-project-ref')
new SearchAutocomplete(path, project_id, project_ref)
new SearchAutocomplete()
app/assets/javascripts/lib/category_autocomplete.js.coffee 0 → 100644
$.widget( "custom.catcomplete", $.ui.autocomplete,
_create: ->
@_super();
@widget().menu("option", "items", "> :not(.ui-autocomplete-category)")
_renderMenu: (ul, items) ->
currentCategory = ''
$.each items, (index, item) =>
if item.category isnt currentCategory
ul.append("<li class='ui-autocomplete-category'>#{item.category}</li>")
currentCategory = item.category
li = @_renderItemData(ul, item)
if item.category?
li.attr('aria-label', item.category + " : " + item.label)
)
app/assets/javascripts/search_autocomplete.js.coffee
class @SearchAutocomplete
constructor: (search_autocomplete_path, project_id, project_ref) ->
project_id = '' unless project_id
project_ref = '' unless project_ref
query = "?project_id=" + project_id + "&project_ref=" + project_ref
constructor: (opts = {}) ->
{
@wrap = $('.search')
@optsEl = @wrap.find('.search-autocomplete-opts')
@autocompletePath = @optsEl.data('autocomplete-path')
@projectId = @optsEl.data('autocomplete-project-id') || ''
@projectRef = @optsEl.data('autocomplete-project-ref') || ''
} = opts
$("#search").autocomplete
source: search_autocomplete_path + query
@keyCode =
ESCAPE: 27
BACKSPACE: 8
TAB: 9
ENTER: 13
@locationBadgeEl = @$('.search-location-badge')
@locationText = @$('.location-text')
@searchInput = @$('.search-input')
@projectInputEl = @$('#project_id')
@groupInputEl = @$('#group_id')
@searchCodeInputEl = @$('#search_code')
@repositoryInputEl = @$('#repository_ref')
@scopeInputEl = @$('#scope')
@saveOriginalState()
@createAutocomplete()
@bindEvents()
$: (selector) ->
@wrap.find(selector)
saveOriginalState: ->
@originalState = @serializeState()
restoreOriginalState: ->
inputs = Object.keys @originalState
for input in inputs
@$("##{input}").val(@originalState[input])
if @originalState._location is ''
@locationBadgeEl.html('')
else
@addLocationBadge(
value: @originalState._location
)
serializeState: ->
{
# Search Criteria
project_id: @projectInputEl.val()
group_id: @groupInputEl.val()
search_code: @searchCodeInputEl.val()
repository_ref: @repositoryInputEl.val()
# Location badge
_location: $.trim(@locationText.text())
}
createAutocomplete: ->
@query = "?project_id=" + @projectId + "&project_ref=" + @projectRef
@catComplete = @searchInput.catcomplete
appendTo: 'form.navbar-form'
source: @autocompletePath + @query
minLength: 1
select: (event, ui) ->
location.href = ui.item.url
close: (e) ->
e.preventDefault()
select: (event, ui) =>
# Pressing enter choses an alternative
if event.keyCode is @keyCode.ENTER
@goToResult(ui.item)
else
# Pressing tab sets the scope
if event.keyCode is @keyCode.TAB and ui.item.scope?
@setLocationBadge(ui.item)
@searchInput
.val('') # remove selected value from input
.focus()
else
# If option is not a scope go to page
@goToResult(ui.item)
# Return false to avoid focus on the next element
return false
bindEvents: ->
@searchInput.on 'keydown', @onSearchKeyDown
@wrap.on 'click', '.remove-badge', @onRemoveLocationBadgeClick
onRemoveLocationBadgeClick: (e) =>
e.preventDefault()
@removeLocationBadge()
@searchInput.focus()
onSearchKeyDown: (e) =>
# Remove tag when pressing backspace and input search is empty
if e.keyCode is @keyCode.BACKSPACE and e.currentTarget.value is ''
@removeLocationBadge()
@destroyAutocomplete()
@searchInput.focus()
else if e.keyCode is @keyCode.ESCAPE
@restoreOriginalState()
else
# Create new autocomplete instance if it's not created
@createAutocomplete() unless @catcomplete?
addLocationBadge: (item) ->
category = if item.category? then "#{item.category}: " else ''
value = if item.value? then item.value else ''
html = "<span class='label label-primary'>
<i class='location-text'>#{category}#{value}</i>
<a class='remove-badge' href='#'>x</a>
</span>"
@locationBadgeEl.html(html)
setLocationBadge: (item) ->
@addLocationBadge(item)
# Reset input states
@resetSearchState()
switch item.scope
when 'projects'
@projectInputEl.val(item.id)
# @searchCodeInputEl.val('true') # TODO: always true for projects?
# @repositoryInputEl.val('master') # TODO: always master?
when 'groups'
@groupInputEl.val(item.id)
removeLocationBadge: ->
@locationBadgeEl.empty()
# Reset state
@resetSearchState()
resetSearchState: ->
# Remove scope
@scopeInputEl.val('')
# Remove group
@groupInputEl.val('')
# Remove project id
@projectInputEl.val('')
# Remove code search
@searchCodeInputEl.val('')
# Remove repository ref
@repositoryInputEl.val('')
goToResult: (result) ->
location.href = result.url
destroyAutocomplete: ->
@catComplete.destroy() if @catcomplete?
@catComplete = null
app/helpers/search_helper.rb
......@@ -23,45 +23,45 @@ module SearchHelper
# Autocomplete results for various settings pages
def default_autocomplete
[
{ label: "Profile settings", url: profile_path },
{ label: "SSH Keys", url: profile_keys_path },
{ label: "Dashboard", url: root_path },
{ label: "Admin Section", url: admin_root_path },
{ category: "Settings", label: "Profile settings", url: profile_path },
{ category: "Settings", label: "SSH Keys", url: profile_keys_path },
{ category: "Settings", label: "Dashboard", url: root_path },
{ category: "Settings", label: "Admin Section", url: admin_root_path },
]
end
# Autocomplete results for internal help pages
def help_autocomplete
[
{ label: "help: API Help", url: help_page_path("api", "README") },
{ label: "help: Markdown Help", url: help_page_path("markdown", "markdown") },
{ label: "help: Permissions Help", url: help_page_path("permissions", "permissions") },
{ label: "help: Public Access Help", url: help_page_path("public_access", "public_access") },
{ label: "help: Rake Tasks Help", url: help_page_path("raketasks", "README") },
{ label: "help: SSH Keys Help", url: help_page_path("ssh", "README") },
{ label: "help: System Hooks Help", url: help_page_path("system_hooks", "system_hooks") },
{ label: "help: Webhooks Help", url: help_page_path("web_hooks", "web_hooks") },
{ label: "help: Workflow Help", url: help_page_path("workflow", "README") },
{ category: "Help", label: "API Help", url: help_page_path("api", "README") },
{ category: "Help", label: "Markdown Help", url: help_page_path("markdown", "markdown") },
{ category: "Help", label: "Permissions Help", url: help_page_path("permissions", "permissions") },
{ category: "Help", label: "Public Access Help", url: help_page_path("public_access", "public_access") },
{ category: "Help", label: "Rake Tasks Help", url: help_page_path("raketasks", "README") },
{ category: "Help", label: "SSH Keys Help", url: help_page_path("ssh", "README") },
{ category: "Help", label: "System Hooks Help", url: help_page_path("system_hooks", "system_hooks") },
{ category: "Help", label: "Webhooks Help", url: help_page_path("web_hooks", "web_hooks") },
{ category: "Help", label: "Workflow Help", url: help_page_path("workflow", "README") },
]
end
# Autocomplete results for the current project, if it's defined
def project_autocomplete
if @project && @project.repository.exists? && @project.repository.root_ref
prefix = search_result_sanitize(@project.name_with_namespace)
prefix = "Project - " + search_result_sanitize(@project.name_with_namespace)
ref = @ref || @project.repository.root_ref
[
{ label: "#{prefix} - Files", url: namespace_project_tree_path(@project.namespace, @project, ref) },
{ label: "#{prefix} - Commits", url: namespace_project_commits_path(@project.namespace, @project, ref) },
{ label: "#{prefix} - Network", url: namespace_project_network_path(@project.namespace, @project, ref) },
{ label: "#{prefix} - Graph", url: namespace_project_graph_path(@project.namespace, @project, ref) },
{ label: "#{prefix} - Issues", url: namespace_project_issues_path(@project.namespace, @project) },
{ label: "#{prefix} - Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
{ label: "#{prefix} - Milestones", url: namespace_project_milestones_path(@project.namespace, @project) },
{ label: "#{prefix} - Snippets", url: namespace_project_snippets_path(@project.namespace, @project) },
{ label: "#{prefix} - Members", url: namespace_project_project_members_path(@project.namespace, @project) },
{ label: "#{prefix} - Wiki", url: namespace_project_wikis_path(@project.namespace, @project) },
{ category: prefix, label: "Files", url: namespace_project_tree_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Commits", url: namespace_project_commits_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Network", url: namespace_project_network_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Graph", url: namespace_project_graph_path(@project.namespace, @project, ref) },
{ category: prefix, label: "Issues", url: namespace_project_issues_path(@project.namespace, @project) },
{ category: prefix, label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
{ category: prefix, label: "Milestones", url: namespace_project_milestones_path(@project.namespace, @project) },
{ category: prefix, label: "Snippets", url: namespace_project_snippets_path(@project.namespace, @project) },
{ category: prefix, label: "Members", url: namespace_project_project_members_path(@project.namespace, @project) },
{ category: prefix, label: "Wiki", url: namespace_project_wikis_path(@project.namespace, @project) },
]
else
[]
......@@ -72,7 +72,10 @@ module SearchHelper
def groups_autocomplete(term, limit = 5)
current_user.authorized_groups.search(term).limit(limit).map do |group|
{
label: "group: #{search_result_sanitize(group.name)}",
category: "Groups",
scope: "groups",
id: group.id,
label: "#{search_result_sanitize(group.name)}",
url: group_path(group)
}
end
......@@ -83,7 +86,11 @@ module SearchHelper
current_user.authorized_projects.search_by_title(term).
sorted_by_stars.non_archived.limit(limit).map do |p|
{
label: "project: #{search_result_sanitize(p.name_with_namespace)}",
category: "Projects",
scope: "projects",
id: p.id,
value: "#{search_result_sanitize(p.name)}",
label: "#{search_result_sanitize(p.name_with_namespace)}",
url: namespace_project_path(p.namespace, p)
}
end
......
app/views/layouts/_search.html.haml
.search
= form_tag search_path, method: :get, class: 'navbar-form pull-left' do |f|
= render 'shared/location_badge'
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input form-control", spellcheck: false, tabindex: "1"
= hidden_field_tag :group_id, @group.try(:id)
- if @project && @project.persisted?
= hidden_field_tag :project_id, @project.id
= hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : ''
- if @project && @project.persisted?
- if current_controller?(:issues)
= hidden_field_tag :scope, 'issues'
- elsif current_controller?(:merge_requests)
......@@ -21,10 +23,3 @@
= hidden_field_tag :repository_ref, @ref
= button_tag 'Go' if ENV['RAILS_ENV'] == 'test'
.search-autocomplete-opts.hide{:'data-autocomplete-path' => search_autocomplete_path, :'data-autocomplete-project-id' => @project.try(:id), :'data-autocomplete-project-ref' => @ref }
:javascript
$('.search-input').on('keyup', function(e) {
if (e.keyCode == 27) {
$('.search-input').blur();
}
});
app/views/shared/_location_badge.html.haml 0 → 100644
- if controller.controller_path =~ /^groups/
- label = 'This group'
- if controller.controller_path =~ /^projects/
- label = 'This project'
.search-location-badge
- if label.present?
%span.label.label-primary
%i.location-text
= label
%a.remove-badge{href: '#'}
x
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment