Not operator

README.md

@@ -47,12 +47,12 @@ Conditions:
 
 - **data-if**: check a condition, values:
   + **checked**: check if a checkbox is checked (ex. `"data-if": "checked"`)
-  + **not_checked**: check if a checkbox is not checked
+  + **not_checked**: check if a checkbox is not checked (equivalent to `"data-if": "!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 (ex. `"data-eq": "42"`)
-- **data-not**: check if a field has not a specific value
+- **data-eq**: check if a field has a specific value (ex. `"data-eq": "42"` or `"data-eq": "!5"`)
+- **data-not**: check if a field has not a specific value (equivalent to `"data-eq": "!something"`)
 - **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"`)

app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -39,8 +39,8 @@
     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')
+    not_blank: el => !CONDITIONS.blank(el),
+    not_checked: el => !CONDITIONS.checked(el)
   }
 
   const REVERSE_ACTIONS = {
@@ -53,6 +53,8 @@
     slide: el => el.slideDown()
   }
 
+  const REGEXP_NOT = /^!\s*/
+
   class Field {
     constructor(el) {
       this.el = el
@@ -91,21 +93,29 @@
     }
 
     evaluateCondition() {
-      let data_if = this.el.data('if')
-      let value = data_if ? CONDITIONS[data_if.trim()] : null
-      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) }
+      let value
+      if (value = this.el.data('if')) {
+        if (REGEXP_NOT.test(value)) value = 'not_' + value.replace(REGEXP_NOT, '')
+        return { condition: CONDITIONS[value] }
+      }
+      if (value = this.el.data('eq')) {
+        if (REGEXP_NOT.test(value)) {
+          return { condition: CONDITIONS['not'], condition_arg: value.replace(REGEXP_NOT, '') }
+        }
+        return { condition: CONDITIONS['eq'], condition_arg: value }
+      }
+      if (value = this.el.data('not')) {
+        if (REGEXP_NOT.test(value)) {
+          return { condition: CONDITIONS['eq'], condition_arg: value.replace(REGEXP_NOT, '') }
+        }
+        return { condition: CONDITIONS['not'], condition_arg: value }
+      }
+      if (value = this.el.data('match')) {
+        return { condition: CONDITIONS['match'], condition_arg: new RegExp(value) }
+      }
+      if (value = this.el.data('mismatch')) {
+        return { condition: CONDITIONS['mismatch'], condition_arg: new RegExp(value) }
+      }
 
       this.custom_function = this.el.data('function')
       if (this.custom_function) {

spec/dummy/app/admin/posts.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-ActiveAdmin.register Post do # rubocop:disable Metrics/BlockLength
+ActiveAdmin.register Post do
   permit_params :author_id, :title, :description, :category, :dt, :position, :published, tag_ids: []
 
   member_action :save, method: [:post] do
@@ -54,6 +54,9 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
       df111 = { if: 'checked', then: 'addClass red', target: '#post_data_field_111_input label' }
       add_field(f, :data_field_111, :boolean, df111)
 
+      df112 = { if: '!checked', then: 'addClass red', target: '#post_data_field_112_input label' }
+      add_field(f, :data_field_112, :boolean, df112)
+
       df121 = { if: 'not_checked', then: 'addClass red', target: '#post_data_field_121_input label' }
       add_field(f, :data_field_121, :boolean, df121)
 
@@ -88,6 +91,9 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
       df163 = { eq: '163', then: 'addClass red', target: '#post_data_field_163_input label' }
       add_field(f, :data_field_163, :text, df163)
 
+      df164 = { eq: '!164', then: 'addClass red', target: '#post_data_field_164_input label' }
+      add_field(f, :data_field_164, :string, df164)
+
       # --- not
       df171 = { not: '171', then: 'addClass red', target: '#post_data_field_171_input label' }
       add_field(f, :data_field_171, :string, df171)

spec/system/dynamic_fields_spec.rb

@@ -74,7 +74,7 @@ def test_change_css(target, attrs1, attrs2, options = {})
       # --- if
       spec_message('check data-if condition')
       test_set_css('#post_data_field_111_input label.red', action: [:click, '#post_data_field_111'])
-      # test_unset_css('#post_data_field_112_input label.red', action: [:click, '#post_data_field_112'])
+      test_unset_css('#post_data_field_112_input label.red', action: [:click, '#post_data_field_112'])
       test_unset_css('#post_data_field_121_input label.red', action: [:click, '#post_data_field_121'])
       test_unset_css('#post_data_field_131_input label.red', action: [:fill, 'post_data_field_131', 'something'])
       test_unset_css('#post_data_field_132_input label.red', action: [:fill, 'post_data_field_132', 'something'])
@@ -91,7 +91,7 @@ def test_change_css(target, attrs1, attrs2, options = {})
       test_set_css('#post_data_field_161_input label.red', action: [:fill, 'post_data_field_161', '161'])
       test_set_css('#post_data_field_162_input label.red', action: [:select, 'post_data_field_162', '162'])
       test_set_css('#post_data_field_163_input label.red', action: [:fill, 'post_data_field_163', '163'])
-      # test_unset_css('#post_data_field_164_input label.red', action: [:fill, 'post_data_field_164', '164'])
+      test_unset_css('#post_data_field_164_input label.red', action: [:fill, 'post_data_field_164', '164'])
 
       # --- not
       spec_message('check data-not condition')