Attachment 146644 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 Pedro Amorim on 2023-02-14 17:27:25 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Pedro Amorim

Created: 2023-02-14 17:27:25 UTC

Size: 15.26 KB

patch

obsolete

>From d0a84adba6103037284cf5ded42dfb8e276e314d 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
>---
> .../components/ERM/AgreementRelationships.vue |  5 +-
> .../vue/components/ERM/AgreementsFormAdd.vue  | 56 ++++++++-----------
> .../ERM/AgreementsFormConfirmDelete.vue       | 40 ++++++-------
> .../js/vue/components/ERM/AgreementsList.vue  |  5 +-
> .../js/vue/components/ERM/AgreementsShow.vue  | 12 ++--
> .../prog/js/vue/fetch/api-client.js           | 46 +++++++++++++++
> .../intranet-tmpl/prog/js/vue/fetch/erm.js    | 22 +-------
> .../prog/js/vue/fetch/http-client.js          | 56 +++++++++++++++++++
> 8 files changed, 155 insertions(+), 87 deletions(-)
> create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/fetch/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/AgreementRelationships.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
>index 17bd31b784..241f065818 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
>@@ -85,7 +85,7 @@
> </template>
> 
> <script>
>-import { fetchAgreements } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/api-client.js";
> 
> export default {
>     data() {
>@@ -94,7 +94,8 @@ export default {
>         }
>     },
>     beforeCreate() {
>-        fetchAgreements().then(agreements => {
>+        const client = new ERMAPIClient()
>+        const agreements = client.agreements.getAll("_per_page=-1").then(agreements => {
>             this.agreements = agreements.filter(
>                 agreement => agreement.agreement_id !== this.agreement_id
>             )
>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 1f996f8b42..356bf55d24 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 } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/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,12 @@ export default {
>     },
>     methods: {
>         async getAgreement(agreement_id) {
>-            const agreement = await fetchAgreement(agreement_id)
>-            this.agreement = agreement
>-            this.initialized = true
>+            const client = new ERMAPIClient();
>+            try {
>+                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 +329,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,29 +372,20 @@ 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 => {
>-                    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)
>+            const client = new ERMAPIClient();
>+            (async () => {
>+                try {
>+                    if ( agreement_id ) {
>+                        await client.agreements.update(agreement, agreement_id).then(setMessage(this.$__("Agreement updated")));
>+                    }else{
>+                        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 fdfb9d607b..17ee04bf2c 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 } from "../../fetch/erm.js"
>+import { ERMAPIClient } from "../../fetch/api-client.js";
> import { setMessage, setError } from "../../messages"
> 
> export default {
>@@ -53,34 +53,26 @@ 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",
>-                },
>-            }
>+            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)
>+                }
>+            })();
> 
>-            fetch(apiUrl, options)
>-                .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)
>-                })
>         },
>     },
>     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 2e8460aff2..b3b89999ce 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/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("_per_page=-1")
>             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 c5b38ca84a..6dcac5130e 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/api-client.js";
>+import { setError } from "../../messages"
> 
> export default {
>     setup() {
>@@ -346,9 +347,12 @@ 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/api-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js
>new file mode 100644
>index 0000000000..158e329054
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js
>@@ -0,0 +1,46 @@
>+import HttpClient from "./http-client";
>+
>+export class ERMAPIClient extends HttpClient {
>+  constructor(options = {})
>+  {
>+    super({
>+      baseURL: "/api/v1/erm/",
>+      headers: options.headers
>+    });
>+  }
>+
>+  get agreements() {
>+    return {
>+      get: (id) => this.get(
>+        "agreements/"+id,
>+          {
>+            "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("agreements"+(query?"?"+query:"")),
>+      count: () => this.count("agreements"),
>+      delete: (id) => this.delete(
>+        "agreements/"+id,
>+        {
>+          "Content-Type": "application/json;charset=utf-8",
>+        }
>+      ),
>+      create: (agreement) => this.post(
>+        "agreements",
>+        agreement,
>+        {
>+          "Content-Type": "application/json;charset=utf-8"
>+        }
>+      ),
>+      update: (agreement, id) => this.put(
>+        "agreements/"+id, agreement,
>+        {
>+          "Content-Type": "application/json;charset=utf-8"
>+        }
>+      )
>+    };
>+  }
>+}
>+
>+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 e40a85a522..eaedb45229 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
>@@ -1,26 +1,6 @@
> import { setError } from "../messages";
> 
>-export const fetchAgreement = async function (agreement_id) {
>-    if (!agreement_id) return;
>-    const apiUrl = "/api/v1/erm/agreements/" + agreement_id;
>-    let agreement;
>-    await fetch(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",
>-        },
>-    })
>-        .then(checkError)
>-        .then(
>-            (result) => {
>-                agreement = result;
>-            },
>-            (error) => {
>-                setError(error);
>-            }
>-        );
>-    return agreement;
>-};
>+//TODO: all of these functions should be deleted and reimplemented in the components using ERMAPIClient
> 
> export const fetchAgreements = async function () {
>     const apiUrl = "/api/v1/erm/agreements?_per_page=-1";
>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 0000000000..ce17cc1aa1
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js
>@@ -0,0 +1,56 @@
>+class HttpClient {
>+    constructor(options = {}) {
>+      this._baseURL = options.baseURL || "";
>+      this._headers = options.headers || {}; //TODO: This _headers are no longer being used, remove them.
>+    }
>+
>+    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(endpoint, headers = {}, options = {}) {
>+      return this._fetchJSON(endpoint, headers,
>+      {
>+        ...options,
>+        method: "GET"
>+      });
>+    }
>+
>+    //TODO: Implement count method
>+
>+    post(endpoint, body, headers = {}, options = {}) {
>+      return this._fetchJSON(endpoint, headers, {
>+        ...options,
>+        body: body ? JSON.stringify(body) : undefined,
>+        method: "POST"
>+      });
>+    }
>+
>+    put(endpoint, body, headers = {}, options = {}) {
>+      return this._fetchJSON(endpoint, headers, {
>+        ...options,
>+        body: body ? JSON.stringify(body) : undefined,
>+        method: "PUT"
>+      });
>+    }
>+
>+    delete(endpoint, headers = {}, options = {}) {
>+      return this._fetchJSON(endpoint, headers, {
>+        parseResponse: false,
>+        ...options,
>+        method: "DELETE"
>+      });
>+    }
>+  }
>+
>+  export default HttpClient;
>\ No newline at end of file
>-- 
>2.30.2

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