activeadmin_addons 1.10.0 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d72fffa977c3deca692ef85867b113cff5d81c77448124ce2be3b7bb8bca205e
-  data.tar.gz: db4ff250da3a471b018b02735185adf0627fcd5ab2b0062fac45994259b125a8
+  metadata.gz: 44f61829c24cb573ef14551b359f25c763d2740f72a17e0c64fedb80090afcd6
+  data.tar.gz: d0f6bb02709f7c23cb16e10bc882e3c10aecade16cfcf70bf9369beca8050ecd
 SHA512:
-  metadata.gz: b2785b849c40e967c81226a546e284185b497ab0359297036f302400685dc0dd2f3bbffdfbf40a03b5f574e98647a8d8707b9fe914cb44e672b54993bbb8e846
-  data.tar.gz: 2d4f90088726b45b97a67e16db4325fa4b2c24b78d69ce380e8635f089b4ed4cf6c8544689d40e02a63de823aa07d057da9b25c788c4a482fe2b5064bac14ab4
+  metadata.gz: 207fb0c30ec42531af763ccb9b346a6fd86b68b522890745c6f2c378e53914ea86132f3e63a461a7750a577bff1fe20a08d383b5e26147395e06caff77869f6f
+  data.tar.gz: c831f634ef1529f9706b4357c13c0eb2970aa0f87e3ca271b6a26dbb4ff293a9bae3cefcef229e7604e4db5b4492f350a25674826a6e25559ceb804c02dfe588

data/Rakefile

@@ -18,29 +18,13 @@ task :prepare_assets do
   system "rm -rf spec/dummy/public/packs"
   system "rm -rf spec/dummy/public/packs-test"
   system "yarn install"
-  system "yarn build"
   system "(cd spec/dummy && yarn install)"
 end
 
 task :tests do
   system "rspec ./spec/lib"
-end
-
-task :sprockets_tests do
-  system "rake prepare_assets"
-  system "export SPROCKETS=true; rspec ./spec/features"
-end
-
-task :webpack_tests do
-  system "rake prepare_assets"
-  system "export SPROCKETS=false; rspec ./spec/features"
-end
-
-task :all_tests do
   system "rake prepare_assets"
-  system "rake tests"
-  system "export SPROCKETS=true; rspec ./spec/features"
-  system "export SPROCKETS=false; rspec ./spec/features"
+  system "rspec ./spec/features"
 end
 
 Bundler::GemHelper.install_tasks

data/app/inputs/active_admin/inputs/select_input.rb

@@ -1,14 +1,18 @@
 class ActiveAdmin::Inputs::SelectInput < Formtastic::Inputs::SelectInput
   def input_html_options
-    super.merge(data: { tags: @options[:tags].present? })
+    if @options[:tags].present?
+      super.deep_merge(class: 'simple-tags-input')
+    else
+      super
+    end
   end
 
   def raw_collection
     field_value = begin
-                    object.send(method)
-                  rescue NoMethodError
-                    nil
-                  end
+      object.send(method)
+    rescue NoMethodError
+      nil
+    end
 
     @options[:tags].present? && field_value.present? ? (super.to_a << field_value).uniq : super
   end

data/app/inputs/nested_level_input.rb

@@ -1,4 +1,4 @@
-class NestedLevelInput < ActiveAdminAddons::InputBase
+class NestedLevelInput < ActiveAdminAddons::SelectInputBase
   include ActiveAdminAddons::SelectHelpers
 
   def render_custom_input
@@ -13,8 +13,10 @@ class NestedLevelInput < ActiveAdminAddons::InputBase
 
   private
 
+  # rubocop:disable Metrics/MethodLength
   def load_control_attributes
     load_class(@options[:class])
+    load_data_attr(:association, value: association_name)
     load_data_attr(:fields, default: ["name"], formatter: :to_json)
     load_data_attr(:predicate, default: "contains")
     load_data_attr(:filters)
@@ -23,26 +25,30 @@ class NestedLevelInput < ActiveAdminAddons::InputBase
     load_data_attr(:minimum_input_length, default: 1)
     load_data_attr(:url, default: url_from_method)
     load_data_attr(:response_root, default: tableize_method)
