From 5163af032eac5af705920622c26247d744820187 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.
---
 .../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 ++--
 .../ERM/EHoldingsLocalPackageAgreements.vue   |  5 +-
 .../prog/js/vue/fetch/erm-api-client.js       | 52 ++++++++++++++++
 .../intranet-tmpl/prog/js/vue/fetch/erm.js    | 38 +-----------
 .../prog/js/vue/fetch/http-client.js          | 60 +++++++++++++++++++
 9 files changed, 168 insertions(+), 105 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/AgreementRelationships.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
index 17bd31b784..a95886d987 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/erm-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().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..1e8bac7e75 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/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,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)
+            }
         },
         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..1c047f6d9b 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/erm-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..e78477b70d 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 c5b38ca84a..4a7986a467 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,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/components/ERM/EHoldingsLocalPackageAgreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue
index 80f5f98431..212fd5e79e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageAgreements.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { fetchAgreements } from "../../fetch/erm.js"
+import { ERMAPIClient } from "../../fetch/erm-api-client.js";
 
 export default {
     data() {
@@ -65,7 +65,8 @@ export default {
         }
     },
     beforeCreate() {
-        fetchAgreements().then(agreements => {
+        const client = new ERMAPIClient()
+        const agreements = client.agreements.getAll().then(agreements => {
             this.agreements = agreements
             this.initialized = true
         })
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 0000000000..006f8070c2
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm-api-client.js
@@ -0,0 +1,52 @@
+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 e40a85a522..0efab38ff3 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/erm.js
@@ -1,42 +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;
-};
-
-export const fetchAgreements = async function () {
-    const apiUrl = "/api/v1/erm/agreements?_per_page=-1";
-    let agreements;
-    await fetch(apiUrl)
-        .then(checkError)
-        .then(
-            (result) => {
-                agreements = result;
-            },
-            (error) => {
-                setError(error);
-            }
-        );
-    return agreements;
-};
+//TODO: all of these functions should be deleted and reimplemented in the components using ERMAPIClient
 
 export const fetchLicense = async 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 0000000000..19b8d1c022
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js
@@ -0,0 +1,60 @@
+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;
\ No newline at end of file
-- 
2.30.2