activeadmin 1.0.0 → 2.13.1

data/app/assets/stylesheets/active_admin/mixins/_variables.scss

@@ -2,6 +2,14 @@
 // They can be overridden by prepending your own
 // to 'app/assets/stylesheets/active_admin.scss'.
 
+// Images
+$menu-arrow-light-icon-url: 'data:image/png;base64,R0lGODlhBwAEAKIAAL6+vry8vIiIiJWVlf///3t7ewAAAAAAACH5BAEAAAUALAAAAAAHAAQAAAMLWLol80MoF5mQKgEAOw==' !default;
+$menu-arrow-dark-icon-url: 'data:image/png;base64,R0lGODlhBwAEAKIAAG1tbWxsbElJSVBQUP///0JCQgAAAAAAACH5BAEAAAUALAAAAAAHAAQAAAMLWLol80MoF5mQKgEAOw==' !default;
+$menu-arrow-right-light-icon-url: 'data:image/gif;base64,R0lGODlhBAAHAKECAKqqqszMzPkVFfkVFSH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAIALAAAAAAEAAcAAAIJlA0XKbH9nmAFADs=' !default;
+$menu-arrow-right-dark-icon-url: 'data:image/gif;base64,R0lGODlhBAAHAMIEAG1tbWxsbElJSVBQUPkVFfkVFfkVFfkVFSH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAAEAAcAAAMKGKqy02G8OGeACQA7' !default;
+
+$orderable-icon-url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAABGCAYAAAAAVo4aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH5JREFUeNpi3LhlOwMU1AExGxDXwARYoHQLEFdD2cxAXAliMKFJgEAFEHfBJEHGMKLhMpgkTsAEdch/NNwCk2xCdiEQtML4LEgCf6EubUX3Cgh0oNvJ+P//f7wOGpUclRwYSZb41CyidNbB8giNM+9oXhmVHHm5bJjUSAABBgDKKiwMMUxPwgAAAABJRU5ErkJggg==' !default;
+
 // Colors
 $body-background-color: #FFF !default;
 $primary-color: #5E6469 !default;
@@ -32,3 +40,12 @@ $text-input-horizontal-padding: 10px !default;
 $text-input-total-padding: $text-input-horizontal-padding * 2 + $border-width * 2;
 
 $blank-slate-border: 1px dashed #DADADA !default;
+
+// Sidebar Forms
+$sidebar-inner-content-width: $sidebar-width - ($section-padding * 2);
+
+// Filter Forms
+$filter-field-seperator-width: 12px !default;
+$side-by-side-filter-input-width: ($sidebar-inner-content-width * 0.5) - ($text-input-horizontal-padding * 2) - $filter-field-seperator-width;
+$side-by-side-filter-select-width: ($sidebar-inner-content-width * 0.5) - $filter-field-seperator-width;
+$date-range-filter-input-width: ($sidebar-inner-content-width * 0.5) - ($filter-field-seperator-width * 0.5);

data/app/assets/stylesheets/active_admin/structure/_main_structure.scss

@@ -15,7 +15,7 @@
     width: 100%;
 
     #main_content{
-      margin-right: 300px;
+      margin-right: $sidebar-width + ($section-padding * 2);
     }
   }
 

data/app/assets/stylesheets/active_admin/structure/_title_bar.scss

@@ -1,7 +1,6 @@
 #title_bar {
   @include section-header;
   @include clearfix;
-  box-sizing: border-box;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
   display: table;
   border-bottom-color: #EEE;

data/app/javascript/active_admin/base.js

@@ -0,0 +1,28 @@
+import "jquery"
+import "jquery-ui/ui/widgets/datepicker"
+import "jquery-ui/ui/widgets/dialog"
+import "jquery-ui/ui/widgets/sortable"
+import "jquery-ui/ui/widgets/tabs"
+import "jquery-ui/ui/widget"
+import "jquery-ujs"
+
+import "./ext/jquery"
+import "./ext/jquery-ui"
+import "./initializers/batch-actions"
+import "./initializers/checkbox-toggler"
+import "./initializers/datepicker"
+import "./initializers/dropdown-menu"
+import "./initializers/filters"
+import "./initializers/has-many"
+import "./initializers/per-page"
+import "./initializers/table-checkbox-toggler"
+import "./initializers/tabs"
+
+import ModalDialog from "./lib/modal-dialog";
+
+function modal_dialog(message, inputs, callback) {
+  console.warn("ActiveAdmin.modal_dialog is deprecated in favor of ActiveAdmin.ModalDialog, please update usage.");
+  return ModalDialog(message, inputs, callback);
+}
+
+export { ModalDialog, modal_dialog };

