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

pull/4841/head
Oliver Günther 8 years ago
parent 9031d724cb
commit 66a096f100
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
  1. 7
      app/views/groups/_users.html.erb
  2. 5
      app/views/members/_member_form_impaired.html.erb
  3. 4
      frontend/app/components/common/remote/remote-field-updater.directive.test.ts
  4. 54
      frontend/app/components/common/remote/remote-field-updater.directive.ts
  5. 2
      frontend/app/init-app.js

@ -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">

@ -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>

@ -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);

@ -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 }));
}
};
}

@ -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) {

Loading…
Cancel
Save