Rework on validation and events to allow for a more flexible structure

Use an event bus for most events
Breaking: validate is a promise since now all validation is asynchronous

Author: Lionel Bijaoui

projects/basic/app.vue

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

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);

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",