Bug 38941

Summary: Convert the acquisitions menu to a Vue island
Product: Koha Reporter: Matt Blenkinsop <matt.blenkinsop>
Component: Architecture, internals, and plumbingAssignee: Matt Blenkinsop <matt.blenkinsop>
Status: Pushed to main --- QA Contact: Jonathan Druart <jonathan.druart>
Severity: enhancement    
Priority: P5 - low CC: amaury.gau, dcook, janne.seppanen, jonathan.druart, martin.renvoize, michaela.sieber, oleonard, paul.derscheid, pedro.amorim, tomascohen
Version: MainKeywords: release-notes-needed
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
25.05.00
Circulation function:
Bug Depends on: 37911, 38930    
Bug Blocks: 38010    
Attachments: Bug 38941: Convert the acquisitions menu to a Vue web component
Bug 38941: Add a cypress test
Bug 38941: Convert the acquisitions menu to a Vue web component
Bug 38941: Add a cypress test
Bug 38941: Add a cypress test
Bug 38941: Convert the acquisitions menu to a Vue web component
Bug 38941: Add a cypress test
Bug 38941: Rebase for follow-up to bug 37911
Bug 38941: Convert the acquisitions menu to a Vue web component
Bug 38941: Add a cypress test
Bug 38941: Rebase for follow-up to bug 37911
Bug 38941: Add a cypress test
Bug 38941: Convert the acquisitions menu to a Vue web component
Bug 38941: Add a cypress test
Bug 38941: Rebase for follow-up to bug 37911

Description Matt Blenkinsop 2025-01-21 16:45:16 UTC
We should convert the left menus to Vue islands so that the components can be used both in Koha and in Vue apps where needed
Comment 1 Matt Blenkinsop 2025-01-21 17:22:00 UTC
Created attachment 176877 [details] [review]
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
Comment 2 Matt Blenkinsop 2025-01-21 17:22:02 UTC
Created attachment 176878 [details] [review]
Bug 38941: Add a cypress test
Comment 3 Matt Blenkinsop 2025-01-21 17:23:26 UTC
This is a POC - interested to hear any ideas for improvement. I considered using the NavigationItem component to render the links but it changes the HTML structure slightly and is largely dependent on the Vue router
Comment 4 Matt Blenkinsop 2025-02-18 14:03:30 UTC
Created attachment 178243 [details] [review]
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
Comment 5 Matt Blenkinsop 2025-02-18 14:03:32 UTC
Created attachment 178244 [details] [review]
Bug 38941: Add a cypress test
Comment 6 Janne Seppänen 2025-02-21 13:07:52 UTC
Tried testing on ByWater Solutions sandbox and on a local git build, but both end up with an error and the left menu doesn't appear at all.

Seems like the code is looking for a module that's not there?

Uncaught Error: Cannot find module '../stores/permissions'
    webpackMissingModule https://staff-bugiton.sandbox.bywatersolutions.com/intranet-tmpl/prog/js/vue/dist/islands_24.1200012.js:16487
    <anonymous> https://staff-bugiton.sandbox.bywatersolutions.com/intranet-tmpl/prog/js/vue/dist/islands_24.1200012.js:16487
    <anonymous> https://staff-bugiton.sandbox.bywatersolutions.com/intranet-tmpl/prog/js/vue/dist/islands_24.1200012.js:16774
islands_24.1200012.js:16487:50
Comment 7 Katrin Fischer 2025-03-13 16:51:51 UTC
Hi Janne, this bug has 2 dependencies that are not resolved yet. The sandboxes are not very clear when there is a conflict on applying the patches. Maybe have a look at the git log if you can.
Comment 8 Matt Blenkinsop 2025-04-25 08:50:13 UTC
Created attachment 181491 [details] [review]
Bug 38941: Add a cypress test
Comment 9 Matt Blenkinsop 2025-04-25 08:51:00 UTC
Created attachment 181492 [details] [review]
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
Comment 10 Matt Blenkinsop 2025-04-25 08:51:04 UTC
Created attachment 181493 [details] [review]
Bug 38941: Add a cypress test
Comment 11 Matt Blenkinsop 2025-04-28 15:39:07 UTC
Created attachment 181626 [details] [review]
Bug 38941: Rebase for follow-up to bug 37911

Bug 37911 added a follow-up that removed the original entry point from rspack to use the esm.js files
Comment 12 Biblibre Sandboxes 2025-04-28 15:44:41 UTC
Created attachment 181627 [details] [review]
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

Signed-off-by: Michaela <michaela.sieber@kit.edu>
Comment 13 Biblibre Sandboxes 2025-04-28 15:44:45 UTC
Created attachment 181628 [details] [review]
Bug 38941: Add a cypress test

Signed-off-by: Michaela <michaela.sieber@kit.edu>
Comment 14 Biblibre Sandboxes 2025-04-28 15:44:48 UTC
Created attachment 181629 [details] [review]
Bug 38941: Rebase for follow-up to bug 37911

Bug 37911 added a follow-up that removed the original entry point from rspack to use the esm.js files

Signed-off-by: Michaela <michaela.sieber@kit.edu>
Comment 15 Matt Blenkinsop 2025-04-30 10:03:36 UTC
Created attachment 181711 [details] [review]
Bug 38941: Add a cypress test
Comment 16 Jonathan Druart 2025-04-30 20:55:10 UTC
Created attachment 181724 [details] [review]
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

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 17 Jonathan Druart 2025-04-30 20:55:14 UTC
Created attachment 181725 [details] [review]
Bug 38941: Add a cypress test

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 18 Jonathan Druart 2025-04-30 20:55:17 UTC
Created attachment 181726 [details] [review]
Bug 38941: Rebase for follow-up to bug 37911

Bug 37911 added a follow-up that removed the original entry point from rspack to use the esm.js files

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 19 Katrin Fischer 2025-05-02 13:44:08 UTC
1) QA script

 FAIL	koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc
   FAIL	  filters
		missing_filter at line 25 ([% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %] <script src="[% islands %]" type="module">)
		missing_filter at line 28 (    import { hydrate } from "[% islands %]";)

I fixed it with the automated script in a separate commit. Please check!

2) Question about permission check 

We have this here, which appears to be a bit of a double up on first glance - do we need this in order to over both TT and vue cases where the menu is used?

+    suggestionscreate="[% CAN_user_suggestions_suggestions_create | html %]"
+    suggestionsmanage="[% CAN_user_suggestions_suggestions_manage | html %]"
+    suggestionsdelete="[% CAN_user_suggestions_suggestions_delete | html %]"

And then:

+                v-if="
+                    suggestionscreate ||
+                    suggestionsmanage ||
+                    suggestionsdelete ||
+                    isUserPermitted(
+                        'CAN_user_suggestions_suggestions_create'
+                    ) ||
+                    isUserPermitted(
+                        'CAN_user_suggestions_suggestions_manage'
+                    ) ||
+                    isUserPermitted('CAN_user_suggestions_suggestions_delete')
+                "
+            >
Comment 20 Katrin Fischer 2025-05-02 13:48:28 UTC
1) - I can see now that this code is removed by 38010. So dropping my follow-up.
Comment 21 Katrin Fischer 2025-05-02 15:24:12 UTC
Pushed for 25.05!

Well done everyone, thank you!