Merge pull request #1597 from riyad/add-completion-for-all-emoji

Improve completion of emoji and team members

Merge pull request #1597 from riyad/add-completion-for-all-emoji
Improve completion of emoji and team members
Dmitriy Zaporozhets
2 parents a54a9018 37e579ce
Showing 4 changed files with 60 additions and 10 deletions Show diff stats
app/helpers/notes_helper.rb
app/views/notes/_common_form.html.haml
app/views/notes/_per_line_form.html.haml
spec/helpers/notes_helper_spec.rb
@@ -14,4 +14,10 @@ module NotesHelper
       "vote downvote"
     end
   end
+
+  def emoji_for_completion
+    # should be an array of strings
+    # so to_s can be called, because it is sufficient and to_json is too slow
+    Emoji::NAMES
+  end
 end
@@ -8,7 +8,7 @@
  
     = f.hidden_field :noteable_id
     = f.hidden_field :noteable_type
-    = f.text_area :note, size: 255, class: 'note-text'
+    = f.text_area :note, size: 255, class: 'note-text gfm-input'
     #preview-note.preview_note.hide
     .hint
       .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
@@ -39,12 +39,46 @@
  
 :javascript
   $(function(){
-    var names = #{@project.users.pluck(:name)}, emoji = ['+1', '-1'];
-    var emoji = $.map(emoji, function(value, i) {return {key:value + ':', name:value}});
-    $('#note_note, .per_line_form .line-note-text').
-      atWho('@', { data: names }).
-      atWho(':', {
-        data: emoji,
-        tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
-      });
+    // init auto-completion of team members
+    var membersUrl = "#{root_url}/api/v2/projects/#{@project.code}/members";
+    var membersParams = {
+      private_token: "#{current_user.authentication_token}",
+      page: 1,
+    };
+    var membersData = [];
+    $('.gfm-input').atWho('@', function(query, callback) {
+      (function getMoreMembers() {
+        $.getJSON(membersUrl, membersParams).
+          success(function(members) {
+            // pick the data we need
+            var newMembersData = $.map(members, function(member) { return member.name });
+
+            // add the new page of data to the rest
+            $.merge(membersData, newMembersData);
+
+            // show the pop-up with a copy of the current data
+            callback(membersData.slice(0));
+
+            // are we past the last page?
+            if (newMembersData.length == 0) {
+              // set static data and stop callbacks
+              $('.gfm-input').atWho('@', { data: membersData, callback: null });
+            } else {
+              // get next page
+              getMoreMembers();
+            }
+          });
+        // next request will get the next page
+        membersParams.page += 1;
+      })();
+    });
+
+    // init auto-completion of emoji
+    var emoji = #{emoji_for_completion};
+    // convert the list so that the items have the right format for completion
+    emoji = $.map(emoji, function(value) {return { key: value+':', name: value }});
+    $('.gfm-input').atWho(':', {
+      data: emoji,
+      tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
+    });
   });
@@ -13,7 +13,7 @@
             = f.hidden_field :noteable_id
             = f.hidden_field :noteable_type
             = f.hidden_field :line_code
-            = f.text_area :note,  size: 255, class: 'line-note-text'
+            = f.text_area :note,  size: 255, class: 'line-note-text gfm-input'
             .note_actions
               .buttons
                 = f.submit 'Add note', class: "btn save-btn submit_note submit_inline_note", id: "submit_note"
@@ -0,0 +1,10 @@
+require 'spec_helper'
+
+describe NotesHelper do
+  describe "#emoji_for_completion" do
+    it "should be an Array of Strings" do
+      emoji_for_completion.should be_a(Array)
+      emoji_for_completion.each { |emoji| emoji.should be_a(String) }
+    end
+  end
+end
...	...	@@ -14,4 +14,10 @@ module NotesHelper
14	14	"vote downvote"
15	15	end
16	16	end
	17	+
	18	+ def emoji_for_completion
	19	+ # should be an array of strings
	20	+ # so to_s can be called, because it is sufficient and to_json is too slow
	21	+ Emoji::NAMES
	22	+ end
17	23	end
...	...
...	...	@@ -8,7 +8,7 @@
8	8
9	9	= f.hidden_field :noteable_id
10	10	= f.hidden_field :noteable_type
11		- = f.text_area :note, size: 255, class: 'note-text'
	11	+ = f.text_area :note, size: 255, class: 'note-text gfm-input'
12	12	#preview-note.preview_note.hide
13	13	.hint
14	14	.right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
...	...	@@ -39,12 +39,46 @@
39	39
40	40	:javascript
41	41	$(function(){
42		- var names = #{@project.users.pluck(:name)}, emoji = ['+1', '-1'];
43		- var emoji = $.map(emoji, function(value, i) {return {key:value + ':', name:value}});
44		- $('#note_note, .per_line_form .line-note-text').
45		- atWho('@', { data: names }).
46		- atWho(':', {
47		- data: emoji,
48		- tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
49		- });
	42	+ // init auto-completion of team members
	43	+ var membersUrl = "#{root_url}/api/v2/projects/#{@project.code}/members";
	44	+ var membersParams = {
	45	+ private_token: "#{current_user.authentication_token}",
	46	+ page: 1,
	47	+ };
	48	+ var membersData = [];
	49	+ $('.gfm-input').atWho('@', function(query, callback) {
	50	+ (function getMoreMembers() {
	51	+ $.getJSON(membersUrl, membersParams).
	52	+ success(function(members) {
	53	+ // pick the data we need
	54	+ var newMembersData = $.map(members, function(member) { return member.name });
	55	+
	56	+ // add the new page of data to the rest
	57	+ $.merge(membersData, newMembersData);
	58	+
	59	+ // show the pop-up with a copy of the current data
	60	+ callback(membersData.slice(0));
	61	+
	62	+ // are we past the last page?
	63	+ if (newMembersData.length == 0) {
	64	+ // set static data and stop callbacks
	65	+ $('.gfm-input').atWho('@', { data: membersData, callback: null });
	66	+ } else {
	67	+ // get next page
	68	+ getMoreMembers();
	69	+ }
	70	+ });
	71	+ // next request will get the next page
	72	+ membersParams.page += 1;
	73	+ })();
	74	+ });
	75	+
	76	+ // init auto-completion of emoji
	77	+ var emoji = #{emoji_for_completion};
	78	+ // convert the list so that the items have the right format for completion
	79	+ emoji = $.map(emoji, function(value) {return { key: value+':', name: value }});
	80	+ $('.gfm-input').atWho(':', {
	81	+ data: emoji,
	82	+ tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
	83	+ });
50	84	});
...	...
...	...	@@ -13,7 +13,7 @@
13	13	= f.hidden_field :noteable_id
14	14	= f.hidden_field :noteable_type
15	15	= f.hidden_field :line_code
16		- = f.text_area :note, size: 255, class: 'line-note-text'
	16	+ = f.text_area :note, size: 255, class: 'line-note-text gfm-input'
17	17	.note_actions
18	18	.buttons
19	19	= f.submit 'Add note', class: "btn save-btn submit_note submit_inline_note", id: "submit_note"
...	...
...	...	@@ -0,0 +1,10 @@
	1	+require 'spec_helper'
	2	+
	3	+describe NotesHelper do
	4	+ describe "#emoji_for_completion" do
	5	+ it "should be an Array of Strings" do
	6	+ emoji_for_completion.should be_a(Array)
	7	+ emoji_for_completion.each { \|emoji\| emoji.should be_a(String) }
	8	+ end
	9	+ end
	10	+end
...	...