From a95b659e6845d09ba2fcf595bc0a9ecd5393fd0e Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 5 May 2022 10:13:56 +0200
Subject: [PATCH] =?utf8?q?Bug=2032030:=20Use=20Pinia=20for=20vendors=20?=
 =?utf8?q?=F0=9F=8D=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/js/vue/components/ERM/Agreements.vue | 22 +----------------
 .../vue/components/ERM/AgreementsFormAdd.vue  | 14 +++++++++--
 .../js/vue/components/ERM/AgreementsList.vue  | 11 ++++++++-
 .../js/vue/components/ERM/AgreementsShow.vue  | 16 ++++++++++---
 .../prog/js/vue/components/ERM/ERMMain.vue    | 24 ++++++++++++++++---
 .../intranet-tmpl/prog/js/vue/main-erm.ts     |  4 +++-
 .../prog/js/vue/stores/vendors.js             |  7 ++++++
 package.json                                  |  1 +
 8 files changed, 68 insertions(+), 31 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
index 37615a5f0d..aa08f6f9fa 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
@@ -4,7 +4,6 @@
     <div class="dialog alert" v-if="error">{{ error }}</div>
     <List
         v-if="op == 'list'"
-        :vendors="vendors"
         :av_agreement_statuses="agreement_statuses"
         :av_agreement_closure_reasons="agreement_closure_reasons"
         :av_agreement_renewal_priorities="agreement_renewal_priorities"
@@ -15,7 +14,6 @@
     <Show
         v-if="op == 'show'"
         :agreement_id="agreement_id"
-        :vendors="vendors"
         :av_agreement_statuses="agreement_statuses"
         :av_agreement_closure_reasons="agreement_closure_reasons"
         :av_agreement_renewal_priorities="agreement_renewal_priorities"
@@ -28,7 +26,6 @@
     <AddForm
         v-if="op == 'add-form'"
         :agreement_id="agreement_id"
-        :vendors="vendors"
         :av_agreement_statuses="agreement_statuses"
         :av_agreement_closure_reasons="agreement_closure_reasons"
         :av_agreement_renewal_priorities="agreement_renewal_priorities"
@@ -55,8 +52,8 @@ import List from "./AgreementsList.vue"
 import Show from "./AgreementsShow.vue"
 import AddForm from "./AgreementsFormAdd.vue"
 import ConfirmDeleteForm from "./AgreementsFormConfirmDelete.vue"
+import { ref, reactive, computed } from "vue"
 
