activeadmin_addons_rails6 1.7.2

data/app/inputs/range_select_input.rb

@@ -0,0 +1,6 @@
+class RangeSelectInput < NumericRangeFilterInput
+  def to_html
+    warn "[DEPRECATION] use :numeric_range_filter instead of :range_select"
+    super
+  end
+end

data/app/inputs/search_select_filter_input.rb

@@ -0,0 +1,12 @@
+class SearchSelectFilterInput < SearchSelectInput
+  include ActiveAdminAddons::FilterInput
+
+  def load_control_attributes
+    super
+    load_data_attr(:width, default: "resolve")
+  end
+
+  def input_method
+    eq_input_name
+  end
+end

data/app/inputs/search_select_input.rb

@@ -0,0 +1,29 @@
+class SearchSelectInput < ActiveAdminAddons::InputBase
+  include ActiveAdminAddons::SelectHelpers
+
+  def render_custom_input
+    concat(label_html)
+    concat(builder.select(input_method,
+      initial_collection_to_select_options, {}, input_html_options))
+  end
+
+  def input_method
+    valid_method
+  end
+
+  def load_control_attributes
+    load_class(@options[:class])
+    load_data_attr(:fields, default: ["name"], formatter: :to_json)
+    load_data_attr(:predicate, default: "contains")
+    load_data_attr(:url, default: url_from_method)
+    load_data_attr(:response_root, default: tableize_method)
+    load_data_attr(:display_name, default: "name")
+    load_data_attr(:minimum_input_length, default: 1)
+    load_data_attr(:width, default: "80%")
+    load_data_attr(
+      :order,
+      value: @options[:order_by],
+      default: get_data_attr_value(:fields).first.to_s + "_desc"
+    )
+  end
+end

data/app/inputs/selected_list_input.rb

@@ -0,0 +1,54 @@
+class SelectedListInput < ActiveAdminAddons::InputBase
+  def render_custom_input
+    concat(label_html)
+    concat(render_control_wrapper)
+  end
+
+  def load_control_attributes
+    load_class(@options[:class])
+    load_data_attr(:model, value: model_name)
+    load_data_attr(:method, value: method)
+    load_data_attr(:url, default: url_from_method)
+    load_data_attr(:response_root, default: tableize_method)
+    load_data_attr(:fields, default: ["name"], formatter: :to_json)
+    load_data_attr(:predicate, default: "contains")
+    load_data_attr(:display_name, default: "name")
+    load_data_attr(:minimum_input_length, default: 1)
+    load_data_attr(:width, default: "100%")
+    load_data_attr(
+      :order,
+      value: @options[:order_by],
+      default: get_data_attr_value(:fields).first.to_s + "_desc"
+    )
+  end
+
+  private
+
+  def render_control_wrapper
+    template.content_tag(:div, class: "selected-list-container") do
+      template.content_tag(label_html)
+      template.concat(render_items_list)
+      template.concat(builder.select(build_virtual_attr, [], {}, input_html_options))
+    end
+  end
+
+  def render_items_list
+    template.content_tag(:div, id: selected_values_id, class: "selected-values") do
+      template.concat(build_hidden_control(empty_input_id, method_to_input_array_name, ""))
+      input_related_items.each { |item| template.concat(render_item(item)) }
+    end
+  end
+
+  def render_item(item)
+    template.content_tag(:div, id: method_to_input_id(item.id), class: "selected-item") do
+      template.concat(item_label(item))
+      template.concat(
+        build_hidden_control(method_to_input_id(item.id), method_to_input_array_name, item.id.to_s)
+      )
+    end
+  end
+
+  def item_label(item)
+    item.send(@options[:display_name] || "name")
+  end
+end

data/app/inputs/tags_input.rb

