Merge pull request #3834 from ichord/gfm-autocomp

improve gfm autocomplete

Gemfile

@@ -112,7 +112,7 @@ group :assets do
 
   gem 'chosen-rails',     "0.9.8"
   gem 'select2-rails'
-  gem 'jquery-atwho-rails', "0.1.7"
+  gem 'jquery-atwho-rails', "0.3.0"
   gem "jquery-rails",     "2.1.3"
   gem "jquery-ui-rails",  "2.0.2"
   gem "modernizr",        "2.6.2"

Gemfile.lock

@@ -231,7 +231,7 @@ GEM
     httpauth (0.2.0)
     i18n (0.6.1)
     journey (1.0.4)
-    jquery-atwho-rails (0.1.7)
+    jquery-atwho-rails (0.3.0)
     jquery-rails (2.1.3)
       railties (>= 3.1.0, < 5.0)
       thor (~> 0.14)
@@ -532,7 +532,7 @@ DEPENDENCIES
   guard-spinach
   haml-rails
   httparty
-  jquery-atwho-rails (= 0.1.7)
+  jquery-atwho-rails (= 0.3.0)
   jquery-rails (= 2.1.3)
   jquery-turbolinks
   jquery-ui-rails (= 2.0.2)

app/assets/javascripts/gfm_auto_complete.js.coffee

@@ -2,37 +2,55 @@
 
 window.GitLab ?= {}
 GitLab.GfmAutoComplete =
+  # private_token: ''
+  dataSource: ''
   # Emoji
   Emoji:
-    data: []
+    assetBase: ''
     template: '<li data-value="${insert}">${name} <img alt="${name}" height="20" src="${image}" width="20" /></li>'
 
   # Team Members
   Members:
-    data: []
-    url: ''
-    params:
-      private_token: ''
     template: '<li data-value="${username}">${username} <small>${name}</small></li>'
 
+  Issues:
+    template: '<li data-value="${id}"><small>${id}</small> ${title} </li>'
+
   # Add GFM auto-completion to all input fields, that accept GFM input.
   setup: ->
     input = $('.js-gfm-input')
 
     # Emoji
-    input.atWho '(?:^|\\s):',
-      data: @Emoji.data
+    input.atwho
+      at: ':'
       tpl: @Emoji.template
+      callbacks:
+        before_save: (emojis) =>
+          $.map emojis, (em) => name: em, insert: em+ ':', image: "#{@Emoji.assetBase}/#{em}.png"
 
     # Team Members
-    input.atWho '@',
+    input.atwho
+      at: '@'
       tpl: @Members.template
-      callback: (query, callback) =>
-        request_params = $.extend({}, @Members.params, query: query)
-        $.getJSON(@Members.url, request_params).done (members) =>
-          new_members_data = $.map(members, (m) ->
-            username: m.username,
-            name: m.name
-          )
-          callback(new_members_data)
+      search_key: 'search'
+      callbacks:
+        before_save: (members) =>
+          $.map members, (m) => name: m.name, username: m.username, search: "#{m.username} #{m.name}"
+
+    input.atwho
+      at: '#'
+      alias: 'issues'
+      search_key: 'search'
+      tpl: @Issues.template
+      callbacks:
+        before_save: (issues) ->
+          $.map issues, (i) -> id: i.id, title: i.title, search: "#{i.id} #{i.title}"
 
+    input.one "focus", =>
+      $.getJSON(@dataSource).done (data) ->
+        # load members
+        input.atwho 'load', "@", data.members
+        # load issues
+        input.atwho 'load', "issues", data.issues
+        # load emojis
+        input.atwho 'load', ":", data.emojis

app/controllers/projects_controller.rb

@@ -93,4 +93,16 @@ class ProjectsController < ProjectResourceController
       format.js
     end
   end
+
+  def autocomplete_sources
+    @suggestions = {
+      emojis: Emoji.names,
+      issues: @project.issues.select([:id, :title, :description]),
+      members: @project.users.select([:username, :name]).order(:username)
+    }
+
+    respond_to do |format|
+      format.json { render :json => @suggestions }
+    end
+  end
 end

app/views/layouts/_head_panel.html.haml

@@ -36,5 +36,3 @@
           = link_to current_user, class: "profile-pic" do
             = image_tag gravatar_icon(current_user.email, 26)
 
-
-= render "layouts/init_auto_complete"

app/views/layouts/_init_auto_complete.html.haml

 :javascript
   $(function() {
-    GitLab.GfmAutoComplete.Members.url = "#{ "/api/v3/projects/#{@project.id}/members" if @project }";
-    GitLab.GfmAutoComplete.Members.params.private_token = "#{current_user.private_token}";
-
-    GitLab.GfmAutoComplete.Emoji.data = #{raw emoji_autocomplete_source};
-    // convert the list so that the items have the right format for completion
-    GitLab.GfmAutoComplete.Emoji.data = $.map(GitLab.GfmAutoComplete.Emoji.data, function(value) {
-      return {
-        name: value,
-        insert: value+':',
-        image: '#{image_path("emoji")}/'+value+'.png'
-      }
-    });
-
+    GitLab.GfmAutoComplete.dataSource = "#{autocomplete_sources_project_path(@project)}"
+    GitLab.GfmAutoComplete.Emoji.assetBase = '#{image_path("emoji")}'
     GitLab.GfmAutoComplete.setup();
   });

app/views/layouts/project_resource.html.haml

@@ -3,6 +3,7 @@
   = render "layouts/head", title: @project.name_with_namespace
   %body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/head_panel", title: project_title(@project)
+    = render "layouts/init_auto_complete"
     = render "layouts/flash"
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'

config/routes.rb

@@ -168,6 +168,7 @@ Gitlab::Application.routes.draw do
     member do
       put :transfer
       post :fork
+      get :autocomplete_sources
     end
 
     resources :blob,    only: [:show], constraints: {id: /.+/}

spec/routing/project_routing_spec.rb

@@ -83,6 +83,10 @@ describe ProjectsController, "routing" do
     get("/gitlabhq/edit").should route_to('projects#edit', id: 'gitlabhq')
   end
 
+  it "to #autocomplete_sources" do
+    get('/gitlabhq/autocomplete_sources').should route_to('projects#autocomplete_sources', id: "gitlabhq")
+  end
+
   it "to #show" do
     get("/gitlabhq").should route_to('projects#show', id: 'gitlabhq')
   end