Bug 29212 - Use Flatpickr on OPAC pages
Summary: Use Flatpickr on OPAC pages
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 28982 29240
Blocks: 29239
  Show dependency treegraph
 
Reported: 2021-10-12 16:21 UTC by Owen Leonard
Modified: 2021-11-03 13:14 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 29212: Use Flatpickr on OPAC pages (182.26 KB, patch)
2021-10-13 17:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29212 - Date picker not working (33.03 KB, image/png)
2021-10-14 14:15 UTC, David Nind
Details
Bug 29212: Use Flatpickr on OPAC pages (182.26 KB, patch)
2021-10-14 16:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29212: (follow-up) Incorporate linked date field code from Bug 29240 (4.96 KB, patch)
2021-10-14 16:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29212: (follow-up) Update missing date input (2.16 KB, patch)
2021-10-25 11:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29212: Use Flatpickr on OPAC pages (182.31 KB, patch)
2021-10-25 12:47 UTC, David Nind
Details | Diff | Splinter Review
Bug 29212: (follow-up) Incorporate linked date field code from Bug 29240 (5.01 KB, patch)
2021-10-25 12:47 UTC, David Nind
Details | Diff | Splinter Review
Bug 29212: (follow-up) Update missing date input (2.21 KB, patch)
2021-10-25 12:47 UTC, David Nind
Details | Diff | Splinter Review
Bug 29212: (follow-up) Fixes to suspend hold process (10.12 KB, patch)
2021-11-03 13:14 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2021-10-12 16:21:59 UTC
There are few instances of the jQueryUI datepicker in the OPAC templates which should be replaced with Flatpickr.
Comment 1 Owen Leonard 2021-10-13 17:55:55 UTC Comment hidden (obsolete)
Comment 2 David Nind 2021-10-14 14:15:44 UTC
Created attachment 126290 [details]
Bug 29212 - Date picker not working

For me the date picker is not working for suspend all holds until...

It was working (using the jquery date picker) before applying the patch.

It is working when you suspend the hold for an individual item.
Comment 3 David Nind 2021-10-14 14:19:25 UTC
Ignore my previous comment - I post the screen shot just after you had obsoleted the patch!
Comment 4 Owen Leonard 2021-10-14 15:24:09 UTC
Sorry David, Bug 29240 provides a better solution for some of the linked date fields affected by this patch. I'll get a revised patch up soon. Thanks for testing!
Comment 5 Owen Leonard 2021-10-14 16:00:51 UTC Comment hidden (obsolete)
Comment 6 Owen Leonard 2021-10-14 16:00:55 UTC Comment hidden (obsolete)
Comment 7 David Nind 2021-10-14 17:56:03 UTC
Comment #2 still applies for me - date picker not working for suspend all holds until ... (see screenshot)
Comment 8 Owen Leonard 2021-10-25 11:14:30 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2021-10-25 11:15:02 UTC
(In reply to David Nind from comment #7)
> Comment #2 still applies for me - date picker not working for suspend all
> holds until ... (see screenshot)

Sorry David that was pure carelessness on my part! Thanks for testing!
Comment 10 David Nind 2021-10-25 12:47:09 UTC
Created attachment 126824 [details] [review]
Bug 29212: Use Flatpickr on OPAC pages

This patch adds Flatpickr assets to the OPAC (JS and SCSS). A few pages
are updated to use Flatpickr instead of jQueryUI datepickers.

jQueryUI CSS files are updated because they contain some font family
definitions which are simple to remove but overly complicated to
override. Without this change some Font Awesome icons are broken when
they appear inside jQueryUI widgets like tabs.

We don't run the risk of having this change overwritten by a future
jQueryUI upgrade because there won't be any more.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Log into the OPAC and check that date pickers on the following pages
  work correctly, including month selection, year selection, forward
  and back arrows, and "Clear date" controls:
- Go to the "Your personal details" page.
- Check the "Date of birth" field.
- With SuspendHoldsOpac enabled, view the "Your summary" page for a
  patron with pending holds.
- Click "Suspend" to confirm that the "Suspend until" datepicker
  works correctly for more than one hold.
- From the catalog search results page, select multiple results and
  click the "Place hold" link.
- On the hold confirmation page, click "Show more options" to test
  the "Hold starts on date" (with OPACAllowHoldDateInFuture enabled)
  and the "Hold not needed after" fields.

Signed-off-by: David Nind <david@davidnind.com>
Comment 11 David Nind 2021-10-25 12:47:14 UTC
Created attachment 126825 [details] [review]
Bug 29212: (follow-up) Incorporate linked date field code from Bug 29240

Signed-off-by: David Nind <david@davidnind.com>
Comment 12 David Nind 2021-10-25 12:47:18 UTC
Created attachment 126826 [details] [review]
Bug 29212: (follow-up) Update missing date input

I missed the "Suspend all holds" date input in previous patches.

Signed-off-by: David Nind <david@davidnind.com>
Comment 13 Katrin Fischer 2021-10-31 13:41:33 UTC
There is something odd going on in the suspend holds modal.

Dateformat: DD.MM.YYYY

- Suspend individual hold from OPAC staff acount using the link in the table
- Click into the date field and set a date, example: 16.11.2021
- Empty the field using the x a the end of the input (NOT the link)
- Click on the calendar again - it's set to nowhere with month empty
- Try to pick a month from the pull down - it's not working

The date of birth on patron details page works correctly in comparison.
Comment 14 Owen Leonard 2021-11-03 13:14:07 UTC
Created attachment 127250 [details] [review]
Bug 29212: (follow-up) Fixes to suspend hold process

This patch reworks the process of suspending an individual hold from the
patron's hold list. Instead of repeating the modal markup in each line
of the holds table, a single modal is re-used.

A "focus: false" is added to the modal via a data-attribute in order to
overcome problems with selecting months and using keyboard navigation in
the calendar popup.

To test, apply the patch and log into the OPAC as a user with holds.

- View the holds tab under "Your summary."
- Click the "Suspend" button next to one of the holds.
- You should see a modal which shows the title of the item in question.
- Test that the date picker works correctly:
  - Test selecting a month and year
  - Test selecting a date both with the mouse and by using arrow keys.
  - Test that you can clear the selected date both by clicking the X and
    by clicking the text link.
- Select a date and close the modal without submitting the suspension.
- Click the "Suspend" link on another title to confirm that the date
  picker still works correctly.
- Submit a suspension and confirm that the it completes successfully.
-