autocomplete issues and preload autocomplete data.

update jquery-atwho-rails to v0.3.0 add autocomplete_source action to project for gfm autocomplete move init_autocomplete layout from head_panel to project_resource

autocomplete issues and preload autocomplete data.
update jquery-atwho-rails to v0.3.0 add autocomplete_source action to project for gfm autocomplete move init_autocomplete layout from head_panel to project_resource
ichord
1 parent ca244c35
Showing 9 changed files with 57 additions and 34 deletions Show diff stats
Gemfile
Gemfile.lock
app/assets/javascripts/gfm_auto_complete.js.coffee
app/controllers/projects_controller.rb
app/views/layouts/_head_panel.html.haml
app/views/layouts/_init_auto_complete.html.haml
app/views/layouts/project_resource.html.haml
config/routes.rb
spec/routing/project_routing_spec.rb
@@ -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"
@@ -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)
@@ -531,7 +531,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)
@@ -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
@@ -93,4 +93,16 @@ class ProjectsController &lt; 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
@@ -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"
 :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();
   });
@@ -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'
@@ -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: /.+/}
@@ -83,6 +83,10 @@ describe ProjectsController, &quot;routing&quot; 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
...	...	@@ -112,7 +112,7 @@ group :assets do
112	112
113	113	gem 'chosen-rails', "0.9.8"
114	114	gem 'select2-rails'
115		- gem 'jquery-atwho-rails', "0.1.7"
	115	+ gem 'jquery-atwho-rails', "0.3.0"
116	116	gem "jquery-rails", "2.1.3"
117	117	gem "jquery-ui-rails", "2.0.2"
118	118	gem "modernizr", "2.6.2"
...	...
...	...	@@ -231,7 +231,7 @@ GEM
231	231	httpauth (0.2.0)
232	232	i18n (0.6.1)
233	233	journey (1.0.4)
234		- jquery-atwho-rails (0.1.7)
	234	+ jquery-atwho-rails (0.3.0)
235	235	jquery-rails (2.1.3)
236	236	railties (>= 3.1.0, < 5.0)
237	237	thor (~> 0.14)
...	...	@@ -531,7 +531,7 @@ DEPENDENCIES
531	531	guard-spinach
532	532	haml-rails
533	533	httparty
534		- jquery-atwho-rails (= 0.1.7)
	534	+ jquery-atwho-rails (= 0.3.0)
535	535	jquery-rails (= 2.1.3)
536	536	jquery-turbolinks
537	537	jquery-ui-rails (= 2.0.2)
...	...
...	...	@@ -2,37 +2,55 @@
2	2
3	3	window.GitLab ?= {}
4	4	GitLab.GfmAutoComplete =
	5	+ # private_token: ''
	6	+ dataSource: ''
5	7	# Emoji
6	8	Emoji:
7		- data: []
	9	+ assetBase: ''
8	10	template: '<li data-value="${insert}">${name} <img alt="${name}" height="20" src="${image}" width="20" /></li>'
9	11
10	12	# Team Members
11	13	Members:
12		- data: []
13		- url: ''
14		- params:
15		- private_token: ''
16	14	template: '<li data-value="${username}">${username} <small>${name}</small></li>'
17	15
	16	+ Issues:
	17	+ template: '<li data-value="${id}"><small>${id}</small> ${title} </li>'
	18	+
18	19	# Add GFM auto-completion to all input fields, that accept GFM input.
19	20	setup: ->
20	21	input = $('.js-gfm-input')
21	22
22	23	# Emoji
23		- input.atWho '(?:^\|\\s):',
24		- data: @Emoji.data
	24	+ input.atwho
	25	+ at: ':'
25	26	tpl: @Emoji.template
	27	+ callbacks:
	28	+ before_save: (emojis) =>
	29	+ $.map emojis, (em) => name: em, insert: em+ ':', image: "#{@Emoji.assetBase}/#{em}.png"
26	30
27	31	# Team Members
28		- input.atWho '@',
	32	+ input.atwho
	33	+ at: '@'