data/app/javascript/active_admin/ext/jquery-ui.js

@@ -0,0 +1,7 @@
+// Short-circuits `_focusTabbable` to focus on the modal itself instead of
+// elements inside the modal. Without this, if a datepicker is the first input,
+// it'll immediately pop up when the modal opens.
+// See this ticket for more info: http://bugs.jqueryui.com/ticket/4731
+$.ui.dialog.prototype._focusTabbable = function() {
+  this.uiDialog.focus();
+};

data/app/javascript/active_admin/ext/jquery.js

@@ -0,0 +1,9 @@
+// `serializeArray` generates => [{ name: 'foo', value: 'bar' }]
+// This function remaps it to => { foo: 'bar' }
+$.fn.serializeObject = function() {
+  return this.serializeArray()
+    .reduce((obj, item) => {
+      obj[item.name] = item.value
+      return obj
+    }, {});
+};

data/app/javascript/active_admin/initializers/batch-actions.js

@@ -0,0 +1,61 @@
+import ModalDialog from "../lib/modal-dialog";
+
+const onDOMReady = function() {
+  // Detach any previously attached handlers before re-attaching them.
+  // This avoids double-registered handlers when Turbolinks is enabled
+  $('.batch_actions_selector li a').off('click confirm:complete');
+
+  //
+  // Use ModalDialog to prompt user if
+  // confirmation is required for current Batch Action
+  //
+  $('.batch_actions_selector li a').on('click', function(event){
+    let message;
+    event.stopPropagation(); // prevent Rails UJS click event
+    event.preventDefault();
+    if ((message = $(this).data('confirm'))) {
+      ModalDialog(message, $(this).data('inputs'), inputs => {
+        $(this).trigger('confirm:complete', inputs);
+      });
+    } else {
+      $(this).trigger('confirm:complete');
+    }
+  });
+
+  $('.batch_actions_selector li a').on('confirm:complete', function(event, inputs){
+    let val;
+    if ((val = JSON.stringify(inputs))) {
+      $('#batch_action_inputs').removeAttr('disabled').val(val);
+    } else {
+      $('#batch_action_inputs').attr('disabled', 'disabled');
+    }
+
+    $('#batch_action').val($(this).data('action'));
+    $('#collection_selection').submit();
+  });
+
+  //
+  // Add checkbox selection to resource tables and lists if batch actions are enabled
+  //
+
+  if ($(".batch_actions_selector").length && $(":checkbox.toggle_all").length) {
+
+    if ($(".paginated_collection table.index_table").length) {
+      $(".paginated_collection table.index_table").tableCheckboxToggler();
+    } else {
+      $(".paginated_collection").checkboxToggler();
+    }
+
+    $(document).on('change', '.paginated_collection :checkbox', function() {
+      if ($(".paginated_collection :checkbox:checked").length && $(".dropdown_menu_list").children().length) {
+        $(".batch_actions_selector").each(function() { $(this).aaDropdownMenu("enable"); });
+      } else {
+        $(".batch_actions_selector").each(function() { $(this).aaDropdownMenu("disable"); });
+      }
+    });
+  }
+};
+
+$(document).
+  ready(onDOMReady).
+  on('page:load turbolinks:load', onDOMReady);

data/app/javascript/active_admin/initializers/checkbox-toggler.js

@@ -0,0 +1,3 @@
+import CheckboxToggler from "../lib/checkbox-toggler";
+
+$.widget.bridge('checkboxToggler', CheckboxToggler);

data/app/javascript/active_admin/initializers/datepicker.js

