Bug 29478

Summary: flatpickr misses quick shortcut to "Today" date
Product: Koha Reporter: Andrii Nugged <nugged>
Component: TemplatesAssignee: Jonathan Druart <jonathan.druart>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: major    
Priority: P5 - low CC: david, fridolin.somers, jonathan.druart, martin.renvoize, mtj
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
This adds shortcuts to yesterday, today and tomorrow for the flatpickr date selector.
Version(s) released in:
21.11.00
Bug Depends on: 29500    
Bug Blocks: 29239, 29552, 29588, 30726    
Attachments: Bug 29478: Flatpickr - Restore 'Today' button
Bug 29478: Flatpickr - Restore 'Today' button
Bug 29478: (follow-up) Provide default style for shortcut buttons
Bug 29478: Flatpickr - Restore 'Today' button
Bug 29478: (follow-up) Provide default style for shortcut buttons
Bug 29478: Today should select now for pastinclusive
Bug 29478: Today should select now for pastinclusive
Bug 29478: (follow-up) Today should select now for pastinclusive
Bug 29478: Flatpickr - Restore 'Today' button
Bug 29478: (follow-up) Provide default style for shortcut buttons
Bug 29478: Today should select now for pastinclusive
Bug 29478: (follow-up) Today should select now for pastinclusive
Bug 29478: Flatpickr - Restore 'Today' button
Bug 29478: (follow-up) Provide default style for shortcut buttons
Bug 29478: Today should select now for pastinclusive
Bug 29478: (follow-up) Today should select now for pastinclusive
to test...

Description Andrii Nugged 2021-11-15 09:18:06 UTC
In the previous datepicker there was the "Today" button which was useful for our Koha operators to return back to the current moment after some dates jumping. There is a request to return a somewhat "shortcut button" or similar feature to quickly jump to the current moment.
Comment 1 Jonathan Druart 2021-11-15 09:39:29 UTC
It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr
Comment 2 Jonathan Druart 2021-11-15 10:00:22 UTC
Created attachment 127626 [details] [review]
Bug 29478: Flatpickr - Restore 'Today' button

It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr

Test plan:
Confirm that flatpickr instances now have a yesterday, today and
tomorrow buttons.
Comment 3 David Nind 2021-11-15 18:48:56 UTC
Created attachment 127676 [details] [review]
Bug 29478: Flatpickr - Restore 'Today' button

It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr

Test plan:
Confirm that flatpickr instances now have a yesterday, today and
tomorrow buttons.

Signed-off-by: David Nind <david@davidnind.com>
Comment 4 Owen Leonard 2021-11-16 14:24:58 UTC
Created attachment 127694 [details] [review]
Bug 29478: (follow-up) Provide default style for shortcut buttons

This patch adds some CSS to _flatpickr.scss in order to give a deafult
style to the "yesterday," "today," and "tomorrow" controls added by the
shortcut plugin.

A missed translatable string is now wrapped in the __() function:
__("or").

The patch also updates the date calculation for those shortcuts to use
Flatpickr's date calculation shorthand. This isn't strictly necessary
but I think it makes the code more readable.

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

In the staff client, view some pages with date-picker widgets. A
calendar widget time selection:

- Circulation -> Check out -> Checkout settings -> Select date:
  - The calendar widget should have "yesterday," "today," and "tomorrow"
    controls styled like links appearing after the time selector. The
    controls should be centered, with the "or" label on the same line.

A calendar widget without time selection:

