Bug 31261: Disable dates in the past for curbside pickups

When creating a new pickup the dates in the past won't display any
available slots. It would be better to disable them in the date picker.

Test plan:
Setup curbside pickups for your library (see bug 30650 test plan if
needed)
Create a new pickup (staff and OPAC) and confirm that the date picker widget
has the dates in the past disabled.

QA note: More work would be needed to sync calendar.inc code between
OPAC and staff. Also note that the "clear date" code wasn't needed
(please confirm).

Sponsored-by: Association KohaLa - https://koha-fr.org/
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
index c1d50a2..07e0d7b 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
@@ -476,7 +476,7 @@
 
                                             <li>
                                                 <label for="pickup_date">Pickup date: </label>
-                                                <input id="pickup_date" name="pickup_date" required="required" class="flatpickr" />
+                                                <input id="pickup_date" name="pickup_date" required="required" class="flatpickr" data-flatpickr-futuredate="true" />
                                             </li>
 
                                             <li id="pickup-times" class="radio"></li>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc
index ae578d2..7059ef9 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc
@@ -136,13 +136,61 @@
     }
 
         $(document).ready(function(){
-            $(".flatpickr").flatpickr();
+            $(".flatpickr").each(function(){
+                let options = {};
+                let refresh_max_date = 0;
+                let disable_buttons = [];
 
-            $(".clear-flatpickr").on("click", function(e){
-                e.preventDefault();
-                var element = $(this).data("fp");
-                if( element ){
-                    document.querySelector("#" + element )._flatpickr.clear();
+                if( $(this).data("flatpickr-futuredate") === true ) {
+                    let original_date = $(this).val();
+                    if ( original_date ) {
+                        original_date = Date_from_syspref( original_date ).getTime();
+                        let tomorrow = new Date().fp_incr(1).getTime();
+
+                        options['enable'] = [function(date){
+                            date = date.getTime();
+                            if ( date == original_date ) return true;
+                            if ( date >= tomorrow)       return true;
+                        }];
+                    }
+                    else {
+                        options['minDate'] = new Date().fp_incr(1);
+                    }
+                    disable_buttons.push(0); /* Yesterday */
+                    disable_buttons.push(1); /* Today */
+                }
+                if( $(this).data("flatpickr-pastinclusive") === true ) {
+                    options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
+                    refresh_max_date = 1;
+                    disable_buttons.push(2); /* Tomorrow */
+                }
+                if( $(this).data("flatpickr-pastdate") === true ) {
+                    options['maxDate'] = new Date().fp_incr(-1).setHours(23, 59, 00, 00);
+                    disable_buttons.push(1); /* Today */
+                    disable_buttons.push(2); /* Tomorrow */
+                }
+                if ( $(this).data('flatpickr-enable-time') === true ) {
+                    options['enableTime'] = true;
+                    options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
+                }
+
+                let fp = $(this).flatpickr(options);
+
+                $(disable_buttons).each(function(index, value){
+                    $(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
+                });
+
+                if ( refresh_max_date ) {
+                    /* Refresh the maxDate every 30 secondes to make sure the user will not
+                       be stuck with the minute passed.
+                       Adding 1 minute to not introduce a gap.
+                       Example: last update at 40s, a new minute passed at 00.
+                       Between 00 and 10s the user won't be able click 'Today'.
+                    */
+                    setInterval(() => {
+                        let now = new Date();
+                        fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
+                    }, 30000);
                 }
             });
         });

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-curbside-pickups.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-curbside-pickups.tt
index c3b729f..fc89708 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-curbside-pickups.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-curbside-pickups.tt
@@ -243,7 +243,7 @@
                                                 </li>
                                                 <li id="pickup_date_item">
                                                     <label for="pickup-date">Pickup date:</label>
-                                                    <input name="pickup_date" type="text" class="flatpickr" id="pickup-date" required="required"/>
+                                                    <input name="pickup_date" type="text" class="flatpickr" id="pickup-date" required="required" data-flatpickr-futuredate="true" />
                                                     <div class="required_label required">Required</div>
                                                 </li>