From a0d49aa17d6bfba5550905f43b619c3efd9796ef Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Tue, 21 Jan 2025 17:16:05 +0000 Subject: [PATCH] Bug 38941: Convert the acquisitions menu to a Vue web component This is an example patch for creating a Vue island component that can be used throughout Koha. The component can then also be used in the work in Bug 38010 to migrate Vendors to Vue. This removes duplication of code by having a .inc file as well as a vue component to maintain Test plan: 1) Apply all patches including dependencies 2) Bug 37911 requires a Vue upgrade so you will need to run yarn install, then run a yarn build 3) Navigate to the acquisitions home page 4) The left menu should appear as before 5) Switch on the EDIFACT syspref - the acq menu should now display the edifact related options 6) Try logging in as a new patron with reduced permissions, the menu should update correctly according to the permissions --- .../prog/en/includes/acquisitions-menu.inc | 87 ++-- .../components/Islands/AcquisitionsMenu.vue | 371 ++++++++++++++++++ .../prog/js/vue/modules/islands.ts | 26 +- .../prog/js/vue/stores/vendors.js | 1 + 4 files changed, 423 insertions(+), 62 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/AcquisitionsMenu.vue diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc index 819be190c7b..080a087c30c 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc @@ -1,62 +1,27 @@ [% USE Koha %] - +[% USE Asset %] +[% USE raw %] +[% USE To %] + + + +[% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %] \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/AcquisitionsMenu.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/AcquisitionsMenu.vue new file mode 100644 index 00000000000..3cd49d19795 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/AcquisitionsMenu.vue @@ -0,0 +1,371 @@ + + + + + diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts index af004592a29..88b52286017 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts @@ -3,6 +3,8 @@ import { createPinia } from "pinia"; import { $__ } from "../i18n"; import { useMainStore } from "../stores/main"; import { useNavigationStore } from "../stores/navigation"; +import { usePermissionsStore } from "../stores/permissions"; +import { useVendorStore } from "../stores/vendors"; /** * Represents a web component with an import function and optional configuration. @@ -40,7 +42,27 @@ type WebComponentDynamicImport = { * ], */ export const componentRegistry: Map = - new Map([]); + new Map([ + [ + "acquisitions-menu", + { + importFn: async () => { + const module = await import( + /* webpackChunkName: "acquisitions-menu" */ + "../components/Islands/AcquisitionsMenu.vue" + ); + return module.default; + }, + config: { + stores: [ + "vendorStore", + "navigationStore", + "permissionsStore", + ], + }, + }, + ], + ]); /** * Hydrates custom elements by scanning the document and loading only necessary components. @@ -52,6 +74,8 @@ export function hydrate(): void { const storesMatrix = { mainStore: useMainStore(pinia), navigationStore: useNavigationStore(pinia), + permissionsStore: usePermissionsStore(pinia), + vendorStore: useVendorStore(pinia), }; const islandTagNames = Array.from(componentRegistry.keys()).join(", "); 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..f6efa8754ea 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/vendors.js @@ -3,5 +3,6 @@ import { defineStore } from "pinia"; export const useVendorStore = defineStore("vendors", { state: () => ({ vendors: [], + config: { settings: {} }, }), }); -- 2.48.1