Last active
February 28, 2017 16:00
-
-
Save lukepolo/159bcc6ebac880d8c20b25a05c326ad7 to your computer and use it in GitHub Desktop.
Helper Classes for Vue.js / Vuex / Vue-Router
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js | |
class Errors { | |
/** | |
* Create a new Errors instance. | |
*/ | |
constructor() { | |
this.errors = {}; | |
} | |
/** | |
* Determine if an errors exists for the given field. | |
* | |
* @param {string} field | |
*/ | |
has(field) { | |
return this.errors.hasOwnProperty(field); | |
} | |
/** | |
* Determine if we have any errors. | |
*/ | |
any() { | |
return Object.keys(this.errors).length > 0; | |
} | |
/** | |
* Retrieve the error message for a field. | |
* | |
* @param {string} field | |
*/ | |
get(field) { | |
if (this.errors[field]) { | |
return this.errors[field][0]; | |
} | |
} | |
/** | |
* Record the new errors. | |
* | |
* @param {object} errors | |
*/ | |
record(errors) { | |
this.errors = errors; | |
} | |
/** | |
* Clear one or all error fields. | |
* | |
* @param {string|null} field | |
*/ | |
clear(field) { | |
if (field) { | |
delete this.errors[field]; | |
return; | |
} | |
this.errors = {}; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js | |
class Form { | |
/** | |
* Create a new Form instance. | |
* | |
* @param {object} data | |
*/ | |
constructor(data) { | |
this.originalData = data; | |
for (let field in data) { | |
this[field] = data[field]; | |
} | |
this.errors = new Errors(); | |
} | |
/** | |
* Fetch all relevant data for the form. | |
*/ | |
data() { | |
let data = {}; | |
for (let property in this.originalData) { | |
data[property] = this[property]; | |
} | |
return data; | |
} | |
/** | |
* Reset the form fields. | |
*/ | |
reset() { | |
for (let field in this.originalData) { | |
this[field] = ''; | |
} | |
this.errors.clear(); | |
} | |
/** | |
* Send a POST request to the given URL. | |
* . | |
* @param {string} url | |
*/ | |
post(url) { | |
return this.submit('post', url); | |
} | |
/** | |
* Send a PUT request to the given URL. | |
* . | |
* @param {string} url | |
*/ | |
put(url) { | |
return this.submit('put', url); | |
} | |
/** | |
* Send a PATCH request to the given URL. | |
* . | |
* @param {string} url | |
*/ | |
patch(url) { | |
return this.submit('patch', url); | |
} | |
/** | |
* Send a DELETE request to the given URL. | |
* . | |
* @param {string} url | |
*/ | |
delete(url) { | |
return this.submit('delete', url); | |
} | |
/** | |
* Submit the form. | |
* | |
* @param {string} requestType | |
* @param {string} url | |
*/ | |
submit(requestType, url) { | |
return new Promise((resolve, reject) => { | |
axios[requestType](url, this.data()) | |
.then(response => { | |
this.onSuccess(response.data); | |
resolve(response.data); | |
}) | |
.catch(error => { | |
this.onFail(error.response.data); | |
reject(error.response.data); | |
}); | |
}); | |
} | |
/** | |
* Handle a successful form submission. | |
* | |
* @param {object} data | |
*/ | |
onSuccess(data) { | |
alert(data.message); // temporary | |
this.reset(); | |
} | |
/** | |
* Handle a failed form submission. | |
* | |
* @param {object} errors | |
*/ | |
onFail(errors) { | |
this.errors.record(errors); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment