app/assets/javascripts/forms/input-connected.js
(function (root, factory) {
if (root === undefined && window !== undefined) root = window;
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define(["jquery"], function (a0) {
return (factory(a0));
});
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("jquery"));
} else {
factory(root["jQuery"]);
}
}(this, function (jQuery) {
(function($) {
var appendToElement, hasRefreshButton, updateOptionsHtml, updateTargetComponent, updateTargetRefreshButton;
updateOptionsHtml = function(data, componentTarget) {
console.log(data);
componentTarget.children('option:not([value=""])').remove();
if (Array.isArray(data)) {
return appendToElement(data, componentTarget);
} else {
return $.each(data, function(k, v) {
var optgroup;
updateOptionsHtml(data, componentTarget);
optgroup = $("<optgroup></optgroup>").attr("label", k);
appendToElement(v, optgroup);
return componentTarget.append(optgroup);
});
}
};
appendToElement = function(data, element) {
return data.forEach(function(opt) {
return element.append($("<option></option>").attr("value", opt.value || opt[1]).text(opt.text || opt[0]));
});
};
updateTargetComponent = function(data, componentTarget, component) {
updateOptionsHtml(data, componentTarget);
updateTargetRefreshButton(componentTarget, component);
if (componentTarget.hasClass('multi-column-field')) {
componentTarget.multiSelect('refresh');
}
if (componentTarget.hasClass('dropdown-select-field')) {
componentTarget.selectpicker('refresh');
}
if (componentTarget.hasClass('multi-select-field')) {
componentTarget.multiselect('rebuild');
}
componentTarget.attr("disabled", false);
componentTarget.removeClass("disabled");
return componentTarget.change();
};
updateTargetRefreshButton = function(componentTarget, component) {
var refreshBtn;
if (hasRefreshButton(componentTarget)) {
refreshBtn = componentTarget.parents('.input-group').find('.input-refresh-button');
return refreshBtn.attr('value', component.val()).attr('name', component.attr('name'));
}
};
hasRefreshButton = function(component) {
return component.parents('.input-group').hasClass('field-refresh');
};
return $.fn.inputConnected = function(options) {
var defaults, self, settings;
defaults = {
mode: "remote",
events: "change",
target: {
url: null,
selector: null,
data: []
}
};
settings = $.extend({}, defaults, options);
self = this;
return this.each(function() {
var component, connect, connectMode, events;
component = $(this);
connect = component.data().connect;
if (connect.targets == null) {
connect.target = connect.target || {};
connect.target.url = connect.target.url || settings.target.url;
connect.target.data = connect.target.data || settings.target.data;
connect.target.selector = connect.target.selector || settings.target.selector;
}
connect.targets = connect.targets || [];
if (connect.target != null) {
connect.targets.push(connect.target);
}
if (connect == null) {
return;
}
connectMode = connect.mode || settings.mode;
events = connect.events || settings.events;
return component.on(events, function(e) {
var name, values;
e.preventDefault();
values = component.val();
name = component.attr('name');
name = name != null ? name : "id";
return connect.targets.forEach(function(target) {
var componentTarget, data, mode;
componentTarget = $("" + target.selector);
mode = target.mode || connectMode;
if (mode === "remote") {
let params = []
params[`#${name}`] = values
$.ajax({
url: target.url,
data: params
}).done(function(data) {
return updateTargetComponent(data, componentTarget, component);
});
}
if (mode === "local") {
data = target.data || settings.target.data;
data = data.filter(function(value) {
values = [].concat.apply([], [values]);
return values.includes(String(value.connect_option_id));
});
return updateTargetComponent(data, componentTarget, component);
}
});
});
});
};
})(jQuery);
}));