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