From e018f86de325acbd8ebc89a8e2b956a0261895ce Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Tue, 3 Oct 2023 08:07:10 +0100
Subject: [PATCH] Bug 29002: Fix async bookings load issues

This patch updates the modal booking form to only fire the ajax request
upon first modal opening and then moves the data related setup into a
function that can be trigger either upon promise resolution or
immediately if the data already exists at the time the modal is opened.

We also update some instances of datetime processing to use dayjs
endOf('day') function as it appears to work more reliably with timezone
maths that our prior work that used direct mathematical manipulations.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Janet McGowan <janet.mcgowan@ptfs-europe.com>
Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Signed-off-by: Laurence Rault <laurence.rault@biblibre.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/en/modules/bookings/list.tt          |   9 +-
 .../prog/js/place_booking_modal.js            | 559 ++++++++++--------
 2 files changed, 300 insertions(+), 268 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
index c523dfd632..4ae9e71da5 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
@@ -152,13 +152,10 @@
 
                     // action events
                     onMove: function (data, callback) {
-                        let startDate = new Date(data.start);
+                        let startDate = dayjs(data.start);
                         
                         // set end datetime hours and minutes to the end of the day
-                        let endDate = new Date(data.end);
-                        endDate.setHours(endDate.getHours()+23);
-                        endDate.setMinutes(endDate.getMinutes()+59);
-                        endDate.setTime(endDate.getTime()-86400000);
+                        let endDate = dayjs(data.end).endOf('day');
 
                         $('#placeBookingModal').modal('show', $('<button data-booking="'+data.id+'"  data-biblionumber="[% biblionumber | uri %]"  data-itemnumber="'+data.group+'" data-patron="'+data.patron+'" data-start_date="'+startDate.toISOString()+'" data-end_date="'+endDate.toISOString()+'">'));
                         $('#placeBookingModal').on('hide.bs.modal', function(e) {
@@ -207,7 +204,7 @@
                 "defaultContent": "Any item",
                 "render": function(data,type,row,meta) {
                     if ( row.item ) {
-                        return row.item.external_id;
+                        return row.item.external_id + " (" + row.booking_id + ")";
                     } else {
                         return null;
                     }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js b/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js
index d86fffc529..2f3803e3de 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js
@@ -1,11 +1,20 @@
+let dataFetched = false;
+let items, bookings, booking_id, itemnumber;
+
 $('#placeBookingModal').on('show.bs.modal', function(e) {
-    var button = $(e.relatedTarget);
-    var biblionumber = button.data('biblionumber');
-    var itemnumber = button.data('itemnumber');
+
+    // Get context
+    let button = $(e.relatedTarget);
+    let biblionumber = button.data('biblionumber');
     $('#booking_biblio_id').val(biblionumber);
 
+    let patron_id = button.data('patron') || 0;
+    itemnumber = button.data('itemnumber');
+    let start_date = button.data('start_date');
+    let end_date = button.data('end_date');
+
     // Get booking id if this is an edit
-    var booking_id = button.data('booking');
+    booking_id = button.data('booking');
     if (booking_id) {
         $('#placeBookingLabel').html('Edit booking');
         $('#booking_id').val(booking_id);
@@ -15,6 +24,251 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
         $('#booking_id').val('');
     }
 
+    // Adopt periodPicker
+    let periodPicker = $("#period").get(0)._flatpickr;
+
+    if ( !dataFetched ) {
+
+        // Fetch list of bookable items
+        let itemsFetch = $.ajax({
+            url: '/api/v1/biblios/' + biblionumber + '/items?bookable=1' + '&_per_page=-1',
+            dataType: 'json',
+            type: 'GET'
+        });
+    
+        // Fetch list of existing bookings
+        let bookingsFetch = $.ajax({
+            url: '/api/v1/bookings?biblio_id=' + biblionumber,
+            dataType: 'json',
+            type: 'GET'
+        });
+    
+        // Update item select2 and period flatpickr
+        $.when(itemsFetch, bookingsFetch).then(
+            function(itemsFetch,bookingsFetch){
+
+                // Set variables
+                items = itemsFetch[0];
+                bookings = bookingsFetch[0];
+    
+                // Item select2
+                $("#booking_item_id").select2({
+                    dropdownParent: $(".modal-content", "#placeBookingModal"),
+                    width: '50%',
+                    dropdownAutoWidth: true,
+                    minimumResultsForSearch: 20,
+                    placeholder: "Select item"
+                });
+    
+                // Update flatpickr mode
+                periodPicker.set('mode', 'range');
+    
+                // Total bookable items
+                let bookable = 0;
+    
+                for (item of items) {
+                    bookable++;
+                    // Populate item select (NOTE: Do we still need this check for pre-existing select option here?)
+                    if (!($('#booking_item_id').find("option[value='" + item.item_id + "']").length)) {
+                        // Create a DOM Option and de-select by default
+                        let newOption = new Option(escape_str(item.external_id), item.item_id, false, false);
+                        // Append it to the select
+                        $('#booking_item_id').append(newOption);
+                    }
+                }
+    
+                // Set disable function for periodPicker
+                let disableExists = periodPicker.config.disable.filter(f => f.name === 'dateDisable');
+                if ( disableExists.length === 0 ) {
+                    periodPicker.config.disable.push(function dateDisable(date){
+        
+                        // set local copy of selectedDates
+                        let selectedDates = periodPicker.selectedDates;
+        
+                        // set booked counter
+                        let booked = 0;
+        
+                        // reset the unavailable items array
+                        let unavailable_items = [];
+        
+                        // reset the biblio level bookings array
+                        let biblio_bookings = [];
+        
+                        // disable dates before selected date
+                        if (!selectedDates[1] && (selectedDates[0] && selectedDates[0] > date)) {
+                            return true;
+                        }
+        
+                        // iterate existing bookings
+                        for (booking of bookings) {
+
+                            // Skip if we're editing this booking
+                            if (booking_id && booking_id == booking.booking_id){
+                                continue;
+                            }
+
+                            let start_date = flatpickr.parseDate(booking.start_date);
+                            let end_date = flatpickr.parseDate(booking.end_date);
+        
+                            // patron has selected a start date (end date checks)
+                            if (selectedDates[0]) {
+        
+                                // new booking start date is between existing booking start and end dates
+                                if (selectedDates[0] >= start_date && selectedDates[0] <= end_date) {
+                                    if (booking.item_id) {
+                                        if (unavailable_items.indexOf(booking.item_id) === -1) {
+                                            unavailable_items.push(booking.item_id);
+                                        }
+                                    } else {
+                                        if (biblio_bookings.indexOf(booking.booking_id) === -1) {
+                                            biblio_bookings.push(booking.booking_id);
+                                        }
+                                    }
+                                }
+        
+                                // new booking end date would be between existing booking start and end dates
+                                else if (date >= start_date && date <= end_date) {
+                                    if (booking.item_id) {
+                                        if (unavailable_items.indexOf(booking.item_id) === -1) {
+                                            unavailable_items.push(booking.item_id);
+                                        }
+                                    } else {
+                                        if (biblio_bookings.indexOf(booking.booking_id) === -1) {
+                                            biblio_bookings.push(booking.booking_id);
+                                        }
+                                    }
+                                }
+        
+                                // new booking would span existing booking
+                                else if (selectedDates[0] <= start_date && date >= end_date) {
+                                    if (booking.item_id) {
+                                        if (unavailable_items.indexOf(booking.item_id) === -1) {
+                                            unavailable_items.push(booking.item_id);
+                                        }
+                                    } else {
+                                        if (biblio_bookings.indexOf(booking.booking_id) === -1) {
+                                            biblio_bookings.push(booking.booking_id);
+                                        }
+                                    }
+                                }
+        
+                                // new booking would not conflict
+                                else {
+                                    continue;
+                                }
+        
+                                // check that there are available items
+                                // available = all bookable items - booked items - booked biblios
+                                let total_available = items.length - unavailable_items.length - biblio_bookings.length;
+                                if (total_available === 0) {
+                                    return true;
+                                }
+                            }
+        
+                            // patron has not yet selected a start date (start date checks)
+                            else if (date <= end_date && date >= start_date) {
+        
+                                // same item, disable date
+                                if (booking.item_id && booking.item_id == itemnumber) {
+                                    return true;
+                                }
+        
+                                // count all clashes, both item and biblio level
+                                booked++;
+                                if (booked == bookable) {
+                                    return true;
+                                }
+        
+                                // FIXME: The above is not intelligent enough to spot
+                                // cases where an item must be used for a biblio level booking
+                                // due to all other items being booking within the biblio level
+                                // booking period... we end up with a clash
+                                // To reproduce: 
+                                // * One bib with two bookable items.
+                                // * Add item level booking
+                                // * Add biblio level booking that extends one day beyond the item level booking
+                                // * Try to book the item without an item level booking from the day before the biblio level
+                                //   booking is to be returned. Note this is a clash, the only item available for the biblio
+                                //   level booking is the item you just booked out overlapping the end date.
+                            }
+                        }
+                    });
+                };
+                
+                // Setup listener for item select2
+                $('#booking_item_id').on('select2:select', function(e) {
+                    itemnumber = e.params.data.id ? e.params.data.id : null;
+    
+                    // redraw pariodPicker taking selected item into account
+                    periodPicker.redraw();
+                });
+    
+                // Set onChange for flatpickr
+                let changeExists = periodPicker.config.onChange.filter(f => f.name ==='periodChange');
+                if(changeExists.length === 0) {
+                    periodPicker.config.onChange.push(function periodChange(selectedDates, dateStr, instance) {
+                        if ( selectedDates[0] && selectedDates[1] ) {
+                            // set form fields from picker
+                            let picker_start = dayjs(selectedDates[0]);
+                            let picker_end = dayjs(selectedDates[1]).endOf('day');
+                            $('#booking_start_date').val(picker_start.toISOString());
+                            $('#booking_end_date').val(picker_end.toISOString());
+        
+                            // set available items in select2
+                            let booked_items = bookings.filter(function(booking) {
+                                let start_date = flatpickr.parseDate(booking.start_date);
+                                let end_date = flatpickr.parseDate(booking.end_date);
+                                // This booking ends before the start of the new booking
+                                if ( end_date <= selectedDates[0] ) {
+                                    return false;
+                                }
+                                // This booking starts after then end of the new booking
+                                if ( start_date >= selectedDates[1] ) {
+                                    return false;
+                                }
+                                // This booking overlaps
+                                return true;
+                            });
+                            $("#booking_item_id > option").each(function() {
+                                let option = $(this);
+                                if ( itemnumber && itemnumber == option.val() ) {
+                                    option.prop('disabled',false);
+                                } else if ( booked_items.some(function(booked_item){
+                                    return option.val() == booked_item.item_id;
+                                }) ) {
+                                    option.prop('disabled',true);
+                                } else {
+                                    option.prop('disabled',false);
+                                }
+                            });
+                        }
+                    });
+                };
+    
+                // Enable flatpickr now we have date function populated
+                periodPicker.redraw();
+                $("#period_fields :input").prop('disabled', false);
+    
+                // Redraw select with new options and enable
+                $('#booking_item_id').trigger('change');
+                $("#booking_item_id").prop("disabled", false);
+
+                // Set the flag to indicate that data has been fetched
+                dataFetched = true;
+        
+                // Set form values
+                setFormValues(patron_id,itemnumber,start_date,end_date,periodPicker);
+            },
+            function(jqXHR, textStatus, errorThrown){
+                console.log("Fetch failed");
+            }
+        );
+    } else {
+        setFormValues(patron_id,itemnumber,start_date,end_date,periodPicker);
+    };
+
+    // Setup forms
+
     // Patron select2
     $("#booking_patron_id").kohaSelect({
         dropdownParent: $(".modal-content", "#placeBookingModal"),
@@ -30,8 +284,8 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
                 "x-koha-embed": "library"
             },
             data: function(params) {
-                var search_term = (params.term === undefined) ? '' : params.term;
-                var query = {
+                let search_term = (params.term === undefined) ? '' : params.term;
+                let query = {
                     'q': JSON.stringify({
                         "-or": [{
                                 "firstname": {
@@ -56,7 +310,7 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
                 return query;
             },
             processResults: function(data, params) {
-                var results = [];
+                let results = [];
                 data.results.forEach(function(patron) {
                     patron.id = patron.patron_id;
                     results.push(patron);
@@ -73,7 +327,7 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
                 loggedInClass = "";
             }
 
-            var $patron = $("<span></span>")
+            let $patron = $("<span></span>")
                 .append(
                     "" +
                         (patron.surname
@@ -107,18 +361,21 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
         placeholder: "Search for a patron"
     });
 
+});
+
+function setFormValues(patron_id,itemnumber,start_date,end_date,periodPicker){
+
     // If passed patron, pre-select
-    var patron_id = button.data('patron') || 0;
     if (patron_id) {
-        var patron = $.ajax({
+        let patron = $.ajax({
             url: '/api/v1/patrons/' + patron_id,
             dataType: 'json',
             type: 'GET'
         });
 
-        $.when(patron).then(
+        $.when(patron).done(
             function(patron){
-                var newOption = new Option(escape_str(patron.surname) + ", " + escape_str(patron.firstname), patron.patron_id, true, true);
+                let newOption = new Option(escape_str(patron.surname) + ", " + escape_str(patron.firstname), patron.patron_id, true, true);
                 $('#booking_patron_id').append(newOption).trigger('change');
 
                 // clone patron_id to id (select2 expects an id field)
@@ -135,261 +392,39 @@ $('#placeBookingModal').on('show.bs.modal', function(e) {
         );
     }
 
-    // Item select2
-    $("#booking_item_id").select2({
-        dropdownParent: $(".modal-content", "#placeBookingModal"),
-        width: '50%',
-        dropdownAutoWidth: true,
-        minimumResultsForSearch: 20,
-        placeholder: "Select item"
-    });
-
-    // Adopt flatpickr and update mode
-    var periodPicker = $("#period").get(0)._flatpickr;
-    periodPicker.set('mode', 'range');
-
-    // Fetch list of bookable items
-    var items = $.ajax({
-        url: '/api/v1/biblios/' + biblionumber + '/items?bookable=1' + '&_per_page=-1',
-        dataType: 'json',
-        type: 'GET'
-    });
-
-    // Fetch list of existing bookings
-    var bookings = $.ajax({
-        url: '/api/v1/bookings?biblio_id=' + biblionumber,
-        dataType: 'json',
-        type: 'GET'
-    });
-
-    // Update item select2 and period flatpickr
-    $.when(items, bookings).then(
-        function(items,bookings){
-
-            // Total bookable items
-            var bookable = 0;
-
-            for (item of items[0]) {
-                bookable++;
-                // Populate item select
-                if (!($('#booking_item_id').find("option[value='" + item.item_id + "']").length)) {
-                    // Create a DOM Option and de-select by default
-                    var newOption = new Option(escape_str(item.external_id), item.item_id, false, false);
-                    // Append it to the select
-                    $('#booking_item_id').append(newOption);
-                }
-            }
-
-            // If passed an itemnumber, pre-select
-            if (itemnumber) {
-                $('#booking_item_id').val(itemnumber);
-            }
-
-            // Redraw select with new options and enable
-            $('#booking_item_id').trigger('change');
-            $("#booking_item_id").prop("disabled", false);
-
-            // Set disabled dates in datepicker
-            periodPicker.config.disable.push( function(date) {
-
-                // set local copy of selectedDates
-                let selectedDates = periodPicker.selectedDates;
-
-                // set booked counter
-                let booked = 0;
-
-                // reset the unavailable items array
-                let unavailable_items = [];
-
-                // reset the biblio level bookings array
-                let biblio_bookings = [];
-
-                // disable dates before selected date
-                if (selectedDates[0] && selectedDates[0] > date) {
-                    return true;
-                }
-
-                // iterate existing bookings
-                for (booking of bookings[0]) {
-                    var start_date = flatpickr.parseDate(booking.start_date);
-                    var end_date = flatpickr.parseDate(booking.end_date);
-
-                    // patron has selected a start date (end date checks)
-                    if (selectedDates[0]) {
-
-                        // new booking start date is between existing booking start and end dates
-                        if (selectedDates[0] >= start_date && selectedDates[0] <= end_date) {
-                            if (booking.item_id) {
-                                if (unavailable_items.indexOf(booking.item_id) === -1) {
-                                    unavailable_items.push(booking.item_id);
-                                }
-                            } else {
-                                if (biblio_bookings.indexOf(booking.booking_id) === -1) {
-                                    biblio_bookings.push(booking.booking_id);
-                                }
-                            }
-                        }
-
-                        // new booking end date would be between existing booking start and end dates
-                        else if (date >= start_date && date <= end_date) {
-                            if (booking.item_id) {
-                                if (unavailable_items.indexOf(booking.item_id) === -1) {
-                                    unavailable_items.push(booking.item_id);
-                                }
-                            } else {
-                                if (biblio_bookings.indexOf(booking.booking_id) === -1) {
-                                    biblio_bookings.push(booking.booking_id);
-                                }
-                            }
-                        }
-
-                        // new booking would span existing booking
-                        else if (selectedDates[0] <= start_date && date >= end_date) {
-                            if (booking.item_id) {
-                                if (unavailable_items.indexOf(booking.item_id) === -1) {
-                                    unavailable_items.push(booking.item_id);
-                                }
-                            } else {
-                                if (biblio_bookings.indexOf(booking.booking_id) === -1) {
-                                    biblio_bookings.push(booking.booking_id);
-                                }
-                            }
-                        }
-
-                        // new booking would not conflict
-                        else {
-                            continue;
-                        }
+    // Set booking start & end if this is an edit
+    if ( start_date ) {
+        // Allow invalid pre-load so setDate can set date range
+        // periodPicker.set('allowInvalidPreload', true);
+        // FIXME: Why is this the case.. we're passing two valid Date objects
+        let start = new Date(start_date);
+        let end = new Date(end_date);
 
-                        // check that there are available items
-                        // available = all bookable items - booked items - booked biblios
-                        let total_available = items[0].length - unavailable_items.length - biblio_bookings.length;
-                        if (total_available === 0) {
-                            return true;
-                        }
-                    }
-
-                    // patron has not yet selected a start date (start date checks)
-                    else if (date <= end_date && date >= start_date) {
-
-                        // same item, disable date
-                        if (booking.item_id && booking.item_id == itemnumber) {
-                            // Ignore if we're updating an existing booking
-                            if (!(booking_id && booking_id == booking.booking_id)){ 
-                                return true;
-                            }
-                        }
-
-                        // count all clashes, both item and biblio level
-                        booked++;
-                        if (booked == bookable) {
-                            return true;
-                        }
-
-                        // FIXME: The above is not intelligent enough to spot
-                        // cases where an item must be used for a biblio level booking
-                        // due to all other items being booking within the biblio level
-                        // booking period... we end up with a clash
-                        // To reproduce: 
-                        // * One bib with two bookable items.
-                        // * Add item level booking
-                        // * Add biblio level booking that extends one day beyond the item level booking
-                        // * Try to book the item without an item level booking from the day before the biblio level
-                        //   booking is to be returned. Note this is a clash, the only item available for the biblio
-                        //   level booking is the item you just booked out overlapping the end date.
-                    }
-                }
-            });
-            
-            // Setup listener for item select2
-            $('#booking_item_id').on('select2:select', function(e) {
-                itemnumber = e.params.data.id ? e.params.data.id : null;
-
-                // redraw pariodPicker taking selected item into account
-                periodPicker.redraw();
-            });
-
-            // Set onChange for flatpickr
-            let exists = periodPicker.config.onChange.filter(f => f.name ==='periodChange');
-            if(exists.length === 0) {
-                periodPicker.config.onChange.push(function periodChange(selectedDates, dateStr, instance) {
-                    if ( selectedDates[0] && selectedDates[1] ) {
-                        // set form fields from picker
-                        let picker_start = new Date(selectedDates[0]);
-                        let picker_end = new Date(selectedDates[1]);
-                        picker_end.setHours(picker_end.getHours()+23);
-                        picker_end.setMinutes(picker_end.getMinutes()+59);
-                        $('#booking_start_date').val(picker_start.toISOString());
-                        $('#booking_end_date').val(picker_end.toISOString());
-    
-                        // set available items in select2
-                        var booked_items = bookings[0].filter(function(booking) {
-                            let start_date = flatpickr.parseDate(booking.start_date);
-                            let end_date = flatpickr.parseDate(booking.end_date);
-                            // This booking ends before the start of the new booking
-                            if ( end_date <= selectedDates[0] ) {
-                                return false;
-                            }
-                            // This booking starts after then end of the new booking
-                            if ( start_date >= selectedDates[1] ) {
-                                return false;
-                            }
-                            // This booking overlaps
-                            return true;
-                        });
-                        $("#booking_item_id > option").each(function() {
-                            let option = $(this);
-                            if ( itemnumber && itemnumber == option.val() ) {
-                                console.log("itemnumber defined and equal to value");
-                            } else if ( booked_items.some(function(booked_item){
-                                return option.val() == booked_item.item_id;
-                            }) ) {
-                                option.prop('disabled',true);
-                            } else {
-                                option.prop('disabled',false);
-                            }
-                        });
-                    }
-                });
-            };
-
-            // Set booking start & end if this is an edit
-            var start_date = button.data('start_date');
-            var end_date = button.data('end_date');
-            if ( start_date ) {
-                // Allow invalid pre-load so setDate can set date range
-                //periodPicker.set('allowInvalidPreload', true);
-                // FIXME: Why is this the case.. we're passing two valid Date objects
-
-                console.log("Calling setDate with");
-                console.log(start_date);
-                console.log(end_date);
-                let dates = [ new Date(start_date), new Date(end_date) ];
-                periodPicker.setDate(dates, true);
-            };
-
-            // Enable flatpickr now we have date function populated
-            periodPicker.redraw();
-            $("#period_fields :input").prop('disabled', false);
-        },
-        function(jqXHR, textStatus, errorThrown){
-            console.log("Fetch failed");
-        }
-    );
-});
+        let dates = [ new Date(start_date), new Date(end_date) ];
+        periodPicker.setDate(dates, true);
+    }
+    // Reset periodPicker, biblio_id may have been nulled
+    else {
+        periodPicker.redraw();
+    };
+
+    // If passed an itemnumber, pre-select
+    if (itemnumber) {
+        $('#booking_item_id').val(itemnumber).trigger('change');
+    }
+}
 
 $("#placeBookingForm").on('submit', function(e) {
     e.preventDefault();
 
-    var url = '/api/v1/bookings';
+    let url = '/api/v1/bookings';
 
-    var booking_id = $('#booking_id').val();
-    var start_date = $('#booking_start_date').val();
-    var end_date = $('#booking_end_date').val();
-    var item_id = $('#booking_item_id').val();
+    let start_date = $('#booking_start_date').val();
+    let end_date = $('#booking_end_date').val();
+    let item_id = $('#booking_item_id').val();
 
     if (!booking_id) {
-        var posting = $.post(
+        let posting = $.post(
             url,
             JSON.stringify({
                 "start_date": start_date,
@@ -436,7 +471,7 @@ $("#placeBookingForm").on('submit', function(e) {
         });
     } else {
         url += '/' + booking_id;
-        var putting = $.ajax({
+        let putting = $.ajax({
             'method': 'PUT',
             'url': url,
             'data': JSON.stringify({
@@ -488,8 +523,8 @@ $("#placeBookingForm").on('submit', function(e) {
 $('#placeBookingModal').on('hidden.bs.modal', function (e) {
     $('#booking_patron_id').val(null).trigger('change');
     $('#booking_item_id').val(0).trigger('change');
-    $("#period").get(0)._flatpickr.clear();
+    $('#period').get(0)._flatpickr.clear();
     $('#booking_start_date').val('');
     $('#booking_end_date').val('');
     $('#booking_id').val('');
-})
+});
-- 
2.39.2