New feature: add match/mismatch condition checks

Author: blocknotes

README.md

@@ -31,6 +31,8 @@ Conditions:
   + **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-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:

app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -33,6 +33,8 @@
     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')
@@ -69,6 +71,12 @@
       if (!this.condition && el.data('not')) {
         [this.condition, this.condition_arg] = [CONDITIONS['not'], el.data('not')]
       }
+      if (!this.condition && el.data('match')) {
+        [this.condition, this.condition_arg] = [CONDITIONS['match'], new RegExp(el.data('match'))]
+      }
+      if (!this.condition && el.data('mismatch')) {
+        [this.condition, this.condition_arg] = [CONDITIONS['mismatch'], new RegExp(el.data('mismatch'))]
+      }
       this.custom_function = el.data('function')
       if (!this.condition && this.custom_function) {
         this.condition = window[this.custom_function]
@@ -164,7 +172,7 @@
   // Init
   $(document).ready(function () {
     // 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()
     })

spec/dummy/app/admin/posts.rb

@@ -89,14 +89,22 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
       add_field(f, :data_field_163, :text, df163)
 
       # --- not
-      df181 = { not: '181', then: 'addClass red', target: '#post_data_field_181_input label' }
-      add_field(f, :data_field_181, :string, df181)
+      df171 = { not: '171', then: 'addClass red', target: '#post_data_field_171_input label' }
+      add_field(f, :data_field_171, :string, df171)
+
+      df172 = { not: '172', then: 'addClass red', target: '#post_data_field_172_input label' }
+      add_field(f, :data_field_172, :select, df172, collection: [171, 172, 173])
 
-      df182 = { not: '182', then: 'addClass red', target: '#post_data_field_182_input label' }
-      add_field(f, :data_field_182, :select, df182, collection: [181, 182, 183])
+      df173 = { not: '173', then: 'addClass red', target: '#post_data_field_173_input label' }
+      add_field(f, :data_field_173, :text, df173)
+
+      # --- match
+      df181 = { match: 'Something\s', then: 'addClass red', target: '#post_data_field_181_input label' }
+      add_field(f, :data_field_181, :string, df181)
 
-      df183 = { not: '183', then: 'addClass red', target: '#post_data_field_183_input label' }
-      add_field(f, :data_field_183, :text, df183)
+      # --- mismatch
+      df191 = { mismatch: '^\d+$', then: 'addClass red', target: '#post_data_field_191_input label' }
+      add_field(f, :data_field_191, :string, df191)
 
       # --- function
       df201 = { function: 'test_fun', then: 'addClass red', target: '#post_data_field_201_input label' }

spec/system/dynamic_fields_spec.rb

@@ -73,19 +73,31 @@
       expect(page).to have_css('#post_data_field_163_input label.red')
 
       # --- not
-      expect(page).to have_css('#post_data_field_181_input label.red')
-      fill_in('post_data_field_181', with: '181')
+      expect(page).to have_css('#post_data_field_171_input label.red')
+      fill_in('post_data_field_171', with: '171')
       find('body').click
-      expect(page).not_to have_css('#post_data_field_181_input label.red')
+      expect(page).not_to have_css('#post_data_field_171_input label.red')
+
+      expect(page).to have_css('#post_data_field_172_input label.red')
+      select('172', from: 'post_data_field_172')
+      expect(page).not_to have_css('#post_data_field_172_input label.red')
+
+      expect(page).to have_css('#post_data_field_173_input label.red')
+      fill_in('post_data_field_173', with: '173')
+      find('body').click
+      expect(page).not_to have_css('#post_data_field_173_input label.red')
 
-      expect(page).to have_css('#post_data_field_182_input label.red')
-      select('182', from: 'post_data_field_182')
-      expect(page).not_to have_css('#post_data_field_182_input label.red')
+      # --- match
+      expect(page).not_to have_css('#post_data_field_181_input label.red')
+      fill_in('post_data_field_181', with: ' Something new ...')
+      find('body').click
+      expect(page).to have_css('#post_data_field_181_input label.red')
 
-      expect(page).to have_css('#post_data_field_183_input label.red')
-      fill_in('post_data_field_183', with: '183')
+      # --- mismatch
+      expect(page).to have_css('#post_data_field_191_input label.red')
+      fill_in('post_data_field_191', with: '1234')
       find('body').click
-      expect(page).not_to have_css('#post_data_field_183_input label.red')
+      expect(page).not_to have_css('#post_data_field_191_input label.red')
 
       # --- function
       expect(page).not_to have_css('#post_data_field_201_input label.red')