Skip to content

Commit 02055ec

Browse files
Merge pull request #484 from lionel-bijaoui/lb_better_groups
Better groups and new validation mechanic
2 parents c0b65b5 + c416802 commit 02055ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1699
-1242
lines changed

build/webpack.dev.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ module.exports = {
4848
basic: path.resolve("dev", "projects", "basic", "main.js"),
4949
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
5050
grouping: path.resolve("dev", "projects", "grouping", "main.js"),
51+
multi: path.resolve("dev", "projects", "multi", "main.js"),
5152
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
5253
picker: path.resolve("dev", "projects", "picker", "main.js")
5354
},

dev/projects/basic/app.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,7 @@ export default {
9797
9898
formOptions: {
9999
validateAfterLoad: true,
100-
validateAfterChanged: true,
101-
validateBeforeSave: true
100+
validateAfterChanged: true
102101
}
103102
};
104103
},

dev/projects/full/app.vue

+23-19
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@ export default {
7575
7676
formOptions: {
7777
validateAfterLoad: true,
78-
validateAfterChanged: true,
79-
validateBeforeSave: true
78+
validateAfterChanged: true
8079
}
8180
};
8281
},
@@ -118,7 +117,7 @@ export default {
118117
},
119118
120119
onValidated(res, errors) {
121-
console.log("VFG validated:", res, errors);
120+
console.log("onValidated VFG validated:", arguments, res, errors);
122121
},
123122
124123
generateModel() {
@@ -145,32 +144,36 @@ export default {
145144
},
146145
147146
saveModel() {
148-
console.log("Save model...");
149-
if (this.formOptions.validateBeforeSave === false || this.validate()) {
150-
this.mergeModelValues();
151-
152-
if (this.isNewModel) {
153-
this.rows.push(this.model);
154-
this.selectRow(null, this.model, false);
147+
console.log("Save model...", this.validate, typeof this.validate);
148+
this.validate().then(
149+
(test) => {
150+
console.log("saveModel", test);
151+
this.mergeModelValues();
152+
153+
if (this.isNewModel) {
154+
this.rows.push(this.model);
155+
this.selectRow(null, this.model, false);
156+
}
157+
},
158+
(error) => {
159+
// Validation error
160+
console.warn("Error saving model...", error);
155161
}
156-
} else {
157-
console.warn("Error saving model...");
158-
// Validation error
159-
}
162+
);
160163
},
161164
162165
mergeModelValues() {
163166
let model = this.model;
164167
if (model && this.selected.length > 0) {
165-
each(this.selected, row => {
168+
each(this.selected, (row) => {
166169
merge(row, model);
167170
});
168171
}
169172
},
170173
171174
deleteModel() {
172175
if (this.selected.length > 0) {
173-
each(this.selected, row => {
176+
each(this.selected, (row) => {
174177
let index = this.rows.indexOf(row);
175178
this.rows.splice(index, 1);
176179
});
@@ -181,15 +184,16 @@ export default {
181184
getNextID() {
182185
let id = 0;
183186
184-
each(this.rows, row => {
187+
each(this.rows, (row) => {
185188
if (row.id > id) id = row.id;
186189
});
187190
188191
return ++id;
189192
},
190193
191194
validate() {
192-
// console.log("validate", this.$refs.form, this.$refs.form.validate());
195+
console.log("APP validate", this.$refs.form, typeof this.$refs.form.validate);
196+
193197
return this.$refs.form.validate();
194198
},
195199
@@ -199,7 +203,7 @@ export default {
199203
200204
getLocation(model) {
201205
if (navigator.geolocation) {
202-
navigator.geolocation.getCurrentPosition(pos => {
206+
navigator.geolocation.getCurrentPosition((pos) => {
203207
if (!model.address) model.address = {};
204208
if (!model.address.geo) model.address.geo = {};
205209
model.address.geo.latitude = pos.coords.latitude.toFixed(5);

dev/projects/full/schema.js

+24-24
Original file line numberDiff line numberDiff line change
@@ -461,30 +461,30 @@ export default {
461461
}
462462
]
463463
},
464-
{
465-
type: "staticMap",
466-
model: "address.geo",
467-
label: "Map",
468-
visible: false,
469-
fieldOptions: {
470-
lat: "latitude",
471-
lng: "longitude",
472-
zoom: 6,
473-
sizeX: 640,
474-
sizeY: 640,
475-
scale: 1,
476-
format: "png",
477-
// maptype:"satellite",
478-
language: "FR-fr",
479-
// region:
480-
markers: "color:blue%7Clabel:S%7C43.107733,4.541936"
481-
// path:
482-
// visible:
483-
// style:"feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff",
484-
// key:
485-
// signature:
486-
}
487-
},
464+
// {
465+
// type: "staticMap",
466+
// model: "address.geo",
467+
// label: "Map",
468+
// visible: false,
469+
// fieldOptions: {
470+
// lat: "latitude",
471+
// lng: "longitude",
472+
// zoom: 6,
473+
// sizeX: 640,
474+
// sizeY: 640,
475+
// scale: 1,
476+
// format: "png",
477+
// // maptype:"satellite",
478+
// language: "FR-fr",
479+
// // region:
480+
// markers: "color:blue%7Clabel:S%7C43.107733,4.541936"
481+
// // path:
482+
// // visible:
483+
// // style:"feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff",
484+
// // key:
485+
// // signature:
486+
// }
487+
// },
488488
{
489489
type: "switch",
490490
model: "status",

dev/projects/grouping/app.vue

+50-13
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,44 @@ export default {
2929
more: "More",
3030
things: "Things"
3131
},
32-
single: "blah"
32+
single: "blah",
33+
subname: ""
3334
},
3435
3536
schema: {
36-
groups: [
37+
fields: [
3738
{
39+
type: "group",
3840
legend: "Contact Details",
41+
tag: "div",
3942
fields: [
4043
{
4144
type: "input",
4245
model: "name",
4346
label: "Name",
4447
fieldOptions: {
4548
inputType: "text"
46-
}
49+
},
50+
required: true,
51+
validator: ["required"]
52+
},
53+
{
54+
type: "group",
55+
legend: "Subgroup",
56+
styleClasses: "subgroup",
57+
tag: "fieldset",
58+
fields: [
59+
{
60+
type: "input",
61+
model: "subname",
62+
label: "Name",
63+
fieldOptions: {
64+
inputType: "text"
65+
},
66+
required: true,
67+
validator: ["required"]
68+
}
69+
]
4770
},
4871
{
4972
type: "input",
@@ -56,6 +79,17 @@ export default {
5679
]
5780
},
5881
{
82+
type: "input",
83+
model: "single",
84+
label: "Single field (without group)",
85+
fieldOptions: {
86+
inputType: "text"
87+
},
88+
required: true,
89+
validator: ["string"]
90+
},
91+
{
92+
type: "group",
5993
legend: "Other Details",
6094
fields: [
6195
{
@@ -76,20 +110,12 @@ export default {
76110
}
77111
]
78112
}
79-
],
80-
fields: [
81-
{
82-
type: "input",
83-
model: "single",
84-
label: "Single field (without group)",
85-
fieldOptions: {
86-
inputType: "text"
87-
}
88-
}
89113
]
90114
},
91115
92116
formOptions: {
117+
validateAfterLoad: true,
118+
validateAfterChanged: true,
93119
fieldIdPrefix: "frm1-"
94120
}
95121
};
@@ -103,4 +129,15 @@ export default {
103129

104130
<style lang="scss">
105131
@import "../../style.scss";
132+
.field-group {
133+
border: 2px solid #bbb;
134+
padding: 8px;
135+
border-radius: 4px;
136+
}
137+
.subgroup {
138+
border-color: goldenrod;
139+
legend {
140+
color: #00268d;
141+
}
142+
}
106143
</style>

0 commit comments

Comments
 (0)