-import { reactive, computed } from "vue"
 
 export default {
     data() {
@@ -65,7 +62,6 @@ export default {
             op: "list",
             message: null,
             error: null,
-            vendors: [],
             agreement_statuses,
             agreement_closure_reasons,
             agreement_renewal_priorities,
@@ -74,22 +70,6 @@ export default {
             agreement_license_location,
         }
     },
-    beforeCreate() {
-        // FIXME it's not only called on setup, but setup() does not have 'this'.
-        const apiUrl = "/api/v1/acquisitions/vendors"
-
-        fetch(apiUrl)
-            .then((res) => res.json())
-            .then(
-                (result) => {
-                    this.vendors = result
-            }).catch(
-                (error) => {
-                    this.$emit('set-error', error)
-                }
-            )
-
-    },
     methods: {
         switchView(view) {
             this.message = null
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 cdfc2a2d93..2e8e693a94 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
@@ -165,7 +165,9 @@
                     />
                     <AgreementLicenses
                         :agreement_licenses="agreement.agreement_licenses"
-                        :av_agreement_license_statuses="av_agreement_license_statuses"
+                        :av_agreement_license_statuses="
+                            av_agreement_license_statuses
+                        "
                         :av_agreement_license_location="
                             av_agreement_license_location
                         "
@@ -189,8 +191,17 @@
 import AgreementPeriods from './AgreementPeriods.vue'
 import AgreementUserRoles from './AgreementUserRoles.vue'
 import AgreementLicenses from './AgreementLicenses.vue'
+import { useVendorStore } from "../../stores/vendors"
+import { storeToRefs } from "pinia"
 
 export default {
+    setup() {
+        const vendorStore = useVendorStore()
+        const { vendors } = storeToRefs(vendorStore)
+        return {
+            vendors,
+        }
+    },
     data() {
         return {
             agreement: {
@@ -285,7 +296,6 @@ export default {
     emits: ['agreement-created', 'agreement-updated', 'set-error', 'switch-view'],
     props: {
         agreement_id: Number,
-        vendors: Array,
         av_agreement_statuses: Array,
         av_agreement_closure_reasons: Array,
         av_agreement_renewal_priorities: Array,
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 d542a8add2..31599b111b 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
@@ -12,7 +12,17 @@
 import ButtonEdit from "./ButtonEdit.vue"
 import ButtonDelete from "./ButtonDelete.vue"
 import { createVNode, defineComponent, render, resolveComponent } from 'vue'
+import { useVendorStore } from "../../stores/vendors"
+import { storeToRefs } from "pinia"
+
 export default {
+    setup() {
+        const vendorStore = useVendorStore()
+        const { vendors } = storeToRefs(vendorStore)
+        return {
+            vendors,
+        }
+    },
     created() {
         const apiUrl = '/api/v1/erm/agreements'
 
@@ -225,7 +235,6 @@ export default {
         },
     },
     props: {
-        vendors: Array,
         av_agreement_statuses: Array,
         av_agreement_closure_reasons: Array,
         av_agreement_renewal_priorities: Array,
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 c792a9eba9..37cc0ddf99 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
@@ -101,7 +101,12 @@
                             >
                                 <td>{{ patron_to_html(role.patron) }}</td>
                                 <td>
-                                    {{ get_lib_from_av(av_agreement_user_roles, role.role) }}
+                                    {{
+                                        get_lib_from_av(
+                                            av_agreement_user_roles,
+                                            role.role
+                                        )
+                                    }}
                                 </td>
                             </tr>
                         </tbody>
@@ -164,6 +169,8 @@
 <script>
 import AgreementPeriods from './AgreementPeriods.vue'
 import AgreementUserRoles from './AgreementUserRoles.vue'
+import { useVendorStore } from "../../stores/vendors"
+import { storeToRefs } from "pinia"
 
 export default {
     setup() {
@@ -175,10 +182,14 @@ export default {
             )
             return o ? o.lib : ""
         }
+        const vendorStore = useVendorStore()
+        const { vendors } = storeToRefs(vendorStore)
+
         return {
             format_date,
             patron_to_html,
-            get_lib_from_av
+            get_lib_from_av,
+            vendors,
         }
     },
     data() {
@@ -223,7 +234,6 @@ export default {
     emits: ['set-error', 'switch-view'],
     props: {
         agreement_id: Number,
-        vendors: Array,
         av_agreement_statuses: Array,
         av_agreement_closure_reasons: Array,
         av_agreement_renewal_priorities: Array,
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
index e1245bc819..16d1a88f0f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
@@ -30,7 +30,6 @@
                                         Licenses</router-link
                                     >
                                 </li>
-
                             </ul>
                         </div>
                     </div>
@@ -42,16 +41,35 @@
 
 <script>
 import Breadcrumb from "./Breadcrumb.vue"
-
-
+import { useVendorStore } from "../../stores/vendors"
 import { reactive, computed } from "vue"
 
 export default {
+    setup() {
+        const vendorStore = useVendorStore()
+        return {
+            vendorStore
+        }
+    },
     data() {
         return {
             component: "agreement",
         }
     },
+    beforeCreate() {
+        const apiUrl = "/api/v1/acquisitions/vendors"
+
+        fetch(apiUrl)
+            .then((res) => res.json())
+            .then(
+                (result) => {
+                    this.vendorStore.vendors = result
+                },
+                (error) => {
+                    this.$emit("set-error", error)
+                }
+            )
+    },
     methods: {
         switchComponent(component) {
             this.component = component
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
index 906e178cf0..62b1e62df7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
+import { createPinia } from 'pinia'
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
@@ -60,6 +61,7 @@ const routes = [
 const router = createRouter({ history: createWebHistory(), routes });
 
 createApp(App)
+    .use(createPinia())
     .use(router)
     .component("font-awesome-icon", FontAwesomeIcon)
-    .mount("#erm");
+    .mount("#erm");
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js
new file mode 100644
index 0000000000..f860786bc8
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useVendorStore = defineStore('vendors', {
+  state: () => ({
+    vendors: [],
+  }),
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index c50f8c865e..a7dd99b055 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "merge-stream": "^2.0.0",
     "minimist": "^1.2.5",
     "mysql": "^2.18.1",
+    "pinia": "^2.0.13",
     "style-loader": "^3.3.1",
     "vue": "^3.2.31",
     "vue-flatpickr-component": "^9",
-- 
2.20.1