Handle submission error on form submit

Author: alOneh

templates/vue/api/fooFetch.js

@@ -1,3 +1,4 @@
+import SubmissionError from '../error/SubmissionError';
 import { API_HOST, API_PATH } from './_entrypoint';
 
 const jsonLdMimeType = 'application/ld+json';
@@ -23,6 +24,8 @@ export default function {{{ lc }}}Fetch(url, options = {}) {
 
         let errors = {_error: error};
         json.violations.map((violation) => errors[violation.propertyPath] = violation.message);
+
+        throw new SubmissionError(errors);
       });
   });
 }

templates/vue/error/SubmissionError.js

@@ -0,0 +1,14 @@
+// Note : This work due to babel-plugin-transform-builtin-extend
+export default class SubmissionError extends Error {
+  constructor(errors) {
+    super('Submit Validation Failed');
+
+    this.errors = errors;
+
+    Error.captureStackTrace(this, this.constructor);
+
+    this.name = this.constructor.name;
+
+    return this;
+  }
+}

templates/vue/store/modules/foo/create.js

@@ -1,13 +1,16 @@
+import SubmissionError from '../../../error/SubmissionError';
 import {{{ lc }}}Fetch from '../../../api/{{{ lc }}}Fetch';
 
 const {{{ uc }}}_CREATE_ERROR = '{{{ uc }}}_CREATE_ERROR';
 const {{{ uc }}}_CREATE_LOADING = '{{{ uc }}}_CREATE_LOADING';
 const {{{ uc }}}_CREATE_SUCCESS = '{{{ uc }}}_CREATE_SUCCESS';
+const {{{ uc }}}_CREATE_VIOLATIONS = '{{{ uc }}}_CREATE_VIOLATIONS';
 
 const state = {
   loading: false,
   error: '',
-  created: null
+  created: null,
+  violations: null
 };
 
 function error(commit, error) {
@@ -22,10 +25,19 @@ function success(commit, created) {
   return commit({{{ uc }}}_CREATE_SUCCESS, created);
 }
 
-const getters = {};
+function violations(commit, violations) {
+  return commit(GATEWAY_CREATE_VIOLATIONS, violations);
+}
+
+const getters = {
+  created: state => state.created,
+  error: state => state.error,
+  loading: state => state.loading,
+  violations: state => state.violations,
+};
 
 const actions = {
-  create({ commit }) {
+  create({ commit }, values) {
     loading(commit, true);
 
     return {{{ lc }}}Fetch('/{{{ name }}}', {method: 'POST', body: JSON.stringify(values)})
@@ -39,6 +51,13 @@ const actions = {
       })
       .catch(e => {
         loading(commit, false);
+
+        if (e instanceof SubmissionError) {
+          violations(commit, e.errors);
+          error(commit, e.errors._error);
+          return;
+        }
+
         error(commit, e.message);
       });
   }
@@ -53,6 +72,9 @@ const mutations = {
     },
     [{{{ uc }}}_CREATE_SUCCESS] (state, created) {
       state.created = created;
+    },
+    [{{{ uc }}}_CREATE_VIOLATIONS] (state, violations) {
+      state.violations = violations;
     }
 };