Skip to content

Commit 21fbe0a

Browse files
jonasjabarijonasjabari
committed
refactored base input mixins in order to avoid forceUpdate and improve data binding
1 parent 8785ce9 commit 21fbe0a

File tree

8 files changed

+44
-125
lines changed

8 files changed

+44
-125
lines changed

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

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,74 +10,58 @@ const formCheckboxMixin = {
1010

1111
if (key.startsWith("select.")) {
1212
if (key.startsWith("select.multiple.")) {
13+
self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
1314
if (initValue) {
14-
data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
15-
Object.assign(self.$parent.data, data);
15+
self.setValue(JSON.parse(initValue["value"]));
1616
self.afterInitialize(JSON.parse(initValue["value"]))
1717
} else {
18-
data[key.replace("select.multiple.", "")] = [];
19-
Object.assign(self.$parent.data, data);
20-
self.afterInitialize([])
18+
self.setValue([]);
19+
self.afterInitialize([]);
2120
}
2221
} else {
22+
self.$set(self.$parent.data, key.replace("select.", ""), null)
2323
if (initValue) {
2424
if (valueType && valueType["value"] == "Integer") {
25-
data[key.replace("select.", "")] = parseInt(initValue["value"]);
26-
Object.assign(self.$parent.data, data);
25+
self.setValue(parseInt(initValue["value"]));
2726
self.afterInitialize(parseInt(initValue["value"]))
2827
} else {
29-
30-
data[key.replace("select.", "")] = initValue["value"];
31-
Object.assign(self.$parent.data, data);
28+
self.setValue(initValue["value"]);
3229
self.afterInitialize(initValue["value"])
3330
}
3431
} else {
35-
data[key.replace("select.", "")] = null;
36-
Object.assign(self.$parent.data, data);
32+
self.setValue(null);
3733
self.afterInitialize(null)
3834
}
3935
}
4036
} else {
37+
self.$set(self.$parent.data, key.replace("input.", ""), null)
4138
if (initValue) {
4239
if(initValue["value"] === "true"){
43-
data[key.replace("input.", "")] = true;
44-
Object.assign(self.$parent.data, data);
40+
self.setValue(true);
4541
self.afterInitialize(true)
4642
}
4743
if(initValue["value"] === "false"){
48-
data[key.replace("input.", "")] = false;
49-
Object.assign(self.$parent.data, data);
44+
self.setValue(false);
5045
self.afterInitialize(false)
5146
}
5247
} else {
53-
data[key.replace("input.", "")] = null;
54-
Object.assign(self.$parent.data, data);
48+
self.setValue(null);
5549
self.afterInitialize(null)
5650
}
5751
}
5852
}
59-
60-
//without the timeout it's somehow not working
61-
setTimeout(function () {
62-
self.$parent.$forceUpdate();
63-
self.$forceUpdate();
64-
}, 1);
6553
},
6654
inputChanged: function (key) {
6755
if (this.$parent.isNestedForm){
6856
this.$parent.data["_destroy"] = false;
6957
}
7058
this.$parent.resetErrors(key);
71-
this.$parent.$forceUpdate();
72-
this.$forceUpdate();
7359
},
7460
afterInitialize: function(value){
7561
// can be used in the main component for further initialization steps
7662
},
7763
setValue: function (value){
7864
this.$parent.data[this.props["key"]] = value
79-
this.$parent.$forceUpdate();
80-
this.$forceUpdate();
8165
}
8266
}
8367

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

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -53,25 +53,6 @@ const componentDef = {
5353
}
5454
}
5555
},
56-
setProps: function (flat, newVal) {
57-
for (var i in flat) {
58-
if (flat[i] === null){
59-
flat[i] = newVal;
60-
} else if (flat[i] instanceof File){
61-
flat[i] = newVal;
62-
this.$refs["input-component-for-"+i].value = newVal
63-
} else if (flat[i] instanceof Array) {
64-
if(flat[i][0] instanceof File){
65-
flat[i] = newVal
66-
this.$refs["input-component-for-"+i].value = newVal
67-
}
68-
} else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
69-
setProps(flat[i], newVal);
70-
} else {
71-
flat[i] = newVal;
72-
}
73-
}
74-
},
7556
setErrors: function(errors){
7657
this.errors = errors;
7758
},
@@ -124,8 +105,8 @@ const componentDef = {
124105
if(nestedFormInstance.data["_destroy"] == true){
125106
var destroyed = true;
126107
}
127-
nestedFormInstance.setProps(nestedFormInstance.data, null)
128108
nestedFormInstance.initValues()
109+
console.log(nestedFormInstance.data)
129110
Vue.set(nestedFormInstance.data)
130111
if(destroyed){
131112
nestedFormInstance.hideNestedForm = true
@@ -357,9 +338,8 @@ const componentDef = {
357338

358339
if (self.shouldResetFormOnSuccessfulSubmit())
359340
{
360-
self.setProps(self.data, null);
361-
self.resetNestedForms();
362341
self.initValues();
342+
self.resetNestedForms();
363343
}
364344
})
365345
.catch(function (error) {
@@ -480,12 +460,6 @@ const componentDef = {
480460
})
481461
}
482462
}
483-
484-
//without the timeout it's somehow not working
485-
setTimeout(function () {
486-
self.$parent.$forceUpdate();
487-
self.$forceUpdate();
488-
}, 1);
489463
} else {
490464
this.initValues();
491465
}

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,17 @@ const formInputMixin = {
77
for (let key in this.$refs) {
88
let initValue = this.$refs[key]["attributes"]["init-value"];
99

10+
self.$set(self.$parent.data, key.replace("input.", ""), null)
11+
1012
if (initValue) {
11-
data[key.replace("input.", "")] = initValue["value"];
12-
Object.assign(self.$parent.data, data);
13+
self.setValue(initValue["value"])
1314
self.afterInitialize(initValue["value"])
1415
} else {
15-
data[key.replace("input.", "")] = null;
16-
Object.assign(self.$parent.data, data);
16+
self.setValue(null)
1717
self.afterInitialize(null)
1818
}
1919
}
2020

21-
//without the timeout it's somehow not working
22-
setTimeout(function () {
23-
self.$parent.$forceUpdate();
24-
self.$forceUpdate();
25-
}, 1);
2621
},
2722
filesAdded: function (key) {
2823
const dataTransfer = event.dataTransfer || event.target;
@@ -43,16 +38,13 @@ const formInputMixin = {
4338
this.$parent.data["_destroy"] = false;
4439
}
4540
this.$parent.resetErrors(key);
46-
this.$parent.$forceUpdate();
47-
this.$forceUpdate();
41+
4842
},
4943
afterInitialize: function(value){
5044
// can be used in the main component for further initialization steps
5145
},
5246
setValue: function (value){
53-
this.$parent.data[this.props["key"]] = value
54-
this.$parent.$forceUpdate();
55-
this.$forceUpdate();
47+
this.$parent.data[this.props["key"]] = value;
5648
}
5749
}
5850

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

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,56 +10,43 @@ const formRadioMixin = {
1010

1111
if (key.startsWith("select.")) {
1212
if (key.startsWith("select.multiple.")) {
13+
self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
1314
if (initValue) {
14-
data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
15-
Object.assign(self.$parent.data, data);
15+
self.setValue(JSON.parse(initValue["value"]));
1616
self.afterInitialize(JSON.parse(initValue["value"]))
1717
} else {
18-
data[key.replace("select.multiple.", "")] = [];
19-
Object.assign(self.$parent.data, data);
20-
self.afterInitialize([])
18+
self.setValue([]);
19+
self.afterInitialize([]);
2120
}
2221
} else {
22+
self.$set(self.$parent.data, key.replace("select.", ""), null)
2323
if (initValue) {
2424
if (valueType && valueType["value"] == "Integer") {
25-
data[key.replace("select.", "")] = parseInt(initValue["value"]);
26-
Object.assign(self.$parent.data, data);
25+
self.setValue(parseInt(initValue["value"]));
2726
self.afterInitialize(parseInt(initValue["value"]))
2827
} else {
29-
data[key.replace("select.", "")] = initValue["value"];
30-
Object.assign(self.$parent.data, data);
28+
self.setValue(initValue["value"]);
3129
self.afterInitialize(initValue["value"])
3230
}
3331
} else {
34-
data[key.replace("select.", "")] = null;
35-
Object.assign(self.$parent.data, data);
32+
self.setValue(null);
3633
self.afterInitialize(null)
3734
}
3835
}
3936
}
4037
}
41-
42-
//without the timeout it's somehow not working
43-
setTimeout(function () {
44-
self.$parent.$forceUpdate();
45-
self.$forceUpdate();
46-
}, 1);
4738
},
4839
inputChanged: function (key) {
4940
if (this.$parent.isNestedForm){
5041
this.$parent.data["_destroy"] = false;
5142
}
5243
this.$parent.resetErrors(key);
53-
this.$parent.$forceUpdate();
54-
this.$forceUpdate();
5544
},
5645
afterInitialize: function(value){
5746
// can be used in the main component for further initialization steps
5847
},
5948
setValue: function (value){
6049
this.$parent.data[this.props["key"]] = value
61-
this.$parent.$forceUpdate();
62-
this.$forceUpdate();
6350
}
6451
}
6552

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

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,52 +10,43 @@ const formSelectMixin = {
1010

1111
if (key.startsWith("select.")) {
1212
if (key.startsWith("select.multiple.")) {
13+
self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
1314
if (initValue) {
14-
data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
15+
self.setValue(JSON.parse(initValue["value"]));
1516
self.afterInitialize(JSON.parse(initValue["value"]))
1617
} else {
17-
data[key.replace("select.multiple.", "")] = [];
18-
self.afterInitialize([])
18+
self.setValue([]);
19+
self.afterInitialize([]);
1920
}
2021
} else {
22+
self.$set(self.$parent.data, key.replace("select.", ""), null)
2123
if (initValue) {
2224
if (valueType && valueType["value"] == "Integer") {
23-
data[key.replace("select.", "")] = parseInt(initValue["value"]);
25+
self.setValue(parseInt(initValue["value"]));
2426
self.afterInitialize(parseInt(initValue["value"]))
2527
} else {
26-
data[key.replace("select.", "")] = initValue["value"];
28+
self.setValue(initValue["value"]);
2729
self.afterInitialize(initValue["value"])
2830
}
2931
} else {
30-
data[key.replace("select.", "")] = null;
32+
self.setValue(null);
3133
self.afterInitialize(null)
3234
}
3335
}
3436
}
3537
}
36-
37-
//without the timeout it's somehow not working
38-
setTimeout(function () {
39-
Object.assign(self.$parent.data, data);
40-
self.$parent.$forceUpdate();
41-
self.$forceUpdate();
42-
}, 1);
4338
},
4439
inputChanged: function (key) {
4540
if (this.$parent.isNestedForm){
4641
this.$parent.data["_destroy"] = false;
4742
}
4843
this.$parent.resetErrors(key);
49-
this.$parent.$forceUpdate();
50-
this.$forceUpdate();
5144
},
5245
afterInitialize: function(value){
5346
// can be used in the main component for further initialization steps
5447
},
5548
setValue: function (value){
5649
this.$parent.data[this.props["key"]] = value
57-
this.$parent.$forceUpdate();
58-
this.$forceUpdate();
5950
}
6051
}
6152

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

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,28 @@ const formTextareaMixin = {
77
for (let key in this.$refs) {
88
let initValue = this.$refs[key]["attributes"]["init-value"];
99

10+
self.$set(self.$parent.data, key.replace("input.", ""), null)
11+
1012
if (initValue) {
11-
data[key.replace("input.", "")] = initValue["value"];
12-
Object.assign(self.$parent.data, data);
13+
self.setValue(initValue["value"])
1314
self.afterInitialize(initValue["value"])
1415
} else {
15-
data[key.replace("input.", "")] = null;
16-
Object.assign(self.$parent.data, data);
16+
self.setValue(null)
1717
self.afterInitialize(null)
1818
}
1919
}
20-
21-
//without the timeout it's somehow not working
22-
setTimeout(function () {
23-
self.$parent.$forceUpdate();
24-
self.$forceUpdate();
25-
}, 1);
2620
},
2721
inputChanged: function (key) {
2822
if (this.$parent.isNestedForm){
2923
this.$parent.data["_destroy"] = false;
3024
}
3125
this.$parent.resetErrors(key);
32-
this.$parent.$forceUpdate();
33-
this.$forceUpdate();
3426
},
3527
afterInitialize: function(value){
3628
// can be used in the main component for further initialization steps
3729
},
3830
setValue: function (value){
3931
this.$parent.data[this.props["key"]] = value
40-
this.$parent.$forceUpdate();
41-
this.$forceUpdate();
4232
}
4333
}
4434

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ def form_config
5353

