From 0c5880c47b0bd5c92e092d95f3402bd670cf1e28 Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Wed, 6 Mar 2024 16:24:25 +0000 Subject: [PATCH] Bug 36373: Show existing bookings in the datepicker This patch exposes existing bookings as info dots in the flatpickr --- .../prog/css/src/_flatpickr.scss | 18 ++++++ .../prog/js/modals/place_booking.js | 56 +++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss index 165936c3969..5596befb485 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss @@ -575,6 +575,24 @@ } } +span.event-dots { + display: block; + position: absolute; + bottom: 5px; + left: 5px; +} + +span.event { + position: inline-block; + width: 3px; + height: 3px; + border-radius: 150px; + bottom: 3px; + left: calc(50% - 1.5px); + content: " "; + display: block; + background: #3d8eb9; +} span.flatpickr-weekday { diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js index 363dedf5926..83c75ed3462 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -464,6 +464,62 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { }); } + // Create a bookings store keyed on date + let bookingsByDate = {}; + // Iterate through the bookings array + bookings.forEach(booking => { + const start_date = flatpickr.parseDate(booking.start_date); + const end_date = flatpickr.parseDate(booking.end_date); + const item_id = booking.item_id; + + // Iterate through each date within the range of start_date and end_date + let currentDate = new Date(start_date); + while (currentDate <= end_date) { + const currentDateStr = currentDate + .toISOString() + .split("T")[0]; + + // If the date key doesn't exist in the hash, create an empty array for it + if (!bookingsByDate[currentDateStr]) { + bookingsByDate[currentDateStr] = []; + } + + // Push the booking ID to the array corresponding to the date key + bookingsByDate[currentDateStr].push(item_id); + + // Move to the next day + currentDate.setDate(currentDate.getDate() + 1); + } + }); + + // Set onDayCreate for flatpickr + let dayCreateExists = periodPicker.config.onDayCreate.filter( + f => f.name === "dayCreate" + ); + if (dayCreateExists.length === 0) { + periodPicker.config.onDayCreate.push(function dayCreate( + dObj, + dStr, + instance, + dayElem + ) { + const currentDate = dayElem.dateObj + .toISOString() + .split("T")[0]; + + if (bookingsByDate[currentDate]) { + const dots = document.createElement("span"); + dots.className = "event-dots"; + dayElem.appendChild(dots); + bookingsByDate[currentDate].forEach(item => { + const dot = document.createElement("span"); + dot.className = "event item_" + item; + dots.appendChild(dot); + }); + } + }); + } + // Enable flatpickr now we have date function populated periodPicker.redraw(); $("#period_fields :input").prop("disabled", false); -- 2.44.0