rails_admin 2.2.1 → 3.0.0.beta

data/src/rails_admin/filtering-multiselect.js

@@ -0,0 +1,394 @@
+import jQuery from "jquery";
+import "jquery-ui/ui/widget";
+import I18n from "./i18n";
+
+(function ($) {
+  $.widget("ra.filteringMultiselect", {
+    _cache: {},
+    options: {
+      createQuery: function (query) {
+        return { query: query };
+      },
+      sortable: false,
+      removable: true,
+      regional: {
+        add: "Add",
+        chooseAll: "Choose all",
+        clearAll: "Clear all",
+        down: "Down",
+        remove: "Remove",
+        search: "Search",
+        up: "Up",
+      },
+      searchDelay: 400,
+      remote_source: null,
+      xhr: false,
+    },
+
+    wrapper: null,
+    filter: null,
+    collection: null,
+    addAll: null,
+    add: null,
+    remove: null,
+    up: null,
+    down: null,
+    selection: null,
+    removeAll: null,
+
+    _create: function () {
+      this._cache = {};
+      this._build();
+      this._buildCache();
+      this._bindEvents();
+    },
+
+    _build: function () {
+      var i;
+
+      this.wrapper = this.element.siblings(
+        '.ra-multiselect[data-input-for="' + this.element.attr("id") + '"]'
+      );
+
+      // Prevent duplication on browser back
+      if (this.wrapper.length > 0) {
+        this.filter = this.wrapper.find("input.ra-multiselect-search");
+        this.collection = this.wrapper.find("select.ra-multiselect-collection");
+        this.addAll = this.wrapper.find("a.ra-multiselect-item-add-all");
+        this.add = this.wrapper.find("a.ra-multiselect-item-add");
+        this.remove = this.wrapper.find("a.ra-multiselect-item-remove");
+        this.up = this.wrapper.find("a.ra-multiselect-item-up");
+        this.down = this.wrapper.find("a.ra-multiselect-item-down");
+        this.selection = this.wrapper.find("select.ra-multiselect-selection");
+        this.removeAll = this.wrapper.find("a.ra-multiselect-item-remove-all");
+        return;
+      }
+
+      this.wrapper = $('<div class="ra-multiselect">').attr(
+        "data-input-for",
+        this.element.attr("id")
+      );
+      this.wrapper.insertAfter(this.element);
+      var header = $('<div class="ra-multiselect-header">');
+      this.filter = $(
+        '<input type="search" placeholder="' +
+          this.options.regional.search +
+          '" class="form-control ra-multiselect-search"/>'
+      );
+      header.append(this.filter);
+      this.wrapper.append(header);
+
+      var columns = {
+        left: $('<div class="ra-multiselect-column ra-multiselect-left">'),
+        center: $('<div class="ra-multiselect-column ra-multiselect-center">'),
+        right: $('<div class="ra-multiselect-column ra-multiselect-right">'),
+      };
+
+      for (i in columns) {
+        if (columns.hasOwnProperty(i)) {
+          this.wrapper.append(columns[i]);
+        }
+      }
+
+      this.collection = $('<select multiple="multiple"></select>');
+      this.collection.addClass("form-control ra-multiselect-collection");
+      this.addAll = $(
+        '<a href="#" class="ra-multiselect-item-add-all"><span class="fas fa-chevron-circle-right"></span>' +
+          this.options.regional.chooseAll +
+          "</a>"
+      );
+      columns.left.html(this.collection).append(this.addAll);
+      this.collection.wrap('<div class="wrapper"/>');
+
+      this.add = $(
+        '<a href="#" class="fas fa-chevron-circle-right ra-multiselect-item-add"></a>'
+      ).attr("title", this.options.regional.add);
+      columns.center.append(this.add);
+      if (this.options.removable) {
+        this.remove = $(
+          '<a href="#" class="fas fa-chevron-circle-left ra-multiselect-item-remove"></a>'
+        ).attr("title", this.options.regional.remove);
+        columns.center.append(this.remove);
+      }
+      if (this.options.sortable) {
+        this.up = $(
+          '<a href="#" class="fas fa-chevron-circle-up ra-multiselect-item-up">' +
+            this.options.regional.up +
+            "</a>"
+        );
+        this.down = $(
+          '<a href="#" class="fas fa-chevron-circle-down ra-multiselect-item-down">' +
+            this.options.regional.down +
+            "</a>"
+        );
+        columns.center.append(this.up).append(this.down);
+      }
+
+      this.selection = $(
+        '<select class="form-control ra-multiselect-selection" multiple="multiple"></select>'
+      );
+      columns.right.append(this.selection);
+      if (this.options.removable) {
+        this.removeAll = $(
+          '<a href="#" class="ra-multiselect-item-remove-all"><span class="fas fa-chevron-circle-left"></span>' +
+            this.options.regional.clearAll +
+            "</a>"
+        );
+        columns.right.append(this.removeAll);
+      }
+      this.selection.wrap('<div class="wrapper"/>');
+
+      this.element.css({ display: "none" });
+
+      this.tooManyObjectsPlaceholder = $('<option disabled="disabled" />').text(
+        I18n.t("too_many_objects")
+      );
+      this.noObjectsPlaceholder = $('<option disabled="disabled" />').text(
+        I18n.t("no_objects")
+      );
+
+      if (this.options.xhr) {
+        this.collection.append(this.tooManyObjectsPlaceholder);
+      }
+    },
+
+    _bindEvents: function () {
+      var widget = this;
+
+      /* Add all to selection */
+      this.addAll.click(function (e) {
+        widget._select($("option:not(:disabled)", widget.collection));
+        e.preventDefault();
+        widget.selection.trigger("change");
+      });
+
+      /* Add to selection */
+      this.add.click(function (e) {
+        widget._select($(":selected", widget.collection));
+
+        e.preventDefault();
+        widget.selection.trigger("change");
+      });
+
+      if (this.options.removable) {
+        /* Remove all from selection */
+        this.removeAll.click(function (e) {
+          widget._deSelect($("option", widget.selection));
+          e.preventDefault();
+          widget.selection.trigger("change");
+        });
+
+        /* Remove from selection */
+        this.remove.click(function (e) {
+          widget._deSelect($(":selected", widget.selection));
+          e.preventDefault();
+          widget.selection.trigger("change");
+        });
+      }
+
+      var timeout = null;
+      if (this.options.sortable) {
+        /* Move selection up */
+        this.up.click(function (e) {
+          widget._move("up", $(":selected", widget.selection));
+          e.preventDefault();
+        });
+
+        /* Move selection down */
+        this.down.click(function (e) {
+          widget._move("down", $(":selected", widget.selection));
+          e.preventDefault();
+        });
+      }
+
+      /* Typing to the filter */
+      this.filter.bind("keyup click", function (e) {
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+        timeout = setTimeout(function () {
+          widget._queryFilter(widget.filter.val());
+        }, widget.options.searchDelay);
+      });
+    },
+
+    _queryFilter: function (val) {
+      var widget = this;
+      widget._query(val, function (matches) {
+        var filtered = [];
+        var i;
+
+        for (i = 0; i < matches.length; i++) {
+          if (!widget.selected(matches[i].id)) {
+            filtered.push(i);
+          }
+        }
+        if (filtered.length > 0) {
+          widget.collection.html("");
+          for (i = 0; i < filtered.length; i++) {
+            var newOptions = $("<option></option>")
+              .prop("value", matches[filtered[i]].id)
+              .prop("title", matches[filtered[i]].label)
+              .text(matches[filtered[i]].label);
+            widget.collection.append(newOptions);
+          }
+        } else {
+          widget.collection.html(widget.noObjectsPlaceholder);
+        }
+      });
+    },
+
+    /*
+     * Cache key is stored in the format `o_<option value>` to avoid JS
+     * engine coercing string keys to int keys, and thereby preserving
+     * the insertion order. The value for each key is in turn an object
+     * that stores the option tag's HTML text and the value. Example:
+     * cache = {
+     *    'o_271': { id: 271, value: 'CartItem #271'},
+     *    'o_270': { id: 270, value: 'CartItem #270'}
+     * }
+     */
+    _buildCache: function (options) {
+      var widget = this;
+
+      this.element.find("option").each(function (i, option) {
+        widget._cache["o_" + option.value] = {
+          id: option.value,
+          value: $(option).text(),
+        };
+        if (option.selected) {
+          $(option)
+            .clone()
+            .appendTo(widget.selection)
+            .prop("selected", false)
+            .prop("title", $(option).text());
+        } else {
+          $(option)
+            .clone()
+            .appendTo(widget.collection)
+            .prop("selected", false)
+            .prop("title", $(option).text());
+        }
+      });
+    },
+
+    _deSelect: function (options) {
+      var widget = this;
+      options.each(function (i, option) {
+        widget.element
+          .find('option[value="' + option.value + '"]')
+          .prop("selected", false);
+      });
+      $(options).appendTo(this.collection).prop("selected", false);
+    },
+
+    _query: function (query, success) {
+      var i,
+        matches = [];
+
+      if (query === "") {
+        if (!this.options.xhr) {
+          for (i in this._cache) {
+            if (this._cache.hasOwnProperty(i)) {
+              var option = this._cache[i];
+              matches.push({ id: option.id, label: option.value });
+            }
+          }
+          success.apply(this, [matches]);
+        } else {
+          this.collection.html(this.tooManyObjectsPlaceholder);
+        }
+      } else {
+        if (this.options.xhr) {
+          $.ajax({
+            beforeSend: function (xhr) {
+              xhr.setRequestHeader("Accept", "application/json");
+            },
+            url: this.options.remote_source,
+            data: this.options.createQuery(query),
+            success: success,
+          });
+        } else {
+          query = new RegExp(query + ".*", "i");
+
+          for (i in this._cache) {
+            if (
+              this._cache.hasOwnProperty(i) &&
+              query.test(this._cache[i]["value"])
+            ) {
+              var option = this._cache[i];
+              matches.push({ id: option.id, label: option.value });
+            }
+          }
+
+          success.apply(this, [matches]);
+        }
+      }
+    },
+
+    _select: function (options) {
+      var widget = this;
+      options.each(function (i, option) {
+        var el = widget.element.find('option[value="' + option.value + '"]');
+        if (el.length) {
+          el.prop("selected", true);
+        } else {
+          widget.element.append(
+            $("<option></option>")
+              .prop("value", option.value)
+              .prop("selected", true)
+          );
+        }
+      });
+      $(options).appendTo(this.selection).prop("selected", false);
+    },
+
+    _move: function (direction, options) {
+      var widget = this;
+      if (direction == "up") {
+        options.each(function (i, option) {
+          var prev = $(option).prev();
+          if (prev.length > 0) {
+            var el = widget.element.find(
+              'option[value="' + option.value + '"]'
+            );
+            var el_prev = widget.element.find(
+              'option[value="' + prev[0].value + '"]'
+            );
+            el_prev.before(el);
+            prev.before($(option));
+          }
+        });
+      } else {
+        $.fn.reverse = [].reverse; // needed to lower last items first
+        options.reverse().each(function (i, option) {
+          var next = $(option).next();
+          if (next.length > 0) {
+            var el = widget.element.find(
+              'option[value="' + option.value + '"]'
+            );
+            var el_next = widget.element.find(
+              'option[value="' + next[0].value + '"]'
+            );
+            el_next.after(el);
+            next.after($(option));
+          }
+        });
+      }
+    },
+
+    selected: function (value) {
+      if (
+        this.selection[0].querySelectorAll('option[value="' + value + '"]')[0]
+      ) {
+        return true;
+      }
+    },
+
+    destroy: function () {
+      this.wrapper.remove();
+      this.element.css({ display: "inline" });
+      $.Widget.prototype.destroy.apply(this, arguments);
+    },
+  });
+})(jQuery);

data/src/rails_admin/filtering-select.js

@@ -0,0 +1,302 @@
+import jQuery from "jquery";
+import "jquery-ui/ui/widget";
+import "jquery-ui/ui/widgets/autocomplete";
+import I18n from "./i18n";
+
+(function ($) {
+  "use strict";
+
+  $.widget("ra.filteringSelect", {
+    options: {
+      createQuery: function (query) {
+        return { query: query };
+      },
+      minLength: 0,
+      searchDelay: 200,
+      remote_source: null,
+      source: null,
+      xhr: false,
+    },
+
+    button: null,
+    input: null,
+    select: null,
+    filtering_select: null,
+
+    _create: function () {
+      this.filtering_select = this.element.siblings(
+        '[data-input-for="' + this.element.attr("id") + '"]'
+      );
+
+      // When using the browser back and forward buttons, it is possible that
+      // the autocomplete field will be cached which causes duplicate fields
+      // to be generated.
+      if (this.filtering_select.length > 0) {
+        this.input = this.filtering_select.children("input");
+        this.button = this.filtering_select.children(".input-group-btn");
+      } else {
+        this.element.hide();
+        this.filtering_select = this._inputGroup(this.element.attr("id"));
+        this.input = this._inputField();
+        this.button = this._buttonField();
+      }
+      this.clearOption = $('<span style="color: #888"></span>').append(
+        '<i class="fas fa-times"></i> ' +
+          $("<span></span>").text(I18n.t("clear")).html()
+      );
+      this.noObjectsPlaceholder = $('<option disabled="disabled" />').text(
+        I18n.t("no_objects")
+      );
+
+      this._setOptionsSource();
+      this._initAutocomplete();
+      this._initKeyEvent();
+      this._overloadRenderItem();
+      this._autocompleteDropdownEvent(this.button);
+
+      return this.filtering_select
+        .append(this.input)
+        .append(this.button)
+        .insertAfter(this.element);
+    },
+
+    _getResultSet: function (request, data, xhr) {
+      var matcher = new RegExp(
+        $.ui.autocomplete.escapeRegex(request.term),
+        "i"
+      );
+
+      var spannedContent = function (content) {
+        return $("<span>").text(content).html();
+      };
+
+      var highlighter = function (label, word) {
+        if (word.length) {
+          return $.map(label.split(word), function (el) {
+            return spannedContent(el);
+          }).join($("<strong>").text(word)[0].outerHTML);
+        } else {
+          return spannedContent(label);
+        }
+      };
+
+      var matches = $.map(data, function (el) {
+        var id = el.id || el.value;
+        var value = el.label || el.id;
+        // match regexp only for local requests, remote ones are already
+        // filtered, and label may not contain filtered term.
+        if (id && (xhr || matcher.test(el.label))) {
+          return {
+            html: highlighter(value, request.term),
+            value: value,
+            id: id,
+          };
+        }
+      });
+
+      if (request.term.length === 0 && !this.input.attr("required")) {
+        return [{ html: this.clearOption, value: null, id: null }].concat(
+          matches
+        );
+      } else if (matches.length === 0) {
+        return [{ html: this.noObjectsPlaceholder, value: null, id: null }];
+      } else {
+        return matches;
+      }
+    },
+
+    _getSourceFunction: function (source) {
+      var self = this;
+      var requestIndex = 0;
+
+      if ($.isArray(source)) {
+        return function (request, response) {
+          response(self._getResultSet(request, source, false));
+        };
+      } else if (typeof source === "string") {
+        return function (request, response) {
+          if (this.xhr) {
+            this.xhr.abort();
+          }
+
+          this.xhr = $.ajax({
+            url: source,
+            data: self.options.createQuery(request.term),
+            dataType: "json",
+            autocompleteRequest: ++requestIndex,
+            success: function (data, status) {
+              if (this.autocompleteRequest === requestIndex) {
+                response(self._getResultSet(request, data, true));
+              }
+            },
+            error: function () {
+              if (this.autocompleteRequest === requestIndex) {
+                response([]);
+              }
+            },
+          });
+        };
+      } else {
+        return source;
+      }
+    },
+
+    _setOptionsSource: function () {
+      if (this.options.xhr) {
+        this.options.source = this.options.remote_source;
+      } else {
+        this.options.source = this.element
+          .children("option")
+          .map(function () {
+            return { label: $(this).text(), value: this.value };
+          })
+          .toArray();
+      }
+    },
+
+    _buttonField: function () {
+      return $(
+        '<span class="input-group-btn">' +
+          '<label class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Show All Items" role="button">' +
+          '<span class="caret"></span>' +
+          '<span class="ui-button-text">&nbsp;</span>' +
+          "</label>" +
+          "</span>"
+      );
+    },
+
+    _autocompleteDropdownEvent: function (element) {
+      var self = this;
+
+      return element.click(function () {
+        // close if already visible
+        if (self.input.autocomplete("widget").is(":visible")) {
+          self.input.autocomplete("close");
+          return;
+        }
+
+        // pass empty string as value to search for, displaying all results
+        self.input.autocomplete("search", "");
+        self.input.focus();
+      });
+    },
+
+    _inputField: function () {
+      var input;
+      var selected = this.element.children(":selected");
+      var value = selected.val() ? selected.text() : "";
+
+      input = $('<input type="text">')
+        .val(value)
+        .addClass("form-control ra-filtering-select-input")
+        .attr("style", this.element.attr("style"))
+        .show();
+
+      if (this.element.attr("placeholder")) {
+        input.attr("placeholder", this.element.attr("placeholder"));
+      }
+
+      if (this.element.attr("required")) {
+        input.attr("required", this.element.attr("required"));
+        this.element.attr("required", false);
+      }
+
+      return input;
+    },
+
+    _inputGroup: function (inputFor) {
+      return $("<div>")
+        .addClass("input-group filtering-select col-sm-2")
+        .attr("data-input-for", inputFor)
+        .css("float", this.element.css("float"));
+    },
+
+    _initAutocomplete: function () {
+      var self = this;
+
+      return this.input.autocomplete({
+        delay: this.options.searchDelay,
+        minLength: this.options.minLength,
+        source: this._getSourceFunction(this.options.source),
+        select: function (event, ui) {
+          var option = $("<option>")
+            .attr("value", ui.item.id)
+            .attr("selected", "selected")
+            .text(ui.item.value);
+          self.element.html(option).trigger("change", ui.item.id);
+          self._trigger("selected", event, {
+            item: option,
+          });
+          $(self.element.parents(".controls")[0])
+            .find(".update")
+            .removeClass("disabled");
+        },
+        change: function (event, ui) {
+          if (ui.item) {
+            return;
+          }
+
+          var matcher = new RegExp(
+            "^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$",
+            "i"
+          );
+          var valid = false;
+
+          self.element.children("option").each(function () {
+            if ($(this).text().match(matcher)) {
+              valid = true;
+              return false;
+            }
+          });
+
+          if (valid || $(this).val() !== "") {
+            return;
+          }
+
+          // remove invalid value, as it didn't match anything
+          $(this).val(null);
+          self.element.html(
+            $('<option value="" selected="selected"></option>')
+          );
+          self.input.data("ui-autocomplete").term = "";
+          $(self.element.parents(".controls")[0])
+            .find(".update")
+            .addClass("disabled");
+          return false;
+        },
+      });
+    },
+
+    _initKeyEvent: function () {
+      var self = this;
+
+      return this.input.keyup(function () {
+        if ($(this).val().length) {
+          return;
+        }
+
+        /* Clear select options and trigger change if selected item is deleted */
+        return self.element
+          .html($('<option value="" selected="selected"></option>'))
+          .trigger("change");
+      });
+    },
+
+    _overloadRenderItem: function () {
+      this.input.data("ui-autocomplete")._renderItem = function (ul, item) {
+        return $("<li></li>")
+          .data("ui-autocomplete-item", item)
+          .append($("<a></a>").html(item.html || item.id))
+          .appendTo(ul);
+      };
+    },
+
+    destroy: function () {
+      this.input.remove();
+      this.button.remove();
+      this.element.show();
+      this.filtering_select.remove();
+      $.Widget.prototype.destroy.call(this);
+    },
+  });
+})(jQuery);