@@ -0,0 +1,55 @@
+class TagsInput < ActiveAdminAddons::InputBase
+  include ActiveAdminAddons::SelectHelpers
+
+  def render_custom_input
+    if active_record_select?
+      return render_collection_tags
+    end
+
+    render_array_tags
+  end
+
+  def load_control_attributes
+    load_data_attr(:model, value: model_name)
+    load_data_attr(:method, value: method)
+    load_data_attr(:width, default: "80%")
+
+    if active_record_select?
+      load_data_attr(:relation, value: true)
+      load_data_attr(:collection, value: collection_to_select_options, formatter: :to_json)
+    else
+      load_data_attr(:collection, value: array_to_select_options, formatter: :to_json)
+    end
+  end
+
+  private
+
+  def render_array_tags
+    render_tags_control { build_hidden_control(prefixed_method, method_to_input_name, input_value) }
+  end
+
+  def render_collection_tags
+    render_tags_control { render_selected_hidden_items }
+  end
+
+  def render_tags_control(&block)
+    concat(label_html)
+    concat(block.call)
+    concat(builder.select(build_virtual_attr, [], {}, input_html_options))
+  end
+
+  def render_selected_hidden_items
+    template.content_tag(:div, id: selected_values_id) do
+      template.concat(build_hidden_control(empty_input_id, method_to_input_array_name, ""))
+      input_value.each do |item_id|
+        template.concat(
+          build_hidden_control(
+            method_to_input_id(item_id),
+            method_to_input_array_name,
+            item_id.to_s
+          )
+        )
+      end
+    end
+  end
+end

data/app/javascript/activeadmin_addons/addons/interactive_select_tag.js

@@ -0,0 +1,95 @@
+var initializer = function() {
+  configureInteractiveSelect(document);
+
+  $(document).on('has_many_add:after', function(event, container) {
+    configureInteractiveSelect(container);
+  });
+
+  function configureInteractiveSelect(container) {
+    $('.interactive-tag-select select', container).each(function(i, el) {
+      setupSelect2(el);
+    });
+
+    function setupSelect2(select) {
+      var selectConfig = {
+        placeholder: '',
+        allowClear: false,
+        width: '125px',
+      };
+
+      $(select).select2(selectConfig);
+
+      // Related with https://github.com/select2/select2/issues/3320
+      $(select).on('select2:unselecting', function() {
+        $(this).data('unselecting', true);
+      }).on('select2:open', function() {
+        if ($(this).data('unselecting')) {
+          $(this).select2('close').removeData('unselecting');
+        }
+      });
+    }
+  }
+
+  $('.interactive-tag').click(function(e) {
+    var tag = $(e.target).parent();
+    var model = tag.data('model');
+    var objectId = tag.data('object_id');
+    var field = tag.data('field');
+    var selectTag = $('.' + model + '-' + field + '-' + objectId + '-select');
+    selectTag.removeClass('select-container-hidden');
+    tag.addClass('interactive-tag-hidden');
+    selectTag.find('select').select2('open');
+  });
+
+  $('.interactive-tag-select').on('select2:close', function(e) {
+    var selectTag = $(e.target).parent();
+
+    var model = selectTag.data('model');
+    var objectId = selectTag.data('object_id');
+    var field = selectTag.data('field');
+
+    var tagContainer = $('.' + model + '-' + field + '-' + objectId + '-tag');
+    var statusTag = tagContainer.find('.status_tag');
+
+    var newValue = e.target.value;
+    var newText = e.target.selectedOptions[0].text;
+    var oldValue = selectTag.data('value');
+
+    if (newValue === oldValue) {
+      selectTag.addClass('select-container-hidden');
+      tagContainer.removeClass('interactive-tag-hidden');
+    } else {
+      var url = tagContainer.data('url');
+      var data = { id: objectId };
+      data[model] = {};
+      data[model][field] = newValue;
+
+      $.ajax({
+        url: url,
+        data: data,
+        dataType: 'json',
+        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
+        error: function() {
+          var errorMsg = 'Error: Update Unsuccessful';
+          console.log(errorMsg);
+        },
+        success: function() {
+          statusTag.text(newText);
+          statusTag.removeClass(oldValue);
+          statusTag.addClass(newValue);
+
+          tagContainer.data('value', newValue);
+          selectTag.data('value', newValue);
+        },
+        complete: function() {
+          selectTag.addClass('select-container-hidden');
+          tagContainer.removeClass('interactive-tag-hidden');
+        },
+        type: 'PATCH',
+      });
+    }
+  });
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);