29	34	tpl: @Members.template
30		- callback: (query, callback) =>
31		- request_params = $.extend({}, @Members.params, query: query)
32		- $.getJSON(@Members.url, request_params).done (members) =>
33		- new_members_data = $.map(members, (m) ->
34		- username: m.username,
35		- name: m.name
36		- )
37		- callback(new_members_data)
	35	+ search_key: 'search'
	36	+ callbacks:
	37	+ before_save: (members) =>
	38	+ $.map members, (m) => name: m.name, username: m.username, search: "#{m.username} #{m.name}"
	39	+
	40	+ input.atwho
	41	+ at: '#'
	42	+ alias: 'issues'
	43	+ search_key: 'search'
	44	+ tpl: @Issues.template
	45	+ callbacks:
	46	+ before_save: (issues) ->
	47	+ $.map issues, (i) -> id: i.id, title: i.title, search: "#{i.id} #{i.title}"
38	48
	49	+ input.one "focus", =>
	50	+ $.getJSON(@dataSource).done (data) ->
	51	+ # load members
	52	+ input.atwho 'load', "@", data.members
	53	+ # load issues
	54	+ input.atwho 'load', "issues", data.issues
	55	+ # load emojis
	56	+ input.atwho 'load', ":", data.emojis
...	...
...	...	@@ -93,4 +93,16 @@ class ProjectsController < ProjectResourceController
93	93	format.js
94	94	end
95	95	end
	96	+
	97	+ def autocomplete_sources
	98	+ @suggestions = {
	99	+ emojis: Emoji.names,
	100	+ issues: @project.issues.select([:id, :title, :description]),
	101	+ members: @project.users.select([:username, :name]).order(:username)
	102	+ }
	103	+
	104	+ respond_to do \|format\|
	105	+ format.json { render :json => @suggestions }
	106	+ end
	107	+ end
96	108	end
...	...
...	...	@@ -36,5 +36,3 @@
36	36	= link_to current_user, class: "profile-pic" do
37	37	= image_tag gravatar_icon(current_user.email, 26)
38	38
39		-
40		-= render "layouts/init_auto_complete"
...	...
1	1	:javascript
2	2	$(function() {
3		- GitLab.GfmAutoComplete.Members.url = "#{ "/api/v3/projects/#{@project.id}/members" if @project }";
4		- GitLab.GfmAutoComplete.Members.params.private_token = "#{current_user.private_token}";
5		-
6		- GitLab.GfmAutoComplete.Emoji.data = #{raw emoji_autocomplete_source};
7		- // convert the list so that the items have the right format for completion
8		- GitLab.GfmAutoComplete.Emoji.data = $.map(GitLab.GfmAutoComplete.Emoji.data, function(value) {
9		- return {
10		- name: value,
11		- insert: value+':',
12		- image: '#{image_path("emoji")}/'+value+'.png'
13		- }
14		- });
15		-
	3	+ GitLab.GfmAutoComplete.dataSource = "#{autocomplete_sources_project_path(@project)}"
	4	+ GitLab.GfmAutoComplete.Emoji.assetBase = '#{image_path("emoji")}'
16	5	GitLab.GfmAutoComplete.setup();
17	6	});
...	...
...	...	@@ -3,6 +3,7 @@
3	3	= render "layouts/head", title: @project.name_with_namespace
4	4	%body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
5	5	= render "layouts/head_panel", title: project_title(@project)
	6	+ = render "layouts/init_auto_complete"
6	7	= render "layouts/flash"
7	8	- if can?(current_user, :download_code, @project)
8	9	= render 'shared/no_ssh'
...	...
...	...	@@ -168,6 +168,7 @@ Gitlab::Application.routes.draw do
168	168	member do
169	169	put :transfer
170	170	post :fork
	171	+ get :autocomplete_sources
171	172	end
172	173
173	174	resources :blob, only: [:show], constraints: {id: /.+/}
...	...
...	...	@@ -83,6 +83,10 @@ describe ProjectsController, "routing" do
83	83	get("/gitlabhq/edit").should route_to('projects#edit', id: 'gitlabhq')
84	84	end
85	85
	86	+ it "to #autocomplete_sources" do
	87	+ get('/gitlabhq/autocomplete_sources').should route_to('projects#autocomplete_sources', id: "gitlabhq")
	88	+ end
	89	+
86	90	it "to #show" do
87	91	get("/gitlabhq").should route_to('projects#show', id: 'gitlabhq')
88	92	end
...	...