Bugzilla – Attachment 176877 Details for
Bug 38941
Convert the acquisitions menu to a Vue island
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 38941: Convert the acquisitions menu to a Vue web component
Bug-38941-Convert-the-acquisitions-menu-to-a-Vue-w.patch (text/plain), 23.19 KB, created by
Matt Blenkinsop
on 2025-01-21 17:22:00 UTC
(
hide
)
Description:
Bug 38941: Convert the acquisitions menu to a Vue web component
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2025-01-21 17:22:00 UTC
Size:
23.19 KB
patch
obsolete
>From a0d49aa17d6bfba5550905f43b619c3efd9796ef Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >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 %] >-<div id="navmenu"> >- <div id="navmenulist"> >- <h5>Acquisitions</h5> >- <ul> >- <li><a href="/cgi-bin/koha/acqui/acqui-home.pl">Acquisitions home</a></li> >- <li><a href="/cgi-bin/koha/acqui/histsearch.pl">Advanced search</a></li> >- [% IF ( CAN_user_acquisition_order_receive ) %]<li><a href="/cgi-bin/koha/acqui/lateorders.pl">Late orders</a></li>[% END %] >- [% IF CAN_user_suggestions_suggestions_create || CAN_user_suggestions_suggestions_manage || CAN_user_suggestions_suggestions_delete %]<li><a href="/cgi-bin/koha/suggestion/suggestion.pl">Suggestions</a></li>[% END %] >- <li><a href="/cgi-bin/koha/acqui/invoices.pl">Invoices</a></li> >- [% IF Koha.Preference('EDIFACT') && CAN_user_acquisition_edi_manage %] >- <li><a href="/cgi-bin/koha/acqui/edifactmsgs.pl">EDIFACT messages</a></li> >- [% END %] >- </ul> >- [% IF ( CAN_user_reports || CAN_user_circulate_circulate_remaining_permissions ) %] >- <h5>Reports</h5> >- <ul> >- [% IF ( CAN_user_reports ) %] >- <li><a href="/cgi-bin/koha/reports/acquisitions_stats.pl">Acquisitions statistics wizard</a></li> >- <li><a href="/cgi-bin/koha/reports/orders_by_fund.pl">Orders by fund</a></li> >- [% END %] >- [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %] >- <li><a href="/cgi-bin/koha/circ/reserveratios.pl">Hold ratios</a></li> >- [% END %] >- </ul> >- [% END %] >- [% IF ( CAN_user_acquisition_period_manage || CAN_user_acquisition_budget_manage || CAN_user_acquisition_currencies_manage || ( Koha.Preference('EDIFACT') && CAN_user_acquisition_edi_manage ) || CAN_user_parameters_manage_additional_fields ) || ( Koha.Preference('MarcOrderingAutomation') && CAN_user_acquisition_marc_order_manage ) %] >- <h5>Administration</h5> >- <ul> >- [% IF ( CAN_user_acquisition_period_manage ) %] >- <li><a href="/cgi-bin/koha/admin/aqbudgetperiods.pl">Budgets</a></li> >- [% END %] >- [% IF ( CAN_user_acquisition_budget_manage ) %] >- <li><a href="/cgi-bin/koha/admin/aqbudgets.pl">Funds</a></li> >- [% END %] >- [% IF ( CAN_user_acquisition_currencies_manage ) %] >- <li><a href="/cgi-bin/koha/admin/currency.pl">Currencies</a></li> >- [% END %] >- [% IF Koha.Preference('EDIFACT') && CAN_user_acquisition_edi_manage %] >- <li><a href="/cgi-bin/koha/admin/edi_accounts.pl">EDI accounts</a></li> >- <li><a href="/cgi-bin/koha/admin/edi_ean_accounts.pl">Library EANs</a></li> >- [% END %] >- [% IF Koha.Preference('MarcOrderingAutomation') && CAN_user_acquisition_marc_order_manage %] >- <li><a href="/cgi-bin/koha/admin/marc_order_accounts.pl">MARC order accounts</a></li> >- [% END %] >- [% IF CAN_user_acquisition_edit_invoices && CAN_user_parameters_manage_additional_fields %] >- <li> >- <a href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqinvoices">Manage invoice fields</a> >- </li> >- [% END %] >- [% IF CAN_user_acquisition_order_manage && CAN_user_parameters_manage_additional_fields %] >- <li> >- <a href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqbasket">Manage order basket fields</a> >- </li> >- <li> >- <a href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqorders">Manage order line fields</a> >- </li> >- [% END %] >- </ul> >- [% END %] >- </div> >-</div> >+[% USE Asset %] >+[% USE raw %] >+[% USE To %] >+ >+<acquisitions-menu >+ ordermanage="[% CAN_user_acquisition_order_manage | html %]" >+ orderreceive="[% CAN_user_acquisition_order_receive | html %]" >+ contractsmanage="[% CAN_user_acquisition_order_receive | html %]" >+ issuemanage="[% CAN_user_acquisition_order_receive | html %]" >+ edifact="[% Koha.Preference('EDIFACT') | html %]" >+ edimanage="[% CAN_user_acquisition_edi_manage | html %]" >+ reports="[% CAN_user_reports | html %]" >+ circulateremainingpermissions="[% CAN_user_circulate_circulate_remaining_permissions | html %]" >+ periodmanage="[% CAN_user_acquisition_period_manage | html %]" >+ budgetmanage="[% CAN_user_acquisition_budget_manage | html %]" >+ currenciesmanage="[% CAN_user_acquisition_currencies_manage | html %]" >+ manageadditionalfields="[% CAN_user_parameters_manage_additional_fields | html %]" >+ invoiceedit="[% CAN_user_acquisition_edit_invoices | html %]" >+ suggestionscreate="[% CAN_user_suggestions_suggestions_create | html %]" >+ suggestionsmanage="[% CAN_user_suggestions_suggestions_manage | html %]" >+ suggestionsdelete="[% CAN_user_suggestions_suggestions_delete | html %]" >+ marcorderautomation="[% Koha.Preference('MarcOrderingAutomation') | html %]" >+ marcordermanage="[% CAN_user_acquisition_marc_order_manage | html %]" >+></acquisitions-menu> >+ >+[% 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 @@ >+<template> >+ <div id="navmenu"> >+ <div id="navmenulist"> >+ <h5>{{ $__("Acquisitions") }}</h5> >+ <ul> >+ <li> >+ <a >+ ref="acquihome" >+ href="/cgi-bin/koha/acqui/acqui-home.pl" >+ >{{ $__("Acquisitions home") }}</a >+ > >+ </li> >+ <li> >+ <a >+ ref="histsearch" >+ href="/cgi-bin/koha/acqui/histsearch.pl" >+ >{{ $__("Advanced search") }}</a >+ > >+ </li> >+ <li >+ v-if=" >+ orderreceive || >+ isUserPermitted('CAN_user_acquisition_order_receive') >+ " >+ > >+ <a >+ ref="lateorders" >+ href="/cgi-bin/koha/acqui/lateorders.pl" >+ >{{ $__("Late orders") }}</a >+ > >+ </li> >+ <li >+ v-if=" >+ suggestionscreate || >+ suggestionsmanage || >+ suggestionsdelete || >+ isUserPermitted( >+ 'CAN_user_suggestions_suggestions_create' >+ ) || >+ isUserPermitted( >+ 'CAN_user_suggestions_suggestions_manage' >+ ) || >+ isUserPermitted( >+ 'CAN_user_suggestions_suggestions_delete' >+ ) >+ " >+ > >+ <a >+ ref="suggestion" >+ href="/cgi-bin/koha/suggestion/suggestion.pl" >+ >{{ $__("Suggestions") }}</a >+ > >+ </li> >+ <li> >+ <a ref="invoices" href="/cgi-bin/koha/acqui/invoices.pl">{{ >+ $__("Invoices") >+ }}</a> >+ </li> >+ <li >+ v-if=" >+ edifactEnabled && >+ (edimanage || >+ isUserPermitted('CAN_user_acquisition_edi_manage')) >+ " >+ > >+ <a >+ ref="edifactmsgs" >+ href="/cgi-bin/koha/acqui/edifactmsgs.pl" >+ >{{ $__("EDIFACT messages") }}</a >+ > >+ </li> >+ </ul> >+ <template >+ v-if=" >+ reports || >+ circulateremainingpermissions || >+ isUserPermitted('CAN_user_reports') || >+ isUserPermitted( >+ 'CAN_user_circulate_circulate_remaining_permissions' >+ ) >+ " >+ > >+ <h5>{{ $__("Reports") }}</h5> >+ <ul> >+ <template >+ v-if="reports || isUserPermitted('CAN_user_reports')" >+ > >+ <li> >+ <a >+ ref="acquisitions_stats" >+ href="/cgi-bin/koha/reports/acquisitions_stats.pl" >+ >{{ $__("Acquisitions statistics wizard") }}</a >+ > >+ </li> >+ <li> >+ <a >+ ref="orders_by_fund" >+ href="/cgi-bin/koha/reports/orders_by_fund.pl" >+ >{{ $__("Orders by fund") }}</a >+ > >+ </li> >+ </template> >+ <li >+ v-if=" >+ circulateremainingpermissions || >+ isUserPermitted( >+ 'CAN_user_circulate_circulate_remaining_permissions' >+ ) >+ " >+ > >+ <a >+ ref="reserveratios" >+ href="/cgi-bin/koha/circ/reserveratios.pl" >+ >{{ $__("Hold ratios") }}</a >+ > >+ </li> >+ </ul> >+ </template> >+ <template >+ v-if=" >+ periodmanage || >+ isUserPermitted('CAN_user_acquisition_period_manage') || >+ budgetmanage || >+ isUserPermitted('CAN_user_acquisition_budget_manage') || >+ currenciesmanage || >+ isUserPermitted('CAN_user_acquisition_currencies_manage') || >+ (edifactEnabled && >+ (edimanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_edi_manage' >+ ))) || >+ (marcOrdersEnabled && >+ (marcordermanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_marc_order_manage' >+ ))) || >+ manageadditionalfields || >+ isUserPermitted('CAN_user_acquisition_edi_manage') >+ " >+ > >+ <h5>{{ $__("Administration") }}</h5> >+ <ul> >+ <li >+ v-if=" >+ periodmanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_period_manage' >+ ) >+ " >+ > >+ <a >+ ref="aqbudgetperiods" >+ href="/cgi-bin/koha/admin/aqbudgetperiods.pl" >+ >{{ $__("Budgets") }}</a >+ > >+ </li> >+ <li >+ v-if=" >+ budgetmanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_budget_manage' >+ ) >+ " >+ > >+ <a >+ ref="aqbudgets" >+ href="/cgi-bin/koha/admin/aqbudgets.pl" >+ >{{ $__("Funds") }}</a >+ > >+ </li> >+ <li >+ v-if=" >+ currenciesmanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_currencies_manage' >+ ) >+ " >+ > >+ <a >+ ref="currency" >+ href="/cgi-bin/koha/admin/currency.pl" >+ >{{ $__("Currencies") }}</a >+ > >+ </li> >+ <template >+ v-if=" >+ (edifactEnabled && edimanage) || >+ (edifactEnabled && >+ isUserPermitted( >+ 'CAN_user_acquisition_edi_manage' >+ )) >+ " >+ > >+ <li> >+ <a >+ ref="edi_accounts" >+ href="/cgi-bin/koha/admin/edi_accounts.pl" >+ >{{ $__("EDI accounts") }}</a >+ > >+ </li> >+ <li> >+ <a >+ ref="edi_ean_accounts" >+ href="/cgi-bin/koha/admin/edi_ean_accounts.pl" >+ >{{ $__("Library EANs") }}</a >+ > >+ </li> >+ </template> >+ <template >+ v-if=" >+ (marcOrdersEnabled && marcordermanage) || >+ (marcOrdersEnabled && >+ isUserPermitted( >+ 'CAN_user_acquisition_marc_order_manage' >+ )) >+ " >+ > >+ <li> >+ <a >+ ref="marc_order_accounts" >+ href="/cgi-bin/koha/admin/marc_order_accounts.pl" >+ >{{ $__("MARC order accounts") }}</a >+ > >+ </li> >+ </template> >+ <li >+ v-if=" >+ manageadditionalfields || >+ isUserPermitted( >+ 'CAN_user_parameters_manage_additional_fields' >+ ) || >+ invoiceedit || >+ isUserPermitted( >+ 'CAN_user_acquisition_edit_invoices' >+ ) >+ " >+ > >+ <a >+ ref="additionalfieldsinvoices" >+ href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqinvoices" >+ >{{ $__("Manage invoice fields") }}</a >+ > >+ </li> >+ <template >+ v-if=" >+ (manageadditionalfields || >+ isUserPermitted( >+ 'CAN_user_parameters_manage_additional_fields' >+ )) && >+ (ordermanage || >+ isUserPermitted( >+ 'CAN_user_acquisition_order_manage' >+ )) >+ " >+ > >+ <li> >+ <a >+ ref="additionalfieldsbaskets" >+ href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqbasket" >+ >{{ $__("Manage order basket fields") }}</a >+ > >+ </li> >+ <li> >+ <a >+ ref="additionalfieldsorders" >+ href="/cgi-bin/koha/admin/additional-fields.pl?tablename=aqorders" >+ >{{ $__("Manage order line fields") }}</a >+ > >+ </li> >+ </template> >+ </ul> >+ </template> >+ </div> >+ </div> >+</template> >+ >+<script> >+import { inject } from "vue" >+import { storeToRefs } from "pinia" >+ >+export default { >+ props: { >+ ordermanage: { >+ type: Number, >+ }, >+ orderreceive: { >+ type: Number, >+ }, >+ edifact: { >+ type: Number, >+ }, >+ edimanage: { >+ type: Number, >+ }, >+ reports: { >+ type: Number, >+ }, >+ circulateremainingpermissions: { >+ type: Number, >+ }, >+ periodmanage: { >+ type: Number, >+ }, >+ budgetmanage: { >+ type: Number, >+ }, >+ currenciesmanage: { >+ type: Number, >+ }, >+ manageadditionalfields: { >+ type: Number, >+ }, >+ invoiceedit: { >+ type: Number, >+ }, >+ suggestionscreate: { >+ type: Number, >+ }, >+ suggestionsmanage: { >+ type: Number, >+ }, >+ suggestionsdelete: { >+ type: Number, >+ }, >+ marcorderautomation: { >+ type: Number, >+ }, >+ marcordermanage: { >+ type: Number, >+ }, >+ }, >+ setup() { >+ const permissionsStore = inject("permissionsStore") >+ const { isUserPermitted } = permissionsStore >+ const navigationStore = inject("navigationStore") >+ const { params } = storeToRefs(navigationStore) >+ const vendorStore = inject("vendorStore") >+ const { config } = storeToRefs(vendorStore) >+ >+ return { >+ isUserPermitted, >+ params, >+ config, >+ } >+ }, >+ data() { >+ const edifactEnabled = this.config?.settings.edifact >+ ? this.config.settings.edifact >+ : this.edifact >+ const marcOrdersEnabled = this.config?.settings.marcorderautomation >+ ? this.config.settings.marcorderautomation >+ : this.marcorderautomation >+ >+ return { >+ edifactEnabled, >+ marcOrdersEnabled, >+ } >+ }, >+ mounted() { >+ const path = location.pathname.substring(1) >+ >+ Object.keys(this.$refs).forEach(ref => { >+ if (this.$refs[ref].href.includes(path)) { >+ this.$refs[ref].classList.add("current") >+ } >+ }) >+ }, >+} >+</script> >+ >+<style></style> >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<string, WebComponentDynamicImport> = >- 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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 38941
: 176877 |
176878