Modify validation error handling, handle if schema is null

Author: icebob

dev/app.vue

@@ -3,13 +3,19 @@
 			.col-md-10.col-md-offset-1
 				data-table(:rows="rows", :selected="selected", :select="selectRow")
 
-		.row(v-if="model")
+		.row(v-show="model")
 			.col-md-6
 				.buttons.text-center
 					button.btn.btn-default.new(@click="newModel") New
-					button.btn.btn-primary.save(@click="saveModel") Save
+					button.btn.btn-primary.save(@click="saveModel") 
+						| Save
+						i.fa.fa-warning(v-if="showWarning()")
 					button.btn.btn-danger.delete(@click="deleteModel") Delete
 
+				.errors.text-center
+					div.alert.alert-danger(v-for="item in validationErrors") {{ item.field.label}}: 
+						strong {{ item.error }}
+
 				vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
 
 
@@ -51,14 +57,30 @@
 
 				formOptions: {
 					validateAfterLoad: true,
-					validateAfterChanged: true,
+					validateAfterChanged: false,
 					validateBeforeSave: true
 				}
 			}
 		},
 
+		computed: {
+			validationErrors() {
+				if (this.$refs.form && this.$refs.form.errors) 
+					return this.$refs.form.errors;
+
+				return [];
+			}
+		},
+
 		methods: {
+			showWarning() { 
+				if (this.$refs.form && this.$refs.form.errors) {
+					return this.$refs.form.errors.length > 0 
+				}
+			},
+
 			selectRow(event, row, add) {
+				this.isNewModel = false;
 				if ( (add || (event && event.ctrlKey))) {
 					if (this.selected.indexOf(row) != -1)
 						this.selected.$remove(row);
@@ -181,6 +203,21 @@
 		.boolean { color: magenta; }
 		.null { color: red; }
 		.key { color: green; }    	
+	} 
+
+	.buttons {
+		button {
+			margin: 0.2em 0.3em;
+			padding: 6px 20px;
+			position: relative;
+		}
+
+		i.fa.fa-warning {
+			position: absolute;
+			top: 0px;
+			right: 0px;
+			color: Orange;			
+		}
 	}
 
 </style>

dev/data.js

@@ -1,15 +1,18 @@
 import faker from 'faker';
 import moment from 'moment';
 
-module.exports = {
-	roles: [
-		{ id: "admin", name: "Administrator"},
-		{ id: "moderator", name: "Moderator"},
-		{ id: "user", name: "Registered User"},
-		{ id: "visitor", name: "Visitor"}
-	],
+let roles = [
+	{ id: "admin", name: "Administrator"},
+	{ id: "moderator", name: "Moderator"},
+	{ id: "user", name: "Registered User"},
+	{ id: "visitor", name: "Visitor"}
+]
+
+let skills = [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ];
 
-	skills: [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ],
+module.exports = {
+	roles,
+	skills,
 
 	users: (function() {
 		let res = [];
@@ -28,12 +31,12 @@ module.exports = {
 				min: 1,
 				max: 10
 			});
-			user.role = faker.helpers.randomize(module.exports.roles).id;
+			user.role = faker.helpers.randomize(roles).id;
 
 
 			user.skills = [];
-			user.skills.push(faker.helpers.randomize(module.exports.skills));
-			user.skills.push(faker.helpers.randomize(module.exports.skills));
+			user.skills.push(faker.helpers.randomize(skills));
+			user.skills.push(faker.helpers.randomize(skills));
 
 			user.language = lang;
 			user.status = faker.helpers.randomize([true, false, true]);
@@ -66,7 +69,7 @@ module.exports = {
 			user.accountHistory = undefined;
 
 			res.push(user);
-			console.log(user);
+			//console.log(user);
 		}
 		//console.log(res);
 		return res;

dev/dataTable.vue

@@ -10,7 +10,9 @@
 		tbody
 			tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
 				td {{ row.id }}
-				td {{ row.name }}
+				td 
+					| {{ row.name }} 
+					.label.label-warning(v-if="!row.status") Inactive
 				td {{ row.email }}
 				td {{ row.address.country }}
 </template>

dev/main.js

@@ -1,5 +1,4 @@
 $(function() {
-	console.log($.fn.selectpicker);
 	let App = require("./App.vue");
 
 	new Vue({

dev/schema.js

@@ -85,7 +85,7 @@ module.exports = {
 			label: "Company name",
 			model: "company.name",
 			styleClasses: "company",
-			visible(model) { return model.type == "business"; }
+			visible(model) { return model && model.type == "business"; }
 		},
 		{
 			type: "text",
@@ -95,7 +95,7 @@ module.exports = {
 			pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
 			placeholder: "User's phone number",
 			hint: "Format: +36-(20|30|70)-000-0000",
-			visible(model) { return model.type == "business"; }
+			visible(model) { return model && model.type == "business"; }
 		},			
 		{
 			type: "email",
@@ -200,7 +200,7 @@ module.exports = {
 		{
 			type: "text",
 			label: "Street",
-			model: "address.street",
+			model: "address.streetC",
 			required: true
 		},        
 		{
@@ -220,10 +220,15 @@ module.exports = {
 				if (!model.address.geo)
 					model.address.geo = {};
 
-				if (values.length > 0)
+				if (values.length > 0 && values[0].trim() != "")
 					model.address.geo.lat = parseFloat(values[0].trim());
-				if (values.length > 1)
+				else 
+					model.address.geo.lat = 0
+
+				if (values.length > 1 && values[1].trim() != "")
 					model.address.geo.lng = parseFloat(values[1].trim());
+				else 
+					model.address.geo.lng = 0
 			},
 			buttons: [
 				{
@@ -282,7 +287,7 @@ module.exports = {
 			type: "label",
 			label: "Created",
 			model: "created",
-			get(model) { return model.created ? moment(model.created).format("LLL") : "-"; }
+			get(model) { return model && model.created ? moment(model.created).format("LLL") : "-"; }
 		},
 		{
 			type: "checkbox",

src/fields/abstractField.js

@@ -15,7 +15,7 @@ export default {
 				if (isFunction(this.schema.get))
 					val = this.schema.get(this.model);
 
-				else if (this.schema.model)
+				else if (this.model && this.schema.model)
 					val = this.$get("model." + this.schema.model);
 
 				if (isFunction(this.formatValueToField))
@@ -70,7 +70,6 @@ export default {
 					let err = validator(this.value, this.schema);
 					if (err && err.length > 0) {
 						Array.prototype.push.apply(this.schema.errors, err);
-						// console.log(this.schema.errors);
 					}
 				});
 

src/formGenerator.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	table
+	table(v-if="schema != null")
 		thead
 		tbody
 			tr(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
@@ -52,10 +52,12 @@
 		computed: {
 			fields() {
 				let res = [];
-				each(this.schema.fields, (field) => {
-					if (!this.multiple || field.multi === true)
-						res.push(field);
-				});
+				if (this.schema) {
+					each(this.schema.fields, (field) => {
+						if (!this.multiple || field.multi === true)
+							res.push(field);
+					});
+				}
 
 				return res;
 			}
@@ -129,7 +131,12 @@
 					if (isFunction(child.validate))
 					{
 						let err = child.validate();
-						Array.prototype.push.apply(this.errors, err);
+						each(err, (err) => {
+							this.errors.push({
+								field: child.schema,
+								error: err
+							})
+						});
 					}
 				});