From 675224ebc984450d66c7601e12516696dc07637f Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 13 Oct 2021 19:05:10 +0000
Subject: [PATCH] Bug 29229: Use Flatpickr in suggestion search sidebar filter

This patch corrects the date field configurations for the suggestions
sidebar filter. These fields are now linked Flatpickr widgets instead of
jQueryUI datepickers.

To test, apply the patch and go to Suggestions.

- In the sidebar, click "Suggestion information" to expand the form.
- Test these linked date fields:
  - "Suggested date from" and "to"
  - "Managed date from" and "to"
  - "Accepted by from" and "to"
- Each should trigger Flatpickr calendars which are linked, i.e. you
  can't select a "to" date which is before a "from" date.
- Test that the dates submit correctly to filter as expected.

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

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/en/modules/suggestion/suggestion.tt  | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
index ad00aff2ae..4981a4ac53 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
@@ -1352,46 +1352,45 @@
                     $(this).parent().parent().find("ol").toggle();
                     return false;
                 });
-                // http://jqueryui.com/demos/datepicker/#date-range
-                var dates = $( "#suggesteddate_from, #suggesteddate_to" ).datepicker({
-                    changeMonth: true,
-                    numberOfMonths: 1,
-                    onSelect: function( selectedDate ) {
-                        var option = this.id == "suggesteddate_from" ? "minDate" : "maxDate",
-                            instance = $( this ).data( "datepicker" );
-                            date = $.datepicker.parseDate(
-                                instance.settings.dateFormat ||
-                                $.datepicker._defaults.dateFormat,
-                                selectedDate, instance.settings );
-                        dates.not( this ).datepicker( "option", option, date );
+
+                /* Suggested date fields */
+                var suggesteddate_from = $("#suggesteddate_from").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                        suggesteddate_to.set('minDate', selectedDates[0]);
                     }
                 });
-                var datesMD = $( "#manageddate_from, #manageddate_to" ).datepicker({
-                    changeMonth: true,
-                    numberOfMonths: 1,
-                    onSelect: function( selectedDate ) {
-                        var option = this.id == "manageddate_from" ? "minDate" : "maxDate",
-                            instance = $( this ).data( "datepicker" );
-                            date = $.datepicker.parseDate(
-                                instance.settings.dateFormat ||
-                                $.datepicker._defaults.dateFormat,
-                                selectedDate, instance.settings );
-                        datesMD.not( this ).datepicker( "option", option, date );
+                var suggesteddate_to = $("#suggesteddate_to").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                    },
+                });
+
+                /* Managed date fields */
+                var manageddate_from = $("#manageddate_from").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                        manageddate_to.set('minDate', selectedDates[0]);
                     }
                 });
-                var datesAD = $( "#accepteddate_from, #accepteddate_to" ).datepicker({
-                    changeMonth: true,
-                    numberOfMonths: 1,
-                    onSelect: function( selectedDate ) {
-                        var option = this.id == "accepteddate_from" ? "minDate" : "maxDate",
-                            instance = $( this ).data( "datepicker" );
-                            date = $.datepicker.parseDate(
-                                instance.settings.dateFormat ||
-                                $.datepicker._defaults.dateFormat,
-                                selectedDate, instance.settings );
-                        datesAD.not( this ).datepicker( "option", option, date );
+                var manageddate_to = $("#manageddate_to").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                    },
+                });
+
+                /* Accepted date fields */
+                var accepteddate_from = $("#accepteddate_from").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                        accepteddate_to.set('minDate', selectedDates[0]);
                     }
                 });
+                var accepteddate_to = $("#accepteddate_to").flatpickr({
+                    onClose: function( selectedDates, dateText, instance) {
+                        validate_date( selectedDates, instance );
+                    },
+                });
 
                 $("button[type='submit']").on("click", function(e) {
                     var submit_button = this;
-- 
2.39.5