@@ -0,0 +1,16 @@
+(($) => {
+
+  $(document)
+    .on('focus', 'input.datepicker:not(.hasDatepicker)', function() {
+      const input = $(this);
+
+      // Only create datepickers in compatible browsers
+      if (input[0].type === 'date') { return; }
+
+      const defaults = { dateFormat: 'yy-mm-dd' };
+      const options  = input.data('datepicker-options');
+
+      input.datepicker($.extend(defaults, options));
+    });
+
+})(jQuery);

data/app/javascript/active_admin/initializers/dropdown-menu.js

@@ -0,0 +1,9 @@
+import DropdownMenu from "../lib/dropdown-menu";
+
+$.widget.bridge('aaDropdownMenu', DropdownMenu);
+
+const onDOMReady = () => $('.dropdown_menu').aaDropdownMenu();
+
+$(document).
+  ready(onDOMReady).
+  on('page:load turbolinks:load', onDOMReady);

data/app/javascript/active_admin/initializers/filters.js

@@ -0,0 +1,10 @@
+import Filters from '../lib/filters';
+
+(($) => {
+
+  $(document).
+    on('click', '.clear_filters_btn', Filters._clearForm).
+    on('submit', '.filter_form', Filters._disableEmptyInputFields).
+    on('change', '.filter_form_field.select_and_search select', Filters._setSearchType);
+
+})(jQuery);

data/app/javascript/active_admin/initializers/has-many.js

@@ -0,0 +1,98 @@
+$(function() {
+  // Provides a before-removal hook:
+  // $ ->
+  //   # This is a good place to tear down JS plugins to prevent memory leaks.
+  //   $(document).on 'has_many_remove:before', '.has_many_container', (e, fieldset, container)->
+  //     fieldset.find('.select2').select2 'destroy'
+  //
+  //   # If you need to do anything after removing the items you can use the
+  //   has_many_remove:after hook
+  //   $(document).on 'has_many_remove:after', '.has_many_container', (e, fieldset, container)->
+  //     list_item_count = container.find('.has_many_fields').length
+  //     alert("There are now #{list_item_count} items in the list")
+  //
+  $(document).on('click', 'a.button.has_many_remove', function(event){
+    event.preventDefault();
+    const parent    = $(this).closest('.has_many_container');
+    const to_remove = $(this).closest('fieldset');
+    recompute_positions(parent);
+
+    parent.trigger('has_many_remove:before', [to_remove, parent]);
+    to_remove.remove();
+    return parent.trigger('has_many_remove:after', [to_remove, parent]);
+  });
+
+  // Provides before and after creation hooks:
+  // $ ->
+  //   # The before hook allows you to prevent the creation of new records.
+  //   $(document).on 'has_many_add:before', '.has_many_container', (e, container)->
+  //     if $(@).children('fieldset').length >= 3
+  //       alert "you've reached the maximum number of items"
+  //       e.preventDefault()
+  //
+  //   # The after hook is a good place to initialize JS plugins and the like.
+  //   $(document).on 'has_many_add:after', '.has_many_container', (e, fieldset, container)->
+  //     fieldset.find('select').chosen()
+  //
+  $(document).on('click', 'a.button.has_many_add', function(event){
+    let before_add;
+    event.preventDefault();
+    const parent = $(this).closest('.has_many_container');
+    parent.trigger((before_add = $.Event('has_many_add:before')), [parent]);
+
+    if (!before_add.isDefaultPrevented()) {
+      let index = parent.data('has_many_index') || (parent.children('fieldset').length - 1);
+      parent.data({has_many_index: ++index});
+
+      const regex = new RegExp($(this).data('placeholder'), 'g');
+      const html  = $(this).data('html').replace(regex, index);
+
+      const fieldset = $(html).insertBefore(this);
+      recompute_positions(parent);
+      return parent.trigger('has_many_add:after', [fieldset, parent]);
+    }
+  });
+
+  $(document).on('change', '.has_many_container[data-sortable] :input[name$="[_destroy]"]', function() {
+    recompute_positions($(this).closest('.has_many'));
+  });
+
+  $(document).on('has_many_add:after', '.has_many_container', init_sortable);
+});
+
+var init_sortable = function() {
+  const elems = $('.has_many_container[data-sortable]:not(.ui-sortable)');
+  elems.sortable({
+    items: '> fieldset',
+    handle: '> ol > .handle',
+    start: (ev, ui) => {
+      ui.item.css({opacity: 0.3});
+    },
+    stop: function (ev, ui) {
+      ui.item.css({opacity: 1.0});
+      recompute_positions($(this));
+    }
+  });
+  elems.each(recompute_positions);
+};
+
+var recompute_positions = function(parent){
+  parent = parent instanceof jQuery ? parent : $(this);
+  const input_name = parent.data('sortable');
+  let position = parseInt(parent.data('sortable-start') || 0, 10);
+
+  parent.children('fieldset').each(function() {
+    // We ignore nested inputs, so when defining your has_many, be sure to keep
+    // your sortable input at the root of the has_many block.
+    const destroy_input  = $(this).find("> ol > .input > :input[name$='[_destroy]']");
+    const sortable_input = $(this).find(`> ol > .input > :input[name$='[${input_name}]']`);
+
+    if (sortable_input.length) {
+      sortable_input.val(destroy_input.is(':checked') ? '' : position++);
+    }
+  });
+};
+
+$(document).
+  ready(init_sortable).
+  on('page:load turbolinks:load', init_sortable);

data/app/javascript/active_admin/initializers/per-page.js

@@ -0,0 +1,13 @@
+import PerPage from "../lib/per-page";
+
+(($) => {
+
+  $(document).
+    on('change', '.pagination_per_page > select', function(_event) {
+      PerPage._jQueryInterface.call($(this), 'update')
+    });
+
+  $.fn['perPage'] = PerPage._jQueryInterface
+  $.fn['perPage'].Constructor = PerPage
+
+})(jQuery);

data/app/javascript/active_admin/initializers/table-checkbox-toggler.js

@@ -0,0 +1,3 @@
+import TableCheckboxToggler from "../lib/table-checkbox-toggler";
+
+$.widget.bridge('tableCheckboxToggler', TableCheckboxToggler);

data/app/javascript/active_admin/initializers/tabs.js

@@ -0,0 +1,6 @@
+let onDOMReady = () =>
+  $('#active_admin_content .tabs').tabs()
+
+$(document).
+  ready(onDOMReady).
+  on('page:load turbolinks:load', onDOMReady)

data/app/javascript/active_admin/lib/checkbox-toggler.js

@@ -0,0 +1,49 @@
+class CheckboxToggler {
+  constructor(options, container){
+    this.options = options;
+    this.container = container;
+    this._init();
+    this._bind();
+  }
+
+  option(_key, _value) {
+  }
+
+  _init() {
+    if (!this.container) {
+      throw new Error('Container element not found');
+    } else {
+      this.$container = $(this.container);
+    }
+
+    if (!this.$container.find('.toggle_all').length) {
+      throw new Error('"toggle all" checkbox not found');
+    } else {
+      this.toggle_all_checkbox = this.$container.find('.toggle_all');
+    }
+
+    this.checkboxes = this.$container.find(':checkbox').not(this.toggle_all_checkbox);
+  }
+
+  _bind() {
+    this.checkboxes.change(event => this._didChangeCheckbox(event.target));
+    this.toggle_all_checkbox.change(() => this._didChangeToggleAllCheckbox());
+  }
+
+  _didChangeCheckbox(_checkbox){
+    const numChecked = this.checkboxes.filter(':checked').length;
+
+    const allChecked = numChecked === this.checkboxes.length;
+    const someChecked = (numChecked > 0) && (numChecked < this.checkboxes.length);
+
+    this.toggle_all_checkbox.prop({ checked: allChecked, indeterminate: someChecked });
+  }
+
+  _didChangeToggleAllCheckbox() {
+    const setting = this.toggle_all_checkbox.prop('checked');
+    this.checkboxes.prop({ checked: setting });
+    return setting;
+  }
+}
+
+export default CheckboxToggler;

data/app/javascript/active_admin/lib/dropdown-menu.js

