Merge pull request #484 from lionel-bijaoui/lb_better_groups

Better groups and new validation mechanic

Author: lionel-bijaoui

build/webpack.dev.config.js

@@ -48,6 +48,7 @@ module.exports = {
 		basic: path.resolve("dev", "projects", "basic", "main.js"),
 		mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
 		grouping: path.resolve("dev", "projects", "grouping", "main.js"),
+		multi: path.resolve("dev", "projects", "multi", "main.js"),
 		checklist: path.resolve("dev", "projects", "checklist", "main.js"),
 		picker: path.resolve("dev", "projects", "picker", "main.js")
 	},

dev/projects/basic/app.vue

@@ -97,8 +97,7 @@ export default {
 
 			formOptions: {
 				validateAfterLoad: true,
-				validateAfterChanged: true,
-				validateBeforeSave: true
+				validateAfterChanged: true
 			}
 		};
 	},

dev/projects/full/app.vue

@@ -75,8 +75,7 @@ export default {
 
 			formOptions: {
 				validateAfterLoad: true,
-				validateAfterChanged: true,
-				validateBeforeSave: true
+				validateAfterChanged: true
 			}
 		};
 	},
@@ -118,7 +117,7 @@ export default {
 		},
 
 		onValidated(res, errors) {
-			console.log("VFG validated:", res, errors);
+			console.log("onValidated VFG validated:", arguments, res, errors);
 		},
 
 		generateModel() {
@@ -145,32 +144,36 @@ export default {
 		},
 
 		saveModel() {
-			console.log("Save model...");
-			if (this.formOptions.validateBeforeSave === false || this.validate()) {
-				this.mergeModelValues();
-
-				if (this.isNewModel) {
-					this.rows.push(this.model);
-					this.selectRow(null, this.model, false);
+			console.log("Save model...", this.validate, typeof this.validate);
+			this.validate().then(
+				(test) => {
+					console.log("saveModel", test);
+					this.mergeModelValues();
+
+					if (this.isNewModel) {
+						this.rows.push(this.model);
+						this.selectRow(null, this.model, false);
+					}
+				},
+				(error) => {
+					// Validation error
+					console.warn("Error saving model...", error);
 				}
-			} else {
-				console.warn("Error saving model...");
-				// Validation error
-			}
+			);
 		},
 
 		mergeModelValues() {
 			let model = this.model;
 			if (model && this.selected.length > 0) {
-				each(this.selected, row => {
+				each(this.selected, (row) => {
 					merge(row, model);
 				});
 			}
 		},
 
 		deleteModel() {
 			if (this.selected.length > 0) {
-				each(this.selected, row => {
+				each(this.selected, (row) => {
 					let index = this.rows.indexOf(row);
 					this.rows.splice(index, 1);
 				});
@@ -181,15 +184,16 @@ export default {
 		getNextID() {
 			let id = 0;
 
-			each(this.rows, row => {
+			each(this.rows, (row) => {
 				if (row.id > id) id = row.id;
 			});
 
 			return ++id;
 		},
 
 		validate() {
-			// console.log("validate", this.$refs.form, this.$refs.form.validate());
+			console.log("APP validate", this.$refs.form, typeof this.$refs.form.validate);
+
 			return this.$refs.form.validate();
 		},
 
@@ -199,7 +203,7 @@ export default {
 
 		getLocation(model) {
 			if (navigator.geolocation) {
-				navigator.geolocation.getCurrentPosition(pos => {
+				navigator.geolocation.getCurrentPosition((pos) => {
 					if (!model.address) model.address = {};
 					if (!model.address.geo) model.address.geo = {};
 					model.address.geo.latitude = pos.coords.latitude.toFixed(5);

dev/projects/full/schema.js

@@ -461,30 +461,30 @@ export default {
 				}
 			]
 		},
-		{
-			type: "staticMap",
-			model: "address.geo",
-			label: "Map",
-			visible: false,
-			fieldOptions: {
-				lat: "latitude",
-				lng: "longitude",
-				zoom: 6,
-				sizeX: 640,
-				sizeY: 640,
-				scale: 1,
-				format: "png",
-				// maptype:"satellite",
-				language: "FR-fr",
-				// region:
-				markers: "color:blue%7Clabel:S%7C43.107733,4.541936"
-				// path:
-				// visible:
-				// style:"feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff",
-				// key:
-				// signature:
-			}
-		},
+		// {
+		// 	type: "staticMap",
+		// 	model: "address.geo",
+		// 	label: "Map",
+		// 	visible: false,
+		// 	fieldOptions: {
+		// 		lat: "latitude",
+		// 		lng: "longitude",
+		// 		zoom: 6,
+		// 		sizeX: 640,
+		// 		sizeY: 640,
+		// 		scale: 1,
+		// 		format: "png",
+		// 		// maptype:"satellite",
+		// 		language: "FR-fr",
+		// 		// region:
+		// 		markers: "color:blue%7Clabel:S%7C43.107733,4.541936"
+		// 		// path:
+		// 		// visible:
+		// 		// style:"feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff",
+		// 		// key:
+		// 		// signature:
+		// 	}
+		// },
 		{
 			type: "switch",
 			model: "status",

dev/projects/grouping/app.vue

@@ -29,21 +29,44 @@ export default {
 					more: "More",
 					things: "Things"
 				},
-				single: "blah"
+				single: "blah",
+				subname: ""
 			},
 
 			schema: {
-				groups: [
+				fields: [
 					{
+						type: "group",
 						legend: "Contact Details",
+						tag: "div",
 						fields: [
 							{
 								type: "input",
 								model: "name",
 								label: "Name",
 								fieldOptions: {
 									inputType: "text"
-								}
+								},
+								required: true,
+								validator: ["required"]
+							},
+							{
+								type: "group",
+								legend: "Subgroup",
+								styleClasses: "subgroup",
+								tag: "fieldset",
+								fields: [
+									{
+										type: "input",
+										model: "subname",
+										label: "Name",
+										fieldOptions: {
+											inputType: "text"
+										},
+										required: true,
+										validator: ["required"]
+									}
+								]
 							},
 							{
 								type: "input",
@@ -56,6 +79,17 @@ export default {
 						]
 					},
 					{
+						type: "input",
+						model: "single",
+						label: "Single field (without group)",
+						fieldOptions: {
+							inputType: "text"
+						},
+						required: true,
+						validator: ["string"]
+					},
+					{
+						type: "group",
 						legend: "Other Details",
 						fields: [
 							{
@@ -76,20 +110,12 @@ export default {
 							}
 						]
 					}
-				],
-				fields: [
-					{
-						type: "input",
-						model: "single",
-						label: "Single field (without group)",
-						fieldOptions: {
-							inputType: "text"
-						}
-					}
 				]
 			},
 
 			formOptions: {
+				validateAfterLoad: true,
+				validateAfterChanged: true,
 				fieldIdPrefix: "frm1-"
 			}
 		};
@@ -103,4 +129,15 @@ export default {
 
 <style lang="scss">
 @import "../../style.scss";
+.field-group {
+	border: 2px solid #bbb;
+	padding: 8px;
+	border-radius: 4px;
+}
+.subgroup {
+	border-color: goldenrod;
+	legend {
+		color: #00268d;
+	}
+}
 </style>