From c1f1d089d39325557628d08f3304ccae56e40dec Mon Sep 17 00:00:00 2001 From: Pedro Amorim Date: Fri, 10 Feb 2023 11:19:08 -0100 Subject: [PATCH] Bug 32939: Have a generic fetch function for POST and PUT requests in vue modules In bug 32925 it's discussed the possibility of having a generic fetch function to handle basic CRUD creates and edits for vuejs modules in the future and move all common POST+PUT async requests workflow in there, like the 'Submitting...' loading behaviour. This POC illustrates this and it's intent is to start discussion, plan on iterating further to the rest of ERM if agreed upon. --- .../vue/components/ERM/AgreementsFormAdd.vue | 28 ++++++++----------- .../intranet-tmpl/prog/js/vue/fetch/fetch.js | 26 +++++++++++++++++ 2 files changed, 37 insertions(+), 17 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/fetch/fetch.js diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue index d2330b754e..471f70d50d 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue @@ -198,6 +198,7 @@ import { submitted, } from "../../messages" import { fetchAgreement } from "../../fetch/erm.js" +import { submitToAPI } from "../../fetch/fetch.js" import { storeToRefs } from "pinia" export default { @@ -390,23 +391,16 @@ export default { }, } - isSubmitting() - fetch(apiUrl, options) - .then(response => { - if (response.status == 200) { - this.$router.push("/cgi-bin/koha/erm/agreements") - setMessage(this.$__("Agreement updated")) - } else if (response.status == 201) { - this.$router.push("/cgi-bin/koha/erm/agreements") - setMessage(this.$__("Agreement created")) - } else { - setError(response.message || response.statusText) - } - }) - .catch(error => { - setError(error) - }) - .then(() => submitted()) + submitToAPI( + { + apiUrl: apiUrl, + options: options, + success_redirect: '/cgi-bin/koha/erm/agreements', + created_message: this.$__("Agreement created"), + updated_message: this.$__("Agreement updated"), + router: this.$router + } + ) }, onStatusChanged(e) { if (e.authorised_value != "closed") { diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/fetch.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/fetch.js new file mode 100644 index 0000000000..ba6aabdbe7 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/fetch.js @@ -0,0 +1,26 @@ +import { + setMessage, + setError, + isSubmitting, + submitted, +} from "../messages" + +export const submitToAPI = async function (args) { + isSubmitting() + await fetch(args.apiUrl, args.options) + .then(response => { + if (response.status == 200) { + args.router.push(args.success_redirect) + setMessage(args.updated_message) + } else if (response.status == 201) { + args.router.push(args.success_redirect) + setMessage(args.created_message) + } else { + setError(response.message || response.statusText) + } + }) + .catch(error => { + setError(error) + }) + .then(() => submitted()) +}; -- 2.30.2