From 4b782883e7aeab8eace4e3ffc05a05d63b23a1a2 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@openfifth.co.uk>
Date: Mon, 7 Apr 2025 16:25:19 +0100
Subject: [PATCH] Bug 37930: Migrate all stores to use the setup API

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../intranet-tmpl/prog/js/vue/stores/main.js  | 104 ++++++++----------
 .../prog/js/vue/stores/navigation.js          |  48 ++++----
 .../prog/js/vue/stores/preservation.js        |  11 +-
 .../prog/js/vue/stores/usage-reports.js       |  13 ++-
 .../prog/js/vue/stores/vendors.js             |  11 +-
 5 files changed, 96 insertions(+), 91 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index 7a0c9e65166..5734266b3f5 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -1,40 +1,42 @@
 import { defineStore } from "pinia";
+import { reactive, toRefs } from "vue";
 
-export const useMainStore = defineStore("main", {
-    state: () => ({
-        _message: null,
-        _error: null,
-        _warning: null,
-        _confirmation: null,
-        _accept_callback: null,
+export const useMainStore = defineStore("main", () => {
+    const store = reactive({
+        message: null,
+        error: null,
+        warning: null,
+        confirmation: null,
+        accept_callback: null,
         previousMessage: null,
         previousError: null,
         displayed_already: false,
-        _is_submitting: false,
-        _is_loading: false,
-    }),
-    actions: {
+        is_submitting: false,
+        is_loading: false,
+    });
+
+    const actions = {
         setMessage(message, displayed = false) {
-            this._error = null;
-            this._warning = null;
-            this._message = message;
-            this._confirmation = null;
+            this.error = null;
+            this.warning = null;
+            this.message = message;
+            this.confirmation = null;
             this.displayed_already =
                 displayed; /* Will be displayed on the next view */
         },
         setError(error, displayed = true) {
-            this._error = error;
-            this._warning = null;
-            this._message = null;
-            this._confirmation = null;
+            this.error = error;
+            this.warning = null;
+            this.message = null;
+            this.confirmation = null;
             this.displayed_already =
                 displayed; /* Is displayed on the current view */
         },
         setWarning(warning, displayed = true) {
-            this._error = null;
-            this._warning = warning;
-            this._message = null;
-            this._confirmation = null;
+            this.error = null;
+            this.warning = warning;
+            this.message = null;
+            this.confirmation = null;
             this.displayed_already =
                 displayed; /* Is displayed on the current view */
         },
@@ -55,63 +57,45 @@ export const useMainStore = defineStore("main", {
          */
         setConfirmationDialog(confirmation, accept_callback, displayed = true) {
             if (accept_callback) {
-                this._accept_callback = async () => {
+                this.accept_callback = async () => {
                     await accept_callback(confirmation);
                     this.removeConfirmationMessages();
                 };
             }
-            this._confirmation = confirmation;
+            this.confirmation = confirmation;
             this.displayed_already =
                 displayed; /* Is displayed on the current view */
         },
         removeMessages() {
             if (this.displayed_already) {
-                this._error = null;
-                this._warning = null;
-                this._message = null;
-                this._confirmation = null;
-                this._accept_callback = null;
+                this.error = null;
+                this.warning = null;
+                this.message = null;
+                this.confirmation = null;
+                this.accept_callback = null;
             }
             this.displayed_already = true;
         },
         removeConfirmationMessages() {
-            this._confirmation = null;
-            this._accept_callback = null;
+            this.confirmation = null;
+            this.accept_callback = null;
         },
         submitting() {
-            this._is_submitting = true;
+            this.is_submitting = true;
         },
         submitted() {
-            this._is_submitting = false;
+            this.is_submitting = false;
         },
         loading() {
-            this._is_loading = true;
+            this.is_loading = true;
         },
         loaded() {
-            this._is_loading = false;
-        },
-    },
-    getters: {
-        error() {
-            return this._error;
-        },
-        warning() {
-            return this._warning;
-        },
-        message() {
-            return this._message;
-        },
-        confirmation() {
-            return this._confirmation;
+            this.is_loading = false;
         },
-        accept_callback() {
-            return this._accept_callback;
-        },
-        is_submitting() {
-            return this._is_submitting;
-        },
-        is_loading() {
-            return this._is_loading;
-        },
-    },
+    };
+
+    return {
+        ...toRefs(store),
+        ...actions,
+    };
 });
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
index 1e3ecb58b36..d6da86988f4 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
+import { reactive, toRefs, computed } from "vue";
 
-export const useNavigationStore = defineStore("navigation", {
-    state: () => ({
+export const useNavigationStore = defineStore("navigation", () => {
+    const store = reactive({
         routeState: {
             alt: "Home",
             href: "/cgi-bin/koha/mainpage.pl",
@@ -11,8 +12,8 @@ export const useNavigationStore = defineStore("navigation", {
         },
         current: null,
         params: {},
-    }),
-    actions: {
+    });
+    const actions = {
         setRoutes(routesDef) {
             if (!Array.isArray(routesDef)) {
                 routesDef = [routesDef];
@@ -68,17 +69,18 @@ export const useNavigationStore = defineStore("navigation", {
                 child.meta.self = child;
             }
         },
-    },
-    getters: {
-        breadcrumbs() {
-            if (this.current)
+    };
+
+    const getters = {
+        breadcrumbs: computed(() => {
+            if (store.current)
                 return _buildFromCurrentMatches(
-                    this.current,
-                    this.routeState,
-                    this.params
+                    store.current,
+                    store.routeState,
+                    store.params
                 );
 
-            return _getBaseElements(this.routeState);
+            return _getBaseElements(store.routeState);
 
             // Function declarations
 
@@ -150,9 +152,9 @@ export const useNavigationStore = defineStore("navigation", {
                         };
                     });
             }
-        },
-        leftNavigation() {
-            return _getNavigationElements(this.routeState);
+        }),
+        leftNavigation: computed(() => {
+            return _getNavigationElements(store.routeState);
 
             // Function declarations
 
@@ -203,9 +205,9 @@ export const useNavigationStore = defineStore("navigation", {
                     (!parent.children || !parent.children.length)
                 );
             }
-        },
-        navigationRoutes() {
-            let routes = _toRoute(this.routeState);
+        }),
+        navigationRoutes: computed(() => {
+            let routes = _toRoute(store.routeState);
             return Array.isArray(routes) ? routes : [routes];
 
             // Function declarations
@@ -220,8 +222,14 @@ export const useNavigationStore = defineStore("navigation", {
                     .map(child => _toRoute(child))
                     .flat(Infinity);
             }
-        },
-    },
+        }),
+    };
+
+    return {
+        ...toRefs(store),
+        ...actions,
+        ...getters,
+    };
 });
 
 function addSlashIfNotPresent(path) {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/preservation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/preservation.js
index 29b3e9d582f..3cefe2717c2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/preservation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/preservation.js
@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
+import { reactive, toRefs } from "vue";
 
-export const usePreservationStore = defineStore("preservation", {
-    state: () => ({
+export const usePreservationStore = defineStore("preservation", () => {
+    const store = reactive({
         config: {
             settings: {
                 enabled: 0,
@@ -9,5 +10,9 @@ export const usePreservationStore = defineStore("preservation", {
                 not_for_loan_default_train_in: 0,
             },
         },
-    }),
+    });
+
+    return {
+        ...toRefs(store),
+    };
 });
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js
index ff3028ec5ff..b6d5533d0cd 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js
@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
+import { reactive, toRefs } from "vue";
 
-export const useReportsStore = defineStore("reports", {
-    state: () => ({
+export const useReportsStore = defineStore("reports", () => {
+    const store = reactive({
         months_data: [
             { short: "Jan", description: "January", value: 1, active: true },
             { short: "Feb", description: "February", value: 2, active: true },
@@ -122,8 +123,8 @@ export const useReportsStore = defineStore("reports", {
             TR_J3: ["Access_Type"],
             TR_J4: ["YOP"],
         },
-    }),
-    actions: {
+    });
+    const actions = {
         getMonthsData() {
             return this.months_data;
         },
@@ -134,5 +135,7 @@ export const useReportsStore = defineStore("reports", {
             if (!this.report_type_map.hasOwnProperty(report_type)) return false;
             return this.report_type_map[report_type].includes(column);
         },
-    },
+    };
+
+    return { ...toRefs(store), ...actions };
 });
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js
index 3f8fdfdfc2c..70f22b616c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js
@@ -1,7 +1,12 @@
 import { defineStore } from "pinia";
+import { reactive, toRefs } from "vue";
 
-export const useVendorStore = defineStore("vendors", {
-    state: () => ({
+export const useVendorStore = defineStore("vendors", () => {
+    const store = reactive({
         vendors: [],
-    }),
+    });
+
+    return {
+        ...toRefs(store),
+    };
 });
-- 
2.34.1