@@ -0,0 +1,116 @@
+class DropdownMenu {
+  constructor(options, element) {
+    this.options = options;
+    this.element = element;
+    this.$element = $(this.element);
+
+    const defaults = {
+      fadeInDuration: 20,
+      fadeOutDuration: 100,
+      onClickActionItemCallback: null
+    };
+
+    this.options = $.extend(defaults, this.options);
+    this.isOpen  = false;
+
+    this.$menuButton = this.$element.find('.dropdown_menu_button');
+    this.$menuList   = this.$element.find('.dropdown_menu_list_wrapper');
+
+    this._buildMenuList();
+    this._bind();
+  }
+
+  open() {
+    this.isOpen = true;
+    this.$menuList.fadeIn(this.options.fadeInDuration);
+
+    this._position();
+    return this;
+  }
+
+  close() {
+    this.isOpen = false;
+    this.$menuList.fadeOut(this.options.fadeOutDuration);
+    return this;
+  }
+
+  destroy() {
+    this.$element = null;
+    return this;
+  }
+
+  isDisabled() {
+    return this.$menuButton.hasClass('disabled');
+  }
+
+  disable() {
+    this.$menuButton.addClass('disabled');
+  }
+
+  enable() {
+    this.$menuButton.removeClass('disabled');
+  }
+
+  option(key, value) {
+    if ($.isPlainObject(key)) {
+      return this.options = $.extend(true, this.options, key);
+    } else if (key != null) {
+      return this.options[key];
+    } else {
+      return this.options[key] = value;
+    }
+  }
+
+  _buildMenuList() {
+    this.$nipple = $('<div class="dropdown_menu_nipple"></div>');
+    this.$menuList.prepend(this.$nipple);
+    this.$menuList.hide();
+  }
+
+  _bind() {
+    $('body').click(() => {
+      if (this.isOpen) { this.close(); }
+    });
+
+    this.$menuButton.click(() => {
+      if (!this.isDisabled()) {
+        if (this.isOpen) {
+          this.close();
+        } else {
+          this.open();
+        }
+      }
+      return false;
+    });
+  }
+
+  _position() {
+    this.$menuList.css('top', this.$menuButton.position().top + this.$menuButton.outerHeight() + 10);
+
+    const button_left = this.$menuButton.position().left;
+    const button_center =  this.$menuButton.outerWidth() / 2;
+    const button_right = button_left + (button_center * 2);
+    const menu_center = this.$menuList.outerWidth() / 2;
+    const nipple_center = this.$nipple.outerWidth() / 2;
+    const window_right = $(window).width();
+
+    const centered_menu_left = (button_left + button_center) - menu_center;
+    const centered_menu_right = button_left + button_center + menu_center;
+
+    if (centered_menu_left < 0) {
+      // Left align with button
+      this.$menuList.css('left', button_left);
+      this.$nipple.css('left', button_center - nipple_center);
+    } else if (centered_menu_right > window_right) {
+      // Right align with button
+      this.$menuList.css('right', window_right - button_right);
+      this.$nipple.css('right', button_center - nipple_center);
+    } else {
+      // Center align under button
+      this.$menuList.css('left', centered_menu_left);
+      this.$nipple.css('left', menu_center - nipple_center);
+    }
+  }
+}
+
+export default DropdownMenu;

data/app/javascript/active_admin/lib/filters.js