data/app/javascript/activeadmin_addons/addons/toggle_bool.js

@@ -0,0 +1,39 @@
+var initializer = function() {
+  $('.toggle-bool-switch').click(function(e) {
+    var boolSwitch = $(e.target);
+
+    var objectId = boolSwitch.data('object_id');
+    var model = boolSwitch.data('model');
+    var field = boolSwitch.data('field');
+
+    var url = boolSwitch.data('url');
+    var value = boolSwitch.data('value');
+    var successMessage = boolSwitch.data('success_message');
+    var data = { id: objectId };
+    data[model] = {};
+    data[model][field] = !value;
+
+    $.ajax({
+      url: url,
+      data: data,
+      dataType: 'json',
+      headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
+      error: function() {
+        var errorMsg = 'Error: Update Unsuccessful';
+        alert(errorMsg);
+      },
+      success: function() {
+        boolSwitch.data('value', !value);
+        boolSwitch.toggleClass('on');
+        if (!boolSwitch.hasClass('notify-success')) return;
+        $(function() {
+          setTimeout(alert(successMessage), 500);
+        });
+      },
+      type: 'PATCH',
+    });
+  });
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);

data/app/javascript/activeadmin_addons/all.js

@@ -0,0 +1,14 @@
+import 'select2';
+import 'jquery-datetimepicker';
+import './vendor/jquery_palette_color_picker/palette-color-picker';
+
+import './config';
+import './inputs/select2';
+import './inputs/search-select';
+import './inputs/nested-select';
+import './inputs/tags';
+import './inputs/selected-list';
+import './inputs/date-time-picker';
+import './inputs/color-picker';
+import './addons/toggle_bool';
+import './addons/interactive_select_tag';

data/app/javascript/activeadmin_addons/config.js

@@ -0,0 +1,10 @@
+var initializer = function() {
+  window.ActiveadminAddons = {
+    config: {
+      defaultSelect: $('body').data('default-select'),
+    },
+  };
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);

data/app/javascript/activeadmin_addons/inputs/color-picker.js

@@ -0,0 +1,16 @@
+var initializer = function() {
+  setupColorPicker();
+
+  $(document).on('has_many_add:after', setupColorPicker);
+
+  function setupColorPicker() {
+    $('.color-picker-input').each(function(i, el) {
+      $(el).paletteColorPicker({
+        'clear_btn': 'last',
+      });
+    });
+  }
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);

data/app/javascript/activeadmin_addons/inputs/date-time-picker.js

@@ -0,0 +1,28 @@
+var initializer = function() {
+  setupDateTimePicker(document);
+
+  $(document).on('has_many_add:after', '.has_many_container', function(event, fieldset) {
+    return setupDateTimePicker(fieldset);
+  });
+
+  function setupDateTimePicker(container) {
+    var defaults = {
+      formatDate: 'y-m-d',
+      format: 'Y-m-d H:i',
+      allowBlank: true,
+      defaultSelect: false,
+      validateOnBlur: false,
+      scrollInput: false,
+    };
+
+    var entries = $(container).find('input.date-time-picker-input');
+    return entries.each(function(index, entry) {
+      var options = $(entry).data('picker-options');
+      var mixedOptions = $.extend(defaults, options);
+      return $(entry).datetimepicker(mixedOptions);
+    });
+  }
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);

data/app/javascript/activeadmin_addons/inputs/nested-select.js