-    load_data_attr(:width, default: "80%")
+    load_data_attr(:width)
     load_data_attr(:order,
-      value: @options[:order_by],
-      default: get_data_attr_value(:fields).first.to_s + "_desc")
+                   value: @options[:order_by],
+                   default: "#{get_data_attr_value(:fields).first}_desc")
     load_parent_data_options
     load_collection_data
   end
+  # rubocop:enable Metrics/MethodLength
 
   def load_parent_data_options
     return unless @options[:parent_attribute]
+
     load_data_attr(:parent, value: @options[:parent_attribute])
-    load_data_attr(:parent_id, value: @object.send(@options[:parent_attribute]), default: -1)
+    load_data_attr(
+      :parent_id, value: @object.send(@options[:parent_id_attribute]), default: -1
+    )
   end
 
   def load_collection_data
     return unless @options[:collection]
 
     collection_options = collection_to_select_options do |item, option|
-      if !!@options[:parent_attribute]
-        option[@options[:parent_attribute]] = item.send(@options[:parent_attribute])
+      if @options[:parent_attribute].present?
+        option[@options[:parent_attribute]] = item.send(@options[:parent_id_attribute])
       end
     end
 

data/app/inputs/nested_select_input.rb

@@ -59,32 +59,38 @@ class NestedSelectInput < ActiveAdminAddons::InputBase
       parent_level_data = hierarchy[next_idx] if hierarchy.count != next_idx
       if parent_level_data
         level_data[:parent_attribute] = parent_level_data[:attribute]
+        level_data[:parent_id_attribute] = "#{level_data[:parent_attribute]}_id"
         set_parent_value(level_data)
       end
     end
   end
 
   def set_parent_value(level_data)
-    parent_attribute = level_data[:parent_attribute]
-    build_virtual_attr(parent_attribute)
-    instance = instance_from_attribute_name(level_data[:attribute])
-    if instance&.respond_to?(parent_attribute)
-      @object.send("#{parent_attribute}=", instance.send(parent_attribute))
+    build_virtual_attr(level_data[:parent_attribute])
+    build_virtual_attr(level_data[:parent_id_attribute])
+    instance = instance_from_attribute_id("#{level_data[:attribute]}_id")
+    if instance.respond_to?(level_data[:parent_id_attribute])
+      @object.send(
+        "#{level_data[:parent_attribute]}=", instance.send(level_data[:parent_attribute])
+      )
+      @object.send(
+        "#{level_data[:parent_id_attribute]}=", instance.send(level_data[:parent_id_attribute])
+      )
     end
   end
 
-  def instance_from_attribute_name(attribute)
-    return unless attribute
+  def instance_from_attribute_id(attribute_id)
+    return unless attribute_id
 
-    attribute_value = @object.send(attribute)
-    return unless attribute_value
+    attribute_id_value = @object.send(attribute_id)
+    return unless attribute_id_value
 
-    klass = class_from_attribute(attribute)
-    klass.find_by(id: attribute_value)
+    klass = class_from_attribute_id(attribute_id)
+    klass.find_by(id: attribute_id_value)
   end
 
-  def class_from_attribute(attribute)
-    association_name = attribute.to_s.chomp("_id")
+  def class_from_attribute_id(attribute_id)
+    association_name = attribute_id.to_s.chomp("_id")
     association_name.camelize.constantize
   rescue NameError
     object_class.reflect_on_association(association_name).klass

data/app/inputs/search_select_filter_input.rb

@@ -7,6 +7,20 @@ class SearchSelectFilterInput < SearchSelectInput
   end
 
   def input_method
-    eq_input_name
+    "#{input_name}_eq"
+  end
+
+  def input_html_options_name
+    "#{object_name}[#{input_method}]"
+  end
+
+  def input_value
+    result = valid_object.conditions.find do |condition|
+      condition.attributes.map(&:name).include?(input_name.to_s)
+    end
+
+    return unless result
+
+    result.values.first.value
   end
 end

data/app/inputs/search_select_input.rb

@@ -1,10 +1,11 @@
-class SearchSelectInput < ActiveAdminAddons::InputBase
+class SearchSelectInput < ActiveAdminAddons::SelectInputBase
   include ActiveAdminAddons::SelectHelpers
 
   def render_custom_input
     concat(label_html)
