Select2 tag for namespaces with ajax loading

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 39 insertions, 0 deletions

diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index a36d944cbcb..5f4a38ebbd0 100644
--- a/app/assets/javascripts/api.js.coffee
+++ b/app/assets/javascripts/api.js.coffee
@@ -2,6 +2,7 @@
   users_path: "/api/:version/users.json"
   user_path: "/api/:version/users/:id.json"
   notes_path: "/api/:version/projects/:id/notes.json"
+  namespaces_path: "/api/:version/namespaces.json"
 
   # Get 20 (depends on api) recent notes
   # and sort the ascending from oldest to newest
@@ -49,6 +50,20 @@
     ).done (users) ->
       callback(users)
 
+  # Return namespaces list. Filtered by query
+  namespaces: (query, callback) ->
+    url = Api.buildUrl(Api.namespaces_path)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+        search: query
+        per_page: 20
+      dataType: "json"
+    ).done (namespaces) ->
+      callback(namespaces)
+
   buildUrl: (url) ->
     url = gon.relative_url_root + url if gon.relative_url_root?
     return url.replace(':version', gon.api_version)
diff --git a/app/assets/javascripts/namespace_select.js.coffee b/app/assets/javascripts/namespace_select.js.coffee
new file mode 100644
index 00000000000..00d135d1449
--- /dev/null
+++ b/app/assets/javascripts/namespace_select.js.coffee
@@ -0,0 +1,24 @@
+$ ->
+  namespaceFormatResult = (namespace) ->
+    markup = "<div class='namespace-result'>"
+    markup += "<span class='namespace-kind'>" + namespace.kind + "</span>"
+    markup += "<span class='namespace-path'>" + namespace.path + "</span>"
+    markup += "</div>"
+    markup
+
+  formatSelection = (namespace) ->
+    namespace.kind + ": " + namespace.path
+
+  $('.ajax-namespace-select').each (i, select) ->
+    $(select).select2
+      placeholder: "Search for namespace"
+      multiple: $(select).hasClass('multiselect')
+      minimumInputLength: 0
+      query: (query) ->
+        Api.namespaces query.term, (namespaces) ->
+          data = { results: namespaces }
+          query.callback(data)
+
+      dropdownCssClass: "ajax-namespace-dropdown"
+      formatResult: namespaceFormatResult
+      formatSelection: formatSelection