Bug 33621 - Javascript error when claiming return via circulation.pl
Summary: Javascript error when claiming return via circulation.pl
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Jonathan Druart
QA Contact: Marcel de Rooy
URL:
Keywords: rel_22_11_candidate
: 33616 33805 (view as bug list)
Depends on:
Blocks:
 
Reported: 2023-04-26 23:22 UTC by Aleisha Amohia
Modified: 2024-07-04 20:38 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.06
Circulation function:


Attachments
Bug 33621: Fix claim return (970 bytes, patch)
2023-04-27 04:49 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 33621: Fix claim return (1.42 KB, patch)
2023-04-27 22:42 UTC, Aleisha Amohia
Details | Diff | Splinter Review
Bug 33621: Fix claim return (1.51 KB, patch)
2023-04-28 10:00 UTC, Marcel de Rooy
Details | Diff | Splinter Review
Bug 33621: (QA follow-up) Typo formated_date (1.29 KB, patch)
2023-04-28 10:00 UTC, Marcel de Rooy
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Aleisha Amohia 2023-04-26 23:22:13 UTC
We've noticed some interesting problems since upgrading to 22.11.04 that seem related to CSS and JS not compiling or being access correctly.

Examples that have been reported:

- the calendar icon that shows in the flatpickr text input fields does not show

to reproduce: go to add or edit an item under a biblio. the date acquired field uses the flatpickr date picker, but the calendar icon that usually shows inside the input field on the left is invisible.

- making return claims on the checkouts page shows the 'loading' icon forever, have to refresh the page to show the claim

to reproduce: set the ClaimReturnedLostValue system preference. check out an item, then do a return claim. once the button is clicked, it looks like it keeps loading or processing until you refresh the page

Any advice would be appreciated

