Bug 39320 - Create a 'landing page' for ERM
Summary: Create a 'landing page' for ERM
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: ERM (show other bugs)
Version: Main
Hardware: All All
: P5 - low new feature
Assignee: Pedro Amorim
QA Contact: Jonathan Druart
URL:
Keywords: rel_25_11_candidate
Depends on: 38201
Blocks: 40971
  Show dependency treegraph
 
Reported: 2025-03-13 12:23 UTC by Pedro Amorim
Modified: 2025-10-31 19:52 UTC (History)
13 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Crowdfunding goal: 0
Patch complexity: Medium patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 39320: Add new npm dependencies: (696 bytes, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: VueJS framework: Add option to have a component in dialog (4.76 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Preparation: Add base and wrapper components (28.11 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Preparation: ERM counts API endpoint (5.73 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add ERM specific dashboard widgets (22.47 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add dashboard to ERM home (1.55 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add FA icons to ERM (1.34 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add 'home' left menu item to ERM (1.48 KB, patch)
2025-10-07 12:06 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add Cypress tests (21.01 KB, patch)
2025-10-07 12:07 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Preparation: Add base and wrapper components (28.10 KB, patch)
2025-10-07 12:34 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Follow-up: Add 'move up' and 'move down' options (16.34 KB, patch)
2025-10-08 12:15 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Remove 'extends' from the Home component (2.46 KB, patch)
2025-10-08 13:46 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 39320: Add new npm dependencies: (802 bytes, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: VueJS framework: Add option to have a component in dialog (4.86 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Preparation: ERM counts API endpoint (5.83 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add ERM specific dashboard widgets (22.57 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add dashboard to ERM home (1.66 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add FA icons to ERM (1.44 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add 'home' left menu item to ERM (1.58 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add Cypress tests (21.12 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Preparation: Add base and wrapper components (28.21 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Follow-up: Add 'move up' and 'move down' options (16.44 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Remove 'extends' from the Home component (2.57 KB, patch)
2025-10-09 09:01 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Remove deep CSS rules (1.32 KB, patch)
2025-10-17 15:04 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add counts API tests (2.64 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use localStorage instead of vue-cookies (4.58 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix counts links (2.84 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up) Prevent full page reload when clicking a license (2.49 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use %s and format for 'There are' translatability (4.14 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Removed unused show event (1023 bytes, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix cypress (20.38 KB, patch)
2025-10-17 15:05 UTC, Pedro Amorim
Details | Diff | Splinter Review
39320: (QA follow-up): Add a handler for drag and drop (2.54 KB, patch)
2025-10-17 15:16 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add a handler for drag and drop (2.54 KB, patch)
2025-10-17 15:16 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use escape_str instead of .escapeHtml (1.16 KB, patch)
2025-10-17 15:23 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (follow-up) Add counts API tests (2.09 KB, patch)
2025-10-20 10:32 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add an empty drop area placeholder (3.08 KB, patch)
2025-10-22 09:43 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Display 'Uknown status' if not one of the expected job statuses (1.15 KB, patch)
2025-10-22 09:43 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix ERMCounts translatability (4.78 KB, patch)
2025-10-22 09:43 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Style new ERMCounts list (1.52 KB, patch)
2025-10-22 09:43 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix ERMCounts translatability (5.90 KB, patch)
2025-10-22 10:03 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix ERMCounts translatability (5.90 KB, patch)
2025-10-22 10:04 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Style new ERMCounts list (1.52 KB, patch)
2025-10-22 10:04 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Use __n for languages with 3 plural forms (or more) (3.56 KB, patch)
2025-10-23 09:12 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Only show 'drop widgets here' area when actively dragging (2.95 KB, patch)
2025-10-23 09:56 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Remove big 'Processing...' when loading table widgets (2.10 KB, patch)
2025-10-23 15:33 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix widget with settings (1.56 KB, patch)
2025-10-23 16:02 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix widget with settings (1.18 KB, patch)
2025-10-23 16:12 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (ERMCounts QA follow-up): Use existing count method from the API client (2.71 KB, patch)
2025-10-30 12:51 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (ERMCounts QA follow-up): Remove documents as an endpoint for listing that does not exist (1.75 KB, patch)
2025-10-30 12:52 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (ERMCounts QA follow-up): Reimplement loading. Now present 'Loading' for each resource count that's waiting, rather than hang the whole widget waiting for all responses (4.66 KB, patch)
2025-10-30 12:52 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (ERMCounts QA follow-up): Update Cypress (3.62 KB, patch)
2025-10-30 12:52 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: (ERMCounts QA follow-up): Clean-up previous ERMCounts implementation (6.84 KB, patch)
2025-10-30 12:52 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 39320: Add new npm dependencies: (948 bytes, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: VueJS framework: Add option to have a component in dialog (5.00 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Preparation: ERM counts API endpoint (5.97 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Add ERM specific dashboard widgets (22.71 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Add dashboard to ERM home (1.80 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Add FA icons to ERM (1.59 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Add 'home' left menu item to ERM (1.72 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Add Cypress tests (21.26 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Preparation: Add base and wrapper components (28.35 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (follow-up) Add 'move up' and 'move down' options (16.59 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Remove 'extends' from the Home component (2.71 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Remove deep CSS rules (1.46 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add counts API tests (2.79 KB, patch)
2025-10-31 18:21 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use localStorage instead of vue-cookies (4.73 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix counts links (2.98 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up) Prevent full page reload when clicking a license (2.63 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Removed unused show event (1.14 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix cypress (20.52 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add a handler for drag and drop (2.69 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use escape_str instead of .escapeHtml (1.30 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (follow-up) Add counts API tests (2.23 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Add an empty drop area placeholder (3.22 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Display 'Uknown status' if not one of the expected job statuses (1.30 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix ERMCounts translatability (6.04 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Style new ERMCounts list (1.67 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Use __n for languages with 3 plural forms (or more) (3.70 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Only show 'drop widgets here' area when actively dragging (3.10 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Remove big 'Processing...' when loading table widgets (2.24 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Fix widget with settings (1.32 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Use existing count method from the API client (2.84 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Remove documents as an endpoint for listing that does not exist (1.88 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Reimplement loading. Now present 'Loading' for each resource count that's waiting, rather than hang the whole widget waiting for all responses (4.79 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Update Cypress (3.75 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: (QA follow-up): Clean-up previous ERMCounts implementation (6.98 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review
Bug 39320: Fix ERM breadcrumb causing page reload (2.18 KB, patch)
2025-10-31 18:22 UTC, Tomás Cohen Arazi (tcohen)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Pedro Amorim 2025-03-13 12:23:26 UTC

    
Comment 1 Pedro Amorim 2025-03-13 13:01:45 UTC Comment hidden (obsolete)
Comment 2 Jonathan Druart 2025-03-31 12:00:01 UTC Comment hidden (obsolete)
Comment 3 Jonathan Druart 2025-03-31 12:00:28 UTC
This looks wrong:
fetch/background-jobs-api-client.js
+                    endpoint: "agreements",


Actually there is no filtering on the SUSHI Counter jobs
Comment 4 Mathieu Saby 2025-04-01 16:54:03 UTC
Question : The appearance is quite different from other Koha module homepages, and the ability to add "widgets" is interesting but unprecedented. Would this page remain the only one designed on this model, or could it be reused for other pages if relevant?
Comment 5 Mathieu Saby 2025-04-01 17:04:23 UTC
It could of course be useful to ad a widget "agreements needing action". It was too complex to add ?
Comment 6 Ludovic 2025-09-05 21:20:23 UTC
This is a great idea and a very promising proposal! Creating a customizable dashboard for the ERM module would be a real asset for improving user experience and highlighting key data. However, there is currently no patch attached to this bug, so it’s not possible to proceed with testing or signoff. Could you please add the relevant patch
Comment 7 Pedro Amorim 2025-09-06 09:31:55 UTC
(In reply to Ludovic from comment #6)
> This is a great idea and a very promising proposal! Creating a customizable
> dashboard for the ERM module would be a real asset for improving user
> experience and highlighting key data. However, there is currently no patch
> attached to this bug, so it’s not possible to proceed with testing or
> signoff. Could you please add the relevant patch

Hi Ludovic, the development is the linked branch:
https://github.com/openfifth/koha/commits/bug_39320

I'm updating the status here to BLOCKED to reflect the fact that this bug is waiting on bug 38201 so it can be picked up again.
Comment 8 Pedro Amorim 2025-10-07 12:06:40 UTC
Created attachment 187513 [details] [review]
Bug 39320: Add new npm dependencies:

vue-draggable-next
vue-cookies
Comment 9 Pedro Amorim 2025-10-07 12:06:42 UTC
Created attachment 187514 [details] [review]
Bug 39320: VueJS framework: Add option to have a component in dialog
Comment 10 Pedro Amorim 2025-10-07 12:06:45 UTC
Created attachment 187515 [details] [review]
Bug 39320: Preparation: Add base and wrapper components

As well as wrapper support components
base-widget.js composable
Comment 11 Pedro Amorim 2025-10-07 12:06:47 UTC
Created attachment 187516 [details] [review]
Bug 39320: Preparation: ERM counts API endpoint

Required for the follow-up ERMCounts widget
Comment 12 Pedro Amorim 2025-10-07 12:06:50 UTC
Created attachment 187517 [details] [review]
Bug 39320: Add ERM specific dashboard widgets
Comment 13 Pedro Amorim 2025-10-07 12:06:52 UTC
Created attachment 187518 [details] [review]
Bug 39320: Add dashboard to ERM home
Comment 14 Pedro Amorim 2025-10-07 12:06:55 UTC
Created attachment 187519 [details] [review]
Bug 39320: Add FA icons to ERM

Wwould be great to improve the way we load icons to be available
everywhere in Vue instead of just the specific module but on a different
scope.
Comment 15 Pedro Amorim 2025-10-07 12:06:58 UTC
Created attachment 187520 [details] [review]
Bug 39320: Add 'home' left menu item to ERM

This is a bit hacky, but after hours of fighting with this I wasn't able to come up with a better soltuion.
I suspect stores/navigation.js is doing too much and changing too much of the default router-link behaviour but I may be wrong.
Comment 16 Pedro Amorim 2025-10-07 12:07:00 UTC
Created attachment 187521 [details] [review]
Bug 39320: Add Cypress tests

Test plan:
1) Enable ERMModule
2) Visit ERM:
<staff_url>/cgi-bin/koha/erm/erm.pl
3) Notice you now have a 'dashboard' homepage showing 4 different widgets
4) Click 'Open Widget Picker'. Remove and add different widgets. Close
5) Drag and drop the widgets around the dashboard, from left to right, top to bottom
6) Click the context menu (vertical dots) on each of the widgets. Click 'move to right', 'move to left', 'remove'.
7) On the 'Licenses needing action', notice there is a 'Settings' item option. Click that, test different settings values. Close settings.
8) Using the widget picker or context menu for the respective widgets, remove all widgets except one. Click away i.e. 'Agreements' on the left menu. Go back to home by clicking 'Home'. Notice your dashboard is as you left it.
9) Enable all widgets, rearrange them by dragging and dropping in different places. Repeat the previous exercise. Notice the dashboard keeps the widgets arranged as you left them.
10) Add some test data, on k-t-d run:
bash <(curl -s https://gist.githubusercontent.com/ammopt/8d74feff048b0732ed0362a204c3d8cd/raw/a0347d4199d176dde58ea1d1437d2e903c101132/bug_39320_test_data.sh)
11) Refresh the homepage dashboard, check the 'Counts' are correct and links work, check that the 'Latest SUSHI Counter jobs' table now populates and links to the data provider as well as respective job.
12) For 'Licenses needing action', test different settings values and confirm the table filters the results as expected.
13) As before, click away and comeback to ERM home. Notice your 'Licenses needing actions' settings are kept as you left them.
14) For the 'eUsage report' widget, notice it says 'No saved reports are availble to run'. Create a new usage report at:
<staff_url>/cgi-bin/koha/erm/eusage/reports
15) Click the 'Create report' tab, input the mandatory fields and enter a report name at the bottom of the page. Click 'Save report'.
16) Come back to ERM home. Notice the 'eUsage report' widget now shows a dropdown with a disabled 'Run' button.
Pick the report you just created. Notice the 'Run' button is now enabled. Click 'Run'. Notice you get the report results screen (will show nothing as there is no usage data in this test exercise).
17) k-t-d: Run cypress tests (reset_all beforehand to clear test data):
cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts
Comment 17 Pedro Amorim 2025-10-07 12:08:55 UTC
Hi all, I've revisited this for the first time in ~6 months now that bug 38201 has been pushed and this is no longer blocked.

The functionality is the same. The test plan is the same.
Code changes that were done done recently:
- Rebased on bug 38201
- Removed background-api-client (not needed, not used)
- Rewritten BaseWidget component to base-widget.js composable, drop 'extends'
- Rewritten remaining components to vuejs composition api (dropped options api) to match code patterns from 38201
- Rewritten how the widget picker modal works. It now uses the framework Dialog with a new option that allows for a component to be rendered in the dialog.
- Some light updates to style, font-size, added widget icon option
Comment 18 Pedro Amorim 2025-10-07 12:34:10 UTC
Created attachment 187522 [details] [review]
Bug 39320: Preparation: Add base and wrapper components

As well as wrapper support components
base-widget.js composable
Comment 19 Pedro Amorim 2025-10-08 12:15:50 UTC
Created attachment 187563 [details] [review]
Bug 39320: Follow-up: Add 'move up' and 'move down' options
Comment 20 Matt Blenkinsop 2025-10-08 13:46:01 UTC
Created attachment 187568 [details] [review]
Bug 39320: Remove 'extends' from the Home component
Comment 21 Jeremy Evans 2025-10-08 16:04:22 UTC
I have tested this on a Sandbox and it is working as expected.
Comment 22 Pedro Amorim 2025-10-09 09:01:24 UTC
Created attachment 187635 [details] [review]
Bug 39320: Add new npm dependencies:

vue-draggable-next
vue-cookies

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 23 Pedro Amorim 2025-10-09 09:01:27 UTC
Created attachment 187636 [details] [review]
Bug 39320: VueJS framework: Add option to have a component in dialog

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 24 Pedro Amorim 2025-10-09 09:01:30 UTC
Created attachment 187637 [details] [review]
Bug 39320: Preparation: ERM counts API endpoint

Required for the follow-up ERMCounts widget

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 25 Pedro Amorim 2025-10-09 09:01:33 UTC
Created attachment 187638 [details] [review]
Bug 39320: Add ERM specific dashboard widgets

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 26 Pedro Amorim 2025-10-09 09:01:36 UTC
Created attachment 187639 [details] [review]
Bug 39320: Add dashboard to ERM home

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 27 Pedro Amorim 2025-10-09 09:01:39 UTC
Created attachment 187640 [details] [review]
Bug 39320: Add FA icons to ERM

Would be great to improve the way we load icons to be available
everywhere in Vue instead of just the specific module but on a different
scope.

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 28 Pedro Amorim 2025-10-09 09:01:41 UTC
Created attachment 187641 [details] [review]
Bug 39320: Add 'home' left menu item to ERM

This is a bit hacky, but after hours of fighting with this I wasn't able to come up with a better soltuion.
I suspect stores/navigation.js is doing too much and changing too much of the default router-link behaviour but I may be wrong.

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 29 Pedro Amorim 2025-10-09 09:01:44 UTC
Created attachment 187642 [details] [review]
Bug 39320: Add Cypress tests

Test plan:
1) Enable ERMModule
2) Visit ERM:
<staff_url>/cgi-bin/koha/erm/erm.pl
3) Notice you now have a 'dashboard' homepage showing 4 different widgets
4) Click 'Open Widget Picker'. Remove and add different widgets. Close
5) Drag and drop the widgets around the dashboard, from left to right, top to bottom
6) Click the context menu (vertical dots) on each of the widgets. Click 'move to right', 'move to left', 'remove'.
7) On the 'Licenses needing action', notice there is a 'Settings' item option. Click that, test different settings values. Close settings.
8) Using the widget picker or context menu for the respective widgets, remove all widgets except one. Click away i.e. 'Agreements' on the left menu. Go back to home by clicking 'Home'. Notice your dashboard is as you left it.
9) Enable all widgets, rearrange them by dragging and dropping in different places. Repeat the previous exercise. Notice the dashboard keeps the widgets arranged as you left them.
10) Add some test data, on k-t-d run:
bash <(curl -s https://gist.githubusercontent.com/ammopt/8d74feff048b0732ed0362a204c3d8cd/raw/a0347d4199d176dde58ea1d1437d2e903c101132/bug_39320_test_data.sh)
11) Refresh the homepage dashboard, check the 'Counts' are correct and links work, check that the 'Latest SUSHI Counter jobs' table now populates and links to the data provider as well as respective job.
12) For 'Licenses needing action', test different settings values and confirm the table filters the results as expected.
13) As before, click away and comeback to ERM home. Notice your 'Licenses needing actions' settings are kept as you left them.
14) For the 'eUsage report' widget, notice it says 'No saved reports are availble to run'. Create a new usage report at:
<staff_url>/cgi-bin/koha/erm/eusage/reports
15) Click the 'Create report' tab, input the mandatory fields and enter a report name at the bottom of the page. Click 'Save report'.
16) Come back to ERM home. Notice the 'eUsage report' widget now shows a dropdown with a disabled 'Run' button.
Pick the report you just created. Notice the 'Run' button is now enabled. Click 'Run'. Notice you get the report results screen (will show nothing as there is no usage data in this test exercise).
17) k-t-d: Run cypress tests (reset_all beforehand to clear test data):
cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 30 Pedro Amorim 2025-10-09 09:01:48 UTC
Created attachment 187643 [details] [review]
Bug 39320: Preparation: Add base and wrapper components

As well as wrapper support components
base-widget.js composable

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 31 Pedro Amorim 2025-10-09 09:01:50 UTC
Created attachment 187644 [details] [review]
Bug 39320: Follow-up: Add 'move up' and 'move down' options

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 32 Pedro Amorim 2025-10-09 09:01:53 UTC
Created attachment 187645 [details] [review]
Bug 39320: Remove 'extends' from the Home component

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Comment 33 Jonathan Druart 2025-10-16 13:46:01 UTC
QA comments:

1. :deep CSS rules should be removed (or moved to css/vue.css)

2. Do we really need the /erm/counts route. It needs tests (missing btw), swagger spec, Mojo controller. When we could just hit /agreements count=1 and retrieve the X-Base-Total-Count headers.

3. Why store in cookie when you can use localstorage? (and don't need the new deps vue-cookies)

4. drag&drop - you cannot select something in a box, it automatically drag the box. Cannot we have a dedicated zone/icon for that drag&drop behaviour?

5. From the "Counts" widget the links are "#", we should link to eg. /agreements instead.
It also generates a vue warning:
"""
[Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState:

history.replaceState(history.state, '', url)
"""

6. Links from the "Licenses needed action" are correct (http://localhost:8081/cgi-bin/koha/erm/licenses/1), but it fully reloads the app

7. ModuleDashboard/Widgets/ERMCounts.vue
{{ $__("There are") }}
It won't be correctly translatable, use placeholder (%s and format) instead.
By the way I don't think you should use definition.labelSingular and definition.labelPlural here. It won't be translatable correctly in some languages.
I don't have a suggestion to fix this and keep it in a loop however.

8. Widgets/ERMLatestSUSHIJobs.vue
a. 117                 0: ["show"],
What's that?
I see that in the second column:
<a href="/cgi-bin/koha/erm/eusage/usage_data_providers/undefined" class="show" draggable="false"></a>

b. The "View" job button: you are using a "viewJob" function. I think you should use the callback instead, see Vendors/VendorResource.vue, "Receive shipments"
712                             callback: ({ id }, dt, event) => {
713                                 event.preventDefault();
714                                 window.location.href = `/cgi-bin/koha/acqui/parcels.pl?booksellerid=${id}`;
715                             },

9. Job status
Widgets/ERMLatestSUSHIJobs.vue
 44         const job_statuses = [

 53         function get_job_status(status) {
 54             const status_lib = job_statuses.find(s => s._id === status);
 55             return status_lib ? status_lib._str : status;
 56         }

If we add a new status we will obviously forget this place. I wouldn't silently ignore an unknown status.
Either we implement +string for /jobs or we raise an error.
Also we are using the only occurrence of escapeHtml in all vue files, I would use escape_str (`return get_job_status(row.status).escapeHtml();`)

10. Cypress tests are failing:
  1) ERM Module Dashboard                                                                                 
       Run eUsage report:                         
     AssertionError: Timed out retrying after 10000ms: Expected to find element: `.widget#ERMRunUsageReport .widget-content`, but never found it.
Comment 34 Jonathan Druart 2025-10-16 13:47:27 UTC
(In reply to Jonathan Druart from comment #33)
> QA comments:
> Either we implement +string for /jobs or we raise an error.

Might not be a good idea to return non-translatable string actually. Or we could return them translated but I am not sure this is implemented already.
Comment 35 Pedro Amorim 2025-10-17 15:04:58 UTC
Created attachment 188094 [details] [review]
Bug 39320: (QA follow-up): Remove deep CSS rules

This CSS is in vue.css anyway
Comment 36 Pedro Amorim 2025-10-17 15:05:00 UTC
Created attachment 188095 [details] [review]
Bug 39320: (QA follow-up): Add counts API tests

prove t/db_dependent/api/v1/erm_counts.t
Comment 37 Pedro Amorim 2025-10-17 15:05:03 UTC
Created attachment 188096 [details] [review]
Bug 39320: (QA follow-up): Use localStorage instead of vue-cookies
Comment 38 Pedro Amorim 2025-10-17 15:05:06 UTC
Created attachment 188097 [details] [review]
Bug 39320: (QA follow-up): Fix counts links

Use router-link instead of href='#'
Comment 39 Pedro Amorim 2025-10-17 15:05:09 UTC
Created attachment 188098 [details] [review]
Bug 39320: (QA follow-up) Prevent full page reload when clicking a license
Comment 40 Pedro Amorim 2025-10-17 15:05:12 UTC
Created attachment 188099 [details] [review]
Bug 39320: (QA follow-up): Use %s and format for 'There are' translatability
Comment 41 Pedro Amorim 2025-10-17 15:05:15 UTC
Created attachment 188100 [details] [review]
Bug 39320: (QA follow-up): Removed unused show event
Comment 42 Pedro Amorim 2025-10-17 15:05:18 UTC
Created attachment 188101 [details] [review]
Bug 39320: (QA follow-up): Fix cypress

These tests have always passed for me running cypress on UI, before and after this patch.
CLI tests however, were flaky and often times failed.
It appears this is because each module refresh was flooding the server with HTTP requests causing the whole thing to bottleneck (?)
With this patch, all widget requests are stubbed for every widget test, and tests now pass on CLI consistently. Passed 10/10 for me, whereas before it failed more often than passed.

Run this:
for i in {1..10}; do   cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts; done
Comment 43 Pedro Amorim 2025-10-17 15:16:28 UTC
Created attachment 188102 [details] [review]
39320: (QA follow-up): Add a handler for drag and drop
Comment 44 Pedro Amorim 2025-10-17 15:16:57 UTC
Created attachment 188103 [details] [review]
Bug 39320: (QA follow-up): Add a handler for drag and drop
Comment 45 Pedro Amorim 2025-10-17 15:23:46 UTC
Created attachment 188104 [details] [review]
Bug 39320: (QA follow-up): Use escape_str instead of .escapeHtml
Comment 46 Pedro Amorim 2025-10-17 15:24:19 UTC
(In reply to Jonathan Druart from comment #33)
> QA comments:
> 
> 1. :deep CSS rules should be removed (or moved to css/vue.css)

Patch added

> 2. Do we really need the /erm/counts route. It needs tests (missing btw),
> swagger spec, Mojo controller. When we could just hit /agreements count=1
> and retrieve the X-Base-Total-Count headers.

Patch with tests added. Yes we need, otherwise it's 6 HTTP requests instead of 1 just to get counts. 

> 3. Why store in cookie when you can use localstorage? (and don't need the
> new deps vue-cookies)

Patch added

> 4. drag&drop - you cannot select something in a box, it automatically drag
> the box. Cannot we have a dedicated zone/icon for that drag&drop behaviour?

Patch added

> 5. From the "Counts" widget the links are "#", we should link to eg.
> /agreements instead.
> It also generates a vue warning:
> """
> [Vue Router warn]: history.state seems to have been manually replaced
> without preserving the necessary values. Make sure to preserve existing
> history state if you are manually calling history.replaceState:
> 
> history.replaceState(history.state, '', url)
> """

Patch added. I've not seen the vue router warn before or after.

> 6. Links from the "Licenses needed action" are correct
> (http://localhost:8081/cgi-bin/koha/erm/licenses/1), but it fully reloads
> the app

Patch added.

> 7. ModuleDashboard/Widgets/ERMCounts.vue
> {{ $__("There are") }}
> It won't be correctly translatable, use placeholder (%s and format) instead.
> By the way I don't think you should use definition.labelSingular and
> definition.labelPlural here. It won't be translatable correctly in some
> languages.
> I don't have a suggestion to fix this and keep it in a loop however.

Patch added.

> 8. Widgets/ERMLatestSUSHIJobs.vue
> a. 117                 0: ["show"],
> What's that?
> I see that in the second column:
> <a href="/cgi-bin/koha/erm/eusage/usage_data_providers/undefined"
> class="show" draggable="false"></a>

Patch added.

> b. The "View" job button: you are using a "viewJob" function. I think you
> should use the callback instead, see Vendors/VendorResource.vue, "Receive
> shipments"
> 712                             callback: ({ id }, dt, event) => {
> 713                                 event.preventDefault();
> 714                                 window.location.href =
> `/cgi-bin/koha/acqui/parcels.pl?booksellerid=${id}`;
> 715                             },

Using viewJob is the same as using 'show' which is what we're using elsewhere in the framework for KohaTable action buttons.

> 9. Job status
> Widgets/ERMLatestSUSHIJobs.vue
>  44         const job_statuses = [
> 
>  53         function get_job_status(status) {
>  54             const status_lib = job_statuses.find(s => s._id === status);
>  55             return status_lib ? status_lib._str : status;
>  56         }
> 
> If we add a new status we will obviously forget this place. I wouldn't
> silently ignore an unknown status.

It's not silently ignoring an unknown status. It prints the untranslatable status code if it doesn't find a match.

> Either we implement +string for /jobs or we raise an error.
> Also we are using the only occurrence of escapeHtml in all vue files, I
> would use escape_str (`return get_job_status(row.status).escapeHtml();`)

Patch added.

> 10. Cypress tests are failing:
>   1) ERM Module Dashboard                                                   
> 
>        Run eUsage report:                         
>      AssertionError: Timed out retrying after 10000ms: Expected to find
> element: `.widget#ERMRunUsageReport .widget-content`, but never found it.

Patch added.
Comment 47 Jonathan Druart 2025-10-20 10:27:36 UTC
(In reply to Pedro Amorim from comment #46)

Thanks for the quick follow-ups!

> > 2. Do we really need the /erm/counts route. It needs tests (missing btw),
> > swagger spec, Mojo controller. When we could just hit /agreements count=1
> > and retrieve the X-Base-Total-Count headers.
> 
> Patch with tests added. Yes we need, otherwise it's 6 HTTP requests instead
> of 1 just to get counts. 

Not convince. I'd like Tomas's POV on /counts.

> > 5. From the "Counts" widget the links are "#", we should link to eg.
> > /agreements instead.
> > It also generates a vue warning:
> > """
> > [Vue Router warn]: history.state seems to have been manually replaced
> > without preserving the necessary values. Make sure to preserve existing
> > history state if you are manually calling history.replaceState:
> > 
> > history.replaceState(history.state, '', url)
> > """
> 
> Patch added. I've not seen the vue router warn before or after.

I've seen it again, then didn't recreate.
I also got "[Vue Router warn]: Discarded invalid param(s) "agreement_id" when navigating." when moving from /agreements to /home.

Logging it here for the records, not blocker.

> > 7. ModuleDashboard/Widgets/ERMCounts.vue
> > {{ $__("There are") }}
> > It won't be correctly translatable, use placeholder (%s and format) instead.
> > By the way I don't think you should use definition.labelSingular and
> > definition.labelPlural here. It won't be translatable correctly in some
> > languages.
> > I don't have a suggestion to fix this and keep it in a loop however.
> 
> Patch added.

```
120             const joined = parts.join(", ");
121             return $__("There are %s.").format(joined);
```

this is still impossible to translate

I have no idea how to fix that, or... we cheat?

what about moving the list to ul/li?

```
There are:

1 agreement
0 license
etc.
```

> > 8. Widgets/ERMLatestSUSHIJobs.vue
> > b. The "View" job button: you are using a "viewJob" function. I think you
> > should use the callback instead, see Vendors/VendorResource.vue, "Receive
> > shipments"
> > 712                             callback: ({ id }, dt, event) => {
> > 713                                 event.preventDefault();
> > 714                                 window.location.href =
> > `/cgi-bin/koha/acqui/parcels.pl?booksellerid=${id}`;
> > 715                             },
> 
> Using viewJob is the same as using 'show' which is what we're using
> elsewhere in the framework for KohaTable action buttons.

Yes, but it's more verbose... Not blocker.

> > 9. Job status
> > Widgets/ERMLatestSUSHIJobs.vue
> >  44         const job_statuses = [
> > 
> >  53         function get_job_status(status) {
> >  54             const status_lib = job_statuses.find(s => s._id === status);
> >  55             return status_lib ? status_lib._str : status;
> >  56         }
> > 
> > If we add a new status we will obviously forget this place. I wouldn't
> > silently ignore an unknown status.
> 
> It's not silently ignoring an unknown status. It prints the untranslatable
> status code if it doesn't find a match.

Yes, so it's not visible, and for me it means it's ignored :)
We are supposed to have this list updated when we add a new status to the job table. If we add "paused", devs will look at the regular pl/pm/tt, but for sure forget this vue file. I would display "Status unknown" or "Status unknown: ${status}" (or even alert) so we clearly see there is something missing in the code.
Comment 48 Jonathan Druart 2025-10-20 10:31:53 UTC
11. drap&drop
If all widgets are on the left you cannot drop in the right column.
Comment 49 Jonathan Druart 2025-10-20 10:32:09 UTC
Created attachment 188151 [details] [review]
Bug 39320: (follow-up) Add counts API tests

Prevent tests to fail if data in DB
Comment 50 Pedro Amorim 2025-10-22 09:43:29 UTC
Created attachment 188279 [details] [review]
Bug 39320: (QA follow-up): Add an empty drop area placeholder
Comment 51 Pedro Amorim 2025-10-22 09:43:32 UTC
Created attachment 188280 [details] [review]
Bug 39320: (QA follow-up): Display 'Uknown status' if not one of the expected job statuses
Comment 52 Pedro Amorim 2025-10-22 09:43:35 UTC
Created attachment 188281 [details] [review]
Bug 39320: (QA follow-up): Fix ERMCounts translatability
Comment 53 Pedro Amorim 2025-10-22 09:43:38 UTC
Created attachment 188282 [details] [review]
Bug 39320: (QA follow-up): Style new ERMCounts list
Comment 54 Pedro Amorim 2025-10-22 09:46:51 UTC
(In reply to Jonathan Druart from comment #47)
> 
> ```
> 120             const joined = parts.join(", ");
> 121             return $__("There are %s.").format(joined);
> ```
> 
> this is still impossible to translate
> 
> I have no idea how to fix that, or... we cheat?
> 
> what about moving the list to ul/li?
> 
> ```
> There are:
> 
> 1 agreement
> 0 license
> etc.
> ```
> 

Fixed by:
1) Dropped the previous 'Use %s and format for 'There are' translatability' patch. 
2) New patch 'Fix ERMCounts translatability' + 'Style new ERMCounts list' patches


> 
> Yes, so it's not visible, and for me it means it's ignored :)
> We are supposed to have this list updated when we add a new status to the
> job table. If we add "paused", devs will look at the regular pl/pm/tt, but
> for sure forget this vue file. I would display "Status unknown" or "Status
> unknown: ${status}" (or even alert) so we clearly see there is something
> missing in the code.

Patch 'Display Uknown status' added.

(In reply to Jonathan Druart from comment #48)
> 11. drap&drop
> If all widgets are on the left you cannot drop in the right column.

Not true, you can, but maybe it's visually obvious. Patch 'Add an empty drop area placeholder' added.
Comment 55 Pedro Amorim 2025-10-22 09:47:24 UTC
Previous comment should read:
but maybe it's not* visually obvious
Comment 56 Pedro Amorim 2025-10-22 10:03:10 UTC Comment hidden (obsolete)
Comment 57 Pedro Amorim 2025-10-22 10:04:51 UTC
Created attachment 188284 [details] [review]
Bug 39320: (QA follow-up): Fix ERMCounts translatability
Comment 58 Pedro Amorim 2025-10-22 10:04:54 UTC
Created attachment 188285 [details] [review]
Bug 39320: (QA follow-up): Style new ERMCounts list
Comment 59 Pedro Amorim 2025-10-22 10:05:34 UTC
(In reply to Pedro Amorim from comment #57)
> Created attachment 188284 [details] [review] [review]
> Bug 39320: (QA follow-up): Fix ERMCounts translatability

Squashed cypress tests updates to this patch.
Comment 60 Jonathan Druart 2025-10-23 09:12:10 UTC
Created attachment 188312 [details] [review]
Bug 39320: Use __n for languages with 3 plural forms (or more)
Comment 61 Jonathan Druart 2025-10-23 09:16:03 UTC
(In reply to Pedro Amorim from comment #54)
> (In reply to Jonathan Druart from comment #47)
> > 
> > ```
> > 120             const joined = parts.join(", ");
> > 121             return $__("There are %s.").format(joined);
> > ```
> > 
> > this is still impossible to translate
> > 
> > I have no idea how to fix that, or... we cheat?
> > 
> > what about moving the list to ul/li?
> > 
> > ```
> > There are:
> > 
> > 1 agreement
> > 0 license
> > etc.
> > ```
> > 
> 
> Fixed by:
> 1) Dropped the previous 'Use %s and format for 'There are' translatability'
> patch. 
> 2) New patch 'Fix ERMCounts translatability' + 'Style new ERMCounts list'
> patches

I've provided a patch to correctly fix the translatability, there are languages with many different forms ;)

> (In reply to Jonathan Druart from comment #48)
> > 11. drap&drop
> > If all widgets are on the left you cannot drop in the right column.
> 
> Not true, you can, but maybe it's visually obvious. Patch 'Add an empty drop
> area placeholder' added.

I can assure you that I couldn't drop a widget to the right when they were all on the left.

Now with the last patches we have a "Drop widget here" area that is always displayed. IMO it should be displayed only when dragging.
Comment 62 Jonathan Druart 2025-10-23 09:17:26 UTC
(In reply to Jonathan Druart from comment #61)
> (In reply to Pedro Amorim from comment #54)
> > (In reply to Jonathan Druart from comment #48)
> > > 11. drap&drop
> > > If all widgets are on the left you cannot drop in the right column.
> > 
> > Not true, you can, but maybe it's visually obvious. Patch 'Add an empty drop
> > area placeholder' added.
> 
> I can assure you that I couldn't drop a widget to the right when they were
> all on the left.
> 
> Now with the last patches we have a "Drop widget here" area that is always
> displayed. IMO it should be displayed only when dragging.

There is the "move right" workaround. We can move that to a separate bug if it is not trivial (but then I would suggest to obsolete 'Add an empty drop area placeholder')
Comment 63 Pedro Amorim 2025-10-23 09:56:22 UTC
Created attachment 188315 [details] [review]
Bug 39320: (QA follow-up): Only show 'drop widgets here' area when actively dragging
Comment 64 Jonathan Druart 2025-10-23 11:04:24 UTC
(In reply to Jonathan Druart from comment #47)
> (In reply to Pedro Amorim from comment #46)
> > > 2. Do we really need the /erm/counts route. It needs tests (missing btw),
> > > swagger spec, Mojo controller. When we could just hit /agreements count=1
> > > and retrieve the X-Base-Total-Count headers.
> > 
> > Patch with tests added. Yes we need, otherwise it's 6 HTTP requests instead
> > of 1 just to get counts. 
> 
> Not convince. I'd like Tomas's POV on /counts.

Tomas, we are still waiting for you here.
Comment 65 Pedro Amorim 2025-10-23 12:05:20 UTC
Thank you for the QA review Joubu, your time spent here is greatly appreciated.
Comment 66 Pedro Amorim 2025-10-23 15:33:49 UTC
Created attachment 188372 [details] [review]
Bug 39320: (QA follow-up): Remove big 'Processing...' when loading table widgets

This prevents the big centered 'Processing...' from showing when moving widgets around the dashboard.
Keeps the 'Loading...' at the widget level for table widgets, same as any other widget.
Comment 67 Pedro Amorim 2025-10-23 16:02:36 UTC Comment hidden (obsolete)
Comment 68 Pedro Amorim 2025-10-23 16:12:45 UTC
Created attachment 188376 [details] [review]
Bug 39320: (QA follow-up): Fix widget with settings

This was broken from the rewrite into bug 38201. Fixed here.
Without this patch, if you click 'settings' on the licenses widgets and pick different values, you get errors on the console and everything breaks.
Comment 69 Tomás Cohen Arazi (tcohen) 2025-10-27 14:34:56 UTC
(In reply to Jonathan Druart from comment #64)
> (In reply to Jonathan Druart from comment #47)
> > (In reply to Pedro Amorim from comment #46)
> > > > 2. Do we really need the /erm/counts route. It needs tests (missing btw),
> > > > swagger spec, Mojo controller. When we could just hit /agreements count=1
> > > > and retrieve the X-Base-Total-Count headers.
> > > 
> > > Patch with tests added. Yes we need, otherwise it's 6 HTTP requests instead
> > > of 1 just to get counts. 
> > 
> > Not convince. I'd like Tomas's POV on /counts.
> 
> Tomas, we are still waiting for you here.

I like the idea of always sending the count headers back. Less work too.
Comment 70 Pedro Amorim 2025-10-30 12:51:59 UTC
Created attachment 188637 [details] [review]
Bug 39320: (ERMCounts QA follow-up): Use existing count method from the API client
Comment 71 Pedro Amorim 2025-10-30 12:52:03 UTC
Created attachment 188638 [details] [review]
Bug 39320: (ERMCounts QA follow-up): Remove documents as an endpoint for listing that does not exist
Comment 72 Pedro Amorim 2025-10-30 12:52:09 UTC
Created attachment 188639 [details] [review]
Bug 39320: (ERMCounts QA follow-up): Reimplement loading. Now present 'Loading' for each resource count that's waiting, rather than hang the whole widget waiting for all responses
Comment 73 Pedro Amorim 2025-10-30 12:52:23 UTC
Created attachment 188640 [details] [review]
Bug 39320: (ERMCounts QA follow-up): Update Cypress

cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts
Comment 74 Pedro Amorim 2025-10-30 12:52:28 UTC
Created attachment 188641 [details] [review]
Bug 39320: (ERMCounts QA follow-up): Clean-up previous ERMCounts implementation
Comment 75 Pedro Amorim 2025-10-30 12:53:16 UTC
Thank you Joubu and Tomas. I've reimplemented the ERMCounts to utilize the existing count headers instead of having its own erm/counts endpoint.
Comment 76 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:23 UTC
Created attachment 188830 [details] [review]
Bug 39320: Add new npm dependencies:

vue-draggable-next
vue-cookies

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 77 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:25 UTC
Created attachment 188831 [details] [review]
Bug 39320: VueJS framework: Add option to have a component in dialog

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 78 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:28 UTC
Created attachment 188832 [details] [review]
Bug 39320: Preparation: ERM counts API endpoint

Required for the follow-up ERMCounts widget

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 79 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:30 UTC
Created attachment 188833 [details] [review]
Bug 39320: Add ERM specific dashboard widgets

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 80 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:33 UTC
Created attachment 188834 [details] [review]
Bug 39320: Add dashboard to ERM home

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 81 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:35 UTC
Created attachment 188835 [details] [review]
Bug 39320: Add FA icons to ERM

Would be great to improve the way we load icons to be available
everywhere in Vue instead of just the specific module but on a different
scope.

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 82 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:38 UTC
Created attachment 188836 [details] [review]
Bug 39320: Add 'home' left menu item to ERM

This is a bit hacky, but after hours of fighting with this I wasn't able to come up with a better soltuion.
I suspect stores/navigation.js is doing too much and changing too much of the default router-link behaviour but I may be wrong.

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 83 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:44 UTC
Created attachment 188837 [details] [review]
Bug 39320: Add Cypress tests

Test plan:
1) Enable ERMModule
2) Visit ERM:
<staff_url>/cgi-bin/koha/erm/erm.pl
3) Notice you now have a 'dashboard' homepage showing 4 different widgets
4) Click 'Open Widget Picker'. Remove and add different widgets. Close
5) Drag and drop the widgets around the dashboard, from left to right, top to bottom
6) Click the context menu (vertical dots) on each of the widgets. Click 'move to right', 'move to left', 'remove'.
7) On the 'Licenses needing action', notice there is a 'Settings' item option. Click that, test different settings values. Close settings.
8) Using the widget picker or context menu for the respective widgets, remove all widgets except one. Click away i.e. 'Agreements' on the left menu. Go back to home by clicking 'Home'. Notice your dashboard is as you left it.
9) Enable all widgets, rearrange them by dragging and dropping in different places. Repeat the previous exercise. Notice the dashboard keeps the widgets arranged as you left them.
10) Add some test data, on k-t-d run:
bash <(curl -s https://gist.githubusercontent.com/ammopt/8d74feff048b0732ed0362a204c3d8cd/raw/a0347d4199d176dde58ea1d1437d2e903c101132/bug_39320_test_data.sh)
11) Refresh the homepage dashboard, check the 'Counts' are correct and links work, check that the 'Latest SUSHI Counter jobs' table now populates and links to the data provider as well as respective job.
12) For 'Licenses needing action', test different settings values and confirm the table filters the results as expected.
13) As before, click away and comeback to ERM home. Notice your 'Licenses needing actions' settings are kept as you left them.
14) For the 'eUsage report' widget, notice it says 'No saved reports are availble to run'. Create a new usage report at:
<staff_url>/cgi-bin/koha/erm/eusage/reports
15) Click the 'Create report' tab, input the mandatory fields and enter a report name at the bottom of the page. Click 'Save report'.
16) Come back to ERM home. Notice the 'eUsage report' widget now shows a dropdown with a disabled 'Run' button.
Pick the report you just created. Notice the 'Run' button is now enabled. Click 'Run'. Notice you get the report results screen (will show nothing as there is no usage data in this test exercise).
17) k-t-d: Run cypress tests (reset_all beforehand to clear test data):
cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 84 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:47 UTC
Created attachment 188838 [details] [review]
Bug 39320: Preparation: Add base and wrapper components

As well as wrapper support components
base-widget.js composable

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 85 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:49 UTC
Created attachment 188839 [details] [review]
Bug 39320: (follow-up) Add 'move up' and 'move down' options

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 86 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:52 UTC
Created attachment 188840 [details] [review]
Bug 39320: Remove 'extends' from the Home component

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 87 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:55 UTC
Created attachment 188841 [details] [review]
Bug 39320: (QA follow-up): Remove deep CSS rules

This CSS is in vue.css anyway

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 88 Tomás Cohen Arazi (tcohen) 2025-10-31 18:21:57 UTC
Created attachment 188842 [details] [review]
Bug 39320: (QA follow-up): Add counts API tests

prove t/db_dependent/api/v1/erm_counts.t

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 89 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:00 UTC
Created attachment 188843 [details] [review]
Bug 39320: (QA follow-up): Use localStorage instead of vue-cookies

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 90 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:02 UTC
Created attachment 188844 [details] [review]
Bug 39320: (QA follow-up): Fix counts links

Use router-link instead of href='#'

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 91 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:05 UTC
Created attachment 188845 [details] [review]
Bug 39320: (QA follow-up) Prevent full page reload when clicking a license

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 92 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:07 UTC
Created attachment 188846 [details] [review]
Bug 39320: (QA follow-up): Removed unused show event

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 93 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:10 UTC
Created attachment 188847 [details] [review]
Bug 39320: (QA follow-up): Fix cypress

These tests have always passed for me running cypress on UI, before and after this patch.
CLI tests however, were flaky and often times failed.
It appears this is because each module refresh was flooding the server with HTTP requests causing the whole thing to bottleneck (?)
With this patch, all widget requests are stubbed for every widget test, and tests now pass on CLI consistently. Passed 10/10 for me, whereas before it failed more often than passed.

Run this:
for i in {1..10}; do   cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts; done

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 94 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:12 UTC
Created attachment 188848 [details] [review]
Bug 39320: (QA follow-up): Add a handler for drag and drop

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 95 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:14 UTC
Created attachment 188849 [details] [review]
Bug 39320: (QA follow-up): Use escape_str instead of .escapeHtml

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 96 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:17 UTC
Created attachment 188850 [details] [review]
Bug 39320: (follow-up) Add counts API tests

Prevent tests to fail if data in DB

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 97 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:19 UTC
Created attachment 188851 [details] [review]
Bug 39320: (QA follow-up): Add an empty drop area placeholder

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 98 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:22 UTC
Created attachment 188852 [details] [review]
Bug 39320: (QA follow-up): Display 'Uknown status' if not one of the expected job statuses

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 99 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:24 UTC
Created attachment 188853 [details] [review]
Bug 39320: (QA follow-up): Fix ERMCounts translatability

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 100 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:27 UTC
Created attachment 188854 [details] [review]
Bug 39320: (QA follow-up): Style new ERMCounts list

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 101 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:29 UTC
Created attachment 188855 [details] [review]
Bug 39320: Use __n for languages with 3 plural forms (or more)

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 102 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:31 UTC
Created attachment 188856 [details] [review]
Bug 39320: (QA follow-up): Only show 'drop widgets here' area when actively dragging

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 103 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:34 UTC
Created attachment 188857 [details] [review]
Bug 39320: (QA follow-up): Remove big 'Processing...' when loading table widgets

This prevents the big centered 'Processing...' from showing when moving widgets around the dashboard.
Keeps the 'Loading...' at the widget level for table widgets, same as any other widget.

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 104 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:36 UTC
Created attachment 188858 [details] [review]
Bug 39320: (QA follow-up): Fix widget with settings

This was broken from the rewrite into bug 38201. Fixed here.
Without this patch, if you click 'settings' on the licenses widgets and pick different values, you get errors on the console and everything breaks.

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 105 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:39 UTC
Created attachment 188859 [details] [review]
Bug 39320: (QA follow-up): Use existing count method from the API client

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 106 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:44 UTC
Created attachment 188860 [details] [review]
Bug 39320: (QA follow-up): Remove documents as an endpoint for listing that does not exist

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 107 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:46 UTC
Created attachment 188861 [details] [review]
Bug 39320: (QA follow-up): Reimplement loading. Now present 'Loading' for each resource count that's waiting, rather than hang the whole widget waiting for all responses

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 108 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:49 UTC
Created attachment 188862 [details] [review]
Bug 39320: (QA follow-up): Update Cypress

cypress run --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 109 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:51 UTC
Created attachment 188863 [details] [review]
Bug 39320: (QA follow-up): Clean-up previous ERMCounts implementation

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 110 Tomás Cohen Arazi (tcohen) 2025-10-31 18:22:54 UTC
Created attachment 188864 [details] [review]
Bug 39320: Fix ERM breadcrumb causing page reload

The main ERM route was missing a 'name' property, causing the
navigation store to treat it as an external path (.pl extension).
This resulted in breadcrumb links using href instead of router-link,
causing unwanted page reloads.

To test:
1. Navigate to ERM module
2. Go to any sub-section (Agreements, Licenses, etc.)
3. Click on 'E-resource management' in the breadcrumb
=> FAIL: Notice the page reloads!
4. Apply the patch
5. Repeat steps 1-3
=> SUCCES: Verify the page doesn't reload and navigation works smoothly
6. Sign off :-D

Signed-off-by: Tomás Cohen Arazi <tomascohen@theke.io>
Comment 111 Tomás Cohen Arazi (tcohen) 2025-10-31 18:43:48 UTC
Hi, I tested the feature and am happy with what I see

* functionality
* aesthetics
* usability

The only annoyance I found was the page reload when using the breadcrumb. I'm not sure if it was a 'feature', but I fixed it with a follow-up. I also adjusted the commit titles to silence the QA tools a bit.

At this point I think this deserves some squashing too. But that's not a blocker anyway.

I wasn't able to run the tests successfully. What I did:

1. Apply the patches
2. Run:
   $ ktd --shell
  k$ sudo yarn install --modules-folder /kohadevbox/node_modules
  k$ yarn build
3. Run:
  k$ run_cypress --spec t/cypress/integration/ERM/ModuleDashboard_spec.ts
=> FAIL: The 'Latest SUSHI Counter jobs' tests fail with a page error:

```
     Error: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.

  > JS Warning detected: "[Vue warn]: Unhandled error during execution of setup function" "\n" " at <RouterLink" "key=0" "to=" {"name":"ERMHome","params":{"erm_usage_data_provider_id":"1"}} "class=\"\"" ">" "\n" " at <NavigationItem" "key=0" "item=" [object Object] "params=" {"erm_usage_data_provider_id":"1"} ">" "\n" " at <Breadcrumbs>" "\n" " at <App>"

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
```

Hope it is an easy fix for y'all. Otherwise, great job! Hope to see some work for the admin home page and we start unifying it all :-D
Comment 112 Tomás Cohen Arazi (tcohen) 2025-10-31 19:52:13 UTC
I'm not familiar enough with the eUsage section and data providers. I tried to add some things manually but didn't manage to make 'Run eUsage report' do anything. And there's some errors in the browser console that might be related to the tests failure and this behavior. Again, as I'm not familiar it might probably be me (the functionality side, not the errors in the console).