- Tools -> Log viewer -> Display from.
Comment 5 Owen Leonard 2021-11-16 14:26:49 UTC
(In reply to Jonathan Druart from comment #2)

> Confirm that flatpickr instances now have a yesterday, today and
> tomorrow buttons.

I thought of an issue when testing my follow-up: Should the shortcut controls reflect the date limitations of the flatpickr instance? For instance, if selection is limited to a date before today, should the "today" and "tomorrow" controls be disabled? Currently clicking a shortcut for a date which is disallowed will empty the date field.
Comment 6 Jonathan Druart 2021-11-16 14:41:33 UTC
(In reply to Owen Leonard from comment #5)
> (In reply to Jonathan Druart from comment #2)
> 
> > Confirm that flatpickr instances now have a yesterday, today and
> > tomorrow buttons.
> 
> I thought of an issue when testing my follow-up: Should the shortcut
> controls reflect the date limitations of the flatpickr instance? For
> instance, if selection is limited to a date before today, should the "today"
> and "tomorrow" controls be disabled? Currently clicking a shortcut for a
> date which is disallowed will empty the date field.

Good point! Yes definitely, if not too hard to implement.
Comment 7 Jonathan Druart 2021-11-17 09:15:20 UTC
There is a problem for futuredate, see bug 29241 comment 12.

ie. you can click yesterday, the input is prefilled with yesterday's date when we should not accept dates in the past.
Comment 8 Jonathan Druart 2021-11-17 10:52:35 UTC
Created attachment 127721 [details] [review]
Bug 29478: Flatpickr - Restore 'Today' button

It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr

Test plan:
Confirm that flatpickr instances now have a yesterday, today and
tomorrow buttons.

Signed-off-by: David Nind <david@davidnind.com>
Comment 9 Jonathan Druart 2021-11-17 10:52:39 UTC
Created attachment 127722 [details] [review]
Bug 29478: (follow-up) Provide default style for shortcut buttons

This patch adds some CSS to _flatpickr.scss in order to give a deafult
style to the "yesterday," "today," and "tomorrow" controls added by the
shortcut plugin.

A missed translatable string is now wrapped in the __() function:
__("or").

The patch also updates the date calculation for those shortcuts to use
Flatpickr's date calculation shorthand. This isn't strictly necessary
but I think it makes the code more readable.

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

In the staff client, view some pages with date-picker widgets. A
calendar widget time selection:

- Circulation -> Check out -> Checkout settings -> Select date:
  - The calendar widget should have "yesterday," "today," and "tomorrow"
    controls styled like links appearing after the time selector. The
    controls should be centered, with the "or" label on the same line.

A calendar widget without time selection:

- Tools -> Log viewer -> Display from.
Comment 10 Jonathan Druart 2021-11-17 14:19:04 UTC
Created attachment 127730 [details] [review]
Bug 29478: Today should select now for pastinclusive

If Today is clicked when we only allow dates in the past and today/now,
we should select the current date/time
We need to update the maxDate to make it up-to-date, or the maxDate may
be set to the minute before and clicking Today will blank the input.
Comment 11 Jonathan Druart 2021-11-17 14:19:45 UTC
Last patch fixes a bug, however it does not restore the 23:59 time part when another date is selected.
Comment 12 Owen Leonard 2021-11-18 15:06:39 UTC
Created attachment 127804 [details] [review]
Bug 29478: Today should select now for pastinclusive

If Today is clicked when we only allow dates in the past and today/now,
we should select the current date/time
We need to update the maxDate to make it up-to-date, or the maxDate may
be set to the minute before and clicking Today will blank the input.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 13 Owen Leonard 2021-11-18 15:16:03 UTC
The patch in Comment 9 still needs a signoff.
Comment 14 Jonathan Druart 2021-11-19 09:57:16 UTC
Created attachment 127850 [details] [review]
Bug 29478: (follow-up) Today should select now for pastinclusive

This is getting ugly. We need to add 1 minute for the minDate or the
'Today' link may not work.
Comment 15 Jonathan Druart 2021-11-19 09:58:09 UTC
(In reply to Owen Leonard from comment #13)
> The patch in Comment 9 still needs a signoff.

Looks good to me, but I prefer to see someone else testing this. Especially because I found (and fix) yet another problem...
Comment 16 David Nind 2021-11-19 18:27:41 UTC
Created attachment 127890 [details] [review]
Bug 29478: Flatpickr - Restore 'Today' button

It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr

Test plan:
Confirm that flatpickr instances now have a yesterday, today and
tomorrow buttons.

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

Signed-off-by: David Nind <david@davidnind.com>
Comment 17 David Nind 2021-11-19 18:27:47 UTC
Created attachment 127891 [details] [review]
Bug 29478: (follow-up) Provide default style for shortcut buttons

This patch adds some CSS to _flatpickr.scss in order to give a deafult
style to the "yesterday," "today," and "tomorrow" controls added by the
shortcut plugin.

A missed translatable string is now wrapped in the __() function:
__("or").

The patch also updates the date calculation for those shortcuts to use
Flatpickr's date calculation shorthand. This isn't strictly necessary
but I think it makes the code more readable.

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

In the staff client, view some pages with date-picker widgets. A
calendar widget time selection:

- Circulation -> Check out -> Checkout settings -> Select date:
  - The calendar widget should have "yesterday," "today," and "tomorrow"
    controls styled like links appearing after the time selector. The
    controls should be centered, with the "or" label on the same line.

A calendar widget without time selection:

- Tools -> Log viewer -> Display from.

Signed-off-by: David Nind <david@davidnind.com>
Comment 18 David Nind 2021-11-19 18:27:54 UTC
Created attachment 127892 [details] [review]
Bug 29478: Today should select now for pastinclusive

If Today is clicked when we only allow dates in the past and today/now,
we should select the current date/time
We need to update the maxDate to make it up-to-date, or the maxDate may
be set to the minute before and clicking Today will blank the input.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: David Nind <david@davidnind.com>
Comment 19 David Nind 2021-11-19 18:28:01 UTC
Created attachment 127893 [details] [review]
Bug 29478: (follow-up) Today should select now for pastinclusive

This is getting ugly. We need to add 1 minute for the minDate or the
'Today' link may not work.

Signed-off-by: David Nind <david@davidnind.com>
Comment 20 David Nind 2021-11-19 18:34:55 UTC
I'm not sure the "or" is necessary, but that is pretty minor.

Things seem to work as per the test plan, and I didn't come across anything that didn't work...
Comment 21 Martin Renvoize 2021-11-22 10:36:00 UTC
Created attachment 127920 [details] [review]
Bug 29478: Flatpickr - Restore 'Today' button

It's not implemented, looks like we need to use a plugin for that

https://github.com/flatpickr/flatpickr/issues/576

https://github.com/jcsmorais/shortcut-buttons-flatpickr

Test plan:
Confirm that flatpickr instances now have a yesterday, today and
tomorrow buttons.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 22 Martin Renvoize 2021-11-22 10:36:04 UTC
Created attachment 127921 [details] [review]
Bug 29478: (follow-up) Provide default style for shortcut buttons

This patch adds some CSS to _flatpickr.scss in order to give a deafult
style to the "yesterday," "today," and "tomorrow" controls added by the
shortcut plugin.

A missed translatable string is now wrapped in the __() function:
__("or").

The patch also updates the date calculation for those shortcuts to use
Flatpickr's date calculation shorthand. This isn't strictly necessary
but I think it makes the code more readable.

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

In the staff client, view some pages with date-picker widgets. A
calendar widget time selection:

- Circulation -> Check out -> Checkout settings -> Select date:
  - The calendar widget should have "yesterday," "today," and "tomorrow"
    controls styled like links appearing after the time selector. The
    controls should be centered, with the "or" label on the same line.

A calendar widget without time selection:

- Tools -> Log viewer -> Display from.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 23 Martin Renvoize 2021-11-22 10:36:08 UTC
Created attachment 127922 [details] [review]
Bug 29478: Today should select now for pastinclusive

If Today is clicked when we only allow dates in the past and today/now,
we should select the current date/time
We need to update the maxDate to make it up-to-date, or the maxDate may
be set to the minute before and clicking Today will blank the input.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 24 Martin Renvoize 2021-11-22 10:36:12 UTC
Created attachment 127923 [details] [review]
Bug 29478: (follow-up) Today should select now for pastinclusive

This is getting ugly. We need to add 1 minute for the minDate or the
'Today' link may not work.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 25 Martin Renvoize 2021-11-22 10:37:36 UTC
This all works.. yes the last patch is a bit weird, but I understand the reasoning behind it.

I can PQA on the functionality.. though Owens comment regarding disabling the invalid options isn't yet implemented.. I'd love to see that happen, but given the late stag of the cycle I think that can be handled as an early follow-up bug for next cycle.

Passing QA
Comment 26 Jonathan Druart 2021-11-22 11:15:03 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 28 Mason James 2021-11-24 02:46:35 UTC Comment hidden (obsolete)
Comment 29 Fridolin Somers 2022-01-29 06:18:23 UTC
Isn't this 'Blocks' 29239 instead if 'Depends on' ?
Since it is the Omnibus.
Comment 30 Jonathan Druart 2022-01-31 09:42:27 UTC
(In reply to Fridolin Somers from comment #29)
> Isn't this 'Blocks' 29239 instead if 'Depends on' ?
> Since it is the Omnibus.

It showed that it was a Flatpickr bug. You can revert it you wish.