-    concat(builder.select(input_method,
-      initial_collection_to_select_options, {}, input_html_options))
+    concat(
+      builder.select(input_method, initial_collection_to_select_options, {}, input_html_options)
+    )
   end
 
   def input_method
@@ -19,11 +20,11 @@ class SearchSelectInput < ActiveAdminAddons::InputBase
     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(:width)
     load_data_attr(
       :order,
       value: @options[:order_by],
-      default: get_data_attr_value(:fields).first.to_s + "_desc"
+      default: "#{get_data_attr_value(:fields).first}_desc"
     )
   end
 end

data/app/inputs/tags_input.rb

@@ -1,18 +1,13 @@
-class TagsInput < ActiveAdminAddons::InputBase
+class TagsInput < ActiveAdminAddons::SelectInputBase
   include ActiveAdminAddons::SelectHelpers
 
   def render_custom_input
-    if active_record_select?
-      return render_collection_tags
-    end
-
-    render_array_tags
+    render_collection_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%")
+    @options[:multiple] = true
+    load_data_attr(:width)
 
     if active_record_select?
       load_data_attr(:relation, value: true)
@@ -24,32 +19,8 @@ class TagsInput < ActiveAdminAddons::InputBase
 
   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
+    concat(builder.select(method, [], input_options, input_html_options))
   end
 end

data/app/javascript/activeadmin_addons/addons/slim-select-interactive-tag.js