@@ -0,0 +1,39 @@
+import { queryStringToParams, hasTurbolinks, turbolinksVisit, toQueryString } from '../lib/utils';
+
+class Filters {
+
+  static _clearForm(event) {
+    const regex = /^(q\[|q%5B|q%5b|page|utf8|commit)/;
+    const params = queryStringToParams()
+      .filter(({name}) => !name.match(regex));
+
+    event.preventDefault();
+
+    if (hasTurbolinks()) {
+      turbolinksVisit(params);
+    } else {
+      window.location.search = toQueryString(params);
+    }
+  }
+
+  static _disableEmptyInputFields(event) {
+    const params = $(this)
+      .find(':input')
+      .filter((i, input) => input.value === '')
+      .prop({ disabled: true })
+      .end()
+      .serializeArray();
+
+    if (hasTurbolinks()) {
+      event.preventDefault();
+      turbolinksVisit(params);
+    }
+  }
+
+  static _setSearchType() {
+    $(this).siblings('input').prop({name: `q[${this.value}]`});
+  }
+
+}
+
+export default Filters;

data/app/javascript/active_admin/lib/modal-dialog.js

@@ -0,0 +1,63 @@
+function ModalDialog(message, inputs, callback){
+  let html = `<form id="dialog_confirm" title="${message}"><ul>`;
+  for (let name in inputs) {
+    var opts, wrapper;
+    let type = inputs[name];
+    if (/^(datepicker|checkbox|text|number)$/.test(type)) {
+      wrapper = 'input';
+    } else if (type === 'textarea') {
+      wrapper = 'textarea';
+    } else if ($.isArray(type)) {
+      [wrapper, opts, type] = ['select', type, ''];
+    } else {
+      throw new Error(`Unsupported input type: {${name}: ${type}}`);
+    }
+
+    let klass = type === 'datepicker' ? type : '';
+    html += `<li>
+      <label>${name.charAt(0).toUpperCase() + name.slice(1)}</label>
+      <${wrapper} name="${name}" class="${klass}" type="${type}">` +
+        (opts ? ((() => {
+          const result = [];
+
+          opts.forEach(v => {
+            const $elem = $('<option></option>');
+            if ($.isArray(v)) {
+              $elem.text(v[0]).val(v[1]);
+            } else {
+              $elem.text(v);
+            }
+            result.push($elem.wrap('<div></div>').parent().html());
+          });
+
+          return result;
+        })()).join('') : '') +
+      `</${wrapper}>` +
+    "</li>";
+    [wrapper, opts, type, klass] = []; // unset any temporary variables
+  }
+
+  html += "</ul></form>";
+
+  const form = $(html).appendTo('body');
+  $('body').trigger('modal_dialog:before_open', [form]);
+
+  form.dialog({
+    modal: true,
+    open(_event, _ui) {
+      $('body').trigger('modal_dialog:after_open', [form]);
+    },
+    dialogClass: 'active_admin_dialog',
+    buttons: {
+      OK() {
+        callback($(this).serializeObject());
+        $(this).dialog('close');
+      },
+      Cancel() {
+        $(this).dialog('close').remove();
+      }
+    }
+  });
+}
+
+export default ModalDialog;

data/app/javascript/active_admin/lib/per-page.js

@@ -0,0 +1,38 @@
+import { queryStringToParams, hasTurbolinks, turbolinksVisit, toQueryString } from './utils';
+
+class PerPage {
+  constructor(element) {
+    this.element = element;
+  }
+
+  update() {
+    const params = queryStringToParams()
+      .filter(({name}) => name != 'per_page' || name != 'page')
+
+    params.push({ name: 'per_page', value: this.element.value });
+
+    if (hasTurbolinks()) {
+      turbolinksVisit(params);
+    } else {
+      window.location.search = toQueryString(params);
+    }
+  }
+
+  static _jQueryInterface(config) {
+    return this.each(function () {
+      const $this = $(this)
+      let data = $this.data('perPage')
+
+      if (!data) {
+        data = new PerPage(this)
+        $this.data('perPage', data)
+      }
+
+      if (config === 'update') {
+        data[config]()
+      }
+    })
+  }
+}
+
+export default PerPage;

data/app/javascript/active_admin/lib/table-checkbox-toggler.js

@@ -0,0 +1,38 @@
+import CheckboxToggler from "./checkbox-toggler";
+
+class TableCheckboxToggler extends CheckboxToggler {
+  _bind() {
+    super._bind(...arguments);
+
+    this.$container
+      .find('tbody td')
+      .click(event => {
+        if (event.target.type !== 'checkbox') {
+          this._didClickCell(event.target);
+        }
+      });
+  }
+
+  _didChangeCheckbox(checkbox) {
+    super._didChangeCheckbox(...arguments);
+
+    $(checkbox)
+      .parents('tr')
+      .toggleClass('selected', checkbox.checked);
+  }
+
+  _didChangeToggleAllCheckbox() {
+    this.$container
+      .find('tbody tr')
+      .toggleClass('selected', super._didChangeToggleAllCheckbox(...arguments));
+  }
+
+  _didClickCell(cell) {
+    $(cell)
+      .parent('tr')
+      .find(':checkbox')
+      .click();
+  }
+}
+
+export default TableCheckboxToggler;