Thanks
Aleisha
Comment 1 David Cook 2023-04-26 23:43:15 UTC
(In reply to Aleisha Amohia from comment #0)
> - the calendar icon that shows in the flatpickr text input fields does not
> show

I decided to look at the calendar icon since it was the easiest thing to look at. It's a SVG which appears to be defined in ./koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss

When I try to access the SVG in 22.11.04, I get an error page that says: "error on line 1 at column 70: AttValue: ' expected"

Comparing between 22.11.03 and 22.11.04, there does seem to be an encoding difference.

In 22.11.03:

data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E

In 22.11.04:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='#369'%20class='bi%20bi-calendar3'%3E%3Cg%20stroke-width='1.333'%3E%3Cpath%20d='M10.5%200h-9A1.5%201.5%200%200%200%200%201.5v9A1.5%201.5%200%200%200%201.5%2012h9a1.5%201.5%200%200%200%201.5-1.5v-9A1.5%201.5%200%200%200%2010.5%200zM.75%202.893c0-.355.336-.643.75-.643h9c.414%200%20.75.288.75.643v7.714c0%20.355-.336.643-.75.643h-9c-.414%200-.75-.288-.75-.643z'/%3E%3Cpath%20d='M4.875%205.25a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zM2.625%207.5a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm-6.75%202.25a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5zm2.25%200a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5z'/%3E%3C/g%3E%3C/svg%3E
Comment 2 David Cook 2023-04-26 23:48:13 UTC
The problem in 22.11.04 is the hash (ie #) in the fill...
Comment 3 David Cook 2023-04-26 23:56:13 UTC
Bug 32978 changed from node-sass to dart-sass. My guess is that is what is encoding the SCSS files differently. 

I think the fix is probably to change fill='#369' to fill='%23369' in ./koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss
Comment 4 David Cook 2023-04-27 00:03:03 UTC
(In reply to Aleisha Amohia from comment #0)
> to reproduce: set the ClaimReturnedLostValue system preference. check out an
> item, then do a return claim. once the button is clicked, it looks like it
> keeps loading or processing until you refresh the page

There is a Javascript error that shows up in the console:

circulation.pl:1365 Uncaught TypeError: value.match is not a function
    at window.$date (circulation.pl:1365:26)
    at window.$datetime (circulation.pl:1384:20)
    at Object.success (circulation.pl:1855:33)
    at c (jquery-3.6.0.min_22.1104000.js:2:28327)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min_22.1104000.js:2:29072)
    at l (jquery-3.6.0.min_22.1104000.js:2:79901)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.min_22.1104000.js:2:82355)

It looks like it's just a bug in some Javascript in circulation.pl or with the API /api/v1/return_claims. 

As often happens in Koha, there isn't enough error checking/handling. 

I'll leave that one for you to investigate.
Comment 5 Aleisha Amohia 2023-04-27 00:14:53 UTC
Thanks David, I'll rename this bug report to be about the return claim bug as Bug 33615 was made about the flatpickr icon.
Comment 6 David Cook 2023-04-27 00:27:57 UTC
(In reply to Aleisha Amohia from comment #5)
> Thanks David, I'll rename this bug report to be about the return claim bug
> as Bug 33615 was made about the flatpickr icon.

Sounds good
Comment 7 Jonathan Druart 2023-04-27 04:49:32 UTC
Created attachment 150263 [details] [review]
Bug 33621: Fix claim return
Comment 8 Jonathan Druart 2023-04-27 04:51:45 UTC
I guess this has been caused by bug 30310.
Comment 9 Aleisha Amohia 2023-04-27 22:42:58 UTC
Created attachment 150322 [details] [review]
Bug 33621: Fix claim return

To test:

1. Set the CaimReturnedLostValue system preference to one of your LOST authorised values
2. Check out an item
3. In the checkouts table, claim return
4. Notice the processing icon keeps spinning
5. Apply the patch
6. Check in the item and resolve the return claim to clear it
7. Check out an item
8. In the checkouts table, claim return
9. Confirm the checkouts table reloads and the return is claimed as expected

Signed-off-by: Aleisha Amohia <aleishaamohia@hotmail.com>
Comment 10 Aleisha Amohia 2023-04-27 22:50:33 UTC
Please ensure this patch is backported to 22.11.x
Comment 11 Marcel de Rooy 2023-04-28 09:52:21 UTC
let formated_date = $datetime(data.created_on);

Typo formatted.

But what is $datetime ??
Comment 12 Marcel de Rooy 2023-04-28 10:00:15 UTC
Created attachment 150360 [details] [review]
Bug 33621: Fix claim return

To test:

1. Set the CaimReturnedLostValue system preference to one of your LOST authorised values
2. Check out an item
3. In the checkouts table, claim return
4. Notice the processing icon keeps spinning
5. Apply the patch
6. Check in the item and resolve the return claim to clear it
7. Check out an item
8. In the checkouts table, claim return
9. Confirm the checkouts table reloads and the return is claimed as expected

Signed-off-by: Aleisha Amohia <aleishaamohia@hotmail.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Comment 13 Marcel de Rooy 2023-04-28 10:00:18 UTC
Created attachment 150361 [details] [review]
Bug 33621: (QA follow-up) Typo formated_date

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Comment 14 Marcel de Rooy 2023-04-28 10:00:49 UTC
(In reply to Marcel de Rooy from comment #11)
> 
> But what is $datetime ??

Ah, I found him:

        window.$datetime = function(value, options) {
            options = options||{};
            options.withtime = true;
            return $date(value, options);
        };

        window.$date = function(value, options) {
ETC
Comment 15 Lucas Gass (lukeg) 2023-04-28 14:19:16 UTC
*** Bug 33616 has been marked as a duplicate of this bug. ***
Comment 16 Tomás Cohen Arazi (tcohen) 2023-05-05 12:18:22 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 17 Martin Renvoize (ashimema) 2023-05-11 11:24:09 UTC
Many hands makes light work, thankyou everyone!

Pushed to 22.11.x for the next release
Comment 18 Lucas Gass (lukeg) 2023-05-15 22:19:45 UTC
I cannot recreate this in 22.05.x, no backport.
Comment 19 Laura Escamilla 2023-05-23 15:21:20 UTC
*** Bug 33805 has been marked as a duplicate of this bug. ***