activeadmin_addons 1.9.0 → 2.0.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31434452186d9b02e7d7272b27d06d1e4831b1c4c6de9c068e973cf5311da476
-  data.tar.gz: 0a43f7f1d45b50c01eeb4b4f7a56f5ff9bcb4329a24adb4f77fc1d1ca28fa0e7
+  metadata.gz: aed38304ff68795198eb34b4fb634a5f8e55143b4f159b04698d0852d32e36ef
+  data.tar.gz: 6c4637ae03b38a74d1d06831fea506de8d13a996002d1770a0d5d80372242906
 SHA512:
-  metadata.gz: 10db20adc03c85569ab16debe8edffd16115b348baf7779e79544fa42a265058cc60d3d24ac77dea5e85591297a6daeb2ede226141cb7dbb4e34d0776966462a
-  data.tar.gz: b911e25eeb0801b2bbe7857c012f4c93fa71a2bf77d574d552461e39cdedfcdd698673ed625a4034c749852f2d1b47e1387a7b7c0a4f754cdb3311c753beab6a
+  metadata.gz: 5c955ceb1fedfefd561237ba63e433b0013be0debad0750b70932e82141ae41c323c970041317720caed90cdff1820bda25d667cf00c4110d63fe6ebfcfbc3a1
+  data.tar.gz: d9522cb0cab4b42be862e0451efbba5156a5b85cde8a8dfddd359b613c21638b216eff53b5a4e899e9b4b4d6fbae614dc238d0c72b4a35266350743e70214b6a

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,6 +1,10 @@
 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

data/app/inputs/nested_level_input.rb

@@ -15,6 +15,7 @@ class NestedLevelInput < ActiveAdminAddons::InputBase
 
   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,7 +24,7 @@ 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")

data/app/inputs/search_select_input.rb

@@ -19,7 +19,7 @@ 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],

data/app/inputs/tags_input.rb

@@ -12,7 +12,7 @@ class TagsInput < ActiveAdminAddons::InputBase
   def load_control_attributes
     load_data_attr(:model, value: model_name)
     load_data_attr(:method, value: method)
-    load_data_attr(:width, default: "80%")
+    load_data_attr(:width)
 
     if active_record_select?
       load_data_attr(:relation, value: true)

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/addons/toggle_bool.js

@@ -36,4 +36,4 @@ var initializer = function() {
 };
 
 $(initializer);
-$(document).on('turbolinks:load', initializer);
+$(document).on('turbolinks:load turbo:load', initializer);

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', initializer);
+loadEvents.forEach((event) => {
+  document.addEventListener(event, initializer);
+});

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

@@ -13,4 +13,4 @@ var initializer = function() {
 };
 
 $(initializer);
-$(document).on('turbolinks:load', initializer);
+$(document).on('turbolinks:load turbo:load', initializer);

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

@@ -25,4 +25,4 @@ var initializer = function() {
 };
 
 $(initializer);
-$(document).on('turbolinks:load', initializer);
+$(document).on('turbolinks:load turbo:load', initializer);

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

@@ -0,0 +1,93 @@
+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}_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).map(
+    (item) => ({ value: String(item.id), text: item.text }),
+  ).filter(
+    (item) => String(item.text).toLowerCase().includes(search.toLowerCase()));
+
+  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}_id]`);
+
+        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,
+};

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

@@ -0,0 +1,67 @@
+const classes = ['tags-input'];
+
+// eslint-disable-next-line max-statements
+function settings(el) {
+  const model = el.dataset.model;
+  const method = el.dataset.method;
+  const prefix = `${model}_${method}`;
+  const isRelation = el.dataset.relation === 'true';
+  const collection = el.dataset.collection ? JSON.parse(el.dataset.collection) : null;
+
+  const parsedCollection = collection && collection.map((item) => {
+    const { id, ...rest } = item;
+
+    return { ...rest, value: id, selected: !!item.selected };
+  });
+
+  function fillHiddenInput(values) {
+    const hiddenInput = document.querySelector(`#${prefix}`);
+    hiddenInput.value = values.map(val => val.value).join();
+  }
+
+  const events = {
+    afterChange: (newVal) => {
+      if (isRelation) {
+        const selectedItemsContainer = document.querySelector(`#${prefix}_selected_values`);
+        const itemName = `${model}[${method}][]`;
+        selectedItemsContainer.innerHTML = '';
+
+        newVal.forEach((data) => {
+          const itemId = `${prefix}_${data.value}`;
+          if (document.querySelectorAll(`#${itemId}`).length > 0) {
+            return;
+          }
+
+          const hiddenInput = document.createElement('input');
+          hiddenInput.id = itemId;
+          hiddenInput.name = itemName;
+          hiddenInput.value = data.value;
+          hiddenInput.type = 'hidden';
+
+          selectedItemsContainer.appendChild(hiddenInput);
+        });
+      } else {
+        fillHiddenInput(newVal);
+      }
+    },
+  };
+
+  if (!isRelation) {
+    events.addable = (value) => value;
+  }
+
+  return {
+    data: parsedCollection,
+    events,
+  };
+}
+
+function init(el) {
+  el.multiple = true;
+}
+
+export {
+  settings,
+  classes,
+  init,
+};

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

@@ -0,0 +1,70 @@
+import merge from 'lodash.merge';
+
+function parseObjectToQuery(obj, prefix) {
+  let queryArray = [];
+  Object.keys(obj).forEach(key => {
+    const value = obj[key];
+    const prefixedKey = prefix ? `${prefix}[${key}]` : key;
+    if (Array.isArray(value)) {
+      value.forEach((v, i) => {
+        queryArray = [...queryArray, parseObjectToQuery(v, `${prefixedKey}[${i}]`)];
+      });
+    } else if (typeof value === 'object') {
+      queryArray = [...queryArray, parseObjectToQuery(value, prefixedKey)];
+    } else {
+      queryArray.push(`${prefixedKey}=${encodeURIComponent(value)}`);
+    }
+  });
+
+  return queryArray.join('&');
+}
+
+export function ransackSearch(search, currentData, settings) {
+  return new Promise((resolve, reject) => {
+    if (search.length < settings.minimumInputLength) {
+      reject(`Please enter ${settings.minimumInputLength} or more characters`);
+    }
+
+    const defaultQuery = {
+      order: settings.order,
+      q: {
+        groupings: [settings.textQuery],
+        combinator: 'and',
+      },
+    };
+
+    const finalQuery = merge({}, defaultQuery, settings.query);
+    const csrfTokenEl = document.querySelector('meta[name="csrf-token"]');
+    const csrfToken = csrfTokenEl ? csrfTokenEl.getAttribute('content') : null;
+
+    const queryString = parseObjectToQuery(finalQuery);
+    fetch(`${settings.url}?${queryString}`, {
+      method: 'GET',
+      headers: {
+        'X-CSRF-TOKEN': csrfToken,
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((response) => response.json())
+      .then((res) => {
+        let data = res;
+        if (data.constructor === Object) {
+          data = data[settings.responseRoot];
+        }
+
+        const options = data.map(resource => {
+          if (!resource[settings.displayName]) {
+            resource[settings.displayName] = `No display name for id #${resource.id.toString()}`;
+          }
+
+          return {
+            value: resource.id,
+            text: resource[settings.displayName],
+          };
+        });
+
+        resolve(options);
+      });
+  });
+}