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