From ae33e9a17ae25abd59c621a65a2b52dea2f141ca Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Mon, 7 Apr 2025 16:25:19 +0100 Subject: [PATCH] Bug 37930: Migrate all stores to use the setup API --- .../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.48.1