Bug 28982

Summary: Use Flatpickr on onboarding pages
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: kyle, martin.renvoize, testopia
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.11.00
Bug Depends on: 28937, 28978    
Bug Blocks: 29212, 29239, 29837    
Attachments: Bug 28982: Use Flatpickr on onboarding pages
Bug 28982: Use Flatpickr on onboarding pages
Bug 28978: Convert installer CSS to SCSS
Bug 28982: (follow-up) Ensure that date format is correctly checked
Bug 28982: Use Flatpickr on onboarding pages
Bug 28982: (follow-up) Ensure that date format is correctly checked

Description Owen Leonard 2021-09-09 12:48:18 UTC
There is one datepicker instance in the onboarding templates which should be replaced with Flatpickr.
Comment 1 Owen Leonard 2021-09-09 14:13:22 UTC
Created attachment 124716 [details] [review]
Bug 28982: Use Flatpickr on onboarding pages

This patch replaces the use of jQueryUI's datepicker in the onboarding
templates. The addition of calendar.inc to the template requires that
some additions be made to the installer's header files, adding the i18n
JavaScript assets.

jQueryUI-specific CSS is removed from installer.scss, and inclusion of
Flatpickr's SCSS is added.

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

- Start the installation process.
- Continue through the installation process until you reach the stage in
  onboarding where you are creating a patron category.
- The "Enrollment period -> Until" field should be a Flatpickr calendar
  widget. The widget should look and work correctly.
Comment 2 Martin Renvoize 2021-09-30 13:01:26 UTC
Created attachment 125503 [details] [review]
Bug 28982: Use Flatpickr on onboarding pages

This patch replaces the use of jQueryUI's datepicker in the onboarding
templates. The addition of calendar.inc to the template requires that
some additions be made to the installer's header files, adding the i18n
JavaScript assets.

jQueryUI-specific CSS is removed from installer.scss, and inclusion of
Flatpickr's SCSS is added.

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

- Start the installation process.
- Continue through the installation process until you reach the stage in
  onboarding where you are creating a patron category.
- The "Enrollment period -> Until" field should be a Flatpickr calendar
  widget. The widget should look and work correctly.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 3 Martin Renvoize 2021-09-30 13:02:04 UTC
All works for me.. Signing off
Comment 4 Katrin Fischer 2021-10-02 20:37:12 UTC
Created attachment 125656 [details] [review]
Bug 28978: Convert installer CSS to SCSS

This patch creates a new SCSS file, installer.scss, from which
installer.css will be compiled.

Most of the resulting CSS is unchanged, but some minor sections were
removed because they were obsolete. The jQueryUI-specific section isn't
fully converted to SCSS because it's going to go away with the addition
of Flatpickr.

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

- Confirm that koha-tmpl/intranet-tmpl/prog/css/installer.css is
  updated.
- Go through the complete web installation process, including
  onboarding, to confirm that everything is styled as before.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 5 Katrin Fischer 2021-10-02 20:40:26 UTC
This appears to work quite well, but there is a small glitch I am wondering about:

* Onboarding, where you set up a patron category
* Set an until date for the expiration date
* The date in the input field shows in the database format (2021-10-19)
* Below is a format with: (MM/DD/YYYY) 

Could you please check?
Comment 6 Owen Leonard 2021-10-04 17:35:55 UTC
Created attachment 125710 [details] [review]
Bug 28982: (follow-up) Ensure that date format is correctly checked

This patch modifies the global calendar include so that it doesn't use
the potentially-undefined template variable "dateformat."
Comment 7 Katrin Fischer 2021-10-10 13:30:04 UTC
Hi Owen, a little confused about the fix: When we are at the stage of "onboarding" the system preferences and possible also custom.sql changes for changing it (de-DE does) have already been run. So I think it should not be undefined at this point.

Also, I believe it's not the hint that is off, but the input is displaying the database format, that is not our default ... so maybe a problem for a different bug actually?
Comment 8 Owen Leonard 2021-10-11 15:32:39 UTC
It wasn't that the dateformat preference wasn't available to the template before my follow-up, it was that the include file tried to reference a global JavaScript variable, "dateformat" which wasn't available. The revision makes it so that the system preference is correctly defined in JavaScript.
Comment 9 Katrin Fischer 2021-10-31 13:54:51 UTC
Created attachment 127138 [details] [review]
Bug 28982: Use Flatpickr on onboarding pages

This patch replaces the use of jQueryUI's datepicker in the onboarding
templates. The addition of calendar.inc to the template requires that
some additions be made to the installer's header files, adding the i18n
JavaScript assets.

jQueryUI-specific CSS is removed from installer.scss, and inclusion of
Flatpickr's SCSS is added.

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

- Start the installation process.
- Continue through the installation process until you reach the stage in
  onboarding where you are creating a patron category.
- The "Enrollment period -> Until" field should be a Flatpickr calendar
  widget. The widget should look and work correctly.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 10 Katrin Fischer 2021-10-31 13:54:55 UTC
Created attachment 127139 [details] [review]
Bug 28982: (follow-up) Ensure that date format is correctly checked

This patch modifies the global calendar include so that it doesn't use
the potentially-undefined template variable "dateformat."

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 11 Jonathan Druart 2021-11-03 14:31:45 UTC
Pushed to master for 21.11, thanks to everybody involved!