5454
visit '/example'
5555

56-
expect(page).to have_content('{ "foo_input": null, "foo_textarea": null, "foo_single_checkbox": null, "foo_multi_checkbox": [], "foo_radio": null, "foo_select": 2 }')
56+
expect(page).to have_content('{ "foo_input": null, "foo_textarea": null, "foo_select": 2, "foo_single_checkbox": null, "foo_multi_checkbox": [], "foo_radio": null }')
5757

5858
fill_in "foo-input", with: "1"
5959
fill_in "foo-textarea", with: "2"
@@ -63,11 +63,11 @@ def form_config
6363
check "foo-multi-checkbox_2"
6464
choose "foo-radio-checkbox_3"
6565

66-
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 }')
66+
expect(page).to have_content('{ "foo_input": "1", "foo_textarea": "2", "foo_select": 3, "foo_single_checkbox": true, "foo_multi_checkbox": [ 1, 2 ], "foo_radio": 3 }')
6767

6868
click_on "Submit me!"
6969

70-
expect(page).to have_content('{ "foo_input": null, "foo_textarea": null, "foo_single_checkbox": null, "foo_multi_checkbox": [], "foo_radio": null, "foo_select": 2 }')
70+
expect(page).to have_content('{ "foo_input": null, "foo_textarea": null, "foo_select": 2, "foo_single_checkbox": null, "foo_multi_checkbox": [], "foo_radio": null }')
7171

7272
end
7373

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,7 @@ def dummy_child_model_form dummy_child_model = DummyChildModel.new(title: "init-
573573

574574
end
575575
visit "/example"
576+
# sleep
576577

577578
click_on "add"
578579
click_on "add"

0 commit comments

Comments
 (0)