activeadmin_dynamic_fields 0.4.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf72bdd2f498f04dd656b044b1b711cd1e4962ad98d9190807ac9b4bfa423ba0
-  data.tar.gz: 036c3c43e6b00ed99b900f21216b824b00dccbf3a3d871cdfa331080f30eceb3
+  metadata.gz: 04dad08d3de4d4cfd25de86ec9a07e3010e081afc8481b513e85103026863869
+  data.tar.gz: 193871cc16015051ae231a3894c6dbf3fa71f043156fcfac7162bc830380e92c
 SHA512:
-  metadata.gz: 94007fc44295a8e251f011ef78884c31a03904e53d264bc9b5aa716645c268a0c3a7343f75b0831f790a36b14f1dcdb03ea6a87fb8e819accb36b871c5617f14
-  data.tar.gz: bc6beec26ce12eb2f40c70cc8b9fd12f3cdd416ecf735380fd77343d395e7e7b3f2665cfc2fed8a8339651dcbc12db1eaaae3ce7c6019b5cf6bdf133c4390e31
+  metadata.gz: ed3de892e2f3e225bfc875c37906dfca703c1769413c631f20caf8a1fcded149c9560cf523c50f3e56ff60cca02622061c5fe8185a09d8bd081963d3674ee9ed
+  data.tar.gz: 70e75c688f0b2c8448e23f747752202288c89abf9ab7b4c5b11a1c4de1d92c3c18ff1e029e2e7728f5333bf76c2cc4ad54c0ca5b76402b33e698a83e448b410a

data/README.md

@@ -1,8 +1,9 @@
-# ActiveAdmin Dynamic Fields [![Gem Version](https://badge.fury.io/rb/activeadmin_dynamic_fields.svg)](https://badge.fury.io/rb/activeadmin_dynamic_fields) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_dynamic_fields.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_dynamic_fields)
+# ActiveAdmin Dynamic Fields [![Gem Version](https://badge.fury.io/rb/activeadmin_dynamic_fields.svg)](https://badge.fury.io/rb/activeadmin_dynamic_fields) [![Gem downloads](https://badgen.net/rubygems/dt/activeadmin_dynamic_fields)](https://rubygems.org/gems/activeadmin_dynamic_fields) [![Specs](https://github.com/blocknotes/activeadmin_dynamic_fields/actions/workflows/specs.yml/badge.svg)](https://github.com/blocknotes/activeadmin_dynamic_fields/actions/workflows/specs.yml)
 
 An Active Admin plugin to add dynamic behaviors to some fields.
 
 Features:
+
 - set conditional checks on fields
 - trigger actions on target elements
 - inline field editing
