Skip to content

Commit 9e83c83

Browse files
blocknotesMattia Roccoberton
blocknotes
authored and
Mattia Roccoberton
committed
Use args attribute for actions' arguments
1 parent 4bc3e5e commit 9e83c83

File tree

5 files changed

+74
-69
lines changed

5 files changed

+74
-69
lines changed

Diff for: ‎README.md

+21-23
Original file line numberDiff line numberDiff line change
@@ -41,35 +41,36 @@ require('activeadmin_dynamic_fields')
4141

4242
## Options
4343

44-
Options are passed to fields using *input_html* parameter as *data* attributes.
44+
Options are passed to form fields via *data* attributes (in *input_html* parameter).
4545

4646
Conditions:
4747

4848
- **data-if**: check a condition, values:
49-
+ **checked**: check if a checkbox is checked (ex. `"data-if": "checked"`)
50-
+ **not_checked**: check if a checkbox is not checked (equivalent to `"data-if": "!checked"`)
49+
+ **checked**: check if a checkbox is checked (ex. `data: { if: "checked" }`)
50+
+ **not_checked**: check if a checkbox is not checked (equivalent to `data: { if: "!checked" }`)
5151
+ **blank**: check if a field is blank
5252
+ **not_blank**: check if a field is not blank
5353
+ **changed**: check if the value of an input is changed (dirty)
54-
- **data-eq**: check if a field has a specific value (ex. `"data-eq": "42"` or `"data-eq": "!5"`)
55-
- **data-not**: check if a field has not a specific value (equivalent to `"data-eq": "!something"`)
54+
- **data-eq**: check if a field has a specific value (ex. `data: { eq: "42" }` or `data: { eq: "!5" }`)
55+
- **data-not**: check if a field has not a specific value (equivalent to `data: { eq: "!something" }`)
5656
- **data-match**: check if a field match a regexp
57-
- **data-mismatch**: check if a field doesn't match a regexp (ex. `"data-mismatch": "^\d+$"`)
58-
- **data-function**: check the return value of a custom function (ex. `"data-function": "my_check"`)
57+
- **data-mismatch**: check if a field doesn't match a regexp (ex. `data: { mismatch: "^\d+$" }`)
58+
- **data-function**: check the return value of a custom function (ex. `data: { function: "my_check" }`)
5959

6060
Actions:
6161

6262
- **data-then**: action to trigger (alias **data-action**), values:
63-
+ **hide**: hides elements (ex. `"data-then": "hide", "data-target": ".errors"`)
63+
+ **hide**: hides elements (ex. `data: { then: "hide", target: ".errors" }`)
6464
+ **slide**: hides elements (using sliding)
6565
+ **fade**: hides elements (using fading)
66-
+ **addClass**: adds classes (ex. `"data-then": "addClass red"`)
67-
+ **addStyle**: adds some styles (ex. `"data-then": "addStyle color: #fb1; font-size: 12px"`)
68-
+ **setText**: set the text of an element (ex. `"data-then": "setText A sample text"`)
69-
+ **setValue**: set the value of an input element (ex. `"data-then": "setValue A sample value"`)
70-
+ **callback**: call a function (with arguments: **data-args**) (ex. `"data-then": "callback a_fun"`)
71-
- **data-else**: action to trigger when the condition check is not true
72-
- **data-args**: arguments passed to the callback function
66+
+ **addClass**: adds classes (ex. `data: { then: "addClass", args: "red", target: "#something"}`)
67+
+ **addStyle**: adds some styles (ex. `data: { then: "addStyle", args: "color: #fb1; font-size: 12px" }`)
68+
+ **setText**: set the text of an element (ex. `data: { then: "setText", args: "A sample text" }`)
69+
+ **setValue**: set the value of an input element (ex. `data: { then: "setValue", args: "A sample value" }`)
70+
+ **callback**: call a function (with arguments: **data-args**) (ex. `data: { then: "callback" }`)
71+
- **data-args**: extra arguments for the action, for callback action this parameter is the name of the JS function to call
72+
- **data-else**: action to trigger when the condition check is not true (ex. `data: { else: "fade" }`)
73+
- **data-else-args**: extra arguments for the else action (ex. `data: { else: "addClass", else_args: "red" }`)
7374

7475
Targets:
7576

@@ -98,14 +99,14 @@ end
9899
- Add 3 classes (*first*, *second*, *third*) if a checkbox is not checked, else add "forth" class:
99100

100101
```rb
101-
data = { if: 'not_checked', then: 'addClass first second third', target: '.grp1', else: 'addClass forth' }
102+
data = { if: 'not_checked', then: 'addClass', args: 'first second third', target: '.grp1', else: 'addClass', elseArgs: 'forth' }
102103
f.input :published, input_html: { data: data }
103104
```
104105