@@ -0,0 +1,78 @@
+import SlimSelect from 'slim-select';
+
+function updateTag(url, data) {
+  return fetch(url, {
+    method: 'PATCH',
+    headers: {
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+}
+
+function setupSelect(el) {
+  if (el.slim) {
+    el.slim.destroy();
+  }
+
+  return new SlimSelect({
+    select: el,
+    events: {
+      // eslint-disable-next-line max-statements
+      afterClose: () => {
+        const containerEl = el.closest('.tag-select-container');
+        const selectContainer = containerEl.querySelector('.interactive-tag-select');
+        const tagContainer = containerEl.querySelector('.interactive-tag');
+        const model = tagContainer.dataset.model;
+        const objectId = tagContainer.dataset.objectId;
+        const field = tagContainer.dataset.field;
+
+        if (el.value === tagContainer.dataset.value) {
+          selectContainer.classList.add('select-container-hidden');
+          containerEl.querySelector('.interactive-tag').classList.remove('interactive-tag-hidden');
+        } else {
+          const data = { id: objectId };
+          data[model] = {};
+          data[model][field] = el.value;
+          updateTag(tagContainer.dataset.url, data)
+            .then(() => {
+              const statusTag = tagContainer.querySelector('.status_tag');
+              statusTag.innerText = el.selectedOptions[0].text;
+              statusTag.classList.remove(tagContainer.dataset.value);
+              statusTag.classList.add(el.value);
+              tagContainer.dataset.value = el.value;
+              selectContainer.dataset.value = el.value;
+            })
+            .catch(() => {
+              const errorMsg = 'Error: Update Unsuccessful';
+              console.log(errorMsg);
+            })
+            .finally(() => {
+              selectContainer.classList.add('select-container-hidden');
+              containerEl.querySelector('.interactive-tag').classList.remove('interactive-tag-hidden');
+            });
+        }
+      },
+    },
+  });
+}
+
+function setupInteractiveTag(containerEl) {
+  const selectContainer = containerEl.querySelector('.interactive-tag-select');
+  const slimSelect = setupSelect(selectContainer.querySelector('select'));
+  const tag = containerEl.querySelector('.interactive-tag');
+
+  tag.addEventListener('click', () => {
+    selectContainer.classList.remove('select-container-hidden');
+    tag.classList.add('interactive-tag-hidden');
+    window.setTimeout(() => {
+      slimSelect.open();
+    }, 0);
+  });
+}
+
+window.addEventListener('load', () => {
+  document.querySelectorAll('.tag-select-container').forEach(setupInteractiveTag);
+});

data/app/javascript/activeadmin_addons/all.js

@@ -1,14 +1,9 @@
-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/slim-select';
 import './inputs/date-time-picker';
 import './inputs/color-picker';
 import './addons/toggle_bool';
-import './addons/interactive_select_tag';
+import './addons/slim-select-interactive-tag';

data/app/javascript/activeadmin_addons/config.js

@@ -1,10 +1,13 @@
-var initializer = function() {
+const loadEvents = ['turbo:load', 'turbolinks:load', 'DOMContentLoaded'];
+
+function initializer() {
   window.ActiveadminAddons = {
     config: {
-      defaultSelect: $('body').data('default-select'),
+      defaultSelect: document.querySelector('body').dataset.defaultSelect,
     },
   };
-};
+}
 
-$(initializer);
-$(document).on('turbolinks:load turbo:load', initializer);
+loadEvents.forEach((event) => {
+  document.addEventListener(event, initializer);
+});

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

@@ -0,0 +1,95 @@
+import { ransackSearch } from './slim-select-utils';
+
+const classes = ['nested-level-input'];
+
+function ajaxSearch(search, currentData, args) {
+  args.fields.forEach((field) => {
+    if (field === 'id') {
+      args.textQuery[`${field}_eq`] = search;
+    } else {
+      args.textQuery[`${field}_${args.predicate}`] = search;
+    }
+  });
+
+  if (!!args.parent) {
+    args.query.q[`${args.parent}_id_eq`] = args.parentId;
+  }
+
+  args.query.q = { ...args.query.q, ...args.filters };
+
+  return ransackSearch(search, currentData, args);
+}
+
+function collectionSearch(search, args, collection) {
+  if (search.length < args.minimumInputLength) {
+    return Promise.reject('Search term too short');
+  }
+
+  const data = JSON.parse(collection).filter(
+    (item) => (!args.parent || item[args.parent] === Number(args.parentId)) &&
+      String(item.text).toLowerCase().includes(search.toLowerCase()),
+  ).map(
+    (item) => ({ value: String(item.id), text: item.text }),
+  );
+
+  return Promise.resolve(data);
+}
+
+function settings(el) {
+  return {
+    settings: {
+      allowDeselect: true,
+    },
+    events: {
+      beforeOpen: () => {
+        if (Number(el.dataset.minimumInputLength) === 0) {
+          el.slim.search('');
+        }
+      },
+      afterChange: () => {
+        const { model, association } = el.dataset;
+        const child = el.closest('.nested_level')
+          .parentNode
+          .querySelector(`.nested_level [data-model=${model}][data-parent=${association}]`);
+
+        if (child) {
+          child.slim.setSelected();
+          child.slim.setData([]);
+          if (child.slim.events.afterChange) {
+            child.slim.events.afterChange();
+          }
+          child.dispatchEvent(new Event('change'));
+          child.dataset.parentId = el.value;
+        }
+      },
+      search(search, currentData) {
+        const args = {
+          url: el.dataset.url,
+          fields: el.dataset.fields && JSON.parse(el.dataset.fields) || {},
+          predicate: el.dataset.predicate,
+          filters: el.dataset.filters && JSON.parse(el.dataset.filters) || {},
+          displayName: el.dataset.displayName,
+          parent: el.dataset.parent,
+          parentId: el.dataset.parentId,
+          responseRoot: el.dataset.responseRoot,
+          minimumInputLength: el.dataset.minimumInputLength,
+          order: el.dataset.order,
+          textQuery: { m: 'or' },
+          query: { q: {} },
+        };
+
+        if (el.dataset.collection) {
+          return collectionSearch(search, args, el.dataset.collection);
+        }
+
+        return ajaxSearch(search, currentData, args);
+      },
+    },
+  };
+}
+
+export {
+  settings,
+  classes,
+};
+

data/app/javascript/activeadmin_addons/inputs/slim-select-search.js

@@ -0,0 +1,37 @@
+import { ransackSearch } from './slim-select-utils';
+
+const classes = ['search-select-input', 'search-select-filter-input', 'ajax-filter-input'];
+
+function settings(el) {
+  const url = el.dataset.url;
+  const fields = JSON.parse(el.dataset.fields);
+  const predicate = el.dataset.predicate;
+  const displayName = el.dataset.displayName;
+  const responseRoot = el.dataset.responseRoot;
+  const minimumInputLength = el.dataset.minimumInputLength;
+  const order = el.dataset.order;
+
+  const args = { url, fields, predicate, displayName, responseRoot, minimumInputLength, order };
+
+  return {
+    events: {
+      search: (search, currentData) => {
+        args.textQuery = { m: 'or' };
+        args.fields.forEach((field) => {
+          if (field === 'id') {
+            args.textQuery[`${field}_eq`] = search;
+          } else {
+            args.textQuery[`${field}_${args.predicate}`] = search;
+          }
+        });
+
+        return ransackSearch(search, currentData, args);
+      },
+    },
+  };
+}
+
+export {
+  settings,
+  classes,
+};

data/app/javascript/activeadmin_addons/inputs/slim-select-selected-list.js

@@ -0,0 +1,103 @@
+import { ransackSearch } from './slim-select-utils';
+
+const classes = ['selected-list-input'];
+
+// eslint-disable-next-line max-statements
+function settings(el) {
+  const url = el.dataset.url;
+  const fields = JSON.parse(el.dataset.fields);
+  const predicate = el.dataset.predicate;
+  const displayName = el.dataset.displayName;
+  const method = el.dataset.method;
+  const model = el.dataset.model;
+  const prefix = `${model}_${method}`;
+  const responseRoot = el.dataset.responseRoot;
+  const minimumInputLength = el.dataset.minimumInputLength;
+  const order = el.dataset.order;
+
+  const args = { url, fields, predicate, displayName, responseRoot, minimumInputLength, order };
+
+  return {
+    settings: {
+      allowDeselect: false,
+    },
+    events: {
+      // eslint-disable-next-line max-statements
+      afterChange: (newVal) => {
+        if (!newVal || newVal[0] && !newVal[0].value) return;
+
+        const selectedItemsContainer = document.querySelector(`[id='${prefix}_selected_values']`);
+        const itemName = `${model}[${method}][]`;
+
+        // eslint-disable-next-line max-statements
+        newVal.forEach((data) => {
+          const itemId = `${prefix}_${data.value}`;
+          if (!!document.querySelector(`#${itemId}`)) {
+            return;
+          }
+
+          const item = document.createElement('div');
+          item.id = itemId;
+          item.textContent = data.text;
+          item.classList.add('selected-item');
+
+          const hiddenInput = document.createElement('input');
+          hiddenInput.name = itemName;
+          hiddenInput.type = 'hidden';
+          hiddenInput.value = data.value;
+
+          item.appendChild(hiddenInput);
+          selectedItemsContainer.appendChild(item);
+        });
+        el.slim.setSelected();
+      },
+      search: (search, currentData) => {
+        args.textQuery = { m: 'or' };
+        args.fields.forEach((field) => {
+          args.textQuery[`${field}_${predicate}`] = search;
+        });
+
+        return ransackSearch(search, currentData, args);
+      },
+    },
+  };
+}
+
+function setupSelectedList(containerEl) {
+  containerEl.addEventListener('click', (event) => {
+    const item = event.target;
+    if (item.classList.contains('selected-item')) {
+      item.remove();
+    }
+  });
+}
+
+function setupSelectedLists(node) {
+  node.querySelectorAll('.selected-list-container').forEach(setupSelectedList);
+}
+
+function mutationObserver() {
+  return new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'childList') {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            setupSelectedLists(node);
+          }
+        });
+      }
+    });
+  });
+}
+
+function init() {
+  setupSelectedLists(document);
+  mutationObserver();
+}
+
+export {
+  settings,
+  classes,
+  init,
+};
+

data/app/javascript/activeadmin_addons/inputs/slim-select-simple-tags.js

@@ -0,0 +1,22 @@
+const classes = ['simple-tags-input'];
+
+function init(el) {
+  el.multiple = true;
+  if (!el.value) {
+    el.value = null;
+  }
+}
+
+function settings() {
+  return {
+    events: {
+      addable: (value) => value,
+    },
+  };
+}
+
+export {
+  classes,
+  init,
+  settings,
+};