@@ -10,41 +11,67 @@ Features:
 
 The easiest way to show how this plugin works is looking the examples [below](#examples).
 
+Please :star: if you like it.
+
 ## Install
-- Add to your Gemfile: `gem 'activeadmin_dynamic_fields'`
-- Execute bundle
-- Add at the end of your ActiveAdmin javascripts (_app/assets/javascripts/active_admin.js_):
+
+First, add the gem to your ActiveAdmin project: `gem 'activeadmin_dynamic_fields'` (and execute `bundle`)
+
+If you installed Active Admin **without Webpacker** support:
+- add at the end of your ActiveAdmin javascripts (_app/assets/javascripts/active_admin.js_):
 
 ```js
 //= require activeadmin/dynamic_fields
 ```
 
+Otherwise **with Webpacker**:
+
+- Execute in your project root:
+
+```sh
+yarn add blocknotes/activeadmin_dynamic_fields
+```
+
+- Add to your *app/javascript/packs/active_admin.js*:
+
+```js
+require('activeadmin_dynamic_fields')
+```
+
 ## Options
+
 Options are passed to fields using *input_html* parameter as *data* attributes.
 
 Conditions:
+
 - **data-if**: check a condition, values:
-  + **checked**: check if a checkbox is checked
+  + **checked**: check if a checkbox is checked (ex. `"data-if": "checked"`)
   + **not_checked**: check if a checkbox is not checked
   + **blank**: check if a field is blank
   + **not_blank**: check if a field is not blank
   + **changed**: check if the value of an input is changed (dirty)
-- **data-eq**: check if a field has a specific value
-- **data-not**: check if a field hasn't a specific value
-- **data-function**: check the return value of a custom function
+- **data-eq**: check if a field has a specific value (ex. `"data-eq": "42"`)
+- **data-not**: check if a field has not a specific value
+- **data-match**: check if a field match a regexp
+- **data-mismatch**: check if a field doesn't match a regexp (ex. `"data-mismatch": "^\d+$"`)
+- **data-function**: check the return value of a custom function (ex. `"data-function": "my_check"`)
 
 Actions:
+
 - **data-then**: action to trigger (alias **data-action**), values:
-  + **hide**: hides elements
+  + **hide**: hides elements (ex. `"data-then": "hide", "data-target": ".errors"`)
   + **slide**: hides elements (using sliding)
   + **fade**: hides elements (using fading)
-  + **addClass**: adds classes
-  + **setValue**: set a value
-  + **callback**: call a function (with arguments: **data-args**)
+  + **addClass**: adds classes (ex. `"data-then": "addClass red"`)
+  + **addStyle**: adds some styles (ex. `"data-then": "addStyle color: #fb1; font-size: 12px"`)
+  + **setText**: set the text of an element (ex. `"data-then": "setText A sample text"`)
+  + **setValue**: set the value of an input element (ex. `"data-then": "setValue A sample value"`)
+  + **callback**: call a function (with arguments: **data-args**) (ex. `"data-then": "callback a_fun"`)
 - **data-else**: action to trigger when the condition check is not true
 - **data-args**: arguments passed to the callback function
 
 Targets:
+
 - **data-target**: target css selector (from parent fieldset, look for the closest match)
 - **data-gtarget**: target css selector globally
 
@@ -53,6 +80,7 @@ A check condition or a custom check function are required. A trigger action is r
 ## Examples
 
 ### Dynamic fields examples
+
 - A checkbox that hides other fields if is checked (ex. model *Article*):
 
 ```rb
@@ -124,6 +152,7 @@ function on_change_category(el) {
 ```
 
 ### Inline editing examples
+
 - Prepare a custom member action to save data, an *update* helper function is available (third parameter is optional, allow to filter using strong parameters):
 
 ```rb
@@ -161,6 +190,7 @@ end
 ```
 
 ### Dialog example
+
 Example with 2 models: *Author* and *Article*
 
 Prepare the content dialog - in Active Admin Author config:
@@ -204,13 +234,16 @@ end
 The link url is loaded via AJAX before opening the dialog.
 
 ## Do you like it? Star it!
-If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 
-Take a look at [other ActiveAdmin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
+If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other [Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
+
+Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
 
 ## Contributors
+
 - [Mattia Roccoberton](http://blocknot.es): author
 - The good guys that opened issues and pull requests from time to time
 
 ## License
+
 The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

data/Rakefile

@@ -1,3 +1,16 @@
 # frozen_string_literal: true
 
-require "bundler/gem_tasks"
+require 'bundler/gem_tasks'
+
+begin
+  require 'rspec/core/rake_task'
+
+  RSpec::Core::RakeTask.new(:spec) do |t|
+    # t.ruby_opts = %w[-w]
+    t.rspec_opts = ['--color', '--format documentation']
+  end
+
+  task default: :spec
+rescue LoadError
+  puts '! LoadError: no RSpec available'
+end

data/app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -1,10 +1,19 @@
 (function () {
   'use strict'
 
+  // noinspection JSUnusedGlobalSymbols
   const ACTIONS = {
     addClass: (el, name) => el.addClass(name),
+    addStyle: (el, extra_style) => {
+      let style = (el.attr('style') || '').trim()
+      if (!style.includes(extra_style)) {
+        if (style) style = style.replace(/;$/, '') + '; ' // ensure style ends with ;
+        el.attr('style', `${style}${extra_style}`)
+      }
+    },
     callback: (el, name) => {
-      if (window[name]) window[name](el.data('args'))
+      const cb_function = window.hasOwnProperty(name) ? window[name] : null
+      if (typeof cb_function === 'function') cb_function(el.data('args'))
       else {
         el.attr('data-df-errors', 'callback function not found')
         console.warn(`activeadmin_dynamic_fields callback function not found: ${name}`)
@@ -12,19 +21,23 @@
     },
     fade: el => el.fadeOut(),
     hide: el => el.hide(),
+    setText: (el, text) => el.text(text),
     setValue: (el, value) => {
-      if (el.attr('type') == 'checkbox') el.prop('checked', value == '1')
+      if (el.attr('type') === 'checkbox') el.prop('checked', value === '1')
       else el.val(value)
       el.trigger('change')
     },
     slide: el => el.slideUp()
   }
 
+  // noinspection EqualityComparisonWithCoercionJS, JSUnusedGlobalSymbols
   const CONDITIONS = {
     blank: el => el.val().length === 0 || !el.val().trim(),
     changed: _el => true,
     checked: el => el.is(':checked'),
     eq: (el, value) => el.val() == value,
+    match: (el, regexp) => regexp.test(el.val()),
+    mismatch: (el, regexp) => !regexp.test(el.val()),
     not: (el, value) => el.val() != value,
     not_blank: el => el.val().trim(),
     not_checked: el => !el.is(':checked')
@@ -32,6 +45,9 @@
 
   const REVERSE_ACTIONS = {
     addClass: (el, name) => el.removeClass(name),
+    addStyle: (el, extra_style) => {
+      if(el.attr('style')) el.attr('style', el.attr('style').replace(extra_style, ''))
+    },
     fade: el => el.fadeIn(),
     hide: el => el.show(),
     slide: el => el.slideDown()
@@ -39,74 +55,98 @@
 
   class Field {
     constructor(el) {
-      const action = el.data('then') || el.data('action') || ''
+      this.el = el
+      const action_name = this.evaluateAction()
+      const result = this.evaluateCondition()
+      this.condition = result.condition
+      this.condition_arg = result.condition_arg
+      this.evaluateTarget(action_name)
+    }
+
+    apply() {
+      if (this.condition(this.el, this.condition_arg)) {
+        if (this.else_reverse_action) this.else_reverse_action(this.target, this.else_action_arg)
+        this.action(this.target, this.action_arg)
+      }
+      else {
+        if (this.reverse_action) this.reverse_action(this.target, this.action_arg)
+        if (this.else_action) this.else_action(this.target, this.else_action_arg)
+      }
+    }
+
+    evaluateAction() {
+      const action = this.el.data('then') || this.el.data('action') || ''
       const action_name = action.split(' ', 1)[0]
-      const else_action = el.data('else') || ''
+      const else_action = this.el.data('else') || ''
       const else_action_name = else_action.split(' ', 1)[0]
 
-      this.el = el
       this.action = ACTIONS[action_name]
       this.action_arg = action.substring(action.indexOf(' ') + 1)
       this.reverse_action = REVERSE_ACTIONS[action_name]
       this.else_action = ACTIONS[else_action_name]
       this.else_action_arg = else_action.substring(else_action.indexOf(' ') + 1)
       this.else_reverse_action = REVERSE_ACTIONS[else_action_name]
-      this.condition = CONDITIONS[el.data('if')]
-      if (!this.condition && el.data('eq')) {
-        [this.condition, this.condition_arg] = [CONDITIONS['eq'], el.data('eq')]
-      }
-      if (!this.condition && el.data('not')) {
-        [this.condition, this.condition_arg] = [CONDITIONS['not'], el.data('not')]
-      }
-      this.custom_function = el.data('function')
-      if (!this.condition && this.custom_function) {
-        this.condition = window[this.custom_function]
-        if (!this.condition) {
-          el.attr('data-df-errors', 'custom function not found')
+
+      return action_name
+    }
+
+    evaluateCondition() {
+      let value = CONDITIONS[this.el.data('if')?.trim()]
+      if (value) return { condition: value }
+
+      value = this.el.data('eq')
+      if (value) return { condition: CONDITIONS['eq'], condition_arg: value }
+
+      value = this.el.data('not')
+      if (value) return { condition: CONDITIONS['not'], condition_arg: value }
+
+      value = this.el.data('match')
+      if (value) return { condition: CONDITIONS['match'], condition_arg: new RegExp(value) }
+
+      value = this.el.data('mismatch')
+      if (value) return { condition: CONDITIONS['mismatch'], condition_arg: new RegExp(value) }
+
+      this.custom_function = this.el.data('function')
+      if (this.custom_function) {
+        value = window[this.custom_function]
+        if (value) return { condition: value }
+        else {
+          this.el.attr('data-df-errors', 'custom function not found')
           console.warn(`activeadmin_dynamic_fields custom function not found: ${this.custom_function}`)
         }
       }
 
-      // closest find for has many associations
-      if (el.data('target')) this.target = el.closest('fieldset').find(el.data('target'))
-      else if (el.data('gtarget')) this.target = $(el.data('gtarget'))
-      if (action_name == 'callback') this.target = el
+      return {}
     }
 
-    apply(el) {
-      if (this.condition(el, this.condition_arg)) {
-        if (this.else_reverse_action) this.else_reverse_action(this.target, this.else_action_arg)
-        this.action(this.target, this.action_arg)
-      }
-      else {
-        if (this.reverse_action) this.reverse_action(this.target, this.action_arg)
-        if (this.else_action) this.else_action(this.target, this.else_action_arg)
-      }
+    evaluateTarget(action_name) {
+      // closest find for has many associations
+      if (this.el.data('target')) this.target = this.el.closest('fieldset').find(this.el.data('target'))
+      else if (this.el.data('gtarget')) this.target = $(this.el.data('gtarget'))
+      if (action_name === 'callback') this.target = this.el
     }
 
-    is_valid() {
+    isValid() {
       if (!this.condition) return false
-      if (!this.action && !this.custom_function) return false
-
-      return true
+      return (this.action || this.custom_function)
     }
 
     setup() {
-      if (!this.is_valid()) return
-      if (this.el.data('if') != 'changed') this.apply(this.el)
-      this.el.on('change', () => this.apply(this.el))  
+      if (!this.isValid()) return
+      if (this.el.data('if') !== 'changed') this.apply()
+      this.el.on('change', () => this.apply())  
     }
   }
 
-  // Inline update - must be called binded on the editing element
+  // Inline update - must be called bound on the editing element
   function dfUpdateField() {
-    if ($(this).data('loading') != '1') {
+    if ($(this).data('loading') !== '1') {
       $(this).data('loading', '1');
       let _this = $(this);
       let type = $(this).data('field-type');
       let new_value;
-      if (type == 'boolean') new_value = !$(this).data('field-value');
-      else if (type == 'select') new_value = $(this).val();
+      if (type === 'boolean') new_value = !$(this).data('field-value');
+      else if (type === 'select') new_value = $(this).val();
       else new_value = $(this).text();
       let data = {};
       data[$(this).data('field')] = new_value;
@@ -115,16 +155,16 @@
         data: { data: data },
         method: 'POST',
         url: $(this).data('save-url'),
-        complete: function (req, status) {
+        complete: function (_req, _status) {
           $(this).data('loading', '0');
         },
-        success: function (data, status, req) {
-          if (data.status == 'error') {
+        success: function (data, _status, _req) {
+          if (data.status === 'error') {
             if ($(this).data('show-errors')) {
               let result = '';
               let message = data.message;
               for (let key in message) {
-                if (typeof (message[key]) === 'object') {
+                if (message.hasOwnProperty(key) && typeof (message[key]) === 'object') {
                   if (result) result += ' - ';
                   result += key + ': ' + message[key].join('; ');
                 }
@@ -150,10 +190,9 @@
     }
   }
 
-  // Init
-  $(document).ready(function () {
+  function dfInit() {
     // Setup dynamic fields
-    const selectors = '.active_admin .input [data-if], .active_admin .input [data-eq], .active_admin .input [data-not], .active_admin .input [data-function]'
+    const selectors = '.active_admin .input [data-if], .active_admin .input [data-eq], .active_admin .input [data-not], .active_admin .input [data-match], .active_admin .input [data-mismatch], .active_admin .input [data-function]'
     $(selectors).each(function () {
       new Field($(this)).setup()
     })
@@ -174,20 +213,23 @@
     $('.active_admin [data-df-dialog]').on('click', function (event) {
       event.preventDefault()
       $(this).blur()
-      if ($('#df-dialog').data('loading') != '1') {
-        $('#df-dialog').data('loading', '1')
-        if ($('#df-dialog').length == 0) $('body').append('<div id="df-dialog"></div>')
+      const df_dialog = $('#df-dialog')
+
+      if (df_dialog.data('loading') !== '1') {
+        df_dialog.data('loading', '1')
+        if (df_dialog.length === 0) $('body').append('<div id="df-dialog"></div>')
         let title = $(this).attr('title')
         $.ajax({
           url: $(this).attr('href'),
-          complete: function (req, status) {
+          complete: function (_req, _status) {
             $('#df-dialog').data('loading', '0')
           },
-          success: function (data, status, req) {
-            if (title) $('#df-dialog').attr('title', title)
-            $('#df-dialog').html(data)
-            $('#df-dialog').dialog({ modal: true })
-          },
+          success: function (data, _status, _req) {
+            const dialog = $('#df-dialog')
+            if (title) dialog.attr('title', title)
+            dialog.html(data)
+            dialog.dialog({ modal: true })
+          }
         })
       }
     })
@@ -200,11 +242,14 @@
       $(this).data('field-value', $(this).text())
       let fnUpdate = $.proxy(dfUpdateField, $(this))
       $(this).on('blur', function () {
-        if ($(this).data('field-value') != $(this).text()) fnUpdate()
+        if ($(this).data('field-value') !== $(this).text()) fnUpdate()
       })
     })
     $('[data-field][data-field-type="select"][data-save-url]').each(function () {
       $(this).on('change', $.proxy(dfUpdateField, $(this)))
     })
-  })
+  }
+
+  $(document).ready(dfInit)
+  $(document).on('turbolinks:load', dfInit)
 })()

data/lib/activeadmin/dynamic_fields/version.rb

@@ -2,6 +2,6 @@
 
 module ActiveAdmin
   module DynamicFields
-    VERSION = '0.4.0'
+    VERSION = '0.6.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_dynamic_fields
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-22 00:00:00.000000000 Z
+date: 2021-05-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -24,132 +24,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
-- !ruby/object:Gem::Dependency
-  name: activestorage
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 6.0.3.2
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 6.0.3.2
-- !ruby/object:Gem::Dependency
-  name: capybara
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 3.33.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 3.33.0
-- !ruby/object:Gem::Dependency
-  name: pry
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.13.1
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.13.1
-- !ruby/object:Gem::Dependency
-  name: puma
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.3.5
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.3.5
-- !ruby/object:Gem::Dependency
-  name: rspec_junit_formatter
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.1
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.1
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.0.1
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.0.1
-- !ruby/object:Gem::Dependency
-  name: rubocop
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.90.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.90.0
-- !ruby/object:Gem::Dependency
-  name: selenium-webdriver
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 3.142.7
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 3.142.7
-- !ruby/object:Gem::Dependency
-  name: sqlite3
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.4.2
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.4.2
 description: An Active Admin plugin to add dynamic behaviors to fields
 email: mat@blocknot.es
 executables: []
@@ -183,7 +57,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Dynamic fields for ActiveAdmin