Attachment 146675 Details for Bug 32939 – Bug 32939: Have a generic fetch function for POST and PUT requests in vue modules

[patch] Bug 32939: Have a generic fetch function for POST and PUT requests in vue modules

Bug-32939-Have-a-generic-fetch-function-for-POST-a.patch (text/plain), 15.26 KB, created by Jonathan Druart on 2023-02-15 11:57:06 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jonathan Druart

Created: 2023-02-15 11:57:06 UTC

Size: 15.26 KB

patch

obsolete

>From 9d295f6348376fde36dc2461ec533728decbd785 Mon Sep 17 00:00:00 2001
>From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
>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
>
>Rebase to 32806 and prior to 32925. Squash
>More updates. Ready for review, for now.
>
>JD amended patch:
>* prettier
>* remove changes to AgreementRelationships.vue and EHoldingsLocalPackageAgreements.vue to have less files to update in upcoming patches
>---
> .../vue/components/ERM/AgreementsFormAdd.vue  | 61 ++++++++-----------
> .../ERM/AgreementsFormConfirmDelete.vue       | 47 +++++++-------
> .../js/vue/components/ERM/AgreementsList.vue  |  5 +-
> .../js/vue/components/ERM/AgreementsShow.vue  | 15 +++--
> .../prog/js/vue/fetch/erm-api-client.js       | 46 ++++++++++++++
> .../intranet-tmpl/prog/js/vue/fetch/erm.js    | 16 +----
> .../prog/js/vue/fetch/http-client.js          | 59 ++++++++++++++++++
> 7 files changed, 168 insertions(+), 81 deletions(-)
> create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm-api-client.js
> create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.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 c22afd44846..cb69d3e6490 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
>@@ -190,7 +190,7 @@ import AgreementLicenses from "./AgreementLicenses.vue"
> import AgreementRelationships from "./AgreementRelationships.vue"
> import Documents from "./Documents.vue"
> import { setMessage, setError, setWarning } from "../../messages"
>-import { fetchAgreement, checkError } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/erm-api-client.js"
> import { storeToRefs } from "pinia"
> 
> export default {
>@@ -245,7 +245,7 @@ export default {
>     beforeRouteEnter(to, from, next) {
>         next(vm => {
>             if (to.params.agreement_id) {
>-                vm.agreement = vm.getAgreement(to.params.agreement_id)
>+                vm.getAgreement(to.params.agreement_id)
>             } else {
>                 vm.initialized = true
>             }
>@@ -253,9 +253,15 @@ export default {
>     },
>     methods: {
>         async getAgreement(agreement_id) {
>-            const agreement = await fetchAgreement(agreement_id)
>-            this.agreement = agreement
>-            this.initialized = true
>+            const client = new ERMAPIClient()
>+            try {
>+                await client.agreements.get(agreement_id).then(data => {
>+                    this.agreement = data
>+                    this.initialized = true
>+                })
>+            } catch (err) {
>+                setError(err.message || err.statusText)
>+            }
>         },
>         checkForm(agreement) {
>             let errors = []
>@@ -326,18 +332,12 @@ export default {
> 
>             //let agreement= Object.assign( {} ,this.agreement); // copy
>             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
>+            let agreement_id = agreement.agreement_id
> 
>             if (!this.checkForm(agreement)) {
>                 return false
>             }
> 
>-            let apiUrl = "/api/v1/erm/agreements"
>-
>-            let method = "POST"
>-            if (agreement.agreement_id) {
>-                method = "PUT"
>-                apiUrl += "/" + agreement.agreement_id
>-            }
>             delete agreement.agreement_id
>             delete agreement.vendor
>             agreement.is_perpetual = agreement.is_perpetual ? true : false
>@@ -375,30 +375,23 @@ export default {
> 
>             delete agreement.agreement_packages
> 
>-            const options = {
>-                method: method,
>-                body: JSON.stringify(agreement),
>-                headers: {
>-                    "Content-Type": "application/json;charset=utf-8",
>-                },
>-            }
>-
>-            fetch(apiUrl, options)
>-                .then(response => checkError(response, 1))
>-                .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"))
>+            const client = new ERMAPIClient()
>+            ;(async () => {
>+                try {
>+                    if (agreement_id) {
>+                        await client.agreements
>+                            .update(agreement, agreement_id)
>+                            .then(setMessage(this.$__("Agreement updated")))
>                     } else {
>-                        setError(response.message || response.statusText)
>+                        await client.agreements
>+                            .create(agreement)
>+                            .then(setMessage(this.$__("Agreement created")))
>                     }
>-                })
>-                .catch(error => {
>-                    setError(error)
>-                })
>+                    this.$router.push("/cgi-bin/koha/erm/agreements")
>+                } catch (err) {
>+                    setError(err.message || err.statusText)
>+                }
>+            })()
>         },
>         onStatusChanged(e) {
>             if (e.authorised_value != "closed") {
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
>index 758049ff646..e82d067fa1a 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
>@@ -36,7 +36,7 @@
> </template>
> 
> <script>
>-import { fetchAgreement, checkError } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/erm-api-client.js"
> import { setMessage, setError } from "../../messages"
> 
> export default {
>@@ -53,35 +53,30 @@ export default {
>     },
>     methods: {
>         async getAgreement(agreement_id) {
>-            const agreement = await fetchAgreement(agreement_id)
>-            this.agreement = agreement
>-            this.initialized = true
>+            const client = new ERMAPIClient()
>+            try {
>+                await client.agreements.get(agreement_id).then(data => {
>+                    this.agreement = data
>+                    this.initialized = true
>+                })
>+            } catch (err) {
>+                setError(err.message || err.statusText)
>+            }
>         },
>         onSubmit(e) {
>             e.preventDefault()
> 
>-            let apiUrl = "/api/v1/erm/agreements/" + this.agreement.agreement_id
>-
>-            const options = {
>-                method: "DELETE",
>-                headers: {
>-                    "Content-Type": "application/json;charset=utf-8",
>-                },
>-            }
>-
>-            fetch(apiUrl, options)
>-                .then(response => checkError(response, 1))
>-                .then(response => {
>-                    if (response.status == 204) {
>-                        setMessage(this.$__("Agreement deleted"))
>-                        this.$router.push("/cgi-bin/koha/erm/agreements")
>-                    } else {
>-                        setError(response.message || response.statusText)
>-                    }
>-                })
>-                .catch(error => {
>-                    setError(error)
>-                })
>+            const client = new ERMAPIClient()
>+            ;(async () => {
>+                try {
>+                    await client.agreements
>+                        .delete(this.agreement.agreement_id)
>+                        .then(setMessage(this.$__("Agreement deleted")))
>+                    this.$router.push("/cgi-bin/koha/erm/agreements")
>+                } catch (err) {
>+                    setError(err)
>+                }
>+            })()
>         },
>     },
>     name: "AgreementsFormConfirmDelete",
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
>index 2e8460aff2b..458616b3f1a 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
>@@ -37,8 +37,8 @@
> import flatPickr from "vue-flatpickr-component"
> import Toolbar from "./AgreementsToolbar.vue"
> import { inject, createVNode, render } from "vue"
>+import { ERMAPIClient } from "../../fetch/erm-api-client.js"
> import { storeToRefs } from "pinia"
>-import { fetchAgreements } from "../../fetch/erm.js"
> import { useDataTable, build_url } from "../../composables/datatables"
> 
> export default {
>@@ -93,7 +93,8 @@ export default {
>     },
>     methods: {
>         async getAgreements() {
>-            const agreements = await fetchAgreements()
>+            const client = new ERMAPIClient()
>+            const agreements = await client.agreements.getAll()
>             this.agreements = agreements
>             this.initialized = true
>         },
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
>index c5b38ca84ab..65ac12d0ae9 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
>@@ -300,7 +300,8 @@
> 
> <script>
> import { inject } from "vue"
>-import { fetchAgreement } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/erm-api-client.js"
>+import { setError } from "../../messages"
> 
> export default {
>     setup() {
>@@ -346,9 +347,15 @@ export default {
>     },
>     methods: {
>         async getAgreement(agreement_id) {
>-            const agreement = await fetchAgreement(agreement_id)
>-            this.agreement = agreement
>-            this.initialized = true
>+            const client = new ERMAPIClient()
>+            try {
>+                await client.agreements.get(agreement_id).then(data => {
>+                    this.agreement = data
>+                    this.initialized = true
>+                })
>+            } catch (err) {
>+                setError(err.message || err.statusText)
>+            }
>         },
>     },
>     name: "AgreementsShow",
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm-api-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm-api-client.js
>new file mode 100644
>index 00000000000..76c4f2a5059
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm-api-client.js
>@@ -0,0 +1,46 @@
>+import HttpClient from "./http-client";
>+
>+export class ERMAPIClient extends HttpClient {
>+    constructor() {
>+        super({
>+            baseURL: "/api/v1/erm/",
>+        });
>+    }
>+
>+    get agreements() {
>+        return {
>+            get: (id) =>
>+                this.get({
>+                    endpoint: "agreements/" + id,
>+                    headers: {
>+                        "x-koha-embed":
>+                            "periods,user_roles,user_roles.patron,agreement_licenses,agreement_licenses.license,agreement_relationships,agreement_relationships.related_agreement,documents,agreement_packages,agreement_packages.package,vendor",
>+                    },
>+                }),
>+            getAll: (query) =>
>+                this.get({
>+                    endpoint: "agreements?" + (query || "_per_page=-1"),
>+                }),
>+            delete: (id) =>
>+                this.delete({
>+                    endpoint: "agreements/" + id,
>+                    headers: this.getDefaultJSONPayloadHeader(),
>+                }),
>+            create: (agreement) =>
>+                this.post({
>+                    endpoint: "agreements",
>+                    body: agreement,
>+                    headers: this.getDefaultJSONPayloadHeader(),
>+                }),
>+            update: (agreement, id) =>
>+                this.put({
>+                    endpoint: "agreements/" + id,
>+                    body: agreement,
>+                    headers: this.getDefaultJSONPayloadHeader(),
>+                }),
>+            //count: () => this.count("agreements"), //TODO: Implement count method
>+        };
>+    }
>+}
>+
>+export default ERMAPIClient;
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
>index a81d206e821..54e47337979 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
>@@ -1,20 +1,6 @@
> import { setError } from "../messages";
> 
>-export const fetchAgreement = function (agreement_id) {
>-    if (!agreement_id) return;
>-    const apiUrl = "/api/v1/erm/agreements/" + agreement_id;
>-    return myFetch(apiUrl, {
>-        headers: {
>-            "x-koha-embed":
>-                "periods,user_roles,user_roles.patron,agreement_licenses,agreement_licenses.license,agreement_relationships,agreement_relationships.related_agreement,documents,agreement_packages,agreement_packages.package,vendor",
>-        },
>-    });
>-};
>-
>-export const fetchAgreements = function () {
>-    const apiUrl = "/api/v1/erm/agreements?_per_page=-1";
>-    return myFetch(apiUrl);
>-};
>+//TODO: all of these functions should be deleted and reimplemented in the components using ERMAPIClient
> 
> export const fetchLicense = function (license_id) {
>     if (!license_id) return;
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js
>new file mode 100644
>index 00000000000..6a47276dcf2
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js
>@@ -0,0 +1,59 @@
>+class HttpClient {
>+    constructor(options = {}) {
>+        this._baseURL = options.baseURL || "";
>+    }
>+
>+    async _fetchJSON(endpoint, headers = {}, options = {}) {
>+        const res = await fetch(this._baseURL + endpoint, {
>+            ...options,
>+            headers: headers,
>+        });
>+
>+        if (!res.ok) throw new Error(res.statusText);
>+
>+        if (options.parseResponse !== false && res.status !== 204)
>+            return res.json();
>+
>+        return undefined;
>+    }
>+
>+    get(params = {}) {
>+        console.log(params);
>+        return this._fetchJSON(params.endpoint, params.headers, {
>+            ...params.options,
>+            method: "GET",
>+        });
>+    }
>+
>+    post(params = {}) {
>+        return this._fetchJSON(params.endpoint, params.headers, {
>+            ...params.options,
>+            body: params.body ? JSON.stringify(params.body) : undefined,
>+            method: "POST",
>+        });
>+    }
>+
>+    put(params = {}) {
>+        return this._fetchJSON(params.endpoint, params.headers, {
>+            ...params.options,
>+            body: params.body ? JSON.stringify(params.body) : undefined,
>+            method: "PUT",
>+        });
>+    }
>+
>+    delete(params = {}) {
>+        return this._fetchJSON(params.endpoint, params.headers, {
>+            parseResponse: false,
>+            ...params.options,
>+            method: "DELETE",
>+        });
>+    }
>+
>+    //TODO: Implement count method
>+
>+    getDefaultJSONPayloadHeader() {
>+        return { "Content-Type": "application/json;charset=utf-8" };
>+    }
>+}
>+
>+export default HttpClient;
>-- 
>2.25.1

Actions: View | Diff | Splinter Review

Attachments on bug 32939: 146470 | 146509 | 146642 | 146644 | 146645 | 146668 | 146669 | 146670 | 146671 | 146672 | 146674 | 146675 | 146676 | 146677 | 146678 | 146679 | 146680 | 146681 | 146682 | 147029 | 147030 | 147031 | 147032 | 147033 | 147034 | 147035 | 147036 | 147037 | 147038 | 147039 | 147040 | 147041 | 147042 | 147043 | 147044 | 147056 | 147057 | 147059 | 147060 | 147061 | 147062 | 147063 | 147064 | 147065 | 147066 | 147067 | 147068 | 147069 | 147070 | 147071 | 147072 | 147073 | 147306 | 147307 | 147308 | 147309 | 147310 | 147311 | 147312 | 147313 | 147314 | 147315 | 147316 | 147317 | 147318 | 147319 | 147320 | 147321 | 147322 | 147332 | 149441