rails_admin 3.0.0 → 3.1.2

data/src/rails_admin/filter-box.js

@@ -7,98 +7,54 @@ import flatpickr from "flatpickr";
 
   $.filters = filters = {
     append: function (options) {
-      options = options || {};
       var field_label = options["label"];
       var field_name = options["name"];
       var field_type = options["type"];
-      var field_value = options["value"];
+      var field_value = options["value"] || "";
       var field_operator = options["operator"];
-      var select_options = options["select_options"];
-      var required = options["required"];
+      var operators = options["operators"];
       var index = options["index"];
       var value_name = "f[" + field_name + "][" + index + "][v]";
       var operator_name = "f[" + field_name + "][" + index + "][o]";
       var control = null;
       var additional_control = null;
 
+      if (operators.length > 0) {
+        control = $(
+          '<select class="form-control form-select form-select-sm"></select>'
+        ).prop("name", operator_name);
+
+        operators.forEach((operator) => {
+          var element = this.build_operator(operator, options);
+          if (!element) {
+            return;
+          }
+          if (element.prop("value") === field_operator) {
+            element.prop("selected", true);
+          }
+          control.append(element);
+        });
+
+        if (control.find("[data-additional-fieldset]").length > 0) {
+          control.addClass("switch-additional-fieldsets");
+        }
+      }
+
       switch (field_type) {
         case "boolean":
-          control = $('<select class="form-control form-control-sm"></select>')
-            .prop("name", value_name)
-            .append('<option value="_discard">...</option>')
-            .append(
-              $('<option value="true"></option>')
-                .prop("selected", field_value == "true")
-                .text(I18n.t("true"))
-            )
-            .append(
-              $('<option value="false"></option>')
-                .prop("selected", field_value == "false")
-                .text(I18n.t("false"))
-            );
-          if (!required) {
-            control.append([
-              '<option disabled="disabled">---------</option>',
-              $('<option value="_present"></option>')
-                .prop("selected", field_value == "_present")
-                .text(I18n.t("is_present")),
-              $('<option value="_blank"></option>')
-                .prop("selected", field_value == "_blank")
-                .text(I18n.t("is_blank")),
-            ]);
-          }
+          control &&
+            control
+              .prop("name", value_name)
+              .find("option")
+              .each(function () {
+                if ($(this).attr("value") === field_value)
+                  $(this).attr("selected", true);
+              });
           break;
         case "date":
         case "datetime":
         case "timestamp":
         case "time":
-          control =
-            control ||
-            $(
-              '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
-            )
-              .prop("name", operator_name)
-              .append(
-                $(
-                  '<option data-additional-fieldset="default" value="default"></option>'
-                )
-                  .prop("selected", field_operator == "default")
-                  .text(I18n.t(field_type == "time" ? "time" : "date"))
-              )
-              .append(
-                $(
-                  '<option data-additional-fieldset="between" value="between"></option>'
-                )
-                  .prop("selected", field_operator == "between")
-                  .text(I18n.t("between_and_"))
-              );
-          if (field_type != "time") {
-            control.append([
-              $('<option value="today"></option>')
-                .prop("selected", field_operator == "today")
-                .text(I18n.t("today")),
-              $('<option value="yesterday"></option>')
-                .prop("selected", field_operator == "yesterday")
-                .text(I18n.t("yesterday")),
-              $('<option value="this_week"></option>')
-                .prop("selected", field_operator == "this_week")
-                .text(I18n.t("this_week")),
-              $('<option value="last_week"></option>')
-                .prop("selected", field_operator == "last_week")
-                .text(I18n.t("last_week")),
-            ]);
-          }
-          if (!required) {
-            control.append([
-              '<option disabled="disabled">---------</option>',
-              $('<option value="_not_null"></option>')
-                .prop("selected", field_operator == "_not_null")
-                .text(I18n.t("is_present")),
-              $('<option value="_null"></option>')
-                .prop("selected", field_operator == "_null")
-                .text(I18n.t("is_blank")),
-            ]);
-          }
           additional_control = $.map(
             [undefined, "-∞", "∞"],
             function (placeholder, index) {
@@ -126,101 +82,34 @@ import flatpickr from "flatpickr";
           );
           break;
         case "enum":
-          var multiple_values = field_value instanceof Array ? true : false;
-          control = $(
-            '<select class="select-single form-control form-control-sm"></select>'
-          )
-            .css("display", multiple_values ? "none" : "inline-block")
-            .prop("name", multiple_values ? undefined : value_name)
-            .data("name", value_name)
-            .append('<option value="_discard">...</option>')
-            .append(
-              required
-                ? []
-                : [
-                    $('<option value="_present"></option>')
-                      .prop("selected", field_value == "_present")
-                      .text(I18n.t("is_present")),
-                    $('<option value="_blank"></option>')
-                      .prop("selected", field_value == "_blank")
-                      .text(I18n.t("is_blank")),
-                    '<option disabled="disabled">---------</option>',
-                  ]
-            )
-            .append(select_options)
-            .add(
-              $(
-                '<select multiple="multiple" class="select-multiple form-control form-control-sm"></select>'
-              )
-                .css("display", multiple_values ? "inline-block" : "none")
-                .prop("name", multiple_values ? value_name + "[]" : undefined)
-                .data("name", value_name + "[]")
-                .append(select_options)
-            )
-            .add(
-              $('<a href="#" class="switch-select"></a>').append(
-                $("<i></i>").addClass(
-                  "fas fa-" + (multiple_values ? "minus" : "plus")
+          if (control) {
+            var multiple = field_value instanceof Array;
+            control = control
+              .prop("name", multiple ? value_name + "[]" : value_name)
+              .prop("multiple", multiple)
+              .add(
+                $('<a href="#" class="switch-select"></a>').append(
+                  $("<i></i>").addClass(
+                    "fas fa-" + (multiple ? "minus" : "plus")
+                  )
                 )
+              );
+            control.find("option").each(function () {
+              const value = $(this).attr("value");
+              if (
+                multiple ? field_value.includes(value) : value === field_value
               )
-            );
+                $(this).attr("selected", true);
+            });
+            if (multiple)
+              control.find("option[value^=_],option[disabled]").hide();
+          }
           break;
         case "citext":
         case "string":
         case "text":
         case "belongs_to_association":
-          control = $(
-            '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
-          )
-            .prop("value", field_operator)
-            .prop("name", operator_name)
-            .append('<option value="_discard">...</option>')
-            .append(
-              $(
-                '<option data-additional-fieldset="additional-fieldset" value="like"></option>'
-              )
-                .prop("selected", field_operator == "like")
-                .text(I18n.t("contains"))
-            )
-            .append(
-              $(
-                '<option data-additional-fieldset="additional-fieldset" value="not_like"></option>'
-              )
-                .prop("selected", field_operator == "not_like")
-                .text(I18n.t("does_not_contain"))
-            )
-            .append(
-              $(
-                '<option data-additional-fieldset="additional-fieldset" value="is"></option>'
-              )
-                .prop("selected", field_operator == "is")
-                .text(I18n.t("is_exactly"))
-            )
-            .append(
-              $(
-                '<option data-additional-fieldset="additional-fieldset" value="starts_with"></option>'
-              )
-                .prop("selected", field_operator == "starts_with")
-                .text(I18n.t("starts_with"))
-            )
-            .append(
-              $(
-                '<option data-additional-fieldset="additional-fieldset" value="ends_with"></option>'
-              )
-                .prop("selected", field_operator == "ends_with")
-                .text(I18n.t("ends_with"))
-            );
-          if (!required) {
-            control.append([
-              '<option disabled="disabled">---------</option>',
-              $('<option value="_present"></option>')
-                .prop("selected", field_operator == "_present")
-                .text(I18n.t("is_present")),
-              $('<option value="_blank"></option>')
-                .prop("selected", field_operator == "_blank")
-                .text(I18n.t("is_blank")),
-            ]);
-          }
+        case "has_one_association":
           additional_control = $(
             '<input class="additional-fieldset form-control form-control-sm" type="text" />'
           )
@@ -236,35 +125,6 @@ import flatpickr from "flatpickr";
         case "integer":
         case "decimal":
         case "float":
-          control = $(
-            '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
-          )
-            .prop("name", operator_name)
-            .append(
-              $(
-                '<option data-additional-fieldset="default" value="default"></option>'
-              )
-                .prop("selected", field_operator == "default")
-                .text(I18n.t("number"))
-            )
-            .append(
-              $(
-                '<option data-additional-fieldset="between" value="between"></option>'
-              )
-                .prop("selected", field_operator == "between")
-                .text(I18n.t("between_and_"))
-            );
-          if (!required) {
-            control.append([
-              '<option disabled="disabled">---------</option>',
-              $('<option value="_not_null"></option>')
-                .prop("selected", field_operator == "_not_null")
-                .text(I18n.t("is_present")),
-              $('<option value="_null"></option>')
-                .prop("selected", field_operator == "_null")
-                .text(I18n.t("is_blank")),
-            ]);
-          }
           additional_control = $(
             '<input class="additional-fieldset default form-control form-control-sm" type="text" />'
           )
@@ -312,7 +172,7 @@ import flatpickr from "flatpickr";
       }
 
       var filterContainerId = field_name + "-" + index + "-filter-container";
-      $("p#" + filterContainerId).remove();
+      $("#" + filterContainerId).remove();
 
       var $content = $("<div>")
         .attr("id", filterContainerId)
@@ -347,21 +207,114 @@ import flatpickr from "flatpickr";
 
       $("hr.filters_box:hidden").show("slow");
     },
+    build_operator: function (operator, options) {
+      if (operator instanceof Object) {
+        var element = $("<option></option>");
+        element.text(operator.label);
+        delete operator.label;
+        for (const key in operator) {
+          element.attr(key, operator[key]);
+        }
+        return element;
+      }
+      switch (operator) {
+        case "_discard":
+          return $('<option value="_discard">...</option>');
+        case "_separator":
+          return $('<option disabled="disabled">---------</option>');
+        case "_present":
+          return $('<option value="_present"></option>').text(
+            I18n.t("is_present")
+          );
+        case "_blank":
+          return $('<option value="_blank"></option>').text(I18n.t("is_blank"));
+        case "_not_null":
+          return $('<option value="_not_null"></option>').text(
+            I18n.t("is_present")
+          );
+        case "_null":
+          return $('<option value="_null"></option>').text(I18n.t("is_blank"));
+
+        case "true":
+          return $('<option value="true"></option>').text(I18n.t("true"));
+        case "false":
+          return $('<option value="false"></option>').text(I18n.t("false"));
+
+        case "today":
+          return $('<option value="today"></option>').text(I18n.t("today"));
+        case "yesterday":
+          return $('<option value="yesterday"></option>').text(
+            I18n.t("yesterday")
+          );
+        case "this_week":
+          return $('<option value="this_week"></option>').text(
+            I18n.t("this_week")
+          );
+        case "last_week":
+          return $('<option value="last_week"></option>').text(
+            I18n.t("last_week")
+          );
+
+        case "like":
+          return $(
+            '<option data-additional-fieldset="additional-fieldset" value="like"></option>'
+          ).text(I18n.t("contains"));
+        case "not_like":
+          return $(
+            '<option data-additional-fieldset="additional-fieldset" value="not_like"></option>'
+          ).text(I18n.t("does_not_contain"));
+        case "is":
+          return $(
+            '<option data-additional-fieldset="additional-fieldset" value="is"></option>'
+          ).text(I18n.t("is_exactly"));
+        case "starts_with":
+          return $(
+            '<option data-additional-fieldset="additional-fieldset" value="starts_with"></option>'
+          ).text(I18n.t("starts_with"));
+        case "ends_with":
+          return $(
+            '<option data-additional-fieldset="additional-fieldset" value="ends_with"></option>'
+          ).text(I18n.t("ends_with"));
+
+        case "default":
+          var label;
+          switch (options.type) {
+            case "date":
+            case "datetime":
+            case "timestamp":
+              label = I18n.t("date");
+              break;
+            case "time":
+              label = I18n.t("time");
+              break;
+            case "integer":
+            case "decimal":
+            case "float":
+              label = I18n.t("number");
+              break;
+          }
+          return $(
+            '<option data-additional-fieldset="default" value="default"></option>'
+          ).text(label);
+        case "between":
+          return $(
+            '<option data-additional-fieldset="between" value="between"></option>'
+          ).text(I18n.t("between_and_"));
+
+        default:
+          return null;
+      }
+    },
   };
 
   $(document).on("click", "#filters a", function (e) {
     e.preventDefault();
-    $.filters.append({
-      label: $(this).data("field-label"),
-      name: $(this).data("field-name"),
-      type: $(this).data("field-type"),
-      value: $(this).data("field-value"),
-      operator: $(this).data("field-operator"),
-      select_options: $(this).data("field-options"),
-      required: $(this).data("field-required"),
-      index: $.now().toString().slice(6, 11),
-      datetimepicker_options: $(this).data("field-datetimepicker-options"),
-    });
+    $.filters.append(
+      $.extend(
+        { index: $.now().toString().slice(6, 11) },
+        $(this).data("options")
+      )
+    );
   });
 
   $(document).on("click", "#filters_box .delete", function (e) {
@@ -374,12 +327,15 @@ import flatpickr from "flatpickr";
 
   $(document).on("click", "#filters_box .switch-select", function (e) {
     e.preventDefault();
-    var selected_select = $(this).siblings("select:visible");
-    var not_selected_select = $(this).siblings("select:hidden");
-    not_selected_select
-      .attr("name", not_selected_select.data("name"))
-      .show("slow");
-    selected_select.attr("name", null).hide("slow");
+    var select = $(this).siblings("select");
+    select.attr("multiple", !select.attr("multiple"));
+    select.attr(
+      "name",
+      select.attr("multiple")
+        ? select.attr("name") + "[]"
+        : select.attr("name").replace(/\[\]$/, "")
+    );
+    select.find("option[value^=_],option[disabled]").toggle();
     $(this).find("i").toggleClass("fa-plus fa-minus");
   });
 

data/src/rails_admin/filtering-multiselect.js

@@ -1,7 +1,6 @@
 import jQuery from "jquery";
-import "jquery-ui/ui/widget";
+import "jquery-ui/ui/widget.js";
 import I18n from "./i18n";
-
 (function ($) {
   $.widget("ra.filteringMultiselect", {
     _cache: {},
@@ -112,15 +111,11 @@ import I18n from "./i18n";
       }
       if (this.options.sortable) {
         this.up = $(
-          '<a href="#" class="fas fa-chevron-circle-up ra-multiselect-item-up">' +
-            this.options.regional.up +
-            "</a>"
-        );
+          '<a href="#" class="fas fa-chevron-circle-up ra-multiselect-item-up"></a>'
+        ).attr("title", this.options.regional.up);
         this.down = $(
-          '<a href="#" class="fas fa-chevron-circle-down ra-multiselect-item-down">' +
-            this.options.regional.down +
-            "</a>"
-        );
+          '<a href="#" class="fas fa-chevron-circle-down ra-multiselect-item-down"></a>'
+        ).attr("title", this.options.regional.down);
         columns.center.append(this.up).append(this.down);
       }
 

data/src/rails_admin/filtering-select.js

@@ -1,6 +1,6 @@
 import jQuery from "jquery";
-import "jquery-ui/ui/widget";
-import "jquery-ui/ui/widgets/autocomplete";
+import "jquery-ui/ui/widget.js";
+import "jquery-ui/ui/widgets/autocomplete.js";
 import I18n from "./i18n";
 
 (function ($) {
@@ -216,11 +216,20 @@ import I18n from "./i18n";
         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);
+          var option = self.element.find(
+            `option[value="${CSS.escape(ui.item.id)}"]`
+          );
+          self.element.find("option[selected]").attr("selected", false);
+          if (option.length > 0) {
+            option.attr("selected", "selected");
+          } else {
+            option = $("<option>")
+              .attr("value", ui.item.id)
+              .attr("selected", true)
+              .text(ui.item.value);
+            self.element.append(option);
+          }
+          self.element.trigger("change", ui.item.id);
           self._trigger("selected", event, {
             item: option,
           });

data/src/rails_admin/i18n.js

@@ -1,4 +1,4 @@
-export default {
+var I18n = {
   locale: null,
   translations: null,
   init(locale, translations) {
@@ -14,3 +14,5 @@ export default {
     return this.translations[key] || humanize;
   },
 };
+
+export { I18n as default };

data/src/rails_admin/jquery.js

@@ -0,0 +1,3 @@
+import jQuery from "jquery";
+
+window.$ = window.jQuery = jQuery;

data/src/rails_admin/nested-form-hooks.js

@@ -1,5 +1,5 @@
 import jQuery from "jquery";
-import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
+import * as bootstrap from "bootstrap";
 
 (function ($) {
   $(document).ready(function () {
@@ -44,9 +44,9 @@ import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
       bootstrap.Tab.getOrCreateInstance(element).show();
     });
     if (!one_to_one) {
-      nav.filter(":hidden").show("slow");
+      new bootstrap.Collapse(nav[0], { toggle: false }).show();
     }
-    content.filter(":hidden").show("slow");
+    new bootstrap.Collapse(content[0], { toggle: false }).show();
     toggler
       .addClass("active")
       .removeClass("disabled")
@@ -87,7 +87,9 @@ import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
       });
     current_li.remove();
     if (nav.children().length === 0) {
-      nav.filter(":visible").hide("slow");
+      new bootstrap.Collapse(controls.siblings(".tab-content")[0], {
+        toggle: false,
+      }).hide();
       toggler
         .removeClass("active")
         .addClass("disabled")

data/src/rails_admin/remote-form.js

@@ -1,7 +1,7 @@
 import Rails from "@rails/ujs";
 import jQuery from "jquery";
-import "jquery-ui/ui/widget";
-import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
+import "jquery-ui/ui/widget.js";
+import * as bootstrap from "bootstrap";
 
 (function ($) {
   $.widget("ra.remoteForm", {
@@ -105,9 +105,8 @@ import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
       document.dispatchEvent(event);
 
       form.bind("ajax:complete", function (event) {
-        var data = event.detail[0],
-          status = event.detail[1];
-        if (status == "OK") {
+        var data = event.detail[0];
+        if (data.status == 200) {
           var json = $.parseJSON(data.responseText);
           var option =
             '<option value="' +
@@ -184,6 +183,7 @@ import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
         new bootstrap.Modal(widget.dialog[0], {
           keyboard: true,
           backdrop: true,
+          focus: false,
           show: true,
         }).show();
       }

data/src/rails_admin/styles/base/theming.scss

@@ -19,7 +19,7 @@ body.rails_admin {
 
       img {
         position: absolute;
-        top: ((40px - $avatar-size) / 2);
+        top: calc((40px - $avatar-size) / 2);
 
         & + span {
           margin-left: ($avatar-size + 5px);
@@ -29,18 +29,32 @@ body.rails_admin {
   }
 
   /* Sidebar navigation */
-  .btn-toggle-nav {
+  .sidebar.btn-toggle-nav {
     padding: 0;
 
-    .dropdown-header {
-      padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) 3px;
+    .btn-toggle {
+      margin-top: calc(#{$grid-gutter-width} / 2);
+      padding: 3px calc(#{$grid-gutter-width} / 2);
       font-weight: bold;
+      color: $gray-600;
+    }
+
+    .btn-toggle[aria-expanded="true"] {
       color: $gray-700;
-      text-transform: uppercase;
     }
 
-    > li > a {
-      padding: ($navbar-padding-y / 2) ($grid-gutter-width / 2);
+    .btn-toggle-nav > li > a {
+      padding: calc(#{$navbar-padding-y} / 2) calc(#{$grid-gutter-width} / 2);
+
+      &.active {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
+
+      &:hover {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
 
       &.nav-level-1 {
         padding-left: $grid-gutter-width;
@@ -303,11 +317,14 @@ body.rails_admin {
       }
     }
   }
+  .pagination .page-item {
+    white-space: nowrap;
+  }
 }
 
 @media screen and (min-width: map-get($grid-breakpoints, "sm")) {
   body.rails_admin {
-    .btn-toggle-nav {
+    .sidebar.btn-toggle-nav {
       position: fixed;
       top: $nav-link-height + $navbar-padding-y * 2;
       bottom: 0;