rails_admin 3.0.0.beta2 → 3.0.0.rc

data/lib/rails_admin/support/datetime.rb

@@ -1,63 +1,60 @@
 module RailsAdmin
   module Support
     class Datetime
-      # Ruby format options as a key and momentjs format options as a value
-      MOMENTJS_TRANSLATIONS = {
-        '%A' => 'dddd',       # The  full  weekday  name ("Sunday")
-        '%a' => 'ddd',        # The abbreviated weekday name ("Sun")
-        '%B' => 'MMMM',       # The  full  month  name ("January")
-        '%b' => 'MMM',        # The abbreviated month name ("Jan")
-        '%D' => 'MM/DD/YY',   # American date format mm/dd/yy
-        '%d' => 'DD',         # Day of the month (01..31)
-        '%-d' => 'D',         # Day of the month (1..31)
-        '%F' => 'YYYY-MM-DD', # ISO 8601 date format
-        '%G' => 'GGGG',       # ISO Week Year (2020)
-        '%g' => 'GG',         # ISO Week Year (20)
-        '%H' => 'HH',         # Hour of the day, 24-hour clock (00..23)
-        '%-H' => 'H',         # Hour of the day, 24-hour clock (0..23)
-        '%h' => 'MMM',        # Same as %b
-        '%I' => 'hh',         # Hour of the day, 12-hour clock (01..12)
-        '%-I' => 'h',         # Hour of the day, 12-hour clock (1..12)
-        '%j' => 'DDDD',       # Day of Year (001..366)
-        '%L' => 'SSS',        # Millisecond of the second (000..999)
-        '%M' => 'mm',         # Minute of the hour (00..59)
-        '%-M' => 'm',         # Minute of the hour (0..59)
-        '%m' => 'MM',         # Month of the year (01..12)
-        '%-m' => 'M',         # Month of the year (1..12)
-        '%N' => 'SSSSSSSSS',  # Fractional seconds 9 digits
-        '%9N' => 'SSSSSSSSS', # Fractional seconds 9 digits
-        '%6N' => 'SSSSSS',    # Fractional seconds 6 digits
-        '%3N' => 'SSS',       # Fractional seconds 3 digits
-        '%P' => 'a',          # Meridian indicator ('am' or 'pm')
-        '%p' => 'A',          # Meridian indicator ('AM' or 'PM')
-        '%Q' => 'x',          # Number of milliseconds since 1970-01-01 00:00:00 UTC.
-        '%R' => 'HH:mm',      # 24-hour time (%H:%M)
-        '%r' => 'hh:mm:ss A', # 12-hour time (%I:%M:%S %p)
-        '%S' => 'ss',         # Second of the minute (00..60)
-        '%-S' => 's',         # Second of the minute (0..60)
-        '%s' => 'X',          # Number of seconds since 1970-01-01 00:00:00 UTC.
-        '%T' => 'HH:mm:ss',   # 24-hour time (%H:%M:%S)
-        '%U' => 'ww',         # Week number of the year.  The week starts with Sunday.  (00..53)
-        '%u' => 'E',          # Day of the week (Monday is 1, 1..7)
-        '%W' => 'WW',         # Week number of the year.  The week starts with Monday.  (00..53)
-        '%w' => 'e',          # Day of the week (Sunday is 0, 0..6)
-        '%X' => 'HH:mm:ss',   # Same as %T
-        '%x' => 'MM/DD/YY',   # Same as %D
-        '%Y' => 'YYYY',       # Year with century
-        '%y' => 'YY',         # Year without a century (00..99)
-        '%Z' => 'Z',          # Equivalent to %:z (e.g. +09:00)
-        '%z' => 'ZZ',         # Time zone as hour and minute offset from UTC (e.g. +0900)
-        '%:z' => 'Z',         # Time zone as hour and minute offset from UTC with a colon (e.g. +09:00),
+      # Ruby format options as a key and flatpickr format options as a value
+      FLATPICKR_TRANSLATIONS = {
+        '%A' => 'l',       # The  full  weekday  name ("Sunday")
+        '%a' => 'D',       # The abbreviated weekday name ("Sun")
+        '%B' => 'F',       # The  full  month  name ("January")
+        '%b' => 'M',       # The abbreviated month name ("Jan")
+        '%D' => 'm/d/y',   # American date format mm/dd/yy
+        '%d' => 'd',       # Day of the month (01..31)
+        '%-d' => 'j',      # Day of the month (1..31)
+        '%e' => 'j',       # Day of the month (1..31)
+        '%F' => 'Y-m-d',   # ISO 8601 date format
+        '%H' => 'H',       # Hour of the day, 24-hour clock (00..23)
+        '%-H' => 'H',      # Hour of the day, 24-hour clock (0..23)
+        '%h' => 'M',       # Same as %b
+        '%I' => 'G',       # Hour of the day, 12-hour clock (01..12)
+        '%-I' => 'h',      # Hour of the day, 12-hour clock (1..12)
+        '%k' => 'H',       # Hour of the day, 24-hour clock (0..23)
+        '%l' => 'h',       # Hour of the day, 12-hour clock (1..12)
+        '%M' => 'i',       # Minute of the hour (00..59)
+        '%-M' => 'i',      # Minute of the hour (00..59)
+        '%m' => 'm',       # Month of the year (01..12)
+        '%-m' => 'n',      # Month of the year (1..12)
+        '%P' => 'K',       # Meridian indicator ('am' or 'pm')
+        '%p' => 'K',       # Meridian indicator ('AM' or 'PM')
+        '%R' => 'H:i',     # 24-hour time (%H:%M)
+        '%r' => 'G:i:S K', # 12-hour time (%I:%M:%S %p)
+        '%S' => 'S',       # Second of the minute (00..60)
+        '%-S' => 's',      # Second of the minute (0..60)
+        '%s' => 'U',       # Number of seconds since 1970-01-01 00:00:00 UTC.
+        '%T' => 'H:i:S',   # 24-hour time (%H:%M:%S)
+        '%U' => 'W',       # Week number of the year.  The week starts with Sunday.  (00..53)
+        '%w' => 'w',       # Day of the week (Sunday is 0, 0..6)
+        '%X' => 'H:i:S',   # Same as %T
+        '%x' => 'm/d/y',   # Same as %D
+        '%Y' => 'Y',       # Year with century
+        '%y' => 'y',       # Year without a century (00..99)
         '%%' => '%',
       }.freeze
 
       class << self
-        def to_momentjs(strftime_format)
-          strftime_format.gsub(/(?<!%)(?<![-0-9:])\w+/, '[\0]').gsub(/%([-0-9:]?\w)/) do |match|
-            MOMENTJS_TRANSLATIONS[match] or raise <<-MSG.gsub(/^\s{14}/, '')
-              Unsupported strftime directive '#{match}' was found. Please consider explicitly setting momentjs_format instance option for the field.
-                field(:name_of_field) { momentjs_format '...' }
-            MSG
+        def to_flatpickr_format(strftime_format)
+          strftime_format.gsub(/(?<!%)(?<![-0-9:])\w/, '\\\\\0').gsub(/%([-0-9:]?\w)/) do |match|
+            # Timezone can't be handled by frontend, the server's one is always used
+            case match
+            when '%Z', '%:z' # Time zone as hour and minute offset from UTC with a colon (e.g. +09:00)
+              Time.zone.formatted_offset
+            when '%z' # Time zone as hour and minute offset from UTC (e.g. +0900)
+              Time.zone.formatted_offset(false)
+            else
+              FLATPICKR_TRANSLATIONS[match] or raise <<-MSG.gsub(/^\s{16}/, '')
+                Unsupported strftime directive '#{match}' was found. Please consider explicitly setting flatpickr_format instance option for the field.
+                  field(:name_of_field) { flatpickr_format '...' }
+              MSG
+            end
           end
         end
       end

data/lib/rails_admin/support/esmodule_preprocessor.rb

@@ -13,7 +13,6 @@ module RailsAdmin
     def call(input)
       data = input[:data]
 
-      # only process files under rails_admin/src
       if input[:filename].start_with? RailsAdmin::Engine.root.join('src').to_s
         data.gsub!(/^(import .+)$/) { "// #{Regexp.last_match(1)}" }
         data.gsub!(/^(export +default +{)$/) do
@@ -24,6 +23,8 @@ module RailsAdmin
             raise "Unable to preprocess file: #{input[:filename]}"
           end
         end
+      elsif input[:filename] =~ %r{turbo-rails.+/turbo\.js$}
+        data.gsub!(/^(export .+)$/) { "// #{Regexp.last_match(1)}" }
       end
 
       {data: data}

data/lib/rails_admin/version.rb

@@ -3,7 +3,7 @@ module RailsAdmin
     MAJOR = 3
     MINOR = 0
     PATCH = 0
-    PRE = 'beta2'.freeze
+    PRE = 'rc'.freeze
 
     class << self
       # @return [String]

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rails_admin",
-  "version": "3.0.0-beta",
+  "version": "3.0.0-rc",
   "description": "RailsAdmin is a Rails engine that provides an easy-to-use interface for managing your data.",
   "homepage": "https://github.com/railsadminteam/rails_admin",
   "license": "MIT",
@@ -14,13 +14,15 @@
     "format": "prettier -w ."
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.7",
     "@fortawesome/fontawesome-free": "^5.15.4",
+    "@hotwired/turbo-rails": "^7.1.0",
+    "@popperjs/core": "^2.11.0",
     "@rails/ujs": "^6.1.4-1",
-    "bootstrap-sass": "3.4.1",
-    "eonasdan-bootstrap-datetimepicker": "^4.17.49",
+    "bootstrap": "^5.1.3",
+    "flatpickr": "^4.6.9",
     "jquery": "^3.6.0",
-    "jquery-ui": "^1.12.1",
-    "moment": "^2.29.1"
+    "jquery-ui": "^1.12.1"
   },
   "devDependencies": {
     "prettier": "^2.4.1"

data/src/rails_admin/base.js

@@ -1,11 +1,9 @@
 import Rails from "@rails/ujs";
+import "@hotwired/turbo-rails";
 import jQuery from "jquery";
-import moment from "moment";
-import "./vendor/jquery.pjax";
 import "./vendor/jquery_nested_form";
-import "bootstrap-sass";
-import "moment/min/locales.js";
-import "eonasdan-bootstrap-datetimepicker";
+import "bootstrap";
+import "flatpickr/dist/flatpickr";
 
 import "./filter-box";
 import "./filtering-multiselect";
@@ -18,4 +16,3 @@ import "./widgets";
 
 Rails.start();
 window.$ = window.jQuery = jQuery;
-window.moment = moment;

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;
     },