Bug 33621

Summary: Javascript error when claiming return via circulation.pl
Product: Koha Reporter: Aleisha Amohia <aleisha>
Component: Staff interfaceAssignee: Jonathan Druart <jonathan.druart>
Status: RESOLVED FIXED QA Contact: Marcel de Rooy <m.de.rooy>
Severity: normal    
Priority: P5 - low CC: dcook, gmcharlt, Laura.escamilla, lucas, m.de.rooy, rcoert
Version: MainKeywords: rel_22_11_candidate
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32609
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
Attachments: Bug 33621: Fix claim return
Bug 33621: Fix claim return
Bug 33621: Fix claim return
Bug 33621: (QA follow-up) Typo formated_date

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 2023-04-28 14:19:16 UTC
*** Bug 33616 has been marked as a duplicate of this bug. ***
Comment 16 Tomás Cohen Arazi 2023-05-05 12:18:22 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 17 Martin Renvoize 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 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. ***