Skip to content

Commit ea8eb90

Browse files
jonasjabarijonasjabari
committed
revived form data access in pure Vue.js within form scope without component
1 parent 5bd64e5 commit ea8eb90

File tree

6 files changed

+92
-4
lines changed

6 files changed

+92
-4
lines changed

‎lib/matestack/ui/vue_js/components/form/checkbox_mixin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,21 @@ const formCheckboxMixin = {
5959

6060
//without the timeout it's somehow not working
6161
setTimeout(function () {
62-
self.$forceUpdate()
62+
self.$parent.$forceUpdate();
63+
self.$forceUpdate();
6364
}, 1);
6465
},
6566
inputChanged: function (key) {
6667
this.$parent.resetErrors(key);
68+
this.$parent.$forceUpdate();
6769
this.$forceUpdate();
6870
},
6971
afterInitialize: function(value){
7072
// can be used in the main component for further initialization steps
7173
},
7274
setValue: function (value){
7375
this.$parent.data[this.props["key"]] = value
76+
this.$parent.$forceUpdate();
7477
this.$forceUpdate();
7578
}
7679
}

‎lib/matestack/ui/vue_js/components/form/input_mixin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const formInputMixin = {
2020

2121
//without the timeout it's somehow not working
2222
setTimeout(function () {
23-
self.$forceUpdate()
23+
self.$parent.$forceUpdate();
24+
self.$forceUpdate();
2425
}, 1);
2526
},
2627
filesAdded: function (key) {
@@ -39,13 +40,15 @@ const formInputMixin = {
3940
},
4041
inputChanged: function (key) {
4142
this.$parent.resetErrors(key);
43+
this.$parent.$forceUpdate();
4244
this.$forceUpdate();
4345
},
4446
afterInitialize: function(value){
4547
// can be used in the main component for further initialization steps
4648
},
4749
setValue: function (value){
4850
this.$parent.data[this.props["key"]] = value
51+
this.$parent.$forceUpdate();
4952
this.$forceUpdate();
5053
}
5154
}

‎lib/matestack/ui/vue_js/components/form/radio_mixin.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,21 @@ const formRadioMixin = {
4141

4242
//without the timeout it's somehow not working
4343
setTimeout(function () {
44+
self.$parent.$forceUpdate();
4445
self.$forceUpdate();
4546
}, 1);
4647
},
4748
inputChanged: function (key) {
4849
this.$parent.resetErrors(key);
50+
this.$parent.$forceUpdate();
4951
this.$forceUpdate();
5052
},
5153
afterInitialize: function(value){
5254
// can be used in the main component for further initialization steps
5355
},
5456
setValue: function (value){
5557
this.$parent.data[this.props["key"]] = value
58+
this.$parent.$forceUpdate();
5659
this.$forceUpdate();
5760
}
5861
}

‎lib/matestack/ui/vue_js/components/form/select_mixin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,21 @@ const formSelectMixin = {
3737
//without the timeout it's somehow not working
3838
setTimeout(function () {
3939
Object.assign(self.$parent.data, data);
40-
self.$forceUpdate()
40+
self.$parent.$forceUpdate();
41+
self.$forceUpdate();
4142
}, 1);
4243
},
4344
inputChanged: function (key) {
4445
this.$parent.resetErrors(key);
46+
this.$parent.$forceUpdate();
4547
this.$forceUpdate();
4648
},
4749
afterInitialize: function(value){
4850
// can be used in the main component for further initialization steps
4951
},
5052
setValue: function (value){
5153
this.$parent.data[this.props["key"]] = value
54+
this.$parent.$forceUpdate();
5255
this.$forceUpdate();
5356
}
5457
}

‎lib/matestack/ui/vue_js/components/form/textarea_mixin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,21 @@ const formTextareaMixin = {
2020

2121
//without the timeout it's somehow not working
2222
setTimeout(function () {
23-
self.$forceUpdate()
23+
self.$parent.$forceUpdate();
24+
self.$forceUpdate();
2425
}, 1);
2526
},
2627
inputChanged: function (key) {
2728
this.$parent.resetErrors(key);
29+
this.$parent.$forceUpdate();
2830
this.$forceUpdate();
2931
},
3032
afterInitialize: function(value){
3133
// can be used in the main component for further initialization steps
3234
},
3335
setValue: function (value){
3436
this.$parent.data[this.props["key"]] = value
37+
this.$parent.$forceUpdate();
3538
this.$forceUpdate();
3639
}
3740
}

‎spec/test/components/dynamic/form/data_access_spec.rb‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
require_relative "../../../support/utils"
2+
require_relative "../../../support/test_controller"
3+
require_relative "support/form_test_controller"
4+
require_relative "support/model_form_test_controller"
5+
include Utils
6+
7+
describe "Form Component", type: :feature, js: true do
8+
9+
before :all do
10+
class EmitFormTestController < FormTestController
11+
def success_submit
12+
render json: { message: "server says: form submitted successfully" }, status: 200
13+
end
14+
end
15+
16+
Rails.application.routes.prepend do
17+
post '/data_access_form_test', to: 'emit_form_test#success_submit', as: 'form_data_access_submit'
18+
end
19+
Rails.application.reload_routes!
20+
end
21+
22+
before :each do
23+
allow_any_instance_of(EmitFormTestController).to receive(:expect_params)
24+
end
25+
26+
describe "data is accessable within form without component in pure Vue.js" do
27+
28+
it "if set, emits event directly when form is submitted (not waiting for success or failure)" do
29+
class ExamplePage < Matestack::Ui::Page
30+
def response
31+
matestack_form form_config do
32+
plain "{{ data }}"
33+
form_input key: :foo_input, type: :text, id: "foo-input"
34+
form_textarea key: :foo_textarea, type: :text, id: "foo-textarea"
35+
form_select key: :foo_select, options: [1, 2, 3], id: "foo-select", init: 2
36+
form_checkbox key: :foo_single_checkbox, id: "foo-single-checkbox"
37+
form_checkbox key: :foo_multi_checkbox, options: [1, 2, 3], id: "foo-multi-checkbox"
38+
form_radio key: :foo_radio, options: [1, 2, 3], id: "foo-radio-checkbox"
39+
button 'Submit me!'
40+
end
41+
toggle show_on: "form_submitted", id: 'async-form' do
42+
plain "form submitted!"
43+
end
44+
end
45+
46+
def form_config
47+
return {
48+
for: :my_object,
49+
method: :post,
50+
path: form_data_access_submit_path,
51+
emit: "form_submitted"
52+
}
53+
end
54+
end
55+
56+
visit '/example'
57+
58+
expect(page).to have_content('{ "foo_input": null, "foo_textarea": null, "foo_single_checkbox": null, "foo_multi_checkbox": [], "foo_radio": null, "foo_select": 2 }')
59+
60+
fill_in "foo-input", with: "1"
61+
fill_in "foo-textarea", with: "2"
62+
select "3", from: "foo-select"
63+
check "foo-single-checkbox_1"
64+
check "foo-multi-checkbox_1"
65+
check "foo-multi-checkbox_2"
66+
choose "foo-radio-checkbox_3"
67+
68+
expect(page).to have_content('{ "foo_input": "1", "foo_textarea": "2", "foo_single_checkbox": true, "foo_multi_checkbox": [ 1, 2 ], "foo_radio": 3, "foo_select": 3 }')
69+
70+
end
71+
end
72+
73+
end

0 commit comments

Comments
 (0)