@@ -0,0 +1,170 @@
+$.fn.select2.amd.define('select2/data/nestedCustomAdapter', ['select2/data/array', 'select2/utils'], function(ArrayData, Utils) {
+  function CustomData($element, options) {
+    CustomData.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(CustomData, ArrayData);
+
+  CustomData.prototype.query = function(params, callback) {
+    var data = { results: [] };
+    var element = this.$element;
+    var collection = element.data('collection');
+    var parent = element.data('parent');
+    var parentId = element.data('parent-id');
+
+    collection.forEach(function(record) {
+      var regex = new RegExp(params.term, 'i');
+      var matched = !!record.text.match(regex);
+
+      if ((!parent || record[parent] == parentId) && matched) {
+        data.results.push(record);
+      }
+    });
+
+    callback(data);
+  };
+
+  CustomData.prototype.current = function(callback) {
+    var currentOption = null;
+    var element = this.$element;
+    var selectedOption = element.data('selected');
+    var collection = element.data('collection');
+    var data = [];
+
+    $.each(collection, function(index, option) {
+      if (!!selectedOption && option.id == selectedOption.id) {
+        currentOption = option;
+        element.data('selected', null);
+        return;
+      }
+
+      if (element.val() == option.id) {
+        currentOption = option;
+        return;
+      }
+    });
+
+    if (currentOption) {
+      data.push(currentOption);
+    }
+
+    callback(data);
+  };
+
+  return CustomData;
+});
+
+var initializer = function() {
+  configureSelect2(document);
+
+  $(document).on('has_many_add:after', function(event, container) {
+    configureSelect2(container);
+  });
+
+  function configureSelect2(container) {
+    var INVALID_PARENT_ID = -1;
+
+    $('.nested-level-input', container).each(function(i, el) {
+      var element = $(el);
+      var url = element.data('url');
+      var fields = element.data('fields');
+      var predicate = element.data('predicate');
+      var filters = element.data('filters');
+      var displayName = element.data('display-name');
+      var parent = element.data('parent');
+      var width = element.data('width');
+      var model = element.data('model');
+      var responseRoot = element.data('response-root');
+      var collection = element.data('collection');
+      var minimumInputLength = element.data('minimum-input-length');
+      var order = element.data('order');
+      var parentId = element.data('parent-id');
+      var selectInstance;
+
+      var select2Config = {
+        width: width,
+        minimumInputLength: minimumInputLength,
+        placeholder: '',
+        allowClear: true,
+      };
+
+      if (collection) {
+        select2Config.dataAdapter = $.fn.select2.amd.require('select2/data/nestedCustomAdapter');
+      } else {
+        var ajaxConfig = {
+          url: url,
+          dataType: 'json',
+          delay: 250,
+          cache: true,
+          data: function(params) {
+            var textQuery = { m: 'or' };
+            fields.forEach(function(field) {
+              if (field == 'id') {
+                textQuery[field + '_eq'] = params.term;
+              } else {
+                textQuery[field + '_' + predicate] = params.term;
+              }
+            });
+
+            var query = {
+              order: order,
+              q: {
+                groupings: [textQuery],
+                combinator: 'and',
+              },
+            };
+
+            if (!!parent) {
+              query.q[parent + '_eq'] = parentId;
+            }
+
+            Object.assign(query.q, filters);
+
+            return query;
+          },
+          processResults: function(data) {
+            if (data.constructor == Object) {
+              data = data[responseRoot];
+            }
+
+            return {
+              results: jQuery.map(data, function(resource) {
+                if (!resource[displayName]) {
+                  resource[displayName] = 'No display name for id #' + resource.id.toString();
+                }
+                return {
+                  id: resource.id,
+                  text: resource[displayName].toString(),
+                };
+              }),
+            };
+          },
+        };
+
+        select2Config.ajax = ajaxConfig;
+      }
+
+      selectInstance = element.select2(select2Config);
+
+      function setParentValue(e) {
+        selectInstance.val(null).trigger('select2:select').trigger('change');
+        parentId = (e.params && e.params.data.id) ? e.params.data.id : INVALID_PARENT_ID;
+        element.data('parent-id', parentId);
+      }
+
+      if (!!parent) {
+        var parentSelectorId = '#' + model + '_' + parent;
+        if (!$(parentSelectorId).length) {
+          parentSelectorId = $(container).find('*[id*=' + parent + ']')[0];
+        }
+        var parentSelector = $(parentSelectorId)[0];
+
+        $(parentSelector).on('select2:select', setParentValue);
+        $(parentSelector).on('select2:unselect', setParentValue);
+      }
+    });
+  }
+};
+
+$(initializer);
+$(document).on('turbolinks:load', initializer);