Allow to customize the keys that are sent with remote-field-updater

app/views/groups/_users.html.erb

@@ -77,15 +77,14 @@ See doc/COPYRIGHT.rdoc for more details.
       <%= styled_form_tag(members_of_group_path(@group), method: :post, remote: true) do |f| %>
         <fieldset class="form--fieldset">
           <legend class="form--fieldset-legend"><%=l(:label_user_new)%></legend>
-          <remote-field-updater
-             url="<%= url_for(controller: '/groups', action: 'autocomplete_for_user', id: @group) %>"
-             request-key="q">
+          <remote-field-updater url="<%= url_for(controller: '/groups', action: 'autocomplete_for_user', id: @group) %>">
             <div class="form--field -vertical">
               <%= styled_label_tag "user_search", l(:label_user_search) %>
               <div class="form--field-container">
                 <%= styled_text_field_tag 'user_search',
                                           nil,
-                                          class: 'remote-field--input' %>
+                                          class: 'remote-field--input',
+                                          data: { :'remote-field-key' =>'q' } %>
               </div>
             </div>
             <div class="form--field -vertical">

app/views/members/_member_form_impaired.html.erb

@@ -34,9 +34,7 @@ See doc/COPYRIGHT.rdoc for more details.
              complete: 'jQuery(\'#member-add-submit\').enable(); activateFlashError();',
              html: {id: "members_add_form", class: "form -vertical"}) do |f| %>
   <div class="form--section">
-    <remote-field-updater
-       url="<%= url_for(controller: '/members', action: 'autocomplete_for_member', project_id: project) %>"
-       request-key="q">
+    <remote-field-updater url="<%= url_for(controller: '/members', action: 'autocomplete_for_member', project_id: project) %>">
       <div id="new-member-message"></div>
       <div class="grid-block">
         <div class="grid-block medium-6">
@@ -51,6 +49,7 @@ See doc/COPYRIGHT.rdoc for more details.
             <%= styled_label_tag :principal_search, user_id_title %>
             <%= styled_text_field_tag :principal_search,
                                       nil,
+                                      data: { :'remote-field-key' => 'q' },
                                       class: 'remote-field--input' %>
           </div>
         </div>

frontend/app/components/common/remote/remote-field-updater.directive.test.ts

@@ -43,8 +43,8 @@ describe('remote-field-updater directive', function() {
     $httpBackend = _$httpBackend_;
 
     var template = `
-      <remote-field-updater url="/foo/bar" request-key="q">
-        <input type="text" class="remote-field--input" />
+      <remote-field-updater url="/foo/bar">
+        <input type="text" class="remote-field--input" data-remote-field-key="q"/>
         <div class="remote-field--target"></div>
       </remote-field-updater>`;
     element = $compile(template)($rootScope);

frontend/app/components/common/remote/remote-field-updater.directive.ts

@@ -32,28 +32,60 @@ function remoteFieldUpdater($http) {
   return {
     restrict: 'E',
     scope: {
-      requestKey: '@',
-      url: '@'
+      url: '@',
+      method: '@'
     },
     link: (scope, element) => {
       const input = element.find('.remote-field--input');
       const target = element.find('.remote-field--target');
+      const htmlMode = target.length > 0;
+      const method = (scope.method || 'GET').toUpperCase();
+
+      function buildRequest(params) {
+        const request = {
+          url: scope.url,
+          method: method,
+          headers: {},
+        };
+
+        // In HTML mode, expect html response
+        if (htmlMode) {
+          request.headers['Accept'] = 'text/html';
+        } else {
+          request.headers['Accept'] = 'application/javascript';
+        }
+
+        // Append request to either URL params or body
+        // Angular doesn't differentiate between those two on its own.
+        if (method === 'GET') {
+          request['params'] = params;
+        } else {
+          request['data'] = params;
+        }
+
+        return request;
+      }
 
       function updater() {
-        const request = {};
-        request[scope.requestKey] = input.val();
+        var params = {};
+
+        // Gather request keys
+        input.each((i, el) => {
+          var field = angular.element(el);
+          params[field.data('remoteFieldKey')] = field.val();
+        });
 
-        $http.get(scope.url, {
-          params: request,
-          headers: {
-            "Accept": "text/html"
+        $http(buildRequest(params)).then(response => {
+          // Replace the given target
+          if (htmlMode) {
+            target.html(response.data);
+          } else {
+            eval(response.data);
           }
-        }).then(response => {
-          target.html(response.data);
         });
       }
 
-      input.on('keyup', _.throttle(updater, 250));
+      input.on('keyup change', _.throttle(updater, 1000, { leading: true }));
     }
   };
 }

frontend/app/init-app.js

@@ -65,6 +65,8 @@ opApp
         $httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = jQuery(
             'meta[name=csrf-token]').attr('content');
         $httpProvider.defaults.headers.common['X-Authentication-Scheme'] = 'Session';
+        // Add X-Requested-With for request.xhr?
+        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
         // prepend a given base path to requests performed via $http
         //
         $httpProvider.interceptors.push(function($q) {