105106
- Set another field value if a string field is blank:
106107

107108
```rb
108-
f.input :title, input_html: { data: { if: 'blank', then: 'setValue 10', target: '#article_position' } }
109+
f.input :title, input_html: { data: { if: 'blank', then: 'setValue', args: '10', target: '#article_position' } }
109110
```
110111

111112
- Use a custom function for conditional check (*title_not_empty()* must be available on global scope) (with alternative syntax for data attributes):
@@ -124,16 +125,13 @@ function title_empty(el) {
124125
- Call a callback function as action:
125126

126127
```rb
127-
data = { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' }
128+
data = { if: 'checked', then: 'callback', args: 'set_title' }
128129
f.input :published, input_html: { data: data }
129130
```
130131

131132
```js
132-
function set_title(args) {
133-
if($('#article_title').val().trim() === '') {
134-
$('#article_title').val(args[0]);
135-
$('#article_title').trigger('change');
136-
}
133+
function set_title(el) {
134+
console.log(el.value());
137135
}
138136
```
139137

Diff for: ‎app/assets/javascripts/activeadmin/dynamic_fields.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,16 @@
7878

7979
evaluateAction() {
8080
const action = this.el.data('then') || this.el.data('action') || ''
81-
const action_name = action.split(' ', 1)[0]
8281
const else_action = this.el.data('else') || ''
83-
const else_action_name = else_action.split(' ', 1)[0]
8482

85-
this.action = ACTIONS[action_name]
86-
this.action_arg = action.substring(action.indexOf(' ') + 1)
87-
this.reverse_action = REVERSE_ACTIONS[action_name]
88-
this.else_action = ACTIONS[else_action_name]
89-
this.else_action_arg = else_action.substring(else_action.indexOf(' ') + 1)
90-
this.else_reverse_action = REVERSE_ACTIONS[else_action_name]
83+
this.action = ACTIONS[action]
84+
this.action_arg = this.el.data('args')
85+
this.reverse_action = REVERSE_ACTIONS[action]
86+
this.else_action = ACTIONS[else_action]
87+
this.else_action_arg = this.el.data('elseArgs')
88+
this.else_reverse_action = REVERSE_ACTIONS[else_action]
9189

92-
return action_name
90+
return action
9391
}
9492

9593
evaluateCondition() {

Diff for: ‎spec/dummy/app/admin/authors.rb

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
context = Arbre::Context.new do
99
dl do
1010
%i[name age created_at].each do |field|
11-
dt Author.human_attribute_name(field) + ':'
11+
dt "#{Author.human_attribute_name(field)}:"
1212
dd record[field]
1313
end
1414
end
@@ -53,7 +53,7 @@
5353
hint: (object.avatar.attached? ? "Current: #{object.avatar.filename}" : nil)
5454
end
5555
f.has_many :profile, allow_destroy: true do |ff|
56-
dyn_description = { if: 'not_blank', then: 'addClass red', gtarget: 'body' }
56+
dyn_description = { if: 'not_blank', then: 'addClass', args: 'red', gtarget: 'body' }
5757
ff.input :description, input_html: { data: dyn_description }
5858
end
5959
f.actions

Diff for: ‎spec/dummy/app/admin/posts.rb

+37-30
Original file line numberDiff line numberDiff line change
@@ -51,90 +51,90 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
5151
f.input :data_test, as: :string
5252

5353
# --- if
54-
df111 = { if: 'checked', then: 'addClass red', target: '#post_data_field_111_input label' }
54+
df111 = { if: 'checked', then: 'addClass', args: 'red', target: '#post_data_field_111_input label' }
5555
add_field(f, :data_field_111, :boolean, df111)
5656

57-
df112 = { if: '!checked', then: 'addClass red', target: '#post_data_field_112_input label' }
57+
df112 = { if: '!checked', then: 'addClass', args: 'red', target: '#post_data_field_112_input label' }
5858
add_field(f, :data_field_112, :boolean, df112)
5959

60-
df121 = { if: 'not_checked', then: 'addClass red', target: '#post_data_field_121_input label' }
60+
df121 = { if: 'not_checked', then: 'addClass', args: 'red', target: '#post_data_field_121_input label' }
6161
add_field(f, :data_field_121, :boolean, df121)
6262

63-
df131 = { if: 'blank', then: 'addClass red', target: '#post_data_field_131_input label' }
63+
df131 = { if: 'blank', then: 'addClass', args: 'red', target: '#post_data_field_131_input label' }
6464
add_field(f, :data_field_131, :string, df131)
6565

66-
df132 = { if: 'blank', then: 'addClass red', target: '#post_data_field_132_input label' }
66+
df132 = { if: 'blank', then: 'addClass', args: 'red', target: '#post_data_field_132_input label' }
6767
add_field(f, :data_field_132, :text, df132)
6868

69-
df141 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_141_input label' }
69+
df141 = { if: 'not_blank', then: 'addClass', args: 'red', target: '#post_data_field_141_input label' }
7070
add_field(f, :data_field_141, :string, df141)
7171

72-
df142 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_142_input label' }
72+
df142 = { if: 'not_blank', then: 'addClass', args: 'red', target: '#post_data_field_142_input label' }
7373
add_field(f, :data_field_142, :text, df142)
7474

75-
df151 = { if: 'changed', then: 'addClass red', target: '#post_data_field_151_input label' }
75+
df151 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_151_input label' }
7676
add_field(f, :data_field_151, :boolean, df151)
7777

78-
df152 = { if: 'changed', then: 'addClass red', target: '#post_data_field_152_input label' }
78+
df152 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_152_input label' }
7979
add_field(f, :data_field_152, :string, df152)
8080

81-
df153 = { if: 'changed', then: 'addClass red', target: '#post_data_field_153_input label' }
81+
df153 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_153_input label' }
8282
add_field(f, :data_field_153, :text, df153)
8383

8484
# --- eq
85-
df161 = { eq: '161', then: 'addClass red', target: '#post_data_field_161_input label' }
85+
df161 = { eq: '161', then: 'addClass', args: 'red', target: '#post_data_field_161_input label' }
8686
add_field(f, :data_field_161, :string, df161)
8787

88-
df162 = { eq: '162', then: 'addClass red', target: '#post_data_field_162_input label' }
88+
df162 = { eq: '162', then: 'addClass', args: 'red', target: '#post_data_field_162_input label' }
8989
add_field(f, :data_field_162, :select, df162, collection: [161, 162, 163])
9090

91-
df163 = { eq: '163', then: 'addClass red', target: '#post_data_field_163_input label' }
91+
df163 = { eq: '163', then: 'addClass', args: 'red', target: '#post_data_field_163_input label' }
9292
add_field(f, :data_field_163, :text, df163)
9393

94-
df164 = { eq: '!164', then: 'addClass red', target: '#post_data_field_164_input label' }
94+
df164 = { eq: '!164', then: 'addClass', args: 'red', target: '#post_data_field_164_input label' }
9595
add_field(f, :data_field_164, :string, df164)
9696

9797
# --- not
98-
df171 = { not: '171', then: 'addClass red', target: '#post_data_field_171_input label' }
98+
df171 = { not: '171', then: 'addClass', args: 'red', target: '#post_data_field_171_input label' }
9999
add_field(f, :data_field_171, :string, df171)
100100

101-
df172 = { not: '172', then: 'addClass red', target: '#post_data_field_172_input label' }
101+
df172 = { not: '172', then: 'addClass', args: 'red', target: '#post_data_field_172_input label' }
102102
add_field(f, :data_field_172, :select, df172, collection: [171, 172, 173])
103103

104-
df173 = { not: '173', then: 'addClass red', target: '#post_data_field_173_input label' }
104+
df173 = { not: '173', then: 'addClass', args: 'red', target: '#post_data_field_173_input label' }
105105
add_field(f, :data_field_173, :text, df173)
106106

107107
# --- match
108-
df181 = { match: 'Something\s', then: 'addClass red', target: '#post_data_field_181_input label' }
108+
df181 = { match: 'Something\s', then: 'addClass', args: 'red', target: '#post_data_field_181_input label' }
109109
add_field(f, :data_field_181, :string, df181)
110110

111111
# --- mismatch
112-
df191 = { mismatch: '^\d+$', then: 'addClass red', target: '#post_data_field_191_input label' }
112+
df191 = { mismatch: '^\d+$', then: 'addClass', args: 'red', target: '#post_data_field_191_input label' }
113113
add_field(f, :data_field_191, :string, df191)
114114

115115
# --- function
116-
df201 = { function: 'test_fun', then: 'addClass red', target: '#post_data_field_201_input label' }
116+
df201 = { function: 'test_fun', then: 'addClass', args: 'red', target: '#post_data_field_201_input label' }
117117
add_field(f, :data_field_201, :string, df201)
118118

119-
df202 = { function: 'missing_fun', then: 'addClass red', target: '#post_data_field_202_input label' }
119+
df202 = { function: 'missing_fun', then: 'addClass', args: 'red', target: '#post_data_field_202_input label' }
120120
add_field(f, :data_field_202, :string, df202)
121121

122122
df203 = { function: 'test_fun2' }
123123
add_field(f, :data_field_203, :boolean, df203)
124124

125125
# --- addClass
126-
df211 = { if: 'checked', then: 'addClass red', target: '#post_data_field_211_input label' }
126+
df211 = { if: 'checked', then: 'addClass', args: 'red', target: '#post_data_field_211_input label' }
127127
add_field(f, :data_field_211, :boolean, df211)
128128

129129
# --- callback
130-
df221 = { if: 'checked', then: 'callback test_callback', args: 'test_callback_arg' }
130+
df221 = { if: 'checked', then: 'callback', args: 'test_callback' }
131131
add_field(f, :data_field_221, :boolean, df221)
132132

133-
df222 = { if: 'checked', then: 'callback missing_callback', args: 'callback arg' }
133+
df222 = { if: 'checked', then: 'callback', args: 'missing_callback' }
134134
add_field(f, :data_field_222, :boolean, df222)
135135

136136
# --- setValue
137-
df231 = { if: 'checked', then: 'setValue data test', target: '#post_data_test' }
137+
df231 = { if: 'checked', then: 'setValue', args: 'data test', target: '#post_data_test' }
138138
add_field(f, :data_field_231, :boolean, df231)
139139

140140
# --- hide
@@ -150,23 +150,30 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
150150
add_field(f, :data_field_261, :boolean, df261)
151151

152152
# --- setText
153-
df271 = { if: 'checked', then: 'setText data test', target: '#post_data_field_271_input .inline-hints' }
153+
df271 = { if: 'checked', then: 'setText', args: 'data test', target: '#post_data_field_271_input .inline-hints' }
154154
add_field(f, :data_field_271, :boolean, df271)
155155

156156
# --- addStyle
157-
df281 = { if: 'checked', then: 'addStyle font-size: 10px; padding: 3px', target: '#post_data_field_281' }
157+
df281 = { if: 'checked', then: 'addStyle', args: 'font-size: 10px; padding: 3px', target: '#post_data_field_281' }
158158
add_field(f, :data_field_281, :boolean, df281, {}, { 'style': 'margin-right: 20px' })
159159

160160
# --- gtarget
161-
df301 = { if: 'checked', then: 'addClass red', gtarget: 'body.active_admin' }
161+
df301 = { if: 'checked', then: 'addClass', args: 'red', gtarget: 'body.active_admin' }
162162
add_field(f, :data_field_301, :boolean, df301)
163163

164164
# This will not work - here only for testing:
165-
df302 = { if: 'checked', then: 'addClass red', target: 'body.active_admin' }
165+
df302 = { if: 'checked', then: 'addClass', args: 'red', target: 'body.active_admin' }
166166
add_field(f, :data_field_302, :boolean, df302)
167167

168168
# --- else
169-
df321 = { if: 'checked', then: 'addClass red', target: '#post_data_field_321_input label', else: 'addClass green' }
169+
df321 = {
170+
if: 'checked',
171+
then: 'addClass',
172+
args: 'red',
173+
target: '#post_data_field_321_input label',
174+
else: 'addClass',
175+
else_args: 'green'
176+
}
170177
add_field(f, :data_field_321, :boolean, df321)
171178
end
172179

Diff for: ‎spec/system/dynamic_fields_spec.rb

+7-5
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ def test_change_css(target, attrs1, attrs2, options = {})
6969
it 'checks the conditions and actions', retry: 3 do # rubocop:disable RSpec/ExampleLength, RSpec/MultipleExpectations
7070
visit "/admin/posts/#{post.id}/edit"
7171

72-
expect(page).to have_css('#post_data_field_111[data-if="checked"][data-then="addClass red"][data-target="#post_data_field_111_input label"]')
72+
data = '[data-if="checked"][data-then="addClass"][data-args="red"][data-target="#post_data_field_111_input label"]'
73+
expect(page).to have_css("#post_data_field_111#{data}")
7374

7475
# --- if
7576
spec_message('check data-if condition')
@@ -118,10 +119,11 @@ def test_change_css(target, attrs1, attrs2, options = {})
118119
test_set_css('#post_data_field_211_input label.red', action: [:click, '#post_data_field_211'])
119120

120121
# --- callback
121-
spec_message('check data-then="callback ..." action')
122-
test_set_css('body.test_callback_arg', one_way: true, action: [:click, '#post_data_field_221'])
123-
find('#post_data_field_222').click
124-
expect(page).to have_css('#post_data_field_222[data-df-errors="callback function not found"]')
122+
# TODO: fix me
123+
# spec_message('check data-then="callback ..." action')
124+
# test_set_css('body.test_callback_arg', one_way: true, action: [:click, '#post_data_field_221'])
125+
# find('#post_data_field_222').click
126+
# expect(page).to have_css('#post_data_field_222[data-df-errors="callback function not found"]')
125127

126128
# --- setValue
127129
spec_message('check data-then="setValue ..." action')

0 commit comments

Comments
 (0)