Last active
June 23, 2019 18:15
-
-
Save opejovic/23fb71c57cd7fb9c1602dd8abed7b9e1 to your computer and use it in GitHub Desktop.
Vue-Forms: Form.js
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
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.errors); | |
reject(error.response.data.errors); | |
}); | |
}); | |
} | |
/** | |
* Handle a successful form submission. | |
* | |
* @param {object} data | |
*/ | |
onSuccess(data) { | |
this.reset(); | |
} | |
/** | |
* Handle a failed form submission. | |
* | |
* @param {object} errors | |
*/ | |
onFail(errors) { | |
this.errors.record(errors); | |
} | |
} | |
new Vue({ | |
el: '#app', | |
data: { | |
form: new Form({ | |
name: '', | |
description: '' | |
}) | |
}, | |
methods: { | |
onSubmit() { | |
this.form.post('/projects') | |
.then(response => alert('Wahoo!')); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment