rails_admin 3.0.0.beta2 → 3.0.0.rc3

data/src/rails_admin/filter-box.js

@@ -1,6 +1,6 @@
 import jQuery from "jquery";
-import moment from "moment";
 import I18n from "./i18n";
+import flatpickr from "flatpickr";
 
 (function ($) {
   var filters;
@@ -23,7 +23,7 @@ import I18n from "./i18n";
 
       switch (field_type) {
         case "boolean":
-          control = $('<select class="input-sm form-control"></select>')
+          control = $('<select class="form-control form-control-sm"></select>')
             .prop("name", value_name)
             .append('<option value="_discard">...</option>')
             .append(
@@ -55,7 +55,7 @@ import I18n from "./i18n";
           control =
             control ||
             $(
-              '<select class="switch-additional-fieldsets input-sm form-control"></select>'
+              '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
             )
               .prop("name", operator_name)
               .append(
@@ -110,18 +110,17 @@ import I18n from "./i18n";
                 .addClass(index == 0 ? "default" : "between")
                 .css("display", visible ? "inline-block" : "none")
                 .html(
-                  $('<input type="hidden" />')
+                  $(
+                    '<input class="input-sm form-control form-control-sm" type="text" />'
+                  )
+                    .addClass(field_type == "date" ? "date" : "datetime")
                     .prop("name", value_name + "[]")
                     .prop("value", field_value[index] || "")
-                    .add(
-                      $('<input class="input-sm form-control" type="text" />')
-                        .addClass(field_type == "date" ? "date" : "datetime")
-                        .prop(
-                          "size",
-                          field_type == "date" || field_type == "time" ? 20 : 25
-                        )
-                        .prop("placeholder", placeholder)
+                    .prop(
+                      "size",
+                      field_type == "date" || field_type == "time" ? 20 : 25
                     )
+                    .prop("placeholder", placeholder)
                 );
             }
           );
@@ -129,7 +128,7 @@ import I18n from "./i18n";
         case "enum":
           var multiple_values = field_value instanceof Array ? true : false;
           control = $(
-            '<select class="select-single input-sm form-control"></select>'
+            '<select class="select-single form-control form-control-sm"></select>'
           )
             .css("display", multiple_values ? "none" : "inline-block")
             .prop("name", multiple_values ? undefined : value_name)
@@ -151,7 +150,7 @@ import I18n from "./i18n";
             .append(select_options)
             .add(
               $(
-                '<select multiple="multiple" class="select-multiple input-sm form-control"></select>'
+                '<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)
@@ -171,7 +170,7 @@ import I18n from "./i18n";
         case "text":
         case "belongs_to_association":
           control = $(
-            '<select class="switch-additional-fieldsets input-sm form-control"></select>'
+            '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
           )
             .prop("value", field_operator)
             .prop("name", operator_name)
@@ -223,7 +222,7 @@ import I18n from "./i18n";
             ]);
           }
           additional_control = $(
-            '<input class="additional-fieldset input-sm form-control" type="text" />'
+            '<input class="additional-fieldset form-control form-control-sm" type="text" />'
           )
             .css(
               "display",
@@ -238,7 +237,7 @@ import I18n from "./i18n";
         case "decimal":
         case "float":
           control = $(
-            '<select class="switch-additional-fieldsets input-sm form-control"></select>'
+            '<select class="switch-additional-fieldsets form-control form-control-sm"></select>'
           )
             .prop("name", operator_name)
             .append(
@@ -267,7 +266,7 @@ import I18n from "./i18n";
             ]);
           }
           additional_control = $(
-            '<input class="additional-fieldset default input-sm form-control" type="text" />'
+            '<input class="additional-fieldset default form-control form-control-sm" type="text" />'
           )
             .css(
               "display",
@@ -280,7 +279,7 @@ import I18n from "./i18n";
             .prop("value", field_value[0] || "")
             .add(
               $(
-                '<input placeholder="-∞" class="additional-fieldset between input-sm form-control" />'
+                '<input placeholder="-∞" class="additional-fieldset between form-control form-control-sm" />'
               )
                 .css(
                   "display",
@@ -292,7 +291,7 @@ import I18n from "./i18n";
             )
             .add(
               $(
-                '<input placeholder="∞" class="additional-fieldset between input-sm form-control" />'
+                '<input placeholder="∞" class="additional-fieldset between form-control form-control-sm" />'
               )
                 .css(
                   "display",
@@ -304,7 +303,9 @@ import I18n from "./i18n";
             );
           break;
         default:
-          control = $('<input type="text" class="input-sm form-control" />')
+          control = $(
+            '<input type="text" class="form-control form-control-sm" />'
+          )
             .prop("name", value_name)
             .prop("value", field_value);
           break;
@@ -313,9 +314,9 @@ import I18n from "./i18n";
       var filterContainerId = field_name + "-" + index + "-filter-container";
       $("p#" + filterContainerId).remove();
 
-      var $content = $("<p>")
+      var $content = $("<div>")
         .attr("id", filterContainerId)
-        .addClass("filter form-search")
+        .addClass("filter d-inline-block my-1")
         .append(
           $(
             '<button type="button" class="btn btn-info btn-sm delete"></button>'
@@ -331,19 +332,17 @@ import I18n from "./i18n";
       $("#filters_box").append($content);
 
       $content.find(".date, .datetime").each(function () {
-        $(this).datetimepicker({
-          date: moment($(this).siblings("[type=hidden]").val()),
-          locale: I18n.locale,
-          showTodayButton: true,
-          format: options["datetimepicker_format"],
-        });
-        $(this).on("dp.change", function (e) {
-          if (e.date) {
-            $(this)
-              .siblings("[type=hidden]")
-              .val(e.date.format("YYYY-MM-DD[T]HH:mm:ss"));
-          }
-        });
+        flatpickr(
+          this,
+          $.extend(
+            {
+              dateFormat: "Y-m-dTH:i:S",
+              altInput: true,
+              locale: I18n.locale,
+            },
+            options["datetimepicker_options"]
+          )
+        );
       });
 
       $("hr.filters_box:hidden").show("slow");
@@ -361,7 +360,7 @@ import I18n from "./i18n";
       select_options: $(this).data("field-options"),
       required: $(this).data("field-required"),
       index: $.now().toString().slice(6, 11),
-      datetimepicker_format: $(this).data("field-datetimepicker-format"),
+      datetimepicker_options: $(this).data("field-datetimepicker-options"),
     });
   });
 

data/src/rails_admin/filtering-select.js

@@ -157,9 +157,7 @@ import I18n from "./i18n";
     _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 class="btn btn-info dropdown-toggle" title="Show All Items" role="button">' +
           "</label>" +
           "</span>"
       );
@@ -206,9 +204,8 @@ import I18n from "./i18n";
 
     _inputGroup: function (inputFor) {
       return $("<div>")
-        .addClass("input-group filtering-select col-sm-2")
-        .attr("data-input-for", inputFor)
-        .css("float", this.element.css("float"));
+        .addClass("input-group filtering-select")
+        .attr("data-input-for", inputFor);
     },
 
     _initAutocomplete: function () {

data/src/rails_admin/i18n.js

@@ -1,12 +1,9 @@
-import moment from "moment";
-
 export default {
   locale: null,
   translations: null,
   init(locale, translations) {
     this.locale = locale;
     this.translations = translations;
-    moment.locale(this.locale);
     if (typeof this.translations === "string") {
       this.translations = JSON.parse(this.translations);
     }

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

@@ -1,4 +1,5 @@
 import jQuery from "jquery";
+import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
 
 (function ($) {
   $(document).ready(function () {
@@ -19,12 +20,15 @@ import jQuery from "jquery";
     field = content.field
       .addClass("tab-pane")
       .attr("id", "unique-id-" + new Date().getTime());
-    new_tab = $("<li></li>").append(
-      $("<a></a>")
-        .attr("data-toggle", "tab")
-        .attr("href", "#" + field.attr("id"))
-        .text(field.children(".object-infos").data("object-label"))
-    );
+    new_tab = $("<li></li>")
+      .append(
+        $("<a></a>")
+          .addClass("nav-link")
+          .attr("data-bs-toggle", "tab")
+          .attr("href", "#" + field.attr("id"))
+          .text(field.children(".object-infos").data("object-label"))
+      )
+      .addClass("nav-item");
     parent_group = field.closest(".control-group");
     controls = parent_group.children(".controls");
     one_to_one = controls.data("nestedone") !== void 0;
@@ -36,7 +40,9 @@ import jQuery from "jquery";
     const event = new CustomEvent("rails_admin.dom_ready", { detail: field });
     document.dispatchEvent(event);
 
-    new_tab.children("a").tab("show");
+    new_tab.children("a").each(function (index, element) {
+      bootstrap.Tab.getOrCreateInstance(element).show();
+    });
     if (!one_to_one) {
       nav.filter(":hidden").show("slow");
     }
@@ -76,7 +82,9 @@ import jQuery from "jquery";
     toggler = controls.find(".toggler");
     (current_li.next().length ? current_li.next() : current_li.prev())
       .children("a:first")
-      .tab("show");
+      .each(function (index, element) {
+        bootstrap.Tab.getOrCreateInstance(element).show();
+      });
     current_li.remove();
     if (nav.children().length === 0) {
       nav.filter(":visible").hide("slow");

data/src/rails_admin/remote-form.js

@@ -1,6 +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";
 
 (function ($) {
   $.widget("ra.remoteForm", {
@@ -84,7 +85,9 @@ import "jquery-ui/ui/widget";
         .find(".cancel-action")
         .unbind()
         .click(function () {
-          dialog.modal("hide");
+          dialog.each(function (index, element) {
+            bootstrap.Modal.getInstance(element).hide();
+          });
           return false;
         })
         .html(cancelButtonText);
@@ -127,7 +130,6 @@ import "jquery-ui/ui/widget";
             }
           } else {
             // multi-select input
-            var input = widget.element.find(".ra-filtering-select-input");
             var multiselect = widget.element.find(".ra-multiselect");
             if (multiselect.find("option[value=" + json.id + "]").length) {
               // replace
@@ -144,7 +146,9 @@ import "jquery-ui/ui/widget";
             }
           }
           widget._trigger("success");
-          dialog.modal("hide");
+          dialog.each(function (index, element) {
+            bootstrap.Modal.getInstance(element).hide();
+          });
         } else {
           dialog.find(".modal-body").html(data.responseText);
           widget._bindFormEvents();
@@ -157,11 +161,11 @@ import "jquery-ui/ui/widget";
       if (!widget.dialog) {
         widget.dialog = $(
           '<div id="modal" class="modal fade">\
-            <div class="modal-dialog">\
+            <div class="modal-dialog modal-lg">\
             <div class="modal-content">\
             <div class="modal-header">\
-              <a href="#" class="close" data-dismiss="modal">&times;</a>\
               <h3 class="modal-header-title">...</h3>\
+              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>\
             </div>\
             <div class="modal-body">\
               ...\
@@ -173,16 +177,15 @@ import "jquery-ui/ui/widget";
             </div>\
             </div>\
           </div>'
-        )
-          .modal({
-            keyboard: true,
-            backdrop: true,
-            show: true,
-          })
-          .on("hidden.bs.modal", function () {
-            widget.dialog.remove(); // We don't want to reuse closed modals
-            widget.dialog = null;
-          });
+        ).on("hidden.bs.modal", function () {
+          widget.dialog.remove(); // We don't want to reuse closed modals
+          widget.dialog = null;
+        });
+        new bootstrap.Modal(widget.dialog[0], {
+          keyboard: true,
+          backdrop: true,
+          show: true,
+        }).show();
       }
       return this.dialog;
     },