Bug 29212 - Use Flatpickr on OPAC pages
Summary: Use Flatpickr on OPAC pages
Status: RESOLVED FIXED
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 30550 30711
  Show dependency treegraph
 
Reported: 2021-10-12 16:21 UTC by Owen Leonard
Modified: 2022-05-06 13:31 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This enhancement replaces the jQueryUI date picker used on OPAC pages with Flatpickr. The jQueryUI date picker is no longer supported.
Version(s) released in:
22.05.00


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
Bug 29212: (follow-up) Add futuredate attribute to date picker (2.23 KB, patch)
2022-01-19 16:21 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29212: Use Flatpickr on OPAC pages (182.41 KB, patch)
2022-01-20 10:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29212: (follow-up) Incorporate linked date field code from Bug 29240 (5.09 KB, patch)
2022-01-20 10:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29212: (follow-up) Update missing date input (2.28 KB, patch)
2022-01-20 10:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29212: (follow-up) Fixes to suspend hold process (10.20 KB, patch)
2022-01-20 10:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29212: (follow-up) Add futuredate attribute to date picker (2.31 KB, patch)
2022-01-20 10:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29212: (follow-up) Restore "Clear date" text for "Suspend all holds" (3.55 KB, patch)
2022-01-31 16:37 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.
-
Comment 15 Jonathan Druart 2022-01-19 13:05:23 UTC
opac-reserve: date in the past can be selected.
Comment 16 Owen Leonard 2022-01-19 16:21:14 UTC
Created attachment 129620 [details] [review]
Bug 29212: (follow-up) Add futuredate attribute to date picker

This patch adds the "futuredate" attribute to the "Hold not needed
after" date field in the OPAC hold process.

To test, apply the patch and log into the OPAC.

- Locate a bibliographic record and being the process of placing a hold.
- Click "Show more options" to display the date fields.
- If the OPACAllowHoldDateInFuture system preferences is enabled:
  - Set "Hold starts on date" to a date in the future.
  - Trigger the date-picker in the "Hold not needed after" field: You
    should be limited to dates *after* the date you selected above.
- If OPACAllowHoldDateInFuture is disabled:
  - The "Hold starts on date" will no longer be present.
  - Trigger the date-picker in the "Hold not needed after" field: You
    should be limited to dates after today.
Comment 17 Jonathan Druart 2022-01-20 10:27:01 UTC
Created attachment 129638 [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>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 18 Jonathan Druart 2022-01-20 10:27:05 UTC
Created attachment 129639 [details] [review]
Bug 29212: (follow-up) Incorporate linked date field code from Bug 29240

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 19 Jonathan Druart 2022-01-20 10:27:09 UTC
Created attachment 129640 [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>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 20 Jonathan Druart 2022-01-20 10:27:13 UTC
Created attachment 129641 [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.
-

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 21 Jonathan Druart 2022-01-20 10:27:17 UTC
Created attachment 129642 [details] [review]
Bug 29212: (follow-up) Add futuredate attribute to date picker

This patch adds the "futuredate" attribute to the "Hold not needed
after" date field in the OPAC hold process.

To test, apply the patch and log into the OPAC.

- Locate a bibliographic record and being the process of placing a hold.
- Click "Show more options" to display the date fields.
- If the OPACAllowHoldDateInFuture system preferences is enabled:
  - Set "Hold starts on date" to a date in the future.
  - Trigger the date-picker in the "Hold not needed after" field: You
    should be limited to dates *after* the date you selected above.
- If OPACAllowHoldDateInFuture is disabled:
  - The "Hold starts on date" will no longer be present.
  - Trigger the date-picker in the "Hold not needed after" field: You
    should be limited to dates after today.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 22 Katrin Fischer 2022-01-20 20:16:03 UTC
Thx Joubu - glad to see this one moving.
Comment 23 Fridolin Somers 2022-01-29 07:27:11 UTC
Great work :)

I see patch '(follow-up) Update missing date input' removes the hint text 'Clear date to suspend indefinitely',
after 'Suspend all holds' :
- <a href="#" style="font-size:85%;text-decoration:none;" onclick="document.getElementById('suspend_until').value='';return false;">Clear date to suspend indefinitely</a>

Is it on purpose ?

This text still exists in modal when suspending one hold.

In my opinion, this hint should be grey and not a link, the red cross already does the clear action.
Comment 24 Owen Leonard 2022-01-31 16:37:40 UTC
Created attachment 130019 [details] [review]
Bug 29212: (follow-up) Restore "Clear date" text for "Suspend all holds"

This patch restores the "Clear date to suspend indefinitely" link
associated with the "Suspend all holds" date input field.

The patch also introduces a generic ".clear-flatpickr" click handler for
Flatpickr instances.
Comment 25 Fridolin Somers 2022-02-01 06:52:28 UTC
Great, thanks a lot Owen
Comment 26 Fridolin Somers 2022-02-01 07:56:52 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