fix gfm autocomplete for usernames

1 files changed, 52 insertions, 46 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js.coffee b/app/assets/javascripts/gfm_auto_complete.js.coffee
index ffc4c409b54..a7038161668 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.coffee
+++ b/app/assets/javascripts/gfm_auto_complete.js.coffee
@@ -1,52 +1,58 @@
 # Creates the variables for setting up GFM auto-completion
 
 window.GitLab ?= {}
-GitLab.GfmAutoComplete ?= {}
-
-# Emoji
-data      = []
-template  = "<li data-value='${insert}'>${name} <img alt='${name}' height='20' src='${image}' width='20' /></li>"
-GitLab.GfmAutoComplete.Emoji = {data, template}
-
-# Team Members
-data      = []
-url     = '';
-params  = {private_token: '', page: 1}
-GitLab.GfmAutoComplete.Members = {data, url, params}
-
-# Add GFM auto-completion to all input fields, that accept GFM input.
-GitLab.GfmAutoComplete.setup = ->
-  input = $('.js-gfm-input')
-
+GitLab.GfmAutoComplete =
   # Emoji
-  input.atWho ':',
-    data: GitLab.GfmAutoComplete.Emoji.data,
-    tpl: GitLab.GfmAutoComplete.Emoji.template
+  Emoji:
+    data: []
+    template: '<li data-value="${insert}">${name} <img alt="${name}" height="20" src="${image}" width="20" /></li>'
 
   # Team Members
-  input.atWho '@', (query, callback) ->
-    (getMoreMembers = ->
-      $.getJSON(GitLab.GfmAutoComplete.Members.url, GitLab.GfmAutoComplete.Members.params)
-        .success (members) ->
-          # pick the data we need
-          newMembersData = $.map(members, (m) -> m.name )
-
-          # add the new page of data to the rest
-          $.merge(GitLab.GfmAutoComplete.Members.data, newMembersData)
-
-          # show the pop-up with a copy of the current data
-          callback(GitLab.GfmAutoComplete.Members.data[..])
-
-          # are we past the last page?
-          if newMembersData.length is 0
-            # set static data and stop callbacks
-            input.atWho '@',
-              data: GitLab.GfmAutoComplete.Members.data
-              callback: null
-          else
-            # get next page
-            getMoreMembers()
-
-      # so the next request gets the next page
-      GitLab.GfmAutoComplete.Members.params.page += 1
-    ).call()
+  Members:
+    data: []
+    url: ''
+    params:
+      private_token: ''
+      page: 1
+    template: '<li data-value="${username}">${username} <small>${name}</small></li>'
+
+  # Add GFM auto-completion to all input fields, that accept GFM input.
+  setup: ->
+    input = $('.js-gfm-input')
+
+    # Emoji
+    input.atWho ':',
+      data: @Emoji.data
+      tpl: @Emoji.template
+
+    # Team Members
+    input.atWho '@',
+      tpl: @Members.template
+      callback: (query, callback) =>
+        (getMoreMembers = =>
+          $.getJSON(@Members.url, @Members.params).done (members) =>
+            # pick the data we need
+            newMembersData = $.map(members, (m) ->
+              username: m.username
+              name: m.name
+            )
+
+            # add the new page of data to the rest
+            $.merge(@Members.data, newMembersData)
+
+            # show the pop-up with a copy of the current data
+            callback(@Members.data[..])
+
+            # are we past the last page?
+            if newMembersData.length is 0
+              # set static data and stop callbacks
+              input.atWho '@',
+                data: @Members.data
+                callback: null
+            else
+              # get next page
+              getMoreMembers()
+
+          # so the next callback requests the next page
+          @Members.params.page